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

package/dist/components/action/dropdown-button/dropdown-button.d.ts

@@ -1,7 +1,7 @@
 import { LitElement, TemplateResult } from "lit";
 import { DropdownMenuContainer } from "../../../utils/dropdown-menu.utils.js";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
-import { ButtonSize, ButtonVariant, EunomiaButtonAppearance } from "../../../mixins/button.mixin.js";
+import { ButtonSize, ButtonColor, EunomiaButtonAppearance } from "../../../mixins/button.mixin.js";
 import { EunomiaSeverity } from "../../../types/variant.type.js";
 /**
  * Tag name of the dropdown-button component.
@@ -25,7 +25,7 @@ export interface EunomiaDropdownOption {
 export type EunomiaDropdownPlacement = "top-start" | "top" | "top-end" | "right" | "bottom-end" | "bottom" | "bottom-start" | "left";
 /**
  * A button that opens a menu of actions on click. Its trigger is a regular
- * button, so every button variant, size, and appearance works the same way.
+ * button, so every button color, size, and appearance works the same way.
  *
  * Choosing an option doesn't persist a value on the component itself, since
  * this is a menu of actions rather than a form field. Each choice fires an
@@ -47,16 +47,16 @@ export type EunomiaDropdownPlacement = "top-start" | "top" | "top-end" | "right"
  * @slot start - An icon or other content shown at the start of the trigger. Takes priority over the default icon from icon or severity
  * @prop {string} label - The trigger button's label
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon for the trigger button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
- * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
+ * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by color
  * @prop {Array<EunomiaDropdownOption>} [options=[]] - The menu options
  * @attr {string} [options] - The menu options, written as a JSON string for use directly in markup instead of the JavaScript property
  * @prop {string[]} [disabledKeys=[]] - Keys of options to disable in addition to any option already marked disabled
  * @attr {string} [disabled-keys] - The disabled option keys, written as a JSON string for use directly in markup instead of the JavaScript property
  * @prop {boolean} [disabled=false] - Whether the trigger button is disabled
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the trigger button
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} variant - The color theme applied to the trigger button
- * @prop {boolean} [fixedColor=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
- * @attr {boolean} [fixed-color=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} color - The color applied to the trigger button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
  * @prop {boolean} [rounded=false] - Whether the trigger button has fully rounded corners
  * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='default'] - The trigger button's surface style, using the same values as the button component. Defaults to a paler tint rather than a solid fill, since a menu trigger reads better as a lighter weight control than a standalone primary action
  * @prop {EunomiaDropdownPlacement} [placement='bottom-start'] - Where the menu opens relative to the trigger
@@ -100,7 +100,7 @@ export declare class EunomiaDropdownButton extends LitElement implements Dropdow
      * trigger `eun-button`. By default, once `severity` is set and `icon`
      * isn't (and nothing is slotted into `start`), the leading icon is set
      * according to it — same vocabulary as `eun-alert`/`eun-tag`. Has no
-     * effect on color, which stays driven by `variant` : the two genuinely
+     * effect on color, which stays driven by `color` : the two genuinely
      * differ here, since a full severity range (`info`/`neutral` included)
      * doesn't have a matching action color.
      */
@@ -134,7 +134,7 @@ export declare class EunomiaDropdownButton extends LitElement implements Dropdow
     /**
      * Forwarded to the trigger `eun-button`.
      */
