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

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

@@ -4,12 +4,26 @@ 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 __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 __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 _EunomiaLink_currentAnchor, _EunomiaLink_newTab;
 import { customElement, property, queryAssignedElements, } from "lit/decorators.js";
 import { html, LitElement, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { linkStyles } from "./link.styles.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";
 /**
  * Tag name of the link component.
  */
@@ -21,15 +35,23 @@ export const EunomiaLinkTagName = "eun-link";
  * prevent the new page from controlling the original one, without affecting
  * same-tab navigation.
  *
- * @slot [default] - The link content
- * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element. Falls back to icon when empty
+ * Without href, a native anchor placed as a direct child becomes the link
+ * instead, such as a framework's own link component. The anchor then exists
+ * in the server-rendered HTML, so crawlers that don't run JavaScript still
+ * find it, and it keeps the link styles and the current state. When that
+ * anchor opens in a new tab, the link shows the same end icon and announces
+ * it the same way, through the anchor's aria-description.
+ *
+ * @slot [default] - The link content, or a native anchor carrying the href itself when href is unset
+ * @slot [icon] - Replaces the leading icon entirely with any content, not just an icon element, such as an icon from another set. Falls back to icon when empty. The icon is decorative : the focus ring surrounds the text only
  * @prop {string} href - The destination URL
- * @prop {'_blank' | '_self' | '_parent' | '_top'} [target='_self'] - Where to open the linked URL. Opening in a new tab automatically announces it to assistive technology
+ * @prop {'_blank' | '_self' | '_parent' | '_top'} [target='_self'] - Where to open the linked URL. Opening in a new tab automatically adds an external link icon at the end and announces it to assistive technology, in the current locale
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional decorative icon displayed to the left of the link
- * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background
+ * @prop {'light' | 'dark'} [theme='light'] - The text color theme. Use dark on a dark background, such as --eun-surface-inverse, where it takes the --eun-text-on-inverse colors
  * @prop {'auto' | 'off' | 'on'} [visitedStyle='auto'] - Controls the visited state color. Auto follows the browser's real navigation history, off always renders as unvisited, and on always renders as visited
  * @prop {boolean} [current=false] - Marks the link as the current page: it renders with aria-current="page" and keeps the --link-color-current color in every state (hover, focus, visited), for example an active item in a navigation
- * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically
+ * @prop {string} [locale] - The locale used to resolve the "opens in a new tab" announcement. Defaults to the one set with setDefaultLocale, English otherwise
+ * @attr {string} aria-label - An accessible label that overrides the link content. When the link also opens in a new tab, a note announcing it is appended automatically. Ignored with a slotted anchor, which takes it instead
  * @fires {NavigationEvent} eunnavigate - Fired before following the link, so a client-side router can intercept the navigation. Cancelable
  * @cssprop [--link-color] - Sets the color of the link
  * @cssprop [--link-color-hover] - Sets the color of the link on hover
@@ -40,14 +62,18 @@ export const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-line-height] - Sets the line-height of the link. Inherits the surrounding text's line-height when unset
  * @cssprop [--link-text-decoration] - Sets the text decoration of the link, for example none, when embedding a link inside an already distinct interactive surface such as a card
  * @cssprop [--link-icon-color] - Sets the color of the leading icon, independently of the link text color
+ * @cssprop [--link-icon-size] - Sets the size of the leading icon, 18px by default. Also sets the font size of the icon slot, so an icon from another set sized in em follows it
+ * @cssprop [--link-transition-duration] - Sets the duration of the color, background and focus transitions. Defaults to --eun-duration-xl
  * @cssprop [--link-padding] - Sets padding around the link, for example to give its focus outline room to breathe. Defaults to 0, flush with the text
+ * @cssprop [--link-padding-block] - Sets the vertical padding, as one length applied to both sides. Ignored when --link-padding is set
+ * @cssprop [--link-padding-inline] - Sets the horizontal padding, as one length applied to both sides. Ignored when --link-padding is set
  * @cssprop [--link-background] - Sets a persistent background color behind the link. Defaults to transparent
  * @cssprop [--link-background-focus] - Sets a background color shown while the link is keyboard-focused, falling back to --link-background when unset
  * @cssprop [--link-border-radius] - Sets the corner radius of the link's own background/focus outline box
  * @cssstate focus-visible - Set while the link is keyboard-focused (never after a mouse click), so it can be styled from outside the shadow root with eun-link:state(focus-visible). Turbopack's CSS parser (lightningcss) doesn't recognize :state() yet and rejects the whole stylesheet it's in ; ship that rule as a runtime <style>/<link> instead until it's supported
  * @element eun-link
  */
