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

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

@@ -4,6 +4,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _EunomiaButton_blockedAnchor, _EunomiaButton_newTab;
 import { customElement, property } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -11,7 +23,9 @@ import { ButtonMixin, } from "../../../mixins/button.mixin.js";
 import { buttonStyles } from "./button.styles.js";
 import { CommandMixin } from "../../../mixins/command.mixin.js";
 import { DisabledMixin } from "../../../mixins/disabled.mixin.js";
-import { handleLinkNavigation } from "../../../utils/navigation.utils.js";
+import { handleLinkNavigation, warnIgnoredHostLinkAttributes, } from "../../../utils/navigation.utils.js";
+import { LocalizableMixin } from "../../../mixins/localizable.mixin.js";
+import { NewTabAnchorController } from "../../../utils/new-tab-anchor.controller.js";
 import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 /**
  * Tag name of the button component.
@@ -19,50 +33,51 @@ import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 export const EunomiaButtonTagName = "eun-button";
 /**
  * A clickable control for performing an action or navigating to a link,
- * available in several variants, sizes, and surface styles.
+ * available in several colors, sizes, and surface styles.
  *
  * @slot [default] - The button content
  * @slot [start] - An icon or other content shown at the start of the button. Takes priority over the default icon from icon or severity. Leave empty to let one of those render instead
- * @slot [end] - An icon or other content shown at the end of the button. Ignored when href and target are set to open in a new tab, since an external link indicator takes its place
+ * @slot [end] - An icon or other content shown at the end of the button. Ignored when the button opens a link in a new tab, through href and target or a slotted anchor, since an external link indicator takes its place
  * @prop {'button' | 'submit' | 'reset'} [type='button'] - The button's native type. Ignored when href is set
- * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning' | 'light' | 'medium' | 'dark'} [variant='primary'] - The color theme applied to the button. light/medium/dark are neutral grey tones with no semantic meaning, matching eun-tag's color scale, for a de-emphasized action next to a semantically-colored one
- * @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' | 'light' | 'medium' | 'dark'} [color='primary'] - The color applied to the button. light/medium/dark are neutral grey tones with no semantic meaning, matching eun-tag's color scale, for a de-emphasized action next to a semantically-colored one
+ * @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 {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon, shown at the start of the 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 button 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 button 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 {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button
  * @prop {boolean} rounded - Whether the button has fully rounded corners
  * @prop {boolean} slide - Whether the button uses a sliding open animation
  * @prop {boolean} full - Whether the button stretches to fill 100% of the width available from its parent, instead of sizing to its content. Its content stays centered once stretched
  * @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 adds an external link icon and announces it to assistive technology
+ * @prop {'_blank' | '_self' | '_parent' | '_top'} target - Where to open the linked URL. Only used when href is set. Opening in a new tab automatically adds an external link icon and announces it to assistive technology, in the current locale. A slotted anchor opening in a new tab gets the same icon and announcement
+ * @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 original content in place so the button doesn't change size
  * @prop {string} [loadingLabel='Loading…'] - The accessible label announced while the button is loading
  * @prop {string} command - The command sent to the element targeted by commandFor when the button is clicked, following the Invoker Commands API
  * @prop {string} commandFor - The id of the element that command is sent to
  * @attr {string} aria-label - The accessible label for the button. When the button opens a link in a new tab, this automatically gets a note appended announcing it
- * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The button's surface style. Fill is a solid, colored background with light text. Default is a paler tint of the same color. Outline keeps the color as a border instead of a fill. Flat always renders a muted, low emphasis surface regardless of variant. Raised adds a drop shadow. Ghost shows no surface at rest, only gaining a border and a tinted background on hover, focus, or press
+ * @prop {'default' | 'fill' | 'outline' | 'flat' | 'raised' | 'ghost'} [appearance='fill'] - The button's surface style. Fill is a solid, colored background with light text. Default is a paler tint of the same color. Outline keeps the color as a border instead of a fill. Flat always renders a muted, low emphasis surface regardless of color. Raised adds a drop shadow. Ghost shows no surface at rest, only gaining a border and a tinted background on hover, focus, or press
  * @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 [--button-background] - Sets the background color
  * @cssprop [--button-background-hover] - Sets the background color on hover
  * @cssprop [--button-background-active] - Sets the background color while pressed
  * @cssprop [--button-text] - Sets the text color
- * @cssprop [--button-padding] - Sets the button's padding
- * @cssprop [--button-border-radius] - Sets the corner radius of the button
+ * @cssprop [--button-padding] - Sets the button's padding, for every size
+ * @cssprop [--button-border-radius] - Sets the corner radius of the button, for every size and over rounded
  * @cssprop [--button-focus-outline] - Sets the color of the focus outline
  * @cssprop [--button-transition] - Sets the duration of the button's transitions
  * @cssprop [--button-shadow] - Sets a box shadow. None is applied by default
  * @cssprop [--button-shadow-hover] - Sets the box shadow on hover, falling back to button-shadow when unset
- * @cssprop [--button-border-color] - Sets the border color, overriding the color the active variant would otherwise use
+ * @cssprop [--button-border-color] - Sets the border color, overriding the color the active color would otherwise use
  * @cssprop [--button-border-color-hover] - Sets the border color on hover or focus, falling back to button-border-color when unset
  * @cssprop [--button-border-size] - Sets the width of the border
  * @cssprop [--button-full] - Set to true to stretch the button like the full attribute does. Unlike the attribute, a container query can set it, keeping the responsive behavior in pure CSS. Needs a browser supporting the CSS if() function
  * @element eun-button
  */