-    variant?: ButtonVariant;
+    color?: ButtonColor;
     /**
      * Forwarded to the trigger `eun-button`.
      * @default false
@@ -162,8 +162,8 @@ export declare class EunomiaDropdownButton extends LitElement implements Dropdow
     /**
      * 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

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

@@ -12,13 +12,14 @@ 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.
  */
 export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
 /**
  * A button that opens a menu of actions on click. Its trigger is a regular
- * button, so every button variant, size, and appearance works the same way.
+ * button, so every button color, size, and appearance works the same way.
  *
  * Choosing an option doesn't persist a value on the component itself, since
  * this is a menu of actions rather than a form field. Each choice fires an
@@ -40,16 +41,16 @@ export const EunomiaDropdownButtonTagName = "eun-dropdown-button";
  * @slot start - An icon or other content shown at the start of the trigger. Takes priority over the default icon from icon or severity
  * @prop {string} label - The trigger button's label
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon for the trigger button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
- * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
+ * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this trigger leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by color
  * @prop {Array<EunomiaDropdownOption>} [options=[]] - The menu options
  * @attr {string} [options] - The menu options, written as a JSON string for use directly in markup instead of the JavaScript property
  * @prop {string[]} [disabledKeys=[]] - Keys of options to disable in addition to any option already marked disabled
  * @attr {string} [disabled-keys] - The disabled option keys, written as a JSON string for use directly in markup instead of the JavaScript property
  * @prop {boolean} [disabled=false] - Whether the trigger button is disabled
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the trigger button
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} variant - The color theme applied to the trigger button
- * @prop {boolean} [fixedColor=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
- * @attr {boolean} [fixed-color=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} color - The color applied to the trigger button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark trigger button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
  * @prop {boolean} [rounded=false] - Whether the trigger button has fully rounded corners
  * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='default'] - The trigger button's surface style, using the same values as the button component. Defaults to a paler tint rather than a solid fill, since a menu trigger reads better as a lighter weight control than a standalone primary action
  * @prop {EunomiaDropdownPlacement} [placement='bottom-start'] - Where the menu opens relative to the trigger
@@ -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();
         });
@@ -1071,7 +1072,7 @@ let EunomiaDropdownButton = class EunomiaDropdownButton extends LitElement {
         id="trigger"
         type="button"
         size=${this.size}
-        variant=${ifDefined(this.variant)}
+        color=${ifDefined(this.color)}
         ?fixed-color=${this.fixedColor}
         appearance=${this.appearance}
         ?rounded=${this.rounded}
@@ -1128,7 +1129,7 @@ __decorate([
 ], EunomiaDropdownButton.prototype, "size", void 0);
 __decorate([
     property({ reflect: true })
-], EunomiaDropdownButton.prototype, "variant", void 0);
+], EunomiaDropdownButton.prototype, "color", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: "fixed-color" })
 ], EunomiaDropdownButton.prototype, "fixedColor", void 0);

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.d.ts

@@ -8,10 +8,10 @@ export declare const EunomiaFabTagName = "eun-fab";
  * The corner a positioned FAB is fixed to.
  */
 export type EunomiaFabPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
-declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/button.mixin.js").ButtonMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/command.mixin.js").CommandMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & typeof LitElement;
+declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/button.mixin.js").ButtonMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/command.mixin.js").CommandMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/disabled.mixin.js").DisabledMixinInterface> & import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A circular icon button for a screen's single primary action. It shares
- * its variant, size, href, loading, and keyboard behavior with the regular
+ * its color, size, href, loading, and keyboard behavior with the regular
  * button.
  *
  * When label is set, the button becomes extendable. It stays a plain circle
@@ -25,13 +25,14 @@ declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Cons
  * @prop {EunomiaIconName} icon - The icon displayed at all times
  * @prop {string} label - An optional text label, revealed on hover or focus by the slide animation. Omit it for an icon only button
  * @prop {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} position - Fixes the button to a corner of the viewport. Left unset, the button follows the normal document flow
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='primary'] - The color theme applied to the button
- * @prop {boolean} [fixedColor=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
- * @attr {boolean} [fixed-color=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='primary'] - The color applied to the button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} [disabled=false] - Whether the button is disabled. For a link button, this removes the href instead, since links have no native disabled state
  * @prop {string} href - The URL the button navigates to. When set, the button renders as a link instead of a button
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically announces it to assistive technology, and adds an external link icon when label is also set
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @prop {boolean} [loading=false] - Whether the button shows a loading indicator. Like disabled, it blocks interaction, but keeps the icon and label in place so the button doesn't change size
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
@@ -40,7 +41,7 @@ declare const EunomiaFab_base: import("../../../utils/constructor.type.js").Cons
  * @attr {string} aria-label - The accessible label for the button. Required when label isn't set, since an icon alone has no accessible name, and recommended even when it is if the label text alone doesn't describe the action
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
- * @cssprop [--fab-background] - Sets the background color, for every variant
+ * @cssprop [--fab-background] - Sets the background color, for every color
  * @cssprop [--fab-background-hover] - Sets the background color on hover
  * @cssprop [--fab-text] - Sets the color of the text and icon
  * @cssprop [--fab-focus-outline] - Sets the color of the focus outline

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