-let EunomiaLink = class EunomiaLink extends LitElement {
+let EunomiaLink = class EunomiaLink extends LocalizableMixin(LitElement) {
     /**
      * The element's custom state set, typed locally since the bundled DOM
      * typings don't declare `ElementInternals.states` yet.
@@ -64,14 +90,17 @@ let EunomiaLink = class EunomiaLink extends LitElement {
          */
         this.target = "_self";
         /**
-         * Text color theme, use `dark` on a dark background.
+         * Text color theme, use `dark` on a dark background. Only reflected once
+         * it differs from the default, so an SSR framework doesn't see an
+         * attribute it never rendered.
          * @default light
          */
         this.theme = "light";
         /**
          * Controls the visited-state color: `auto` follows the browser's real
          * navigation history for `href`, `off` always renders as unvisited, `on`
-         * always renders as visited.
+         * always renders as visited. Only reflected once it differs from the
+         * default, like {@link theme}.
          * @default auto
          */
         this.visitedStyle = "auto";
@@ -82,6 +111,48 @@ let EunomiaLink = class EunomiaLink extends LitElement {
          * @default false
          */
         this.current = false;
+        /**
+         * The anchor {@link current} was last mirrored onto, so its
+         * `aria-current` can be cleared once it's swapped out or removed.
+         * @internal
+         */
+        _EunomiaLink_currentAnchor.set(this, void 0);
+        /**
+         * Announces the slotted anchor opening in a new tab.
+         * @internal
+         */
+        _EunomiaLink_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();
+        };
+        /**
+         * The slotted anchor's counterpart of {@link handleFocus} : it lives in
+         * the light DOM, so its focus reaches the host as a plain `focusin`.
+         * @param event the host's focusin event.
+         * @private
+         */
+        this.handleSlottedFocusIn = (event) => {
+            const target = event.target;
+            if (target === this.slottedAnchor && target.matches(":focus-visible")) {
+                this.states?.add("focus-visible");
+            }
+        };
+        /**
+         * Clears the `focus-visible` custom state once the slotted anchor loses
+         * focus.
+         * @param event the host's focusout event.
+         * @private
+         */
+        this.handleSlottedFocusOut = (event) => {
+            if (event.target === this.slottedAnchor) {
+                this.states?.delete("focus-visible");
+            }
+        };
         /**
          * Re-renders when the `icon` slot's assigned content changes, so the
          * `icon` prop fallback correctly appears/disappears as content is
@@ -113,6 +184,56 @@ let EunomiaLink = class EunomiaLink extends LitElement {
         }
         super.attributeChangedCallback(name, oldValue, value);
     }
+    /**
+     * The native `<a>` slotted as a direct child while `href` is unset, which
+     * then acts as the link itself : it's in the light DOM, so it's part of
+     * the server-rendered HTML, and a framework's own link component (Next's
+     * `<Link>`, Angular's `routerLink`, ...) can be that anchor. Navigation,
+     * `target`/`rel` and the new-tab hint are the consumer's own in this mode.
+     * @internal
+     */
+    get slottedAnchor() {
+        return this.href ? null : this.querySelector(":scope > a");
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener("focusin", this.handleSlottedFocusIn);
+        this.addEventListener("focusout", this.handleSlottedFocusOut);
+    }
+    disconnectedCallback() {
+        this.removeEventListener("focusin", this.handleSlottedFocusIn);
+        this.removeEventListener("focusout", this.handleSlottedFocusOut);
+        super.disconnectedCallback();
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.syncSlottedAnchor();
+    }
+    /**
+     * Mirrors {@link current} onto the slotted anchor as `aria-current`,
+     * since that anchor, not the wrapper around it, is what assistive
+     * technology announces.
+     * @private
+     */
+    syncSlottedAnchor() {
+        const anchor = this.slottedAnchor;
+        if (__classPrivateFieldGet(this, _EunomiaLink_currentAnchor, "f") && __classPrivateFieldGet(this, _EunomiaLink_currentAnchor, "f") !== anchor) {
+            __classPrivateFieldGet(this, _EunomiaLink_currentAnchor, "f").removeAttribute("aria-current");
+            __classPrivateFieldSet(this, _EunomiaLink_currentAnchor, undefined, "f");
+        }
+        if (!anchor) {
+            return;
+        }
+        warnIgnoredHostLinkAttributes(this);
+        if (this.current) {
+            anchor.setAttribute("aria-current", "page");
+            __classPrivateFieldSet(this, _EunomiaLink_currentAnchor, anchor, "f");
+        }
+        else if (__classPrivateFieldGet(this, _EunomiaLink_currentAnchor, "f") === anchor) {
+            anchor.removeAttribute("aria-current");
+            __classPrivateFieldSet(this, _EunomiaLink_currentAnchor, undefined, "f");
+        }
+    }
     /**
      * Mirrors the inner anchor's real `:focus-visible` state onto the host as
      * the `focus-visible` custom state, styled from outside with
@@ -147,6 +268,16 @@ let EunomiaLink = class EunomiaLink extends LitElement {
     handleClick(event) {
         handleLinkNavigation(this, event, this.href, this.target);
     }
+    /**
+     * The decorative icon at the end of a link opening in a new tab, the
+     * wording being announced separately.
+     * @private
+     */
+    renderExternalLinkIcon() {
+        return html `<span id="external-link-icon">
+      <eun-icon name="arrow_forward" shape="round" size="14"></eun-icon>
+    </span>`;
+    }
     /**
      * Renders the link template.
      * @returns The rendered HTML template
@@ -154,6 +285,27 @@ let EunomiaLink = class EunomiaLink extends LitElement {
     render() {
         const isBlank = this.target === "_blank";
         const hasIcon = !!this.icon || this.iconSlotEls?.length > 0;
+        const iconSlot = html `<slot
+      name="icon"
+      class=${classMap({ "has-icon": hasIcon })}
+      @slotchange=${this.handleIconSlotChange}
+    >
+      ${this.icon ? html `<eun-icon name=${this.icon}></eun-icon>` : nothing}
+    </slot>`;
+        if (this.slottedAnchor) {
+            return html `
+        <span
+          id="link"
+          part="link"
+          class=${classMap({ "has-icon": hasIcon, "slotted-link": true })}
+        >
+          ${iconSlot}
+          <slot @slotchange=${this.handleDefaultSlotChange}></slot>
+          ${__classPrivateFieldGet(this, _EunomiaLink_newTab, "f").isBlank ? this.renderExternalLinkIcon() : nothing}
+        </span>
+      `;
+        }
+        const newTabHint = `(${this.dictionary.link.opensInNewTab})`;
         return html `
       <a
         id="link"
@@ -164,29 +316,26 @@ let EunomiaLink = class EunomiaLink extends LitElement {
         aria-current=${ifDefined(this.current ? "page" : undefined)}
         rel=${ifDefined(isBlank ? "noopener noreferrer" : undefined)}
         aria-label=${ifDefined(isBlank && this.ariaLabel
-            ? `${this.ariaLabel} (opens in a new tab)`
+            ? `${this.ariaLabel} ${newTabHint}`
             : (this.ariaLabel ?? undefined))}
         @click=${this.handleClick}
         @focus=${this.handleFocus}
         @blur=${this.handleBlur}
       >
-        <slot
-          name="icon"
-          class=${classMap({ "has-icon": hasIcon })}
-          @slotchange=${this.handleIconSlotChange}
-        >
-          ${this.icon
-            ? html `<eun-icon name=${this.icon} size="18"></eun-icon>`
-            : nothing}
-        </slot>
-        <slot></slot>
+        ${iconSlot}
+        <span id="label"
+          ><slot @slotchange=${this.handleDefaultSlotChange}></slot
+        ></span>
         ${isBlank && !this.ariaLabel
-            ? html `<span class="sr-only"> (opens in a new tab)</span>`
+            ? html `<span class="sr-only"> ${newTabHint}</span>`
             : nothing}
+        ${isBlank ? this.renderExternalLinkIcon() : nothing}
       </a>
     `;
     }
 };
+_EunomiaLink_currentAnchor = new WeakMap();
+_EunomiaLink_newTab = new WeakMap();
 /**
  * Styles to import to the component.
  *
@@ -205,10 +354,21 @@ __decorate([
     property()
 ], EunomiaLink.prototype, "icon", void 0);
 __decorate([
-    property({ reflect: true })
+    property({
+        reflect: true,
+        converter: {
+            toAttribute: (value) => (value === "light" ? null : value),
+        },
+    })
 ], EunomiaLink.prototype, "theme", void 0);
 __decorate([
-    property({ reflect: true, attribute: "visited-style" })
+    property({
+        reflect: true,
+        attribute: "visited-style",
+        converter: {
+            toAttribute: (value) => (value === "auto" ? null : value),
+        },
+    })
 ], EunomiaLink.prototype, "visitedStyle", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })

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

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

package/dist/components/action/shared-styles/button-palette.styles.d.ts

@@ -1,9 +1,9 @@
 /**
  * Shared color palette of the button family (`eun-button`, `eun-fab`, and so
- * `eun-dropdown-button`, which renders an `eun-button`). A `variant` fills
+ * `eun-dropdown-button`, which renders an `eun-button`). A `color` fills
  * the same slots on the host, and each component's stylesheet then reads
  * them, per appearance and state, *behind* its public `--<component>-*`
- * custom properties, so those always win over any variant and appearance.
+ * custom properties, so those always win over any color and appearance.
  *
  * Slots :
  * - `--_solid`, `--_solid-hover`, `--_solid-active` : the strong color, at
@@ -20,7 +20,7 @@
  * `light` and `dark` are absolute colors : white and black, whatever the
  * appearance. They have no pale wash, so the tinted surface is as solid as
  * the strong one, and `flat` is a faint wash of the color itself rather than
- * the neutral surface every other variant shares. By default they follow the
+ * the neutral surface every other color shares. By default they follow the
  * grey scale, which flips with the active theme ; `fixed-color` pins them to
  * the light theme's white and black instead.
  */