-let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(DisabledMixin(LitElement))) {
+let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(DisabledMixin(LocalizableMixin(LitElement)))) {
     constructor() {
         super(...arguments);
         /**
@@ -72,13 +87,13 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
         this.loadingLabel = "Loading…";
         /**
          * The button's surface treatment. `fill` is a solid, opaque
-         * `variant`-colored background with light text ; `default` is a pale
+         * `color`-colored background with light text ; `default` is a pale
          * tinted wash of the same color ; `outline` drops the fill for a colored
          * border ; `flat` always renders the same muted, low-emphasis surface
-         * regardless of `variant` ; `raised` adds a drop shadow ; `ghost` has no
+         * regardless of `color` ; `raised` adds a drop shadow ; `ghost` has no
          * visible surface at rest at all — a border (and a tinted background)
          * only appear on hover/focus/active, defaulting to a neutral gray when
-         * `variant` isn't also set.
+         * `color` isn't also set.
          * @default fill
          */
         this.appearance = "fill";
@@ -89,6 +104,25 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
          * @default false
          */
         this.full = false;
+        /**
+         * Whether {@link syncSlottedAnchor} is the one that took the slotted
+         * anchor out of the tab order, so it only ever restores what it changed.
+         * @internal
+         */
+        _EunomiaButton_blockedAnchor.set(this, void 0);
+        /**
+         * Announces the slotted anchor opening in a new tab.
+         * @internal
+         */
+        _EunomiaButton_newTab.set(this, new NewTabAnchorController(this, () => this.slottedAnchor, () => this.dictionary.link.opensInNewTab));
+        /**
+         * Re-renders when the default slot changes, so an anchor added or removed
+         * after the first render switches between the two modes.
+         * @private
+         */
+        this.handleDefaultSlotChange = () => {
+            this.requestUpdate();
+        };
     }
     /**
      * Lifecycle hook called whenever reactive properties change. Manages the
@@ -105,6 +139,13 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
      */
     updated(_changedProperties) {
         super.updated(_changedProperties);
+        const anchor = this.slottedAnchor;
+        if (anchor) {
+            this.removeAttribute("tabindex");
+            this.syncSlottedAnchor(anchor);
+            warnIgnoredHostLinkAttributes(this);
+            return;
+        }
         if (_changedProperties.has("href") ||
             _changedProperties.has("disabled") ||
             _changedProperties.has("loading")) {
@@ -117,21 +158,55 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
             }
         }
     }
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset, which
+     * then acts as the button's link : it's in the light DOM, so it's part of
+     * the server-rendered HTML, and a framework's own link component can be
+     * that anchor. Navigation, `target`/`rel` and the new-tab hint are the
+     * consumer's own in this mode.
+     * @internal
+     */
+    get slottedAnchor() {
+        return this.href ? null : this.querySelector(":scope > a");
+    }
+    /**
+     * Links have no native disabled state : while `disabled` or `loading`,
+     * the slotted anchor is announced as disabled and taken out of the tab
+     * order (its pointer events are cut by the stylesheet), then restored.
+     * @param anchor the slotted anchor.
+     * @private
+     */
+    syncSlottedAnchor(anchor) {
+        if (this.disabled || this.loading) {
+            anchor.setAttribute("aria-disabled", "true");
+            anchor.setAttribute("tabindex", "-1");
+            __classPrivateFieldSet(this, _EunomiaButton_blockedAnchor, anchor, "f");
+        }
+        else if (__classPrivateFieldGet(this, _EunomiaButton_blockedAnchor, "f") === anchor) {
+            anchor.removeAttribute("aria-disabled");
+            anchor.removeAttribute("tabindex");
+            __classPrivateFieldSet(this, _EunomiaButton_blockedAnchor, undefined, "f");
+        }
+    }
     /**
      * Renders the end-of-content slot, replaced by an external-link indicator
-     * (icon + accessible hint) when navigating away in a new tab.
+     * (icon + accessible hint) when navigating away in a new tab. A slotted
+     * anchor gets the icon only : the hint would sit outside it, so it's
+     * announced through its aria-description instead.
      * @private
      */
     renderEndContent() {
-        if (!(this.href && this.target === "_blank")) {
+        const hrefBlank = !!this.href && this.target === "_blank";
+        const newTabHint = this.dictionary.link.opensInNewTab;
+        if (!hrefBlank && !__classPrivateFieldGet(this, _EunomiaButton_newTab, "f").isBlank) {
             return html `<slot name="end"></slot>`;
         }
         return html `
       <span id="external-link-icon">
         <eun-icon name="arrow_forward" shape="round" size="12"></eun-icon>
-        ${this.ariaLabel
+        ${!hrefBlank || this.ariaLabel
             ? nothing
-            : html `<span class="sr-only"> (opens in a new tab)</span>`}
+            : html `<span class="sr-only"> (${newTabHint})</span>`}
       </span>
     `;
     }
@@ -152,7 +227,7 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
             ></eun-icon>`
             : nothing}
       </slot>
-      <slot></slot>
+      <slot @slotchange=${this.handleDefaultSlotChange}></slot>
       ${this.renderEndContent()}
     `;
         if (!this.loading) {
@@ -197,7 +272,7 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
           rel=${ifDefined(isBlank ? "noopener noreferrer" : undefined)}
           download=${ifDefined(this.download)}
           aria-label=${ifDefined(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)}
@@ -210,6 +285,7 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
         return html `
       <div
         id="button"
+        class=${ifDefined(this.slottedAnchor ? "slotted-link" : undefined)}
         aria-busy=${ifDefined(this.loading ? "true" : undefined)}
       >
         ${content}
@@ -217,6 +293,8 @@ let EunomiaButton = class EunomiaButton extends ButtonMixin(CommandMixin(Disable
     `;
     }
 };