@@ -10,6 +10,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { ButtonMixin } from "../../../mixins/button.mixin.js";
 import { CommandMixin } from "../../../mixins/command.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
 import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
 import { fabStyles } from "./fab.styles.js";
 /**
@@ -18,7 +19,7 @@ import { fabStyles } from "./fab.styles.js";
 export const EunomiaFabTagName = "eun-fab";
 /**
  * A circular icon button for a screen's single primary action. It shares
- * its variant, size, href, loading, and keyboard behavior with the regular
+ * its color, size, href, loading, and keyboard behavior with the regular
  * button.
  *
  * When label is set, the button becomes extendable. It stays a plain circle
@@ -32,13 +33,14 @@ export const EunomiaFabTagName = "eun-fab";
  * @prop {EunomiaIconName} icon - The icon displayed at all times
  * @prop {string} label - An optional text label, revealed on hover or focus by the slide animation. Omit it for an icon only button
  * @prop {'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'} position - Fixes the button to a corner of the viewport. Left unset, the button follows the normal document flow
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [variant='primary'] - The color theme applied to the button
- * @prop {boolean} [fixedColor=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
- * @attr {boolean} [fixed-color=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning'} [color='primary'] - The color applied to the button
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other colors
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} [disabled=false] - Whether the button is disabled. For a link button, this removes the href instead, since links have no native disabled state
  * @prop {string} href - The URL the button navigates to. When set, the button renders as a link instead of a button
  * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically announces it to assistive technology, and adds an external link icon when label is also set
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
  * @prop {string} download - The filename used when the linked URL is downloaded instead of navigated to. Only used when href is set
  * @prop {boolean} [loading=false] - Whether the button shows a loading indicator. Like disabled, it blocks interaction, but keeps the icon and label in place so the button doesn't change size
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
@@ -47,7 +49,7 @@ export const EunomiaFabTagName = "eun-fab";
  * @attr {string} aria-label - The accessible label for the button. Required when label isn't set, since an icon alone has no accessible name, and recommended even when it is if the label text alone doesn't describe the action
  * @fires click - Fired when the button is activated by mouse, Enter, or Space
  * @fires {NavigationEvent} eunnavigate - Fired before following href, so a client-side router can intercept the navigation. Not fired for downloads, and cancelable
- * @cssprop [--fab-background] - Sets the background color, for every variant
+ * @cssprop [--fab-background] - Sets the background color, for every color
  * @cssprop [--fab-background-hover] - Sets the background color on hover
  * @cssprop [--fab-text] - Sets the color of the text and icon
  * @cssprop [--fab-focus-outline] - Sets the color of the focus outline
@@ -56,7 +58,7 @@ export const EunomiaFabTagName = "eun-fab";
  * @cssprop [--fab-offset] - Sets the distance from the viewport edge for a positioned button
  * @element eun-fab
  */
