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

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

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

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

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

package/dist/components/action/link/link.d.ts

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

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,14 +35,22 @@ export const EunomiaLinkTagName = "eun-link";
  * prevent the new page from controlling the original one, without affecting
  * same-tab navigation.
  *
- * @slot [default] - The link content
+ * 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. Falls back to icon when empty
  * @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 {'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
+ * @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
  * @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
@@ -47,7 +69,7 @@ export const EunomiaLinkTagName = "eun-link";
  * @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 +86,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 +107,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 +180,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 +264,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 +281,29 @@ 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} size="18"></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 +314,24 @@ 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}
+        <slot @slotchange=${this.handleDefaultSlotChange}></slot>
         ${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 +350,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

@@ -65,6 +65,12 @@ const base = css `
     display: inline-flex;
     flex-shrink: 0;
   }
+  #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;
@@ -134,8 +140,87 @@ 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: pretty;
+    border-radius: var(--link-border-radius, var(--eun-border-radius-m, 8px));
+    transition:
+      color 0.3s ease-out,
+      background-color 0.3s ease-out,
+      text-decoration-color 0.3s 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 !important;
+  }
+  :host(:state(focus-visible)) #link.slotted-link {
+    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.
  */