+_EunomiaButton_blockedAnchor = new WeakMap();
+_EunomiaButton_newTab = new WeakMap();
 /**
  * Style to import to the component.
  *

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

@@ -4,28 +4,21 @@ import { buttonPaletteStyles } from "../shared-styles/button-palette.styles.js";
  * Base style for button.
  *
  * Custom css variables:
- * [--button-background] - Set a custom background color, for every appearance and variant
+ * [--button-background] - Set a custom background color, for every appearance and color
  * [--button-background-hover] - Set a custom button background color for hover state. Derived from --button-background when only that one is set
  * [--button-background-active] - Set a custom button background color for active state. Derived from --button-background when only that one is set
- * [--button-text] - Set a custom button text color, for every appearance and variant
- * [--button-padding] - Set a custom padding to the button. Note that thee padding is initialized through the `padding` css.
- * [--button-border-radius] - Set a custom radius to the button border
+ * [--button-text] - Set a custom button text color, for every appearance and color
+ * [--button-padding] - Set a custom padding to the button, for every size
+ * [--button-border-radius] - Set a custom radius to the button border, for every size and over `rounded`
  * [--button-focus-outline] - Set a custom color to the focus outline
  * [--button-transition] - Set a custom button transition time
  * [--button-shadow] - Set a custom box shadow to the button (used by the `raised` variant)
  * [--button-shadow-hover] - Set a custom box shadow to the button on hover state (used by the `raised` variant)
- * [--button-border-color] - Set a custom border color, for every appearance and variant
+ * [--button-border-color] - Set a custom border color, for every appearance and color
  * [--button-border-color-hover] - Set a custom border color for hover/focus-visible state, falling back to --button-border-color
  * [--button-border-size] - Set a custom border width
  * [--button-full] - Set to `true` to get the same result as the `full` attribute. Meant to be set from a container query
  */