-let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin(LitElement))) {
+let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin(LocalizableMixin(LitElement)))) {
     constructor() {
         super(...arguments);
         /**
@@ -132,7 +134,8 @@ let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin
         if (!this.isBlank || this.ariaLabel) {
             return nothing;
         }
-        return html `<span class="sr-only"> (opens in a new tab)</span>`;
+        const hint = this.dictionary.link.opensInNewTab;
+        return html `<span class="sr-only"> (${hint})</span>`;
     }
     /**
      * Renders `label`, with an appended external-link icon (mirroring
@@ -198,7 +201,7 @@ let EunomiaFab = class EunomiaFab extends ButtonMixin(CommandMixin(DisabledMixin
           rel=${ifDefined(this.isBlank ? "noopener noreferrer" : undefined)}
           download=${ifDefined(this.download)}
           aria-label=${ifDefined(this.isBlank && this.ariaLabel
-                ? `${this.ariaLabel} (opens in a new tab)`
+                ? `${this.ariaLabel} (${this.dictionary.link.opensInNewTab})`
                 : (this.ariaLabel ?? undefined))}
           aria-disabled=${ifDefined(this.disabled ? "true" : undefined)}
           aria-busy=${ifDefined(this.loading ? "true" : undefined)}

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

@@ -3,15 +3,15 @@ import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
 /**
  * Base style for the floating action button.
  *
- * The variant palette is shared with `eun-button` (see
+ * The color palette is shared with `eun-button` (see
  * {@link buttonPaletteStyles}) and read *behind* the `--fab-*` custom
- * properties, so those win over every variant. A fab only has a solid look,
+ * properties, so those win over every color. A fab only has a solid look,
  * so it only reads the solid slots.
  *
  * Custom css variables:
- * [--fab-background] - Set a custom background color, for every variant
+ * [--fab-background] - Set a custom background color, for every color
  * [--fab-background-hover] - Set a custom background color for hover state. Derived from --fab-background when only that one is set
- * [--fab-text] - Set a custom text/icon color, for every variant
+ * [--fab-text] - Set a custom text/icon color, for every color
  * [--fab-focus-outline] - Set a custom color to the focus outline
  * [--fab-transition] - Set a custom transition time, shared by the slide-open animation and the hover/focus color changes (mirrors `eun-button`'s own `--button-transition`)
  * [--fab-z-index] - Set a custom z-index for a positioned FAB
@@ -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

@@ -1,9 +1,10 @@
-import { LitElement, TemplateResult } from "lit";
+import { LitElement, PropertyValues, TemplateResult } from "lit";
 import { EunomiaIconName } from "../../content/icon/icon.type.js";
 /**
  * Tag name of the link component.
  */
 export declare const EunomiaLinkTagName = "eun-link";
+declare const EunomiaLink_base: import("../../../utils/constructor.type.js").Constructor<import("../../../mixins/localizable.mixin.js").LocalizableMixinInterface> & typeof LitElement;
 /**
  * A basic link with an optional decorative leading icon.
  *
@@ -11,15 +12,23 @@ export declare const EunomiaLinkTagName = "eun-link";
  * prevent the new page from controlling the original one, without affecting
  * same-tab navigation.
  *
- * @slot [default] - The link content
- * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
+ * Without href, a native anchor placed as a direct child becomes the link
+ * instead, such as a framework's own link component. The anchor then exists
+ * in the server-rendered HTML, so crawlers that don't run JavaScript still
+ * find it, and it keeps the link styles and the current state. When that
+ * anchor opens in a new tab, the link shows the same end icon and announces
+ * 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, 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 announces it to assistive technology
+ * @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
- * @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
+ * @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. 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
@@ -30,14 +39,19 @@ export declare 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
  * @cssstate focus-visible - Set while the link is keyboard-focused (never after a mouse click), so it can be styled from outside the shadow root with eun-link:state(focus-visible). Turbopack's CSS parser (lightningcss) doesn't recognize :state() yet and rejects the whole stylesheet it's in ; ship that rule as a runtime <style>/<link> instead until it's supported
  * @element eun-link
  */
-export declare class EunomiaLink extends LitElement {
+export declare class EunomiaLink extends EunomiaLink_base {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -60,14 +74,17 @@ export declare class EunomiaLink extends LitElement {
      */
     icon?: EunomiaIconName;
     /**
-     * Text color theme, use `dark` on a dark background.
+     * Text color theme, use `dark` on a dark background. Only reflected once
+     * it differs from the default, so an SSR framework doesn't see an
+     * attribute it never rendered.
      * @default light
      */
     theme: "light" | "dark";
     /**
      * Controls the visited-state color: `auto` follows the browser's real
      * navigation history for `href`, `off` always renders as unvisited, `on`
-     * always renders as visited.
+     * always renders as visited. Only reflected once it differs from the
+     * default, like {@link theme}.
      * @default auto
      */
     visitedStyle: "auto" | "off" | "on";
@@ -101,6 +118,45 @@ export declare class EunomiaLink extends LitElement {
      */
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset, which
+     * then acts as the link itself : it's in the light DOM, so it's part of
+     * the server-rendered HTML, and a framework's own link component (Next's
+     * `<Link>`, Angular's `routerLink`, ...) can be that anchor. Navigation,
+     * `target`/`rel` and the new-tab hint are the consumer's own in this mode.
+     * @internal
+     */
+    private get slottedAnchor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    /**
+     * Mirrors {@link current} onto the slotted anchor as `aria-current`,
+     * since that anchor, not the wrapper around it, is what assistive
+     * technology announces.
+     * @private
+     */
+    private syncSlottedAnchor;
+    /**
+     * Re-renders when the default slot changes, so an anchor added or removed
+     * after the first render switches between the two modes.
+     * @private
+     */
+    private handleDefaultSlotChange;
+    /**
+     * The slotted anchor's counterpart of {@link handleFocus} : it lives in
+     * the light DOM, so its focus reaches the host as a plain `focusin`.
+     * @param event the host's focusin event.
+     * @private
+     */
+    private handleSlottedFocusIn;
+    /**
+     * Clears the `focus-visible` custom state once the slotted anchor loses
+     * focus.
+     * @param event the host's focusout event.
+     * @private
+     */
+    private handleSlottedFocusOut;
     /**
      * Elements assigned to the `icon` slot, if any ; queried live so
      * {@link render} can decide whether to fall back to the `icon` prop.
@@ -141,6 +197,12 @@ export declare class EunomiaLink extends LitElement {
      * @private
      */
     private handleClick;
+    /**
+     * The decorative icon at the end of a link opening in a new tab, the
+     * wording being announced separately.
+     * @private
+     */
+    private renderExternalLinkIcon;
     /**
      * Renders the link template.
      * @returns The rendered HTML template
@@ -152,3 +214,4 @@ declare global {
         [EunomiaLinkTagName]: EunomiaLink;
     }
 }
+export {};