@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.6

package/dist/components/action/dropdown-button/dropdown-button.js

@@ -12,6 +12,7 @@ import { SelectEvent } from "../../../events/select.event.js";
 import { clampToViewport, dropdownMenuAnimationDuration, focusEntryAt, handleMenuKeydown, positionFlyout, } from "../../../utils/dropdown-menu.utils.js";
 import { dropdownButtonStyles } from "./dropdown-button.styles.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
+import { resolveEasing } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the dropdown-button component.
  */
@@ -125,8 +126,8 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         /**
          * Whether the menu is currently open. Reflected as an attribute so a
          * consumer (or its own CSS, via `eun-dropdown-button[open]`) can tell —
-         * `eun-table-item`'s row-end action slot relies on it to stay visible
-         * while this menu is open, since the menu itself is a `popover="auto"`
+         * `eun-table`'s row end action cell relies on it to stay visible while
+         * this menu is open, since the menu itself is a `popover="auto"`
          * element positioned outside the row's own box, so hovering it doesn't
          * count as hovering the row anymore.
          * @default false
@@ -168,7 +169,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
             if (toggleEvent.newState === "open") {
                 this.open = true;
                 this.positionMenu();
-                this.updateComplete.then(() => focusEntryAt(this.menuEntries, 0));
+                void this.updateComplete.then(() => focusEntryAt(this.menuEntries, 0));
                 window.addEventListener("resize", this.handleReposition);
                 window.addEventListener("scroll", this.handleReposition, true);
                 return;
@@ -237,7 +238,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         if (this.disabled) {
             return;
         }
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const menu = this.menuEl;
             if (!menu) {
                 return;
@@ -278,7 +279,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
                 transform: `translate(${offsetX}, ${offsetY}) scale(0.96)`,
             },
             { opacity: 1, transform: "translate(0, 0) scale(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(menu), fill: "forwards" });
     }
     /**
      * Closes the menu, if open. All state cleanup happens in
@@ -324,7 +325,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
                 opacity: 0,
                 transform: `translate(${offsetX}, ${offsetY}) scale(0.96)`,
             },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(menu), fill: "forwards" });
         this.menuAnimation = animation;
         animation.finished
             .then(() => {
@@ -673,7 +674,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         this.submenuAnimation = submenu.animate([
             { opacity: 0, transform: `translate(${offsetX}, 0) scale(0.96)` },
             { opacity: 1, transform: "translate(0, 0) scale(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(submenu), fill: "forwards" });
     }
     /**
      * Plays an `options`-sourced submenu's fade/scale/slide-out, then
@@ -693,7 +694,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         const animation = submenu.animate([
             { opacity: 1, transform: "translate(0, 0) scale(1)" },
             { opacity: 0, transform: `translate(${offsetX}, 0) scale(0.96)` },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(submenu), fill: "forwards" });
         this.submenuAnimation = animation;
         animation.finished
             .then(() => {
@@ -756,7 +757,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
             if (li) {
                 this.positionSubmenu(li, submenu);
             }
-            this.updateComplete.then(() => {
+            void this.updateComplete.then(() => {
                 const subEntries = Array.from(submenu.querySelectorAll(":scope > li"));
                 focusEntryAt(subEntries, 0);
             });
@@ -773,7 +774,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
      */
     closeSubmenuAndRefocus(option) {
         this.closeSubmenu();
-        this.updateComplete.then(() => {
+        void this.updateComplete.then(() => {
             const li = this.menuEl?.querySelector(`li[data-key="${CSS.escape(option.key)}"]`);
             li?.focus();
         });

package/dist/components/action/dropdown-button/dropdown-button.styles.js

@@ -83,8 +83,9 @@ const base = css `
     outline: 2px solid transparent;
     outline-offset: -2px;
     transition:
-      background 0.3s ease-out,
-      outline-color 0.3s ease-out;
+      background var(--eun-duration-xl, 300ms) var(--eun-easing-out, ease-out),
+      outline-color var(--eun-duration-xl, 300ms)
+        var(--eun-easing-out, ease-out);
   }
   #menu li:hover:not([aria-disabled="true"]),
   #menu li:focus-visible:not([aria-disabled="true"]),

package/dist/components/action/dropdown-button/dropdown-item.js

@@ -8,6 +8,7 @@ import { customElement, property, query, queryAssignedElements, state, } from "l
 import { html, LitElement, nothing } from "lit";
 import { DROPDOWN_MENU_CONTAINER_SELECTOR, dropdownMenuAnimationDuration, focusEntryAt, handleMenuKeydown, positionFlyout, } from "../../../utils/dropdown-menu.utils.js";
 import { dropdownItemStyles } from "./dropdown-item.styles.js";
+import { resolveEasing } from "../../../utils/motion.utils.js";
 /**
  * Tag name of the dropdown-item component.
  */
@@ -91,14 +92,12 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
                 this.toggleAttribute("data-submenu-open", true);
                 this.container?.notifySubmenuOpened(this.key);
                 this.positionOwnSubmenu();
-                this.updateComplete.then(() => focusEntryAt(this.submenuItems, 0));
+                void this.updateComplete.then(() => focusEntryAt(this.submenuItems, 0));
                 return;
             }
             this.setAttribute("aria-expanded", "false");
             this.toggleAttribute("data-submenu-open", false);
             this.container?.notifySubmenuClosed(this.key);
-            // Cascade the close to this item's own open child, if any — mirrors
-            // `eun-dropdown-button`'s root-menu-close handling of a submenu.
             this.closeOtherSubmenus(null);
         };
         /**
@@ -139,7 +138,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
                 onClose: parentItem
                     ? () => {
                         parentItem.closeSubmenu();
-                        this.updateComplete.then(() => parentItem.focus());
+                        void this.updateComplete.then(() => parentItem.focus());
                     }
                     : undefined,
                 onTabAway: () => this.tabAway(),
@@ -293,7 +292,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
         this.submenuAnimation = submenu.animate([
             { opacity: 0, transform: `translate(${offsetX}, 0) scale(0.96)` },
             { opacity: 1, transform: "translate(0, 0) scale(1)" },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(submenu), fill: "forwards" });
     }
     /**
      * Closes this item's own submenu, if open. Part of the
@@ -332,7 +331,7 @@ let EunomiaDropdownItem = class EunomiaDropdownItem extends LitElement {
         const animation = submenu.animate([
             { opacity: 1, transform: "translate(0, 0) scale(1)" },
             { opacity: 0, transform: `translate(${offsetX}, 0) scale(0.96)` },
-        ], { duration, easing: "ease", fill: "forwards" });
+        ], { duration, easing: resolveEasing(submenu), fill: "forwards" });
         this.submenuAnimation = animation;
         animation.finished
             .then(() => {

package/dist/components/action/dropdown-button/dropdown-item.styles.js

@@ -33,8 +33,9 @@ const base = css `
     outline: 2px solid transparent;
     outline-offset: -2px;
     transition:
-      background 0.3s ease-out,
-      outline-color 0.3s ease-out;
+      background var(--eun-duration-xl, 300ms) var(--eun-easing-out, ease-out),
+      outline-color var(--eun-duration-xl, 300ms)
+        var(--eun-easing-out, ease-out);
   }
   :host(:hover:not([aria-disabled="true"])) .content,
   :host(:focus-visible:not([aria-disabled="true"])) .content,

package/dist/components/action/fab/fab.styles.js

@@ -21,7 +21,7 @@ const base = css `
   :host {
     --_focusIndicator: var(--fab-focus-outline, var(--_solid));
     --_hoverFromCustom: color-mix(in srgb, var(--fab-background) 88%, black);
-    --_transition: var(--fab-transition, 0.3s);
+    --_transition: var(--fab-transition, var(--eun-duration-xl, 300ms));
     --_gap: var(--eun-space-xs, 4px);
     --_circleSize: 56px;
     --icon-size: 24px;
@@ -32,9 +32,9 @@ const base = css `
     z-index: 0;
     border-radius: var(--eun-border-radius-xl);
     transition:
-      background 0.3s ease-out,
-      box-shadow 0.3s ease-out,
-      outline 0.3s ease-out;
+      outline var(--eun-duration-xl, 300ms) var(--eun-easing-out, ease-out),
+      outline-offset var(--eun-duration-xl, 300ms)
+        var(--eun-easing-out, ease-out);
   }
   :host(:focus-visible) {
     outline-offset: 2px;
@@ -96,9 +96,10 @@ const base = css `
     outline: 2px solid transparent;
     box-shadow: var(--eun-shadow-m, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
     transition:
-      background-color 0.15s ease,
-      box-shadow 0.15s ease,
-      outline 0.2s ease-out;
+      background-color var(--eun-duration-s, 150ms)
+        var(--eun-easing-default, ease),
+      box-shadow var(--eun-duration-s, 150ms) var(--eun-easing-default, ease),
+      outline var(--eun-duration-m, 200ms) var(--eun-easing-out, ease-out);
   }
   #fab slot[name="icon"] {
     display: inline-flex;
@@ -157,10 +158,10 @@ const slide = css `
     justify-content: start;
     outline: 2px solid transparent;
     transition:
-      background 0.3s ease-out,
-      box-shadow 0.3s ease-out,
-      outline 0.3s ease-out,
-      grid-template-columns ease var(--_transition);
+      background var(--eun-duration-xl, 300ms) var(--eun-easing-out, ease-out),
+      box-shadow var(--eun-duration-xl, 300ms) var(--eun-easing-out, ease-out),
+      outline var(--eun-duration-xl, 300ms) var(--eun-easing-out, ease-out),
+      grid-template-columns var(--eun-easing-default, ease) var(--_transition);
   }
   :host([slide]:not([loading])) #fab slot[name="icon"] {
     grid-column: 1;
@@ -174,8 +175,8 @@ const slide = css `
     margin-inline-start: 0;
     opacity: 0;
     transition:
-      margin-inline-start ease var(--_transition),
-      opacity ease var(--_transition);
+      margin-inline-start var(--eun-easing-default, ease) var(--_transition),
+      opacity var(--eun-easing-default, ease) var(--_transition);
   }
   :host([slide]:not([loading]):hover) #fab,
   :host([slide]:not([loading]):focus-visible) #fab,

package/dist/components/action/link/link.d.ts

@@ -20,15 +20,15 @@ declare const EunomiaLink_base: import("../../../utils/constructor.type.js").Con
  * it the same way, through the anchor's aria-description.
  *
  * @slot [default] - The link content, or a native anchor carrying the href itself when href is unset
- * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
+ * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only
  * @prop {string} href - The destination URL
  * @prop {'_blank' | '_self' | '_parent' | '_top'} [target='_self'] - Where to open the linked URL. Opening in a new tab automatically adds an external link icon at the end and announces it to assistive technology, in the current locale
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional decorative icon displayed to the left of the link
- * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background
+ * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background, such as --eun-surface-inverse, where it takes the --eun-text-on-inverse colors
  * @prop {'auto' | 'off' | 'on'} [visitedStyle='auto'] - Controls the visited state color. Auto follows the browser's real navigation history, off always renders as unvisited, and on always renders as visited
  * @prop {boolean} [current=false] - Marks the link as the current page: it renders with aria-current="page" and keeps the --link-color-current color in every state (hover, focus, visited), for example an active item in a navigation
  * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
- * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically
+ * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
  * @cssprop [--link-color] - Sets the color of the link
  * @cssprop [--link-color-hover] - Sets the color of the link on hover
@@ -39,7 +39,11 @@ declare const EunomiaLink_base: import("../../../utils/constructor.type.js").Con
  * @cssprop [--link-line-height] - Sets the line-height of the link. Inherits the surrounding text's line-height when unset
  * @cssprop [--link-text-decoration] - Sets the text decoration of the link, for example none, when embedding a link inside an already distinct interactive surface such as a card
  * @cssprop [--link-icon-color] - Sets the color of the leading icon, independently of the link text color
+ * @cssprop [--link-icon-size] - Sets the size of the leading icon, 18px by default. Also sets the font size of the icon slot, so an icon from another set sized in em follows it
+ * @cssprop [--link-transition-duration] - Sets the duration of the color, background and focus transitions. Defaults to --eun-duration-xl
  * @cssprop [--link-padding] - Sets padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
+ * @cssprop [--link-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --link-padding is set
+ * @cssprop [--link-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
  * @cssprop [--link-background-focus] - Sets a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * @cssprop [--link-border-radius] - Sets the corner radius of the link's own background/focus outline box

package/dist/components/action/link/link.js

@@ -43,15 +43,15 @@ export const EunomiaLinkTagName = "eun-link";
  * it the same way, through the anchor's aria-description.
  *
  * @slot [default] - The link content, or a native anchor carrying the href itself when href is unset
- * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
+ * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only
  * @prop {string} href - The destination URL
  * @prop {'_blank' | '_self' | '_parent' | '_top'} [target='_self'] - Where to open the linked URL. Opening in a new tab automatically adds an external link icon at the end and announces it to assistive technology, in the current locale
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional decorative icon displayed to the left of the link
- * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background
+ * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background, such as --eun-surface-inverse, where it takes the --eun-text-on-inverse colors
  * @prop {'auto' | 'off' | 'on'} [visitedStyle='auto'] - Controls the visited state color. Auto follows the browser's real navigation history, off always renders as unvisited, and on always renders as visited
  * @prop {boolean} [current=false] - Marks the link as the current page: it renders with aria-current="page" and keeps the --link-color-current color in every state (hover, focus, visited), for example an active item in a navigation
  * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
- * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically
+ * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
  * @cssprop [--link-color] - Sets the color of the link
  * @cssprop [--link-color-hover] - Sets the color of the link on hover
@@ -62,7 +62,11 @@ export const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-line-height] - Sets the line-height of the link. Inherits the surrounding text's line-height when unset
  * @cssprop [--link-text-decoration] - Sets the text decoration of the link, for example none, when embedding a link inside an already distinct interactive surface such as a card
  * @cssprop [--link-icon-color] - Sets the color of the leading icon, independently of the link text color
+ * @cssprop [--link-icon-size] - Sets the size of the leading icon, 18px by default. Also sets the font size of the icon slot, so an icon from another set sized in em follows it
+ * @cssprop [--link-transition-duration] - Sets the duration of the color, background and focus transitions. Defaults to --eun-duration-xl
  * @cssprop [--link-padding] - Sets padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
+ * @cssprop [--link-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --link-padding is set
+ * @cssprop [--link-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
  * @cssprop [--link-background-focus] - Sets a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * @cssprop [--link-border-radius] - Sets the corner radius of the link's own background/focus outline box
@@ -286,9 +290,7 @@ let EunomiaLink = class EunomiaLink extends LocalizableMixin(LitElement) {
       class=${classMap({ "has-icon": hasIcon })}
       @slotchange=${this.handleIconSlotChange}
     >
-      ${this.icon
-            ? html `<eun-icon name=${this.icon} size="18"></eun-icon>`
-            : nothing}
+      ${this.icon ? html `<eun-icon name=${this.icon}></eun-icon>` : nothing}
     </slot>`;
         if (this.slottedAnchor) {
             return html `
@@ -321,7 +323,9 @@ let EunomiaLink = class EunomiaLink extends LocalizableMixin(LitElement) {
         @blur=${this.handleBlur}
       >
         ${iconSlot}
-        <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+        <span id="label"
+          ><slot @slotchange=${this.handleDefaultSlotChange}></slot
+        ></span>
         ${isBlank && !this.ariaLabel
             ? html `<span class="sr-only"> ${newTabHint}</span>`
             : nothing}

package/dist/components/action/link/link.styles.js

@@ -13,7 +13,11 @@ import { css } from "lit";
  * [--link-color-current] - Set a custom link color for the current page link (the `current` attribute). It stays this color on hover, focus and visited states
  * [--link-text-decoration] - Set a custom text-decoration for the link
  * [--link-icon-color] - Set a custom color for the leading icon, independent from the link text color
+ * [--link-icon-size] - Set a custom size for the leading icon, 18px by default. Also the font size of the icon slot, for an icon sized in em
+ * [--link-transition-duration] - Set a custom duration for the link transitions, --eun-duration-xl by default
  * [--link-padding] - Set custom padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
+ * [--link-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --link-padding is set
+ * [--link-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * [--link-background] - Set a persistent background color behind the link. Defaults to transparent
  * [--link-background-focus] - Set a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * [--link-border-radius] - Set a custom corner radius for the link's own background/focus outline box
@@ -42,6 +46,7 @@ const base = css `
       var(--eun-color-primary-500, #3d6fff)
     );
     --_textDecoration: var(--link-text-decoration, underline);
+    --_duration: var(--link-transition-duration, var(--eun-duration-xl, 300ms));
     --_iconColor: var(--link-icon-color, var(--_color));
     --icon-color: var(--_iconColor);
     font-size: var(--link-font-size, unset);
@@ -50,9 +55,12 @@ const base = css `
     align-items: center;
   }
   :host([theme="dark"]) {
-    --_color: var(--link-color, rgba(255, 255, 255, 0.7));
-    --_colorHover: var(--link-color-hover, #fff);
-    --_colorFocus: var(--link-color-focus, #fff);
+    --_color: var(
+      --link-color,
+      var(--eun-text-on-inverse-secondary, rgba(255, 255, 255, 0.7))
+    );
+    --_colorHover: var(--link-color-hover, var(--eun-text-on-inverse, #fff));
+    --_colorFocus: var(--link-color-focus, var(--eun-text-on-inverse, #fff));
     --_colorVisited: var(
       --link-color-visited,
       var(--eun-color-purple-300, #bea0ed)
@@ -65,6 +73,15 @@ const base = css `
     display: inline-flex;
     flex-shrink: 0;
   }
+  slot[name="icon"] {
+    --icon-size: var(--link-icon-size, 18px);
+    font-size: var(--link-icon-size, inherit);
+  }
+  #label {
+    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
+    outline: 2px solid transparent;
+    transition: outline var(--_duration) var(--eun-easing-out, ease-out);
+  }
   #external-link-icon {
     display: inline-flex;
     flex-shrink: 0;