-/*
- * The variant fills the palette slots (see {@link buttonPaletteStyles}), the
- * appearance reads them into --_bg / --_bg-hover / --_bg-active / --_fg /
- * --_bd, and #button finally reads those *behind* the --button-* custom
- * properties, so a custom property always wins over any variant, appearance
- * and state. Only `disabled` stays above them, so it never loses its look.
- */
 const base = css `
   :host {
     --_focusIndicator: var(--button-focus-outline, var(--_ring));
@@ -35,14 +28,11 @@ const base = css `
       var(--button-background) 76%,
       black
     );
-    --_borderRadius: var(
-      --button-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
-    --_padding: var(
-      --button-padding,
-      var(--eun-space-s, 8px) calc(var(--eun-space-l, 32px) / 2)
-    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_defaultPadding: var(--eun-space-s, 8px)
+      calc(var(--eun-space-l, 32px) / 2);
+    --_borderRadius: var(--button-border-radius, var(--_defaultBorderRadius));
+    --_padding: var(--button-padding, var(--_defaultPadding));
     --_boxShadow: var(--button-shadow, none);
     --_boxShadow-hover: var(--button-shadow-hover, var(--_boxShadow));
     --_transition: var(--button-transition, 0.2s);
@@ -73,30 +63,32 @@ const base = css `
   }
   :host([size="xs"]) {
     --_fontSize: var(--eun-font-size-xs, 10px);
-    --_padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
+    --_defaultPadding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
     --_lineHeight: 10px;
-    --_borderRadius: var(--eun-border-radius-s, 999px);
+    --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="s"]) {
     --_fontSize: var(--eun-font-size-xs, 10px);
-    --_padding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
+    --_defaultPadding: calc(var(--eun-space-s) / 2) var(--eun-space-s);
     --_lineHeight: 10px;
-    --_borderRadius: var(--eun-border-radius-s, 999px);
+    --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="l"]) {
     --_fontSize: var(--eun-font-size-m, 16px);
     --_gap: var(--eun-space-m, 16px);
-    --_padding: calc(var(--eun-space-s, 8px) * 1.25) var(--eun-space-l, 32px);
+    --_defaultPadding: calc(var(--eun-space-s, 8px) * 1.25)
+      var(--eun-space-l, 32px);
     --_lineHeight: 1.1rem;
   }
   :host([size="xl"]) {
     --_fontSize: var(--eun-font-size-l, 1.3rem);
     --_gap: var(--eun-space-m, 16px);
-    --_padding: calc(var(--eun-space-s, 8px) * 1.5) var(--eun-space-l, 32px);
+    --_defaultPadding: calc(var(--eun-space-s, 8px) * 1.5)
+      var(--eun-space-l, 32px);
     --_lineHeight: 1.3rem;
   }
   :host([rounded]) {
-    --_borderRadius: var(--eun-border-radius-xl, 999px);
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
   }
   slot::slotted(*) {
     color: var(--_textColor);
@@ -178,6 +170,53 @@ const base = css `
     border: 0;
   }
 `;
+const slottedLink = css `
+  #button.slotted-link {
+    position: relative;
+  }
+  ::slotted(a) {
+    color: inherit;
+    text-decoration: none;
+    outline: none !important;
+  }
+  ::slotted(a)::after {
+    content: "";
+    position: absolute;
+    inset: calc(-1 * var(--_borderSize));
+    border-radius: var(--_borderRadius);
+    outline: 2px solid transparent;
+    transition: outline ease-out var(--_transition);
+  }
+  ::slotted(a:focus-visible)::after {
+    outline-offset: 2px;
+    outline-color: var(--_focusIndicator);
+  }
+  :host(:focus-within) #button.slotted-link {
+    box-shadow: var(--_boxShadow-hover);
+    border-color: var(
+      --button-border-color-hover,
+      var(--button-border-color, var(--_bd))
+    );
+  }
+  :host(:not([disabled]):focus-within) #button.slotted-link {
+    background: var(
+      --button-background-hover,
+      var(--_hoverFromCustom, var(--_bg-hover))
+    );
+  }
+  :host([slide]:focus-within) #button.slotted-link {
+    grid-template-columns: auto 1fr auto;
+  }
+  :host([slide]:focus-within) #button.slotted-link slot:not([name]) {
+    margin-left: var(--_gap);
+    opacity: 1;
+  }
+  :host([disabled]) ::slotted(a),
+  :host([loading]) ::slotted(a) {
+    pointer-events: none;
+    cursor: inherit;
+  }
+`;
 const appearances = css `
   :host([appearance="fill"]),
   :host(:not([appearance])) {
@@ -208,7 +247,7 @@ const appearances = css `
     --_fg: var(--_accent);
     --_bd: transparent;
   }
-  :host([appearance="ghost"]:not([variant])) {
+  :host([appearance="ghost"]:not([color])) {
     --_accent: var(--eun-text-secondary, #484e61);
     --_wash-hover: var(--eun-content-hover, #edeff0);
     --_wash-active: var(--eun-disabled-color, #ecedf0);
@@ -239,7 +278,6 @@ const appearances = css `
     --_bd: transparent;
   }
 
