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

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,56 @@ 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
+ * @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. Ignored with a slotted anchor, which takes it instead
+ * @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-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --button-padding is set
+ * @cssprop [--button-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --button-padding is set
+ * @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-border-size] - Sets the width of the border. Defaults to 1px for outline and 1.5px otherwise
+ * @cssprop [--button-font-size] - Sets the font size, for every size
+ * @cssprop [--button-font-weight] - Sets the font weight
+ * @cssprop [--button-line-height] - Sets the line height, for every size. Also sizes the icons
  * @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 +92,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 +109,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 +144,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 +163,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 +232,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 +277,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 +290,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 +298,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,26 @@ 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-padding-block] - Set a custom vertical padding, as one length applied to both sides. Ignored when --button-padding is set
+ * [--button-padding-inline] - Set a custom horizontal padding, as one length applied to both sides. Ignored when --button-padding is set
+ * [--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-border-size] - Set a custom border width. Defaults to 1px for `outline` and 1.5px otherwise
+ * [--button-font-size] - Set a custom font size, for every size
+ * [--button-font-weight] - Set a custom font weight
+ * [--button-line-height] - Set a custom line height, for every size. Also sizes the icons
  * [--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,21 +33,24 @@ const base = css `
       var(--button-background) 76%,
       black
     );
-    --_borderRadius: var(
-      --button-border-radius,
-      var(--eun-border-radius-m, 8px)
-    );
+    --_defaultBorderRadius: var(--eun-border-radius-m, 8px);
+    --_defaultPaddingBlock: var(--eun-space-s, 8px);
+    --_defaultPaddingInline: calc(var(--eun-space-l, 32px) / 2);
+    --_borderRadius: var(--button-border-radius, var(--_defaultBorderRadius));
     --_padding: var(
       --button-padding,
-      var(--eun-space-s, 8px) calc(var(--eun-space-l, 32px) / 2)
+      var(--button-padding-block, var(--_defaultPaddingBlock))
+        var(--button-padding-inline, var(--_defaultPaddingInline))
     );
     --_boxShadow: var(--button-shadow, none);
     --_boxShadow-hover: var(--button-shadow-hover, var(--_boxShadow));
-    --_transition: var(--button-transition, 0.2s);
+    --_transition: var(--button-transition, var(--eun-duration-m, 200ms));
     --_borderSize: var(--button-border-size, 1.5px);
-    --_fontSize: var(--eun-font-size-s, 14px);
+    --_defaultFontSize: var(--eun-font-size-s, 14px);
+    --_fontSize: var(--button-font-size, var(--_defaultFontSize));
     --_gap: var(--eun-space-xs, 4px);
-    --_lineHeight: 1rem;
+    --_defaultLineHeight: 1rem;
+    --_lineHeight: var(--button-line-height, var(--_defaultLineHeight));
     --icon-size: var(--_lineHeight);
     --_before-display: none;
     --_cursor: pointer;
@@ -59,7 +60,9 @@ const base = css `
     user-select: none;
     cursor: var(--_cursor);
     outline: 2px solid transparent;
-    transition: all ease-out var(--_transition);
+    transition:
+      outline var(--eun-easing-out, ease-out) var(--_transition),
+      outline-offset var(--eun-easing-out, ease-out) var(--_transition);
     border-radius: var(--_borderRadius);
     z-index: 0;
   }
