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

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,13 +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
@@ -25,15 +35,19 @@ export declare const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-color-focus] - Sets the color of the link on focus
  * @cssprop [--link-color-visited] - Sets the color of a visited link
  * @cssprop [--link-color-visited-hover] - Sets the color of a visited link on hover
+ * @cssprop [--link-color-current] - Sets the color of the current page link, kept on hover, focus and visited states
+ * @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-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-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
  */
-export declare class EunomiaLink extends LitElement {
+export declare class EunomiaLink extends EunomiaLink_base {
+    #private;
     /**
      * Styles to import to the component.
      *
@@ -56,17 +70,89 @@ 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";
+    /**
+     * Exposes the `focus-visible` custom state (see {@link handleFocus}).
+     * Absent where `ElementInternals` isn't available, such as server-side.
+     * @private
+     */
+    private readonly internals?;
+    /**
+     * The element's custom state set, typed locally since the bundled DOM
+     * typings don't declare `ElementInternals.states` yet.
+     * @private
+     */
+    private get states();
+    constructor();
+    /**
+     * Marks the link as the current page (for example the active item of a
+     * navigation) : renders `aria-current="page"` on the inner anchor and
+     * keeps `--link-color-current` in every state.
+     * @default false
+     */
+    current: boolean;
+    /**
+     * React's server renderer writes a custom element's camelCase prop as an
+     * attribute of that exact name, lowercased (`visitedStyle="off"` becomes
+     * `visitedstyle="off"`), which never matches `visited-style`. Without this
+     * alias the link would start in `auto` (so, visited) and only switch once
+     * hydration sets the property, flashing the visited color on first load.
+     * @internal
+     */
+    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.
@@ -81,6 +167,22 @@ export declare class EunomiaLink extends LitElement {
      * @private
      */
     private handleIconSlotChange;
+    /**
+     * Mirrors the inner anchor's real `:focus-visible` state onto the host as
+     * the `focus-visible` custom state, styled from outside with
+     * `eun-link:state(focus-visible)`. The anchor is shadow-internal, so the
+     * host's own `:focus-visible` never matches, and a plain `focus` listener
+     * can't stand in for it (a mouse click focuses the anchor too). Checking
+     * `:focus-visible` on the anchor itself keeps mouse focus out.
+     * @param event the anchor's focus event.
+     * @private
+     */
+    private handleFocus;
+    /**
+     * Clears the `focus-visible` custom state once the anchor loses focus.
+     * @private
+     */
+    private handleBlur;
     /**
      * Gives an SPA router (Next.js, Angular, React Router, Vue Router, ...) a
      * chance to intercept the click and perform client-side navigation instead
@@ -91,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
@@ -102,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,13 +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
@@ -35,34 +58,97 @@ export const EunomiaLinkTagName = "eun-link";
  * @cssprop [--link-color-focus] - Sets the color of the link on focus
  * @cssprop [--link-color-visited] - Sets the color of a visited link
  * @cssprop [--link-color-visited-hover] - Sets the color of a visited link on hover
+ * @cssprop [--link-color-current] - Sets the color of the current page link, kept on hover, focus and visited states
+ * @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-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-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.
+     * @private
+     */
+    get states() {
+        return this.internals?.states;
+    }
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The native `target` attribute forwarded to the link.
          * @default _self
          */
         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";
+        /**
+         * Marks the link as the current page (for example the active item of a
+         * navigation) : renders `aria-current="page"` on the inner anchor and
+         * keeps `--link-color-current` in every state.
+         * @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
@@ -72,6 +158,99 @@ let EunomiaLink = class EunomiaLink extends LitElement {
         this.handleIconSlotChange = () => {
             this.requestUpdate();
         };
+        if (typeof this.attachInternals === "function") {
+            this.internals = this.attachInternals();
+        }
+    }
+    /**
+     * React's server renderer writes a custom element's camelCase prop as an
+     * attribute of that exact name, lowercased (`visitedStyle="off"` becomes
+     * `visitedstyle="off"`), which never matches `visited-style`. Without this
+     * alias the link would start in `auto` (so, visited) and only switch once
+     * hydration sets the property, flashing the visited color on first load.
+     * @internal
+     */
+    static get observedAttributes() {
+        return [...super.observedAttributes, "visitedstyle"];
+    }
+    attributeChangedCallback(name, oldValue, value) {
+        if (name === "visitedstyle") {
+            this.visitedStyle = (value ?? "auto");
+            return;
+        }
+        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
+     * `eun-link:state(focus-visible)`. The anchor is shadow-internal, so the
+     * host's own `:focus-visible` never matches, and a plain `focus` listener
+     * can't stand in for it (a mouse click focuses the anchor too). Checking
+     * `:focus-visible` on the anchor itself keeps mouse focus out.
+     * @param event the anchor's focus event.
+     * @private
+     */
+    handleFocus(event) {
+        if (event.currentTarget.matches(":focus-visible")) {
+            this.states?.add("focus-visible");
+        }
+    }
+    /**
+     * Clears the `focus-visible` custom state once the anchor loses focus.
+     * @private
+     */
+    handleBlur() {
+        this.states?.delete("focus-visible");
     }
     /**
      * Gives an SPA router (Next.js, Angular, React Router, Vue Router, ...) a
@@ -85,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
@@ -92,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"
@@ -99,29 +311,27 @@ let EunomiaLink = class EunomiaLink extends LitElement {
         class=${classMap({ "has-icon": hasIcon })}
         href=${ifDefined(this.href)}
         target=${this.target}
+        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.
  *
@@ -140,11 +350,25 @@ __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 })
+], EunomiaLink.prototype, "current", void 0);
 __decorate([
     queryAssignedElements({ slot: "icon" })
 ], EunomiaLink.prototype, "iconSlotEls", void 0);