@@ -75,20 +92,23 @@ const base = css `
     display: inline-flex;
     align-items: center;
     gap: var(--eun-space-s, 8px);
-    padding: var(--link-padding, 0);
+    padding: var(
+      --link-padding,
+      var(--link-padding-block, 0) var(--link-padding-inline, 0)
+    );
     background: var(--link-background, transparent);
     color: var(--_color);
     font: inherit;
     text-decoration: var(--_textDecoration);
-    text-wrap: pretty;
+    text-wrap-style: pretty;
     border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
     cursor: pointer;
     outline: 2px solid transparent;
     transition:
-      color 0.3s ease-out,
-      background-color 0.3s ease-out,
-      outline 0.3s ease-out,
-      text-decoration-color 0.3s ease-out;
+      color var(--_duration) var(--eun-easing-out, ease-out),
+      background-color var(--_duration) var(--eun-easing-out, ease-out),
+      outline var(--_duration) var(--eun-easing-out, ease-out),
+      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
   }
   #link:visited {
     color: var(--_colorVisited);
@@ -129,6 +149,18 @@ const base = css `
     outline-offset: 2px;
     --icon-color: var(--link-icon-color, var(--_colorHover));
   }
+  #link.has-icon:focus-visible {
+    background: var(--link-background, transparent);
+    outline-color: transparent;
+  }
+  #link.has-icon:focus-visible #label {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+  }
 
   :host([current]) #link,
   :host([current]) #link:visited,