@@ -72,31 +75,35 @@ const base = css `
     outline-color: var(--_focusIndicator);
   }
   :host([size="xs"]) {
-    --_fontSize: var(--eun-font-size-xs, 10px);
-    --_padding: var(--eun-space-xxs, 1.6px) var(--eun-space-xs, 4px);
-    --_lineHeight: 10px;
-    --_borderRadius: var(--eun-border-radius-s, 999px);
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: var(--eun-space-xxs, 1.6px);
+    --_defaultPaddingInline: var(--eun-space-xs, 4px);
+    --_defaultLineHeight: 10px;
+    --_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);
-    --_lineHeight: 10px;
-    --_borderRadius: var(--eun-border-radius-s, 999px);
+    --_defaultFontSize: var(--eun-font-size-xs, 10px);
+    --_defaultPaddingBlock: calc(var(--eun-space-s) / 2);
+    --_defaultPaddingInline: var(--eun-space-s);
+    --_defaultLineHeight: 10px;
+    --_defaultBorderRadius: var(--eun-border-radius-s, 999px);
   }
   :host([size="l"]) {
-    --_fontSize: var(--eun-font-size-m, 16px);
+    --_defaultFontSize: 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);
-    --_lineHeight: 1.1rem;
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.25);
+    --_defaultPaddingInline: var(--eun-space-l, 32px);
+    --_defaultLineHeight: 1.1rem;
   }
   :host([size="xl"]) {
-    --_fontSize: var(--eun-font-size-l, 1.3rem);
+    --_defaultFontSize: 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);
-    --_lineHeight: 1.3rem;
+    --_defaultPaddingBlock: calc(var(--eun-space-s, 8px) * 1.5);
+    --_defaultPaddingInline: var(--eun-space-l, 32px);
+    --_defaultLineHeight: 1.3rem;
   }
   :host([rounded]) {
-    --_borderRadius: var(--eun-border-radius-xl, 999px);
+    --_defaultBorderRadius: var(--eun-border-radius-xl, 999px);
   }
   slot::slotted(*) {
     color: var(--_textColor);
@@ -126,11 +133,13 @@ const base = css `
     outline: 2px solid transparent;
     padding: var(--_padding);
     gap: var(--_gap);
-    transition: all ease-out var(--_transition);
+    transition: all var(--eun-easing-out, ease-out) var(--_transition);
     font-size: var(--_fontSize);
+    font-weight: var(--button-font-weight, inherit);
     line-height: var(--_lineHeight);
     text-decoration: none;
     align-items: center;
+    justify-content: center;
     white-space: nowrap;
   }
   #button:hover,
@@ -178,6 +187,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 var(--eun-easing-out, 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])) {
@@ -195,6 +251,7 @@ const appearances = css `
     --_bd: transparent;
   }
   :host([appearance="outline"]) {
+    --_borderSize: var(--button-border-size, 1px);
     --_bg: transparent;
     --_bg-hover: var(--_wash-hover);
     --_bg-active: var(--_wash-active);
@@ -208,7 +265,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);
@@ -221,13 +278,14 @@ const appearances = css `
     --_bd: transparent;
     --_boxShadow: var(
       --button-shadow,
-      var(--eun-shadow-s, "rgba(149, 157, 165, 0.2) 0px 8px 24px")
+      var(--eun-shadow-s, rgba(149, 157, 165, 0.2) 0px 8px 24px)
     );
     --_boxShadow-hover: var(
       --button-shadow-hover,
       var(
         --eun-shadow-m,
-        "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
+        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
       )
     );
   }
@@ -239,7 +297,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(
@@ -256,32 +313,32 @@ const appearances = css `
   :host([appearance="raised"]:not([disabled])) #button:active {
     box-shadow: var(
       --eun-shadow-l,
-      "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px"
+      rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
+      rgba(0, 0, 0, 0.05) 0px 4px 6px -2px
     );
   }
 
-  /* 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);
   }
 `;
@@ -314,7 +371,8 @@ const slide = css `
     gap: 0;
     align-items: center;
     justify-content: start;
-    transition: grid-template-columns ease var(--_transition);
+    transition: grid-template-columns var(--eun-easing-default, ease)
+      var(--_transition);
   }
   :host([slide]:hover) #button,
   :host([slide]:focus-visible) #button,
@@ -329,8 +387,8 @@ const slide = css `
     margin-left: 0;
     opacity: 0;
     transition:
-      margin-left ease var(--_transition),
-      opacity ease var(--_transition);
+      margin-left var(--eun-easing-default, ease) var(--_transition),
+      opacity var(--eun-easing-default, ease) var(--_transition);
   }
   :host([slide]:hover) slot:not([name]),
   :host([slide]:focus-visible) slot:not([name]),
@@ -344,18 +402,12 @@ const full = css `
     display: flex;
     width: 100%;
   }
-  :host([full]) #button {
-    justify-content: center;
-  }
 `;
 const fullVariable = css `
   @supports (width: if(style(--a: b): 1px; else: 2px)) {
     :host {
       width: if(style(--button-full: true): 100%; else: fit-content);
     }
-    #button {
-      justify-content: if(style(--button-full: true): center; else: normal);
-    }
   }
 `;
 export const buttonStyles = [
@@ -364,6 +416,7 @@ export const buttonStyles = [
     appearances,
     disabled,
     slide,
+    slottedLink,
     fullVariable,
     full,
 ];