-  /* States : a custom background wins, derived when only the rest one is set. */
   :host(:not([disabled])) #button:is(:hover, :focus-visible),
   :host(:not([disabled]):focus-visible) #button {
     background: var(
@@ -260,28 +298,27 @@ const appearances = css `
     );
   }
 
-  /* A solid semantic button darkens instead of switching color. */
   :host(
       [appearance="fill"]:is(
-          [variant="critical"],
-          [variant="success"],
-          [variant="warning"]
+          [color="critical"],
+          [color="success"],
+          [color="warning"]
         ):not([disabled]):is(:hover, :focus-visible)
     )
     #button,
   :host(
       [appearance="fill"]:is(
-          [variant="critical"],
-          [variant="success"],
-          [variant="warning"]
+          [color="critical"],
+          [color="success"],
+          [color="warning"]
         ):not([disabled])
     )
     #button:is(:hover, :focus-visible) {
     filter: brightness(0.9);
   }
-  :host([appearance="fill"][variant="critical"]:not([disabled])) #button:active,
-  :host([appearance="fill"][variant="success"]:not([disabled])) #button:active,
-  :host([appearance="fill"][variant="warning"]:not([disabled])) #button:active {
+  :host([appearance="fill"][color="critical"]:not([disabled])) #button:active,
+  :host([appearance="fill"][color="success"]:not([disabled])) #button:active,
+  :host([appearance="fill"][color="warning"]:not([disabled])) #button:active {
     filter: brightness(0.8);
   }
 `;
@@ -364,6 +401,7 @@ export const buttonStyles = [
     appearances,
     disabled,
     slide,
+    slottedLink,
     fullVariable,
     full,
 ];

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

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

@@ -18,7 +18,7 @@ import { resolveIcon } from "../../../utils/severity-icon.utils.js";
 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 +40,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
@@ -1071,7 +1071,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 +1128,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/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