@helixui/library 3.3.1 → 3.4.0-next.121

package/dist/shared/{hx-icon-button-CGNdQSFM.js → hx-icon-button-a6OpeQz5.js}

@@ -1,10 +1,11 @@
-import { css as f, html as c, nothing as u } from "lit";
-import { property as e, customElement as x } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { f as p } from "./forced-colors-CTEDFRGa.js";
-import { H as m } from "./helix-element-BNEYeiys.js";
-const v = f`
+import { css as p, html as u, nothing as d } from "lit";
+import { property as n, customElement as x } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { ifDefined as t } from "lit/directives/if-defined.js";
+import { f } from "./forced-colors-CTEDFRGa.js";
+import { m } from "./aria-delegation-Doq6RRUy.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
+const g = p`
   :host {
     display: inline-block;
   }
@@ -157,12 +158,37 @@ const v = f`
        multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */
   }
 
+  /* ─── Loading State ─── */
+
+  .button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .button__spinner {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    animation: hx-icon-button-spin var(--hx-duration-spinner, 750ms) linear infinite;
+  }
+
+  @keyframes hx-icon-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
   /* ─── Reduced Motion ─── */
 
   @media (prefers-reduced-motion: reduce) {
     .button {
       transition: none;
     }
+
+    .button__spinner {
+      animation: none;
+      opacity: var(--hx-opacity-muted, 0.6);
+    }
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -190,32 +216,37 @@ const v = f`
     :host([disabled]) {
       opacity: 1;
     }
+
+    .button--loading .button__spinner {
+      stroke: ButtonText;
+      forced-color-adjust: none;
+    }
   }
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, n, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? y(n, s) : n, h = t.length - 1, l; h >= 0; h--)
-    (l = t[h]) && (i = (a ? l(n, s, i) : l(i)) || i);
-  return a && i && g(n, s, i), i;
+var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, i = (r, a, h, s) => {
+  for (var e = s > 1 ? void 0 : s ? _(a, h) : a, c = r.length - 1, l; c >= 0; c--)
+    (l = r[c]) && (e = (s ? l(a, h, e) : l(e)) || e);
+  return s && e && y(a, h, e), e;
 };
