@eunomia/elements 1.0.0-beta.3 → 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,48 +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 {'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);
         /**
@@ -70,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";
@@ -87,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
@@ -103,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")) {
@@ -115,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>
     `;
     }
@@ -150,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) {
@@ -195,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)}
@@ -208,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}
@@ -215,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.
  *