@@ -155,12 +187,12 @@ const base = css `
     color: var(--_color);
     font: inherit;
     text-decoration: var(--_textDecoration);
-    text-wrap: pretty;
+    text-wrap-style: pretty;
     border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
     transition:
-      color 0.3s ease-out,
-      background-color 0.3s ease-out,
-      text-decoration-color 0.3s ease-out;
+      color var(--_duration) var(--eun-easing-out, ease-out),
+      background-color var(--_duration) var(--eun-easing-out, ease-out),
+      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
   }
   ::slotted(a:visited) {
     color: var(--_colorVisited);
@@ -195,9 +227,28 @@ const base = css `
   ::slotted(a:focus-visible) {
     color: var(--_colorHover) !important;
     text-decoration: none;
-    outline: none !important;
+    outline: none;
+  }
+  #link.has-icon ::slotted(a) {
+    outline: 2px solid transparent;
+    transition:
+      color var(--_duration) var(--eun-easing-out, ease-out),
+      background-color var(--_duration) var(--eun-easing-out, ease-out),
+      outline var(--_duration) var(--eun-easing-out, ease-out),
+      text-decoration-color var(--_duration) var(--eun-easing-out, ease-out);
+  }
+  #link.has-icon ::slotted(a:focus-visible) {
+    background: var(
+      --link-background-focus,
+      var(--link-background, transparent)
+    );
+    outline-color: var(--_colorFocus);
+    outline-offset: 2px;
+  }
+  :host(:state(focus-visible)) #link.slotted-link.has-icon {
+    --icon-color: var(--link-icon-color, var(--_colorHover));
   }