-let r = class extends m {
+let o = class extends m(v) {
   constructor() {
-    super(...arguments), this.label = "", this.variant = "ghost", this.size = "md", this.type = "button", this.disabled = !1, this.href = void 0, this.name = void 0, this.value = void 0;
+    super(...arguments), this.label = "", this.variant = "ghost", this.size = "md", this.type = "button", this.disabled = !1, this.loading = !1, this.href = void 0, this.name = void 0, this.value = void 0;
   }
-  _onFormDisabled(t) {
-    this.disabled = t;
+  _onFormDisabled(r) {
+    this.disabled = r;
   }
   // ─── Event Handling ───
   /** @internal */
-  _handleClick(t) {
-    if (this.disabled) {
-      t.preventDefault(), t.stopPropagation();
+  _handleClick(r) {
+    if (this.disabled || this.loading) {
+      r.preventDefault(), r.stopPropagation();
       return;
     }
     this.dispatchEvent(
       new CustomEvent("hx-click", {
         bubbles: !0,
         composed: !0,
-        detail: { originalEvent: t }
+        detail: { originalEvent: r }
       })
     ), this.href || (this.type === "submit" && this._internals.form ? this._internals.form.requestSubmit() : this.type === "reset" && this._internals.form && this._internals.form.reset());
   }
@@ -229,76 +260,126 @@ let r = class extends m {
     return {
       button: !0,
       [`button--${this.variant}`]: !0,
-      [`button--${this.size}`]: !0
+      [`button--${this.size}`]: !0,
+      "button--loading": this.loading
     };
   }
   /** @internal */
   _iconSlot() {
-    return c`<span part="icon" class="icon"><slot></slot></span>`;
+    return u`<span part="icon" class="icon"><slot></slot></span>`;
+  }
+  /** @internal */
+  _renderSpinner() {
+    return u`
+      <svg
+        class="button__spinner"
+        part="spinner"
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <circle
+          class="button__spinner-track"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="3"
+          opacity="0.3"
+        />
+        <path
+          class="button__spinner-arc"
+          d="M12 2a10 10 0 0 1 10 10"
+          stroke="currentColor"
+          stroke-width="3"
+          stroke-linecap="round"
+        />
+      </svg>
+    `;
   }
   // ─── Render ───
   render() {
-    const t = this._normalizedLabel();
-    return t ? this.href !== void 0 ? c`
+    const r = this._normalizedLabel();
+    if (!r)
+      return d;
+    const a = this.getAttribute("data-aria-describedby"), h = this.getAttribute("data-aria-pressed"), s = this.getAttribute("data-aria-expanded"), e = this.getAttribute("data-aria-haspopup"), c = this.getAttribute("data-aria-controls"), l = this.getAttribute("data-aria-current");
+    return this.href !== void 0 ? u`
         <a
           part="button"
-          class=${d(this._classes())}
-          href=${b(this.disabled ? void 0 : this.href)}
-          aria-label=${t}
-          title=${t}
-          aria-disabled=${this.disabled ? "true" : u}
-          tabindex=${this.disabled ? "-1" : u}
+          class=${b(this._classes())}
+          href=${t(this.disabled || this.loading ? void 0 : this.href)}
+          aria-label=${r}
+          title=${r}
+          aria-disabled=${this.disabled ? "true" : d}
+          aria-busy=${this.loading ? "true" : d}
+          aria-pressed=${t(h ?? void 0)}
+          aria-expanded=${t(s ?? void 0)}
+          aria-haspopup=${t(e ?? void 0)}
+          aria-controls=${t(c ?? void 0)}
+          aria-describedby=${t(a ?? void 0)}
+          aria-current=${t(l ?? void 0)}
+          tabindex=${this.disabled || this.loading ? "-1" : d}
           @click=${this._handleClick}
         >
-          ${this._iconSlot()}
+          ${this.loading ? this._renderSpinner() : this._iconSlot()}
         </a>
-      ` : c`
+      ` : u`
       <button
         part="button"
-        class=${d(this._classes())}
+        class=${b(this._classes())}
         ?disabled=${this.disabled}
         type=${this.type}
-        aria-label=${t}
-        title=${t}
-        name=${b(this.name)}
-        value=${b(this.value)}
+        aria-label=${r}
+        title=${r}
+        aria-busy=${this.loading ? "true" : d}
+        aria-pressed=${t(h ?? void 0)}
+        aria-expanded=${t(s ?? void 0)}
+        aria-haspopup=${t(e ?? void 0)}
+        aria-controls=${t(c ?? void 0)}
+        aria-describedby=${t(a ?? void 0)}
+        aria-current=${t(l ?? void 0)}
+        name=${t(this.name)}
+        value=${t(this.value)}
         @click=${this._handleClick}
       >
-        ${this._iconSlot()}
+        ${this.loading ? this._renderSpinner() : this._iconSlot()}
       </button>
-    ` : u;
+    `;
   }
 };
-r.styles = [v, p];
-r.formAssociated = !0;
-o([
-  e({ type: String })
-], r.prototype, "label", 2);
-o([
-  e({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-o([
-  e({ type: String, reflect: !0, attribute: "hx-size" })
-], r.prototype, "size", 2);
-o([
-  e({ type: String })
-], r.prototype, "type", 2);
-o([
-  e({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-o([
-  e({ type: String })
-], r.prototype, "href", 2);
-o([
-  e({ type: String })
-], r.prototype, "name", 2);
-o([
-  e({ type: String })
-], r.prototype, "value", 2);
-r = o([
+o.styles = [g, f];
+o.formAssociated = !0;
+i([
+  n({ type: String })
+], o.prototype, "label", 2);
+i([
+  n({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+i([
+  n({ type: String, reflect: !0, attribute: "hx-size" })
+], o.prototype, "size", 2);
+i([
+  n({ type: String })
+], o.prototype, "type", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "loading", 2);
+i([
+  n({ type: String })
+], o.prototype, "href", 2);
+i([
+  n({ type: String })
+], o.prototype, "name", 2);
+i([
+  n({ type: String })
+], o.prototype, "value", 2);
+o = i([
   x("hx-icon-button")
-], r);
+], o);
 export {
-  r as H
+  o as H
 };
-//# sourceMappingURL=hx-icon-button-CGNdQSFM.js.map
+//# sourceMappingURL=hx-icon-button-a6OpeQz5.js.map

package/dist/shared/hx-icon-button-a6OpeQz5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-button-a6OpeQz5.js","sources":["../../src/components/hx-icon-button/hx-icon-button.styles.ts","../../src/components/hx-icon-button/hx-icon-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: var(--hx-opacity-disabled, 0.5);\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-icon-button-border-color, transparent);\n    border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-icon-button-bg, transparent);\n    color: var(--hx-icon-button-color, var(--hx-color-primary-500, #429797));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target for all sizes.\n     min-width/min-height override the explicit size tokens when they fall below\n     the 2.75rem (44px) threshold, preserving the visual icon size via font-size. */\n\n  .button--sm {\n    padding: var(--hx-space-1, 0.25rem);\n    width: var(--hx-icon-button-size, var(--hx-size-8, 2rem));\n    height: var(--hx-icon-button-size, var(--hx-size-8, 2rem));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2, 0.5rem);\n    width: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));\n    height: var(--hx-icon-button-size, var(--hx-size-10, 2.5rem));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3, 0.75rem);\n    width: var(--hx-icon-button-size, var(--hx-size-12, 3rem));\n    height: var(--hx-icon-button-size, var(--hx-size-12, 3rem));\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    font-size: var(--hx-font-size-lg, 1.125rem);\n  }\n\n  /* ─── Style Variants ─── */\n\n  .button--primary {\n    --hx-icon-button-bg: var(--hx-color-primary-500, #429797);\n    --hx-icon-button-color: var(--hx-color-text-on-primary, #ffffff);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  /* on-primary tokens are tuned for primary-500. primary-600 + on-primary\n     drops icon contrast to 3.07:1 — fails the 4.5:1 floor for meaningful\n     icons. Pin fg at neutral-0 (5.82:1 on primary-600). Mirrors hx-button. */\n  .button--primary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-600, #0f7078);\n    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .button--secondary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500, #429797);\n    --hx-icon-button-border-color: var(--hx-color-primary-500, #429797);\n  }\n\n  .button--secondary:hover {\n    --hx-icon-button-bg: var(--hx-color-primary-50, #ebf8f8);\n  }\n\n  .button--tertiary {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-text-strong, #202b39);\n    --hx-icon-button-border-color: var(--hx-color-border-strong, #66787b);\n  }\n\n  .button--tertiary:hover {\n    --hx-icon-button-bg: var(--hx-color-surface-sunken, #ebeee9);\n  }\n\n  .button--danger {\n    --hx-icon-button-bg: var(--hx-color-error-500, #e5493e);\n    --hx-icon-button-color: var(--hx-color-text-on-error, #ffffff);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  /* on-error tokens are tuned for error-500. error-600 + on-error drops\n     icon contrast to 2.25:1 — fails AA. Pin fg at neutral-0\n     (6.47:1 on error-600). Mirrors hx-button danger:hover. */\n  .button--danger:hover {\n    --hx-icon-button-bg: var(--hx-color-error-600, #c92a2a);\n    --hx-icon-button-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .button--ghost {\n    --hx-icon-button-bg: transparent;\n    --hx-icon-button-color: var(--hx-color-primary-500, #429797);\n    --hx-icon-button-border-color: transparent;\n  }\n\n  .button--ghost:hover {\n    --hx-icon-button-bg: var(--hx-color-surface-raised, #f5f8f3);\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    /* P1-02 fix: opacity is set only on :host([disabled]) above to prevent\n       multiplicative stacking (0.5 * 0.5 = 0.25). Do not add opacity here. */\n  }\n\n  /* ─── Loading State ─── */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button__spinner {\n    width: 1em;\n    height: 1em;\n    flex-shrink: 0;\n    animation: hx-icon-button-spin var(--hx-duration-spinner, 750ms) linear infinite;\n  }\n\n  @keyframes hx-icon-button-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n\n    .button__spinner {\n      animation: none;\n      opacity: var(--hx-opacity-muted, 0.6);\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .button {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      color: ButtonText;\n      border: 2px solid ButtonText;\n    }\n\n    .button:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .button[disabled] {\n      background-color: ButtonFace;\n      color: GrayText;\n      border-color: GrayText;\n      opacity: 1;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    .button--loading .button__spinner {\n      stroke: ButtonText;\n      forced-color-adjust: none;\n    }\n  }\n`;\n","import { html, nothing, type TemplateResult } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.js';\nimport { forcedColorsInteractive } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An icon-only button component for compact, accessible actions.\n * Renders a square button or anchor element containing a single icon.\n * The `label` property is required and provides the accessible name\n * via `aria-label` and a native tooltip via the `title` attribute.\n *\n * @summary Icon-only action button with full accessibility support.\n *\n * @tag hx-icon-button\n *\n * @slot - Icon element to display (hx-icon, svg, or img).\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when the button is clicked (not disabled).\n *\n * @csspart button - The native button or anchor element.\n * @csspart icon - The icon container span wrapping the default slot.\n * @csspart spinner - The loading spinner SVG element shown when `loading` is true.\n *\n * @cssprop [--hx-icon-button-bg=transparent] - Button background color.\n * @cssprop [--hx-icon-button-color=var(--hx-color-primary-500)] - Icon color.\n * @cssprop [--hx-icon-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-icon-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-icon-button-size] - Explicit width and height override for the button.\n * @cssprop [--hx-icon-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-filter-brightness-active] - CSS filter.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-size-8] - Size token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-size-10] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-size-12] - Size token.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-primary-600] - Color.\n * @cssprop [--hx-color-primary-50] - Color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-color-error-600] - Color.\n */\n@customElement('hx-icon-button')\nexport class HelixIconButton extends mixinDelegatesAria(HelixElement) {\n  static override styles = [helixIconButtonStyles, forcedColorsInteractive];\n\n  /**\n   * Accessible name for the button. Required. Rendered as `aria-label` and\n   * `title` on the underlying element. The component renders nothing when absent,\n   * and a console warning is emitted to alert developers during authoring.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Visual style variant of the button.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost' = 'ghost';\n\n  /**\n   * Size of the button.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * The type attribute for the underlying button element.\n   * Has no effect when `href` is set.\n   * @attr type\n   */\n  @property({ type: String })\n  type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Whether the button is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the button is in a loading state. Shows the spinner, prevents\n   * activation, and sets `aria-busy=\"true\"` on the inner element. Does NOT\n   * set the native `disabled` attribute (loading is transient; disabled is\n   * persistent, and AT announces them differently).\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * When set, renders an `<a>` element instead of a `<button>`.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Name submitted with form data. Only applicable when rendering as a button.\n   * @attr name\n   */\n  @property({ type: String })\n  name: string | undefined = undefined;\n\n  /**\n   * Value submitted with form data. Only applicable when rendering as a button.\n   * @attr value\n   */\n  @property({ type: String })\n  value: string | undefined = undefined;\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled || this.loading) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    /**\n     * Dispatched when the button is clicked.\n     * @event hx-click\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n\n    // Handle form submission/reset if form-associated and not in href/link mode\n    if (!this.href) {\n      if (this.type === 'submit' && this._internals.form) {\n        this._internals.form.requestSubmit();\n      } else if (this.type === 'reset' && this._internals.form) {\n        this._internals.form.reset();\n      }\n    }\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _normalizedLabel(): string {\n    return this.label.trim();\n  }\n\n  /** @internal */\n  private _classes() {\n    return {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n      'button--loading': this.loading,\n    };\n  }\n\n  /** @internal */\n  private _iconSlot() {\n    return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\n  }\n\n  /** @internal */\n  private _renderSpinner(): TemplateResult {\n    return html`\n      <svg\n        class=\"button__spinner\"\n        part=\"spinner\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n      >\n        <circle\n          class=\"button__spinner-track\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          opacity=\"0.3\"\n        />\n        <path\n          class=\"button__spinner-arc\"\n          d=\"M12 2a10 10 0 0 1 10 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const normalizedLabel = this._normalizedLabel();\n    if (!normalizedLabel) {\n      devWarn(\n        'hx-icon-button',\n        'The `label` property is required for accessibility. Render suppressed.',\n      );\n      return nothing;\n    }\n\n    // mixinDelegatesAria forwarding: consumer-set aria-* (aria-pressed,\n    // aria-expanded, aria-haspopup, aria-controls, aria-describedby) lands\n    // in data-aria-* on the host. Project them onto the inner element so the\n    // a11y tree sees them on the role-bearing native element.\n    const projectedDescribedBy = this.getAttribute('data-aria-describedby');\n    const projectedPressed = this.getAttribute('data-aria-pressed');\n    const projectedExpanded = this.getAttribute('data-aria-expanded');\n    const projectedHasPopup = this.getAttribute('data-aria-haspopup');\n    const projectedControls = this.getAttribute('data-aria-controls');\n    const projectedCurrent = this.getAttribute('data-aria-current');\n\n    if (this.href !== undefined) {\n      // P1-03 fix: disabled anchor must set tabindex=\"-1\" explicitly — an <a>\n      // without href is non-focusable by default in most browsers, but this is\n      // browser-dependent. Explicit tabindex=\"-1\" guarantees keyboard exclusion\n      // across all conforming browsers. Loading anchors are also tab-skipped\n      // for consistency with disabled.\n      // P1-07 note: aria-disabled IS required on the anchor branch because\n      // <a> elements have no native disabled attribute; aria-disabled is the\n      // only AT signal available.\n      return html`\n        <a\n          part=\"button\"\n          class=${classMap(this._classes())}\n          href=${ifDefined(this.disabled || this.loading ? undefined : this.href)}\n          aria-label=${normalizedLabel}\n          title=${normalizedLabel}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-busy=${this.loading ? 'true' : nothing}\n          aria-pressed=${ifDefined(projectedPressed ?? undefined)}\n          aria-expanded=${ifDefined(projectedExpanded ?? undefined)}\n          aria-haspopup=${ifDefined(projectedHasPopup ?? undefined)}\n          aria-controls=${ifDefined(projectedControls ?? undefined)}\n          aria-describedby=${ifDefined(projectedDescribedBy ?? undefined)}\n          aria-current=${ifDefined(projectedCurrent ?? undefined)}\n          tabindex=${this.disabled || this.loading ? '-1' : nothing}\n          @click=${this._handleClick}\n        >\n          ${this.loading ? this._renderSpinner() : this._iconSlot()}\n        </a>\n      `;\n    }\n\n    // P1-07 fix: aria-disabled is redundant on a natively disabled <button>.\n    // The native disabled attribute already exposes aria-disabled=\"true\"\n    // implicitly in the accessibility tree. Duplicate explicit aria-disabled\n    // creates ambiguity about design intent. Keep only native ?disabled.\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._classes())}\n        ?disabled=${this.disabled}\n        type=${this.type}\n        aria-label=${normalizedLabel}\n        title=${normalizedLabel}\n        aria-busy=${this.loading ? 'true' : nothing}\n        aria-pressed=${ifDefined(projectedPressed ?? undefined)}\n        aria-expanded=${ifDefined(projectedExpanded ?? undefined)}\n        aria-haspopup=${ifDefined(projectedHasPopup ?? undefined)}\n        aria-controls=${ifDefined(projectedControls ?? undefined)}\n        aria-describedby=${ifDefined(projectedDescribedBy ?? undefined)}\n        aria-current=${ifDefined(projectedCurrent ?? undefined)}\n        name=${ifDefined(this.name)}\n        value=${ifDefined(this.value)}\n        @click=${this._handleClick}\n      >\n        ${this.loading ? this._renderSpinner() : this._iconSlot()}\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-icon-button': HelixIconButton;\n  }\n  interface HTMLElementEventMap {\n    'hx-click': CustomEvent<{ originalEvent: MouseEvent }>;\n  }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","mixinDelegatesAria","HelixElement","disabled","e","html","normalizedLabel","nothing","projectedDescribedBy","projectedPressed","projectedExpanded","projectedHasPopup","projectedControls","projectedCurrent","classMap","ifDefined","forcedColorsInteractive","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-link-C-O6vq0Q.js → hx-link-CMnZRUtQ.js}

@@ -1,10 +1,11 @@
-import { css as x, nothing as f, svg as v, html as h } from "lit";
-import { property as i, customElement as u } from "lit/decorators.js";
+import { css as x, nothing as v, svg as f, html as h } from "lit";
+import { property as n, customElement as u } from "lit/decorators.js";
 import { classMap as p } from "lit/directives/class-map.js";
-import { ifDefined as a } from "lit/directives/if-defined.js";
-import { c as k } from "./forced-colors-CTEDFRGa.js";
-import { H as m } from "./helix-element-BNEYeiys.js";
-const y = x`
+import { ifDefined as r } from "lit/directives/if-defined.js";
+import { c as b } from "./forced-colors-CTEDFRGa.js";
+import { m as k } from "./aria-delegation-Doq6RRUy.js";
+import { H as y } from "./helix-element-BNEYeiys.js";
+const m = x`
   :host {
     display: inline;
   }
@@ -125,14 +126,14 @@ const y = x`
     border: 0;
   }
 `;
-var g = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (e, n, s, l) => {
-  for (var o = l > 1 ? void 0 : l ? b(n, s) : n, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (o = (l ? c(n, s, o) : c(o)) || o);
-  return l && o && g(n, s, o), o;
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, a, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? w(a, s) : a, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (t = (l ? c(a, s, t) : c(t)) || t);
+  return l && t && g(a, s, t), t;
 };
-let r = class extends m {
+let i = class extends k(y) {
   constructor() {
-    super(...arguments), this.href = void 0, this.target = void 0, this.variant = "default", this.disabled = !1, this.download = void 0, this.rel = void 0;
+    super(...arguments), this.href = void 0, this.target = void 0, this.variant = "default", this.disabled = !1, this.download = void 0, this.rel = void 0, this.externalLabel = "(opens in new tab)";
   }
   // --- Event Handling ---
   /** @internal Blocks Enter and Space activation on disabled span. */
@@ -161,7 +162,7 @@ let r = class extends m {
   }
   /** @internal */
   _renderExternalIcon() {
-    return this.target !== "_blank" ? f : h`
+    return this.target !== "_blank" ? v : h`
       <svg
         class="link__external-icon"
         part="external-icon"
@@ -173,9 +174,9 @@ let r = class extends m {
         stroke-linecap="round"
         stroke-linejoin="round"
       >
-        ${v`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />`}
+        ${f`<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />`}
       </svg>
-      <span class="sr-only">(opens in new tab)</span>
+      <span class="sr-only">${this.externalLabel}</span>
     `;
   }
   // --- Render ---
@@ -184,13 +185,17 @@ let r = class extends m {
       link: !0,
       [`link--${this.variant}`]: this.variant !== "default",
       "link--disabled": this.disabled
-    };
+    }, a = this.getAttribute("data-aria-label"), s = this.getAttribute("data-aria-labelledby"), l = this.getAttribute("data-aria-describedby"), t = this.getAttribute("data-aria-current");
     return this.disabled ? h`
         <span
           part="link"
           class=${p(e)}
           role="link"
           aria-disabled="true"
+          aria-label=${r(a ?? void 0)}
+          aria-labelledby=${r(s ?? void 0)}
+          aria-describedby=${r(l ?? void 0)}
+          aria-current=${r(t ?? void 0)}
           tabindex="0"
           @click=${this._handleClick}
           @keydown=${this._handleDisabledKeydown}
@@ -201,10 +206,14 @@ let r = class extends m {
       <a
         part="link"
         class=${p(e)}
-        href=${a(this.href)}
-        target=${a(this.target)}
-        rel=${a(this._computeRel())}
-        download=${a(this.download)}
+        href=${r(this.href)}
+        target=${r(this.target)}
+        rel=${r(this._computeRel())}
+        download=${r(this.download)}
+        aria-label=${r(a ?? void 0)}
+        aria-labelledby=${r(s ?? void 0)}
+        aria-describedby=${r(l ?? void 0)}
+        aria-current=${r(t ?? void 0)}
         @click=${this._handleClick}
       >
         <slot></slot>
@@ -213,29 +222,32 @@ let r = class extends m {
     `;
   }
 };
-r.styles = [y, k];
-t([
-  i({ type: String })
-], r.prototype, "href", 2);
-t([
-  i({ type: String })
-], r.prototype, "target", 2);
-t([
-  i({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-t([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-t([
-  i({ type: String })
-], r.prototype, "download", 2);
-t([
-  i({ type: String })
-], r.prototype, "rel", 2);
-r = t([
+i.styles = [m, b];
+o([
+  n({ type: String })
+], i.prototype, "href", 2);
+o([
+  n({ type: String })
+], i.prototype, "target", 2);
+o([
+  n({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+o([
+  n({ type: String })
+], i.prototype, "download", 2);
+o([
+  n({ type: String })
+], i.prototype, "rel", 2);
+o([
+  n({ type: String, attribute: "external-label" })
+], i.prototype, "externalLabel", 2);
+i = o([
   u("hx-link")
-], r);
+], i);
 export {
-  r as H
+  i as H
 };
-//# sourceMappingURL=hx-link-C-O6vq0Q.js.map
+//# sourceMappingURL=hx-link-CMnZRUtQ.js.map

package/dist/shared/hx-link-CMnZRUtQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-link-CMnZRUtQ.js","sources":["../../src/components/hx-link/hx-link.styles.ts","../../src/components/hx-link/hx-link.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixLinkStyles = css`\n  :host {\n    display: inline;\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  /* --- Base Link --- */\n\n  .link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    color: var(--hx-link-color, var(--hx-color-primary-600, #0f7078));\n    font-family: var(--hx-link-font-family, var(--hx-font-family-sans, inherit));\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: var(--hx-link-text-decoration, underline);\n    text-underline-offset: var(--hx-link-underline-offset, 2px);\n    cursor: pointer;\n    outline: 0;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      text-decoration-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .link:hover {\n    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));\n    text-decoration: var(--hx-link-text-decoration-hover, underline);\n  }\n\n  .link:active {\n    color: var(--hx-link-color-active, var(--hx-color-primary-800, #07494a));\n  }\n\n  .link:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* --- Variant: subtle --- */\n\n  .link--subtle {\n    color: var(--hx-link-color-subtle, var(--hx-color-text-secondary, #313e4b));\n    text-decoration: none;\n  }\n\n  .link--subtle:hover {\n    color: var(--hx-link-color-hover, var(--hx-color-primary-700, #0f6363));\n    text-decoration: underline;\n  }\n\n  /* --- Variant: danger --- */\n\n  .link--danger {\n    color: var(--hx-link-color-danger, var(--hx-color-error-text, #c92a2a));\n  }\n\n  .link--danger:hover {\n    color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #a21312));\n  }\n\n  /* --- Disabled --- */\n\n  .link--disabled {\n    color: var(--hx-link-color-disabled, var(--hx-color-text-disabled, #8e9c98));\n    text-decoration: none;\n    cursor: not-allowed;\n  }\n\n  /* --- External link icon --- */\n\n  .link__external-icon {\n    display: inline-flex;\n    width: 0.75em;\n    height: 0.75em;\n    flex-shrink: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .link {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .link {\n      forced-color-adjust: none;\n      color: LinkText;\n    }\n\n    .link:focus-visible {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .link--disabled {\n      color: GrayText;\n    }\n  }\n\n  /* --- Visually hidden (sr-only) --- */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { html, nothing, svg } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { helixLinkStyles } from './hx-link.styles.js';\nimport { forcedColorsLink } from '../../styles/forced-colors.js';\n\n/**\n * Variant options for the link component.\n */\nexport type LinkVariant = 'default' | 'subtle' | 'danger';\n\n/**\n * A semantic hyperlink component with accessibility-first design.\n * Renders a native `<a>` element for enabled state and a `<span>` for\n * disabled state with full keyboard and screen reader support.\n *\n * @summary Accessible hyperlink with external-link detection, disabled state,\n *   and download support.\n *\n * @tag hx-link\n *\n * @slot - Default slot for link label text or content.\n *\n * @fires {CustomEvent<{originalEvent: MouseEvent}>} hx-click - Dispatched when\n *   the link is clicked and is not disabled.\n *\n * @csspart link - The inner anchor or span element.\n * @csspart external-icon - The external link icon SVG (when target=\"_blank\").\n *\n * @cssprop [--hx-link-color=var(--hx-color-primary-500)] - Default link color.\n * @cssprop [--hx-link-color-hover=var(--hx-color-primary-700)] - Hover color.\n * @cssprop [--hx-link-color-active=var(--hx-color-primary-800)] - Active color.\n * @cssprop [--hx-link-color-disabled=var(--hx-color-neutral-400)] - Disabled color.\n * @cssprop [--hx-link-color-subtle=var(--hx-color-neutral-600)] - Subtle variant color.\n * @cssprop [--hx-link-color-danger=var(--hx-color-error-text)] - Danger variant color.\n * @cssprop [--hx-link-color-danger-hover=var(--hx-color-error-700)] - Danger variant hover color.\n * @cssprop [--hx-link-font-family=var(--hx-font-family-sans)] - Link font family.\n * @cssprop [--hx-link-text-decoration=underline] - Link text decoration.\n * @cssprop [--hx-link-text-decoration-hover=underline] - Hover text decoration.\n * @cssprop [--hx-link-underline-offset=2px] - Text underline offset.\n * @cssprop [--hx-link-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n *\n * @note The `:visited` pseudo-class does not work inside Shadow DOM due to\n *   browser privacy restrictions. This is a known platform limitation.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-primary-700] - Color.\n * @cssprop [--hx-color-primary-800] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-color-error-700] - Color.\n * @cssprop [--hx-color-neutral-400] - Color.\n */\n@customElement('hx-link')\nexport class HelixLink extends mixinDelegatesAria(HelixElement) {\n  static override styles = [helixLinkStyles, forcedColorsLink];\n\n  /**\n   * The URL the link points to.\n   * @attr href\n   */\n  @property({ type: String })\n  href: string | undefined = undefined;\n\n  /**\n   * Where to display the linked URL (_self, _blank, etc.).\n   * When set to \"_blank\", automatically adds rel=\"noopener noreferrer\"\n   * and shows an external-link indicator.\n   * @attr target\n   */\n  @property({ type: String })\n  target: string | undefined = undefined;\n\n  /**\n   * Visual style variant of the link.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'subtle' | 'danger' = 'default';\n\n  /**\n   * Whether the link is disabled. Renders a span instead of an anchor.\n   * The disabled span is keyboard-focusable (tabindex=\"0\") and announces\n   * as a disabled link to screen readers.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Prompts the user to download the linked URL. When set to a string,\n   * the value is used as the suggested filename.\n   * @attr download\n   */\n  @property({ type: String })\n  download: string | undefined = undefined;\n\n  /**\n   * Relationship between the current document and the linked URL.\n   * Automatically set to \"noopener noreferrer\" when target=\"_blank\".\n   * @attr rel\n   */\n  @property({ type: String })\n  rel: string | undefined = undefined;\n\n  /**\n   * Localised announcement text appended (visually hidden) to the link's\n   * accessible name when `target=\"_blank\"`. Defaults to English. Override\n   * for i18n contexts so AT users hear the new-tab notice in their locale.\n   * @attr external-label\n   */\n  @property({ type: String, attribute: 'external-label' })\n  externalLabel: string = '(opens in new tab)';\n\n  // --- Event Handling ---\n\n  /** @internal Blocks Enter and Space activation on disabled span. */\n  private _handleDisabledKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n    }\n  }\n\n  /** @internal */\n  private _handleClick(e: MouseEvent): void {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<{ originalEvent: MouseEvent }>('hx-click', {\n        bubbles: true,\n        composed: true,\n        detail: { originalEvent: e },\n      }),\n    );\n  }\n\n  // --- Render Helpers ---\n\n  /** @internal */\n  private _computeRel(): string | undefined {\n    if (this.rel) return this.rel;\n    if (this.target === '_blank') return 'noopener noreferrer';\n    return undefined;\n  }\n\n  /** @internal */\n  private _renderExternalIcon() {\n    if (this.target !== '_blank') return nothing;\n\n    return html`\n      <svg\n        class=\"link__external-icon\"\n        part=\"external-icon\"\n        aria-hidden=\"true\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        ${svg`<path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" /><polyline points=\"15 3 21 3 21 9\" /><line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\" />`}\n      </svg>\n      <span class=\"sr-only\">${this.externalLabel}</span>\n    `;\n  }\n\n  // --- Render ---\n\n  override render() {\n    const classes = {\n      link: true,\n      [`link--${this.variant}`]: this.variant !== 'default',\n      'link--disabled': this.disabled,\n    };\n\n    // mixinDelegatesAria forwarding: consumer-set aria-* land in\n    // data-aria-* on the host. Project them onto the inner role-bearing\n    // element (the <a> or the <span role=\"link\">) so AT walks them\n    // correctly without double-announcement on the host.\n    const projectedLabel = this.getAttribute('data-aria-label');\n    const projectedLabelledBy = this.getAttribute('data-aria-labelledby');\n    const projectedDescribedBy = this.getAttribute('data-aria-describedby');\n    const projectedCurrent = this.getAttribute('data-aria-current');\n\n    if (this.disabled) {\n      return html`\n        <span\n          part=\"link\"\n          class=${classMap(classes)}\n          role=\"link\"\n          aria-disabled=\"true\"\n          aria-label=${ifDefined(projectedLabel ?? undefined)}\n          aria-labelledby=${ifDefined(projectedLabelledBy ?? undefined)}\n          aria-describedby=${ifDefined(projectedDescribedBy ?? undefined)}\n          aria-current=${ifDefined(projectedCurrent ?? undefined)}\n          tabindex=\"0\"\n          @click=${this._handleClick}\n          @keydown=${this._handleDisabledKeydown}\n        >\n          <slot></slot>\n        </span>\n      `;\n    }\n\n    return html`\n      <a\n        part=\"link\"\n        class=${classMap(classes)}\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        rel=${ifDefined(this._computeRel())}\n        download=${ifDefined(this.download)}\n        aria-label=${ifDefined(projectedLabel ?? undefined)}\n        aria-labelledby=${ifDefined(projectedLabelledBy ?? undefined)}\n        aria-describedby=${ifDefined(projectedDescribedBy ?? undefined)}\n        aria-current=${ifDefined(projectedCurrent ?? undefined)}\n        @click=${this._handleClick}\n      >\n        <slot></slot>\n        ${this._renderExternalIcon()}\n      </a>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-link': HelixLink;\n  }\n}\n"],"names":["helixLinkStyles","css","HelixLink","mixinDelegatesAria","HelixElement","nothing","html","svg","classes","projectedLabel","projectedLabelledBy","projectedDescribedBy","projectedCurrent","classMap","ifDefined","forcedColorsLink","__decorateClass","property","customElement"],"mappings":"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"}