fix pro+ icon family/variants; closes #1951

packages/webawesome/docs/docs/components/icon.md

@@ -396,6 +396,20 @@ If you're a [Font Awesome Pro+ customer](https://fontawesome.com/), you have acc
     </div>
   </div>
 
+  <div class="wa-flank" style="--flank-size: 10ch;">
+    <a href="https://fontawesome.com/icons/packs/utility" target="_blank">Utility</a>
+    <div class="wa-cluster" style="font-size: 1.5em;">
+      <wa-icon family="utility" variant="semibold" name="house"></wa-icon>
+      <wa-icon
+        family="utility-duo"
+        variant="semibold"
+        name="house"
+        style="--secondary-color: skyblue; --secondary-opacity: 0.8;"
+      ></wa-icon>
+      <wa-icon family="utility-fill" variant="semibold" name="house"></wa-icon>
+    </div>
+  </div>
+
   <div class="wa-flank" style="--flank-size: 10ch;">
     <a href="https://fontawesome.com/icons/packs/whiteboard" target="_blank">Whiteboard</a>
     <div class="wa-cluster" style="font-size: 32px;">

packages/webawesome/docs/docs/resources/changelog.md

@@ -24,6 +24,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - [Docs]: component APIs like slots, state, methods, etc, are now alphabetized [pr:1895]
 - [Docs]: component APIs now properly check their inheritance chain [pr:1895]
 - [Docs]: Included framework specific documentation for Svelte, Vue, and Angular. [pr:1895]
+- Fixed a bug in `<wa-icon>` to support Font Awesome Pro+ icon families that include qualifiers (e.g., `family="jelly-duo"` now works correctly instead of requiring `family="jelly" variant="duo-regular"`) and updated Font Awesome to 7.1.0
 - Fixed a bug in `<wa-dropdown>` where submenu detection would not work in shadow dom. [pr:]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
@@ -49,15 +50,14 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
 - Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
 - Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
-- Fixed a bug in `<wa-tab-group>` that ensures the active indicator always shows [issue:1206]
 - Fixed a bug in `<wa-dropdown-item>` that prevented the icon dependency from being imported [issue:1825]
 - Fixed a bug in `<wa-select>` that prevented clicks on the tag's remove button from removing options in multiple mode
 - Fixed a bug in `<wa-select>` that caused tags to appear in alphabetical order instead of selection order when using `multiple`
+- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
+- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
 - Fixed a bug in Web Awesome form controls that caused `<wa-input form="foo">` to set the form property to equal `"foo"` instead of returning an `HTMLFormElement` breaking platform expectations. [pr:1815]
 - Fixed a bug in `<wa-button>` causing it to not copy over attributes for form submissions. [pr:1815]
 - Fixed a bug where the build script was not building `/dist/(utilities|events).js` [pr:1816]
-- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
-- Improved `<wa-slider>` to not throw an error when string values are passed to the `min`, `max`, and `step` properties [issue:1823]
 - Improved performance of all components by fixing how CSS is imported and reused [issue:1812]
 - Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
 
@@ -543,4 +543,4 @@ Many of these changes and improvements were the direct result of feedback from u
 
 </details>
 
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
+Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

packages/webawesome/scripts/docs.js