-  :host(:state(focus-visible)) #link.slotted-link {
+  :host(:state(focus-visible)) #link.slotted-link:not(.has-icon) {
     background: var(
       --link-background-focus,
       var(--link-background, transparent)

package/dist/components/action/shared-styles/button-palette.styles.js

@@ -32,9 +32,9 @@ export const buttonPaletteStyles = css `
     --_solid-active: var(--eun-color-primary-800, #2d52bd);
     --_onSolid: var(--eun-color-on-primary-500, #ffffff);
     --_accent: var(--eun-color-primary-500, #3d6fff);
-    --_tint: var(--eun-color-primary-transparent, #3d6fff33);
-    --_tint-hover: var(--eun-color-primary-transparent-hover, #3d6fff4d);
-    --_tint-active: var(--eun-color-primary-transparent-active, #3d6fff66);
+    --_tint: var(--eun-color-primary-alpha-20, #3d6fff33);
+    --_tint-hover: var(--eun-color-primary-alpha-30, #3d6fff4d);
+    --_tint-active: var(--eun-color-primary-alpha-40, #3d6fff66);
     --_fgTint: var(--_accent);
     --_wash-hover: var(--_tint-hover);
     --_wash-active: var(--_tint-active);
@@ -49,9 +49,9 @@ export const buttonPaletteStyles = css `
     --_solid-active: var(--eun-color-secondary-800, #a97624);
     --_onSolid: var(--eun-color-on-secondary-500, #000000de);
     --_accent: var(--eun-color-secondary-500, #e5a030);
-    --_tint: var(--eun-color-secondary-transparent, #e5a03033);
-    --_tint-hover: var(--eun-color-secondary-transparent-hover, #e5a0304d);
-    --_tint-active: var(--eun-color-secondary-transparent-active, #e5a03066);
+    --_tint: var(--eun-color-secondary-alpha-20, #edbd6f33);
+    --_tint-hover: var(--eun-color-secondary-alpha-30, #edbd6f4d);
+    --_tint-active: var(--eun-color-secondary-alpha-40, #edbd6f66);
     --_ring: var(--eun-color-secondary-700, #ca8d2a);
   }
   :host([color="critical"]) {
@@ -60,9 +60,9 @@ export const buttonPaletteStyles = css `
     --_solid-active: var(--eun-color-critical-100, #aa0014);
     --_onSolid: #fff;
     --_accent: var(--eun-color-critical-100, #aa0014);
-    --_tint: var(--eun-color-critical-30, #faf0f1);
-    --_tint-hover: var(--eun-color-critical-50, #f1d6d9);
-    --_tint-active: var(--eun-color-critical-90, #e4adb4);
+    --_tint: var(--eun-color-critical-alpha-5, #aa00140d);
+    --_tint-hover: var(--eun-color-critical-alpha-20, #aa001433);
+    --_tint-active: var(--eun-color-critical-alpha-30, #aa00144d);
     --_ring: var(--eun-color-critical-100, #aa0014);
   }
   :host([color="success"]) {
@@ -71,9 +71,9 @@ export const buttonPaletteStyles = css `
     --_solid-active: var(--eun-color-success-100, #1a9948);
     --_onSolid: #fff;
     --_accent: var(--eun-color-success-100, #1a9948);
-    --_tint: var(--eun-color-success-30, #f1f9f4);
-    --_tint-hover: var(--eun-color-success-50, #daefe2);
-    --_tint-active: var(--eun-color-success-90, #b6dec4);
+    --_tint: var(--eun-color-success-alpha-5, #1a99480d);
+    --_tint-hover: var(--eun-color-success-alpha-20, #1a994833);
+    --_tint-active: var(--eun-color-success-alpha-30, #1a99484d);
     --_ring: var(--eun-color-success-100, #1a9948);
   }
   :host([color="warning"]) {
@@ -82,9 +82,9 @@ export const buttonPaletteStyles = css `
     --_solid-active: var(--eun-color-warning-100, #c85207);
     --_onSolid: #fff;
     --_accent: var(--eun-color-warning-100, #c85207);
-    --_tint: var(--eun-color-warning-30, #fcf5f0);
-    --_tint-hover: var(--eun-color-warning-50, #f6e3d7);
-    --_tint-active: var(--eun-color-warning-90, #edc8b0);
+    --_tint: var(--eun-color-warning-alpha-5, #c852070d);
+    --_tint-hover: var(--eun-color-warning-alpha-20, #c8520733);
+    --_tint-active: var(--eun-color-warning-alpha-30, #c852074d);
     --_ring: var(--eun-color-warning-100, #c85207);
   }
   :host([color="medium"]) {

package/dist/components/action/toggle/toggle-group.d.ts

@@ -87,6 +87,8 @@ declare const EunomiaToggleGroup_base: import("../../../utils/constructor.type.j
  * @cssprop [--toggle-group-border-radius] - Sets the corner radius of the track and its options
  * @cssprop [--toggle-group-gap] - Sets the gap between the options
  * @cssprop [--toggle-group-padding] - Sets the padding of the track, also used as the indicator's inset so it stays flush with the track's edge. Ignored once appearance isn't default
+ * @cssprop [--toggle-group-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * @cssprop [--toggle-group-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover and keyboard focus, for every appearance
  * @cssprop [--toggle-group-hover-background] - Sets the background color of an unselected option on hover. Transparent by default, and applies regardless of appearance
  * @cssprop [--toggle-group-box-shadow] - Sets a box shadow on the track itself, for every appearance. None by default

package/dist/components/action/toggle/toggle-group.js

@@ -78,6 +78,8 @@ export const EunomiaToggleGroupTagName = "eun-toggle-group";
  * @cssprop [--toggle-group-border-radius] - Sets the corner radius of the track and its options
  * @cssprop [--toggle-group-gap] - Sets the gap between the options
  * @cssprop [--toggle-group-padding] - Sets the padding of the track, also used as the indicator's inset so it stays flush with the track's edge. Ignored once appearance isn't default
+ * @cssprop [--toggle-group-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * @cssprop [--toggle-group-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * @cssprop [--toggle-group-hover-color] - Sets the text color of an unselected option on hover and keyboard focus, for every appearance
  * @cssprop [--toggle-group-hover-background] - Sets the background color of an unselected option on hover. Transparent by default, and applies regardless of appearance
  * @cssprop [--toggle-group-box-shadow] - Sets a box shadow on the track itself, for every appearance. None by default
@@ -163,7 +165,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
          * @private
          */
         this.handleSlotChange = () => {
-            this.settleAndSync(false);
+            void this.settleAndSync(false);
         };
     }
     /**
@@ -212,7 +214,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
-        this.settleAndSync(false)
+        void this.settleAndSync(false)
             .then(() => Promise.all((this.items ?? []).map((item) => this.whenItemReady(item))))
             .then(() => {
             requestAnimationFrame(() => requestAnimationFrame(() => {
@@ -463,7 +465,7 @@ let EunomiaToggleGroup = class EunomiaToggleGroup extends NavigationOverflowMixi
         };
         const active = this.entries.find((entry) => entry.value === this.value[0]);
         if (active && active.element.tagName !== "BUTTON") {
-            this.whenItemReady(active.element).then(settle);
+            void this.whenItemReady(active.element).then(settle);
             return;
         }
         settle();

package/dist/components/action/toggle/toggle-group.styles.d.ts

@@ -10,6 +10,8 @@
  * [--toggle-group-border-radius] - Set a custom border radius for the track and its options
  * [--toggle-group-gap] - Set a custom gap between the options
  * [--toggle-group-padding] - Set a custom padding for the track ; also used as the indicator's inset, so it stays flush with the track's edge. Ignored once `appearance` isn't `default`
+ * [--toggle-group-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
+ * [--toggle-group-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --toggle-group-padding is set
  * [--toggle-group-hover-color] - Set a custom text color on hover state, for an unselected option, for every appearance
  * [--toggle-group-hover-background] - Set a custom background color on hover state, for an unselected option ; transparent by default. Applies regardless of `appearance`
  * [--toggle-group-box-shadow] - Set a custom box shadow on the track itself, for every appearance, none by default