@@ -52,8 +52,7 @@ export async function createEleventy(options = {}) {
   eleventy.logger.overrideLogger(new CustomLogger());
 
   if (isIncremental) {
-    // For some reason, removing the await here fixes incremental loading?
-    eleventy.watch();
+    await eleventy.watch();
 
     process.on('SIGINT', async () => {
       await eleventy.stopWatch();

packages/webawesome/src/components/icon/library.default.ts

@@ -1,7 +1,7 @@
 import { getKitCode } from '../../utilities/base-path.js';
 import type { IconLibrary } from './library.js';
 
-const FA_VERSION = '7.0.1';
+const FA_VERSION = '7.1.0';
 
 function getIconUrl(name: string, family: string, variant: string) {
   const kitCode = getKitCode();
@@ -9,10 +9,16 @@ function getIconUrl(name: string, family: string, variant: string) {
   let folder = 'solid';
 
   // Notdog (Pro+)
+  // Correct usage: family="notdog" or family="notdog-duo", variant="solid"
   if (family === 'notdog') {
-    if (variant === 'solid') folder = 'solid';
-    if (variant === 'duo-solid') folder = 'duo-solid';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/notdog-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+    // NOTE: variant="duo-solid" is deprecated, use family="notdog-duo" variant="solid" instead
+    if (variant === 'solid') folder = 'notdog-solid';
+    if (variant === 'duo-solid') folder = 'notdog-duo-solid';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'notdog-duo') {
+    folder = 'notdog-duo-solid';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
   // Chisel (Pro+)
@@ -26,18 +32,35 @@ function getIconUrl(name: string, family: string, variant: string) {
   }
 
   // Jelly (Pro+)
+  // Correct usage: family="jelly", family="jelly-duo", or family="jelly-fill", variant="regular"
   if (family === 'jelly') {
-    if (variant === 'regular') folder = 'regular';
-    if (variant === 'duo-regular') folder = 'duo-regular';
-    if (variant === 'fill-regular') folder = 'fill-regular';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/jelly-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+    // NOTE: variant="duo-regular" and variant="fill-regular" are deprecated
+    // Use family="jelly-duo" variant="regular" or family="jelly-fill" variant="regular" instead
+    if (variant === 'regular') folder = 'jelly-regular';
+    if (variant === 'duo-regular') folder = 'jelly-duo-regular';
+    if (variant === 'fill-regular') folder = 'jelly-fill-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'jelly-duo') {
+    folder = 'jelly-duo-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'jelly-fill') {
+    folder = 'jelly-fill-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
   // Slab (Pro+)
+  // Correct usage: family="slab" or family="slab-press", variant="regular"
   if (family === 'slab') {
-    if (variant === 'solid' || variant === 'regular') folder = 'regular';
-    if (variant === 'press-regular') folder = 'press-regular';
-    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/slab-${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+    // NOTE: variant="press-regular" is deprecated, use family="slab-press" variant="regular" instead
+    if (variant === 'solid' || variant === 'regular') folder = 'slab-regular';
+    if (variant === 'press-regular') folder = 'slab-press-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'slab-press') {
+    folder = 'slab-press-regular';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
   // Thumbprint (Pro+)
@@ -50,6 +73,21 @@ function getIconUrl(name: string, family: string, variant: string) {
     return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/whiteboard-semibold/${name}.svg?token=${encodeURIComponent(kitCode)}`;
   }
 
+  // Utility (Pro+)
+  // Correct usage: family="utility", family="utility-duo", or family="utility-fill", variant="semibold"
+  if (family === 'utility') {
+    folder = 'utility-semibold';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'utility-duo') {
+    folder = 'utility-duo-semibold';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+  if (family === 'utility-fill') {
+    folder = 'utility-fill-semibold';
+    return `https://ka-p.fontawesome.com/releases/v${FA_VERSION}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`;
+  }
+
   // Classic
   if (family === 'classic') {
     if (variant === 'thin') folder = 'thin';
@@ -108,10 +146,16 @@ const library: IconLibrary = {
         family === 'duotone' ||
         // Sharp duotone
         family === 'sharp-duotone' ||
-        // Notdog duo-solid
+        // Notdog duo (correct usage: family="notdog-duo")
+        family === 'notdog-duo' ||
+        // NOTE: family="notdog" variant="duo-solid" is deprecated
         (family === 'notdog' && variant === 'duo-solid') ||
-        // Jelly duo-regular
+        // Jelly duo (correct usage: family="jelly-duo")
+        family === 'jelly-duo' ||
+        // NOTE: family="jelly" variant="duo-regular" is deprecated
         (family === 'jelly' && variant === 'duo-regular') ||
+        // Utility duo (correct usage: family="utility-duo")
+        family === 'utility-duo' ||
         // Thumbprint
         family === 'thumbprint'
       ) {

packages/webawesome/src/components/tab-group/tab-group.styles.ts

@@ -6,9 +6,6 @@ export default css`
     --track-color: var(--wa-color-neutral-fill-normal);
     --track-width: 0.125rem;
 
-    /* Private */
-    --safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
-
     display: block;
   }
 
@@ -54,8 +51,8 @@ export default css`
   }
 
   /*
-    * Top
-    */
+   * Top
+   */
 
   .tab-group-top {
     flex-direction: column;
@@ -83,12 +80,12 @@ export default css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-bottom: solid var(--safe-track-width) var(--track-color);
+    border-bottom: solid var(--track-width) var(--track-color);
   }
 
   .tab-group-top .indicator {
-    bottom: calc(-1 * var(--safe-track-width));
-    border-bottom: solid var(--safe-track-width) var(--indicator-color);
+    bottom: calc(-1 * var(--track-width));
+    border-bottom: solid var(--track-width) var(--indicator-color);
   }
 
   .tab-group-top .body {
@@ -96,8 +93,8 @@ export default css`
   }
 
   .tab-group-top ::slotted(wa-tab[active]) {
-    border-block-end: solid var(--safe-track-width) var(--indicator-color);
-    margin-block-end: calc(-1 * var(--safe-track-width));
+    border-block-end: solid var(--track-width) var(--indicator-color);
+    margin-block-end: calc(-1 * var(--track-width));
   }
 
   .tab-group-top ::slotted(wa-tab-panel) {
@@ -105,8 +102,8 @@ export default css`
   }
 
   /*
-    * Bottom
-    */
+   * Bottom
+   */
 
   .tab-group-bottom {
     flex-direction: column;
@@ -134,12 +131,12 @@ export default css`
     flex: 1 1 auto;
     position: relative;
     flex-direction: row;
-    border-top: solid var(--safe-track-width) var(--track-color);
+    border-top: solid var(--track-width) var(--track-color);
   }
 
   .tab-group-bottom .indicator {
-    top: calc(-1 * var(--safe-track-width));
-    border-top: solid var(--safe-track-width) var(--indicator-color);
+    top: calc(-1 * var(--track-width));
+    border-top: solid var(--track-width) var(--indicator-color);
   }
 
   .tab-group-bottom .body {
@@ -147,8 +144,8 @@ export default css`
   }
 
   .tab-group-bottom ::slotted(wa-tab[active]) {
-    border-block-start: solid var(--safe-track-width) var(--indicator-color);
-    margin-block-start: calc(-1 * var(--safe-track-width));
+    border-block-start: solid var(--track-width) var(--indicator-color);
+    margin-block-start: calc(-1 * var(--track-width));
   }
 
   .tab-group-bottom ::slotted(wa-tab-panel) {
@@ -156,8 +153,8 @@ export default css`
   }
 
   /*
-    * Start
-    */
+   * Start
+   */
 
   .tab-group-start {
     flex-direction: row;
@@ -170,12 +167,12 @@ export default css`
   .tab-group-start .tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-inline-end: solid var(--safe-track-width) var(--track-color);
+    border-inline-end: solid var(--track-width) var(--track-color);
   }
 
   .tab-group-start .indicator {
-    inset-inline-end: calc(-1 * var(--safe-track-width));
-    border-right: solid var(--safe-track-width) var(--indicator-color);
+    inset-inline-end: calc(-1 * var(--track-width));
+    border-right: solid var(--track-width) var(--indicator-color);
   }
 
   .tab-group-start .body {
@@ -184,8 +181,8 @@ export default css`
   }
 
   .tab-group-start ::slotted(wa-tab[active]) {
-    border-inline-end: solid var(--safe-track-width) var(--indicator-color);
-    margin-inline-end: calc(-1 * var(--safe-track-width));
+    border-inline-end: solid var(--track-width) var(--indicator-color);
+    margin-inline-end: calc(-1 * var(--track-width));
   }
 
   .tab-group-start ::slotted(wa-tab-panel) {
@@ -193,8 +190,8 @@ export default css`
   }
 
   /*
-    * End
-    */
+   * End
+   */
 
   .tab-group-end {
     flex-direction: row;
@@ -207,12 +204,12 @@ export default css`
   .tab-group-end .tabs {
     flex: 0 0 auto;
     flex-direction: column;
-    border-left: solid var(--safe-track-width) var(--track-color);
+    border-left: solid var(--track-width) var(--track-color);
   }
 
   .tab-group-end .indicator {
-    inset-inline-start: calc(-1 * var(--safe-track-width));
-    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
+    inset-inline-start: calc(-1 * var(--track-width));
+    border-inline-start: solid var(--track-width) var(--indicator-color);
   }
 
   .tab-group-end .body {
@@ -221,8 +218,8 @@ export default css`
   }
 
   .tab-group-end ::slotted(wa-tab[active]) {
-    border-inline-start: solid var(--safe-track-width) var(--indicator-color);
-    margin-inline-start: calc(-1 * var(--safe-track-width));
+    border-inline-start: solid var(--track-width) var(--indicator-color);
+    margin-inline-start: calc(-1 * var(--track-width));
   }
 
   .tab-group-end ::slotted(wa-tab-panel) {