npm - @helixui/library - Versions diffs - 1.1.2 → 2.0.0 - Mend

@helixui/library 1.1.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (638) hide show

package/dist/shared/{hx-grid-gEjuF0cR.js → hx-grid-DE8KM5Gf.js} RENAMED Viewed

@@ -1,14 +1,14 @@
-import { css as m, LitElement as c, html as d } from "lit";
+import { css as h, LitElement as c, html as d } from "lit";
 import { property as s, customElement as g } from "lit/decorators.js";
 import { styleMap as f } from "lit/directives/style-map.js";
 import { tokenStyles as y } from "@helixui/tokens/lit";
-const v = m`
+const v = h`
   :host {
     display: block;
     box-sizing: border-box;
     width: 100%;
   }
-`, x = m`
+`, x = h`
   :host {
     display: block;
     min-width: 0;
@@ -20,7 +20,7 @@ var G = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (t, l, a
     (u = t[n]) && (o = (p ? u(l, a, o) : u(o)) || o);
   return p && o && G(l, a, o), o;
 };
-const h = {
+const m = {
   none: "0",
   xs: "var(--hx-space-1, 0.25rem)",
   sm: "var(--hx-space-2, 0.5rem)",
@@ -39,7 +39,7 @@ let r = class extends c {
   }
   /** @internal */
   _resolveGap(t) {
-    return h[t] ?? h.md;
+    return m[t] ?? m.md;
   }
   /** @internal */
   _computedRowGap() {
@@ -92,7 +92,7 @@ r = e([
 ], r);
 let i = class extends c {
   updated(t) {
-    (t.has("column") || t.has("row") || t.has("span")) && this._applyHostGridStyles();
+    super.updated(t), (t.has("column") || t.has("row") || t.has("span")) && this._applyHostGridStyles();
   }
   connectedCallback() {
     super.connectedCallback(), this._applyHostGridStyles();
@@ -122,4 +122,4 @@ export {
   r as H,
   i as a
 };
-//# sourceMappingURL=hx-grid-gEjuF0cR.js.map
+//# sourceMappingURL=hx-grid-DE8KM5Gf.js.map

package/dist/shared/hx-grid-DE8KM5Gf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-grid-DE8KM5Gf.js","sources":["../../src/components/hx-grid/hx-grid.styles.ts","../../src/components/hx-grid/hx-grid.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixGridStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n width: 100%;\n }\n`;\n\nexport const helixGridItemStyles = css`\n :host {\n display: block;\n min-width: 0;\n min-height: 0;\n }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixGridStyles, helixGridItemStyles } from './hx-grid.styles.js';\n\ntype GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nconst GAP_TOKENS: Record<GapSize, string> = {\n none: '0',\n xs: 'var(--hx-space-1, 0.25rem)',\n sm: 'var(--hx-space-2, 0.5rem)',\n md: 'var(--hx-space-4, 1rem)',\n lg: 'var(--hx-space-6, 1.5rem)',\n xl: 'var(--hx-space-8, 2rem)',\n};\n\n/**\n * A CSS Grid layout wrapper with design-token-based column and gap system.\n *\n * @summary CSS Grid layout primitive for building responsive grid layouts.\n *\n * @tag hx-grid\n *\n * @slot - Default slot for grid content (use `hx-grid-item` for precise placement).\n *\n * @csspart base - The grid container element.\n *\n * @cssprop [--hx-grid-columns] - Override the computed grid-template-columns.\n * @cssprop [--hx-grid-gap] - Override the computed gap.\n * @cssprop [--hx-grid-row-gap] - Override the computed row-gap.\n * @cssprop [--hx-grid-column-gap] - Override the computed column-gap.\n */\n@customElement('hx-grid')\nexport class HelixGrid extends LitElement {\n static override styles = [tokenStyles, helixGridStyles];\n\n /**\n * Number of equal columns (`repeat(N, 1fr)`) or a CSS grid-template-columns string.\n * @attr columns\n */\n @property({ reflect: true })\n columns: number | string = 1;\n\n /**\n * Gap size applied to both row and column gaps.\n * @attr gap\n */\n @property({ reflect: true })\n gap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Row gap override. When set, takes precedence over `gap` for row spacing.\n * @attr row-gap\n */\n @property({ attribute: 'row-gap', reflect: true })\n rowGap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;\n\n /**\n * Column gap override. When set, takes precedence over `gap` for column spacing.\n * @attr column-gap\n */\n @property({ attribute: 'column-gap', reflect: true })\n columnGap: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;\n\n /**\n * Aligns grid items along the block axis (align-items).\n * @attr align\n */\n @property({ reflect: true })\n align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n /**\n * Justifies grid items along the inline axis (justify-items).\n * @attr justify\n */\n @property({ reflect: true })\n justify: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n /** @internal */\n private _gridTemplateColumns(): string {\n const cols = this.columns;\n if (typeof cols === 'number' || /^\\d+$/.test(String(cols))) {\n return `var(--hx-grid-columns, repeat(${cols}, 1fr))`;\n }\n return `var(--hx-grid-columns, ${cols})`;\n }\n\n /** @internal */\n private _resolveGap(size: GapSize): string {\n return GAP_TOKENS[size] ?? GAP_TOKENS.md;\n }\n\n /** @internal */\n private _computedRowGap(): string {\n if (this.rowGap) {\n return `var(--hx-grid-row-gap, ${this._resolveGap(this.rowGap)})`;\n }\n return `var(--hx-grid-row-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;\n }\n\n /** @internal */\n private _computedColumnGap(): string {\n if (this.columnGap) {\n return `var(--hx-grid-column-gap, ${this._resolveGap(this.columnGap)})`;\n }\n return `var(--hx-grid-column-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;\n }\n\n /** @internal */\n private _baseStyleMap(): Record<string, string> {\n return {\n display: 'grid',\n 'grid-template-columns': this._gridTemplateColumns(),\n 'row-gap': this._computedRowGap(),\n 'column-gap': this._computedColumnGap(),\n 'align-items': this.align,\n 'justify-items': this.justify,\n };\n }\n\n override render() {\n return html`\n <div part=\"base\" role=\"presentation\" style=${styleMap(this._baseStyleMap())}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/**\n * Optional companion element for precise grid item placement.\n * Applies grid-column and grid-row directly to the host element\n * so it participates correctly in the parent CSS grid layout.\n *\n * @summary Grid item with explicit column/row placement.\n *\n * @tag hx-grid-item\n *\n * @slot - Default slot for item content.\n */\n@customElement('hx-grid-item')\nexport class HelixGridItem extends LitElement {\n static override styles = [tokenStyles, helixGridItemStyles];\n\n /**\n * CSS grid-column value (e.g., \"1 / 3\", \"span 2\").\n * @attr column\n */\n @property({ reflect: true })\n column: string | undefined;\n\n /**\n * CSS grid-row value (e.g., \"1 / 2\").\n * @attr row\n */\n @property({ reflect: true })\n row: string | undefined;\n\n /**\n * Column span shorthand — equivalent to setting `column: \"span N\"`.\n * @attr span\n */\n @property({ type: Number, reflect: true })\n span: number | undefined;\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('column') || changed.has('row') || changed.has('span')) {\n this._applyHostGridStyles();\n }\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._applyHostGridStyles();\n }\n\n /** @internal */\n private _applyHostGridStyles(): void {\n if (this.column) {\n this.style.gridColumn = this.column;\n } else if (this.span !== undefined) {\n this.style.gridColumn = `span ${this.span}`;\n } else {\n this.style.gridColumn = '';\n }\n if (this.row) {\n this.style.gridRow = this.row;\n } else {\n this.style.gridRow = '';\n }\n }\n\n override render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-grid': HelixGrid;\n 'hx-grid-item': HelixGridItem;\n }\n}\n"],"names":["helixGridStyles","css","helixGridItemStyles","GAP_TOKENS","HelixGrid","LitElement","cols","size","html","styleMap","tokenStyles","__decorateClass","property","customElement","HelixGridItem","changed"],"mappings":"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"}

package/dist/shared/{hx-icon-button-DzH_bRtC.js → hx-icon-button-Et9wq79n.js} RENAMED Viewed

@@ -169,13 +169,13 @@ let r = class extends p {
   get form() {
     return this._internals.form;
   }
-  /** Called by the browser when the form is reset. No value to reset. */
+  /** @internal */
   formResetCallback() {
   }
-  /** Called by the browser to restore form state. No value to restore. */
+  /** @internal */
   formStateRestoreCallback(t, n) {
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(t) {
     this.disabled = t;
   }
@@ -276,4 +276,4 @@ r = o([
 export {
   r as H
 };
-//# sourceMappingURL=hx-icon-button-DzH_bRtC.js.map
+//# sourceMappingURL=hx-icon-button-Et9wq79n.js.map

package/dist/shared/{hx-icon-button-DzH_bRtC.js.map → hx-icon-button-Et9wq79n.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-icon-button-DzH_bRtC.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);\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-icon-button-bg);\n color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\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) solid\n var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\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);\n width: var(--hx-icon-button-size, var(--hx-size-8));\n height: var(--hx-icon-button-size, var(--hx-size-8));\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);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n width: var(--hx-icon-button-size, var(--hx-size-10));\n height: var(--hx-icon-button-size, var(--hx-size-10));\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);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n width: var(--hx-icon-button-size, var(--hx-size-12));\n height: var(--hx-icon-button-size, var(--hx-size-12));\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);\n }\n\n / ─── Style Variants ─── /\n\n .button--primary {\n --hx-icon-button-bg: var(--hx-color-primary-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--primary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-600);\n }\n\n .button--secondary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-50);\n }\n\n .button--tertiary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-neutral-700);\n --hx-icon-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--tertiary:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n .button--danger {\n --hx-icon-button-bg: var(--hx-color-error-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-icon-button-bg: var(--hx-color-error-600);\n }\n\n .button--ghost {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\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 / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.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 \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 /\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n static override styles = [tokenStyles, helixIconButtonStyles];\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 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 via ElementInternals ───\n\n static formAssociated = true;\n\n /* @internal /\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /* @internal /\n this._internals = this.attachInternals();\n }\n\n /* Returns the associated form element, if any. /\n get form(): HTMLFormElement \| null {\n return this._internals.form;\n }\n\n /* Called by the browser when the form is reset. No value to reset. /\n formResetCallback(): void {\n // hx-icon-button does not submit a value; no state to reset.\n }\n\n /* Called by the browser to restore form state. No value to restore. /\n formStateRestoreCallback(\n _state: string \| File \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n // hx-icon-button does not submit a value; no state to restore.\n }\n\n /* Called when a parent fieldset is disabled/enabled. /\n formDisabledCallback(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) {\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 };\n }\n\n /* @internal */\n private _iconSlot() {\n return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\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 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.\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 ? undefined : this.href)}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${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 name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon-button': HelixIconButton;\n }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","_state","_mode","disabled","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
1	+ {"version":3,"file":"hx-icon-button-Et9wq79n.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);\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: var(--hx-border-width-thin) solid var(--hx-icon-button-border-color);\n border-radius: var(--hx-icon-button-border-radius, var(--hx-border-radius-md));\n background-color: var(--hx-icon-button-bg);\n color: var(--hx-icon-button-color, var(--hx-color-primary-500));\n cursor: pointer;\n transition:\n background-color var(--hx-transition-fast),\n color var(--hx-transition-fast),\n border-color var(--hx-transition-fast),\n box-shadow var(--hx-transition-fast);\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) solid\n var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color));\n outline-offset: var(--hx-focus-ring-offset);\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);\n width: var(--hx-icon-button-size, var(--hx-size-8));\n height: var(--hx-icon-button-size, var(--hx-size-8));\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);\n }\n\n .button--md {\n padding: var(--hx-space-2);\n width: var(--hx-icon-button-size, var(--hx-size-10));\n height: var(--hx-icon-button-size, var(--hx-size-10));\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);\n }\n\n .button--lg {\n padding: var(--hx-space-3);\n width: var(--hx-icon-button-size, var(--hx-size-12));\n height: var(--hx-icon-button-size, var(--hx-size-12));\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);\n }\n\n / ─── Style Variants ─── /\n\n .button--primary {\n --hx-icon-button-bg: var(--hx-color-primary-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--primary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-600);\n }\n\n .button--secondary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: var(--hx-color-primary-500);\n }\n\n .button--secondary:hover {\n --hx-icon-button-bg: var(--hx-color-primary-50);\n }\n\n .button--tertiary {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-neutral-700);\n --hx-icon-button-border-color: var(--hx-color-neutral-300);\n }\n\n .button--tertiary:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\n }\n\n .button--danger {\n --hx-icon-button-bg: var(--hx-color-error-500);\n --hx-icon-button-color: var(--hx-color-neutral-0);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--danger:hover {\n --hx-icon-button-bg: var(--hx-color-error-600);\n }\n\n .button--ghost {\n --hx-icon-button-bg: transparent;\n --hx-icon-button-color: var(--hx-color-primary-500);\n --hx-icon-button-border-color: transparent;\n }\n\n .button--ghost:hover {\n --hx-icon-button-bg: var(--hx-color-neutral-100);\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 / ─── Reduced Motion ─── /\n\n @media (prefers-reduced-motion: reduce) {\n .button {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconButtonStyles } from './hx-icon-button.styles.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 \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 /\n@customElement('hx-icon-button')\nexport class HelixIconButton extends LitElement {\n static override styles = [tokenStyles, helixIconButtonStyles];\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 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 via ElementInternals ───\n\n /* @internal /\n static formAssociated = true;\n\n /* @internal /\n private _internals: ElementInternals;\n\n constructor() {\n super();\n /* @internal /\n this._internals = this.attachInternals();\n }\n\n /* Returns the associated form element, if any. /\n get form(): HTMLFormElement \| null {\n return this._internals.form;\n }\n\n /* @internal /\n formResetCallback(): void {\n // hx-icon-button does not submit a value; no state to reset.\n }\n\n /* @internal /\n formStateRestoreCallback(\n _state: string \| File \| FormData \| null,\n _mode: 'restore' \| 'autocomplete',\n ): void {\n // hx-icon-button does not submit a value; no state to restore.\n }\n\n /* @internal /\n formDisabledCallback(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) {\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 };\n }\n\n /* @internal */\n private _iconSlot() {\n return html`<span part=\"icon\" class=\"icon\"><slot></slot></span>`;\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 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.\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 ? undefined : this.href)}\n aria-label=${normalizedLabel}\n title=${normalizedLabel}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : nothing}\n @click=${this._handleClick}\n >\n ${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 name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n @click=${this._handleClick}\n >\n ${this._iconSlot()}\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon-button': HelixIconButton;\n }\n}\n"],"names":["helixIconButtonStyles","css","HelixIconButton","LitElement","_state","_mode","disabled","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-icon-CP6OnLoM.js → hx-icon-dYvrzvsO.js} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { css as _, LitElement as S, nothing as n, html as m } from "lit";
-import { property as f, state as u, customElement as x } from "lit/decorators.js";
+import { property as f, state as g, customElement as x } from "lit/decorators.js";
 import { unsafeHTML as y } from "lit/directives/unsafe-html.js";
 import { tokenStyles as b } from "@helixui/tokens/lit";
 const w = _`
@@ -87,7 +87,7 @@ let s = class extends S {
   }
   // ─── Lifecycle ───
   updated(e) {
-    e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
+    super.updated(e), e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
   }
   // ─── Inline SVG Fetch ───
   /** @internal */
@@ -148,8 +148,8 @@ let s = class extends S {
           return;
         }
         if (a.has(d)) {
-          const g = p.value.replace(/\s/g, "").toLowerCase();
-          (g.startsWith("javascript:") || g.startsWith("data:")) && l.removeAttribute(p.name);
+          const u = p.value.replace(/\s/g, "").toLowerCase();
+          (u.startsWith("javascript:") || u.startsWith("data:")) && l.removeAttribute(p.name);
         }
       });
     }), c.forEach((l) => t.removeAttribute(l)), t.setAttribute("focusable", "false"), t.outerHTML;
@@ -225,10 +225,10 @@ h([
   f({ type: String })
 ], s.prototype, "label", 2);
 h([
-  u()
+  g()
 ], s.prototype, "_inlineSvg", 2);
 h([
-  u()
+  g()
 ], s.prototype, "_fetchedSrc", 2);
 s = h([
   x("hx-icon")
@@ -237,4 +237,4 @@ const v = /* @__PURE__ */ new Map();
 export {
   s as H
 };
-//# sourceMappingURL=hx-icon-CP6OnLoM.js.map
+//# sourceMappingURL=hx-icon-dYvrzvsO.js.map

package/dist/shared/hx-icon-dYvrzvsO.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-icon-dYvrzvsO.js","sources":["../../src/components/hx-icon/hx-icon.styles.ts","../../src/components/hx-icon/hx-icon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixIconStyles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* vertical-align: middle ensures the icon aligns to the visual centre of\n adjacent inline text rather than the text baseline. */\n vertical-align: middle;\n /* overflow: hidden prevents malformed or oversized icons from painting\n outside the component boundary. The inner SVG may still set\n overflow: visible for its own viewBox content. */\n overflow: hidden;\n width: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n height: var(--hx-icon-size, var(--hx-size-6, 1.5rem));\n color: var(--hx-icon-color, currentColor);\n flex-shrink: 0;\n }\n\n /* ─── Size Variants ───\n Fallback pixel values mirror the design token values at time of writing.\n If token values are updated the fallbacks should be updated to match. */\n\n :host([hx-size='xs']) {\n --hx-icon-size: var(--hx-size-4, 1rem);\n }\n\n :host([hx-size='sm']) {\n --hx-icon-size: var(--hx-size-5, 1.25rem);\n }\n\n :host([hx-size='md']) {\n --hx-icon-size: var(--hx-size-6, 1.5rem);\n }\n\n :host([hx-size='lg']) {\n --hx-icon-size: var(--hx-size-8, 2rem);\n }\n\n :host([hx-size='xl']) {\n --hx-icon-size: var(--hx-size-10, 2.5rem);\n }\n\n /* ─── SVG (sprite mode) ───\n In sprite mode [part=\"svg\"] is an actual <svg> element. The selector\n targets it specifically. In inline mode the part is applied to a <span>\n wrapper — see .icon__inline below. */\n\n svg[part='svg'] {\n width: 100%;\n height: 100%;\n fill: currentColor;\n display: block;\n overflow: visible;\n }\n\n /* ─── Inline SVG wrapper ───\n In inline mode [part=\"svg\"] is a <span> that wraps the fetched SVG.\n The inner <svg> is sized to fill the wrapper. */\n\n .icon__inline {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n .icon__inline svg {\n width: 100%;\n height: 100%;\n fill: currentColor;\n display: block;\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixIconStyles } from './hx-icon.styles.js';\n\n/**\n * An icon component that supports inline SVG fetching and SVG sprite sheet references.\n * Decorative icons are automatically hidden from assistive technology.\n * When a label is provided the icon is announced as an image with that label.\n *\n * **Render modes:**\n * - **Sprite mode** (recommended for Drupal/SSR): Set `name` and optionally `sprite-url`.\n * Renders an `<svg><use href=\"...#name\">` — works server-side without JavaScript.\n * - **Inline mode**: Set `src` to a URL of a standalone SVG file. The component fetches,\n * sanitizes, and embeds the SVG markup. Requires JavaScript; not server-side renderable.\n * For Drupal/Twig templates use sprite mode to avoid content shift before hydration.\n *\n * @summary SVG icon with sprite and inline fetch modes for healthcare applications.\n *\n * @tag hx-icon\n *\n * @csspart svg - The SVG element rendered in sprite mode, or the inline SVG container\n * in inline mode. In sprite mode this is an `<svg>` element; in inline mode it is a\n * `<span>` element wrapping the fetched SVG. Both expose the same `part` name for\n * consistent external styling via `::part(svg)`.\n *\n * @cssprop [--hx-icon-size=var(--hx-size-6,1.5rem)] - Width and height of the icon.\n * @cssprop [--hx-icon-color=currentColor] - Icon color.\n */\n@customElement('hx-icon')\nexport class HelixIcon extends LitElement {\n static override styles = [tokenStyles, helixIconStyles];\n\n /**\n * Icon name used as the fragment identifier when referencing a sprite sheet.\n * For sprite mode provide the bare symbol id (e.g. `check`). The component\n * will build the full href as `${spriteUrl}#${name}`. If `name` already\n * starts with `#` it is used as-is (inline sprite reference without a base\n * URL).\n * @attr name\n */\n @property({ type: String })\n name = '';\n\n /**\n * URL of a standalone SVG file to fetch and render inline. Takes precedence\n * over sprite mode when both `src` and `spriteUrl`/`name` are set.\n *\n * **Note:** Inline mode requires browser JavaScript (`fetch` + `DOMParser`).\n * It is not server-side renderable. For Drupal/Twig use sprite mode instead.\n * @attr src\n */\n @property({ type: String })\n src: string | undefined = undefined;\n\n /**\n * Base URL of the SVG sprite sheet. Used together with `name` to construct\n * the `<use>` href: `${spriteUrl}#${name}`.\n * @attr sprite-url\n */\n @property({ type: String, attribute: 'sprite-url' })\n spriteUrl: string | undefined = undefined;\n\n /**\n * Size variant of the icon.\n *\n * Set via the `hx-size` HTML attribute (e.g. `hx-size=\"lg\"`) or via the\n * `size` JavaScript property (e.g. `el.size = 'lg'`). Both are equivalent —\n * the `attribute: 'hx-size'` mapping is used to avoid colliding with the\n * native `<input>` `size` attribute in Drupal attribute-passthrough scenarios.\n * The CEM exposes both the JS property name (`size`) and the HTML attribute\n * name (`hx-size`).\n *\n * @attr hx-size\n */\n @property({ type: String, reflect: true, attribute: 'hx-size' })\n size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';\n\n /**\n * Accessible label for the icon. When non-empty, `role=\"img\"` and\n * `aria-label` are applied so assistive technology announces the icon.\n * When empty the icon is treated as decorative and `aria-hidden=\"true\"` is\n * applied.\n * @attr label\n */\n @property({ type: String })\n label = '';\n\n /**\n * Stores the sanitized inner markup of an externally fetched SVG.\n * @internal\n */\n @state()\n private _inlineSvg = '';\n\n /**\n * Tracks the `src` URL that was last successfully fetched so that we only\n * refetch when it genuinely changes.\n * @internal\n */\n @state()\n private _fetchedSrc: string | undefined = undefined;\n\n /**\n * Monotonically-increasing sequence number. Incremented before each fetch so\n * that stale out-of-order responses can be discarded.\n */\n /** @internal */\n private _fetchSeq = 0;\n\n // ─── Lifecycle ───\n\n override updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('src') && this.src !== this._fetchedSrc) {\n void this._fetchInlineSvg(this.src);\n }\n }\n\n // ─── Inline SVG Fetch ───\n\n /** @internal */\n private async _fetchInlineSvg(url: string | undefined): Promise<void> {\n const seq = ++this._fetchSeq;\n\n if (!url) {\n this._inlineSvg = '';\n this._fetchedSrc = undefined;\n return;\n }\n\n // Use module-level cache to avoid duplicate network requests for the same URL.\n // Multiple hx-icon instances sharing the same src will share one in-flight fetch.\n try {\n let pending = _svgCache.get(url);\n if (!pending) {\n pending = fetch(url).then(async (response) => {\n if (!response.ok) {\n _svgCache.delete(url);\n return '';\n }\n return response.text();\n });\n _svgCache.set(url, pending);\n }\n\n const text = await pending;\n if (seq !== this._fetchSeq) return;\n\n if (!text) {\n this._inlineSvg = '';\n this._fetchedSrc = undefined;\n return;\n }\n\n const sanitized = this._sanitizeSvg(text);\n this._inlineSvg = sanitized;\n this._fetchedSrc = url;\n } catch {\n if (seq !== this._fetchSeq) return;\n _svgCache.delete(url);\n this._inlineSvg = '';\n this._fetchedSrc = undefined;\n }\n }\n\n /**\n * Parses the raw SVG text, strips dangerous content (script elements,\n * foreignObject, on* event-handler attributes, javascript:/data: URIs,\n * and style attributes that could carry CSS injection payloads), and\n * returns the outer SVG markup safe for rendering via `unsafeHTML`.\n *\n * Additionally injects `focusable=\"false\"` on the root SVG element to\n * prevent IE11/old-Edge from making the SVG keyboard-focusable, and strips\n * any ARIA attributes from the inner SVG to prevent conflicts with the\n * wrapper's own ARIA semantics.\n */\n /** @internal */\n private _sanitizeSvg(raw: string): string {\n const parser = new DOMParser();\n const doc = parser.parseFromString(raw, 'image/svg+xml');\n\n const parseError = doc.querySelector('parsererror');\n if (parseError) {\n return '';\n }\n\n const svgEl = doc.querySelector('svg');\n if (!svgEl) {\n return '';\n }\n\n // Remove dangerous embedded elements.\n svgEl.querySelectorAll('script, foreignObject').forEach((s) => {\n s.remove();\n });\n\n // URL-bearing attributes that can carry javascript:/data: payloads.\n const urlAttrs = new Set(['href', 'xlink:href', 'src', 'action', 'formaction']);\n\n // ARIA attributes that may conflict with the wrapper element's own semantics.\n // The wrapper <span part=\"svg\"> owns role/aria-label/aria-hidden — the inner\n // SVG must not duplicate or contradict these.\n const ariaAttrs = new Set(['role', 'aria-label', 'aria-labelledby', 'aria-hidden']);\n\n // Sanitize every element including the root svg.\n const allElements: Element[] = [svgEl, ...Array.from(svgEl.querySelectorAll('*'))];\n allElements.forEach((el) => {\n const attrs = Array.from(el.attributes);\n attrs.forEach((attr) => {\n const attrName = attr.name.toLowerCase();\n // Strip event-handler attributes.\n if (attrName.startsWith('on')) {\n el.removeAttribute(attr.name);\n return;\n }\n // Strip style attributes — CSS can carry injection payloads via\n // url(javascript:...), expression(), or external filter/clip-path references.\n if (attrName === 'style') {\n el.removeAttribute(attr.name);\n return;\n }\n // Strip javascript: and data: URIs from URL-bearing attributes.\n if (urlAttrs.has(attrName)) {\n const val = attr.value.replace(/\\s/g, '').toLowerCase();\n if (val.startsWith('javascript:') || val.startsWith('data:')) {\n el.removeAttribute(attr.name);\n }\n }\n });\n });\n\n // Strip ARIA attributes from the root SVG only — they conflict with the\n // wrapper element's ARIA. Child elements' ARIA is left intact.\n ariaAttrs.forEach((a) => svgEl.removeAttribute(a));\n\n // Inject focusable=\"false\" so IE11/old-Edge do not tab into the SVG.\n svgEl.setAttribute('focusable', 'false');\n\n return svgEl.outerHTML;\n }\n\n // ─── Render Helpers ───\n\n /**\n * Returns the href used in the `<use>` element for sprite mode.\n * If `name` already begins with `#` it is treated as an inline reference.\n */\n /** @internal */\n private _spriteHref(): string {\n const n = this.name;\n if (n.startsWith('#')) {\n return n;\n }\n const base = this.spriteUrl ?? '';\n return base ? `${base}#${n}` : `#${n}`;\n }\n\n /** @internal */\n private _renderSprite() {\n const isDecorative = !this.label.trim();\n\n return html`\n <svg\n part=\"svg\"\n class=\"icon__svg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=${isDecorative ? nothing : 'img'}\n aria-label=${isDecorative ? nothing : this.label}\n aria-hidden=${isDecorative ? 'true' : nothing}\n focusable=\"false\"\n >\n ${isDecorative ? nothing : html`<title>${this.label}</title>`}\n <use href=${this._spriteHref()}></use>\n </svg>\n `;\n }\n\n /** @internal */\n private _renderInline() {\n if (!this._inlineSvg) {\n return nothing;\n }\n\n const isDecorative = !this.label.trim();\n\n // The fetched SVG is rendered inside a wrapper span that carries the\n // csspart and ARIA semantics. The inner SVG from unsafeHTML fills the\n // container via the `.icon__inline svg` CSS rule. ARIA attributes and\n // focusable=\"false\" are injected into the inner SVG by _sanitizeSvg.\n return html`\n <span\n part=\"svg\"\n class=\"icon__inline\"\n role=${isDecorative ? nothing : 'img'}\n aria-label=${isDecorative ? nothing : this.label}\n aria-hidden=${isDecorative ? 'true' : nothing}\n >\n ${unsafeHTML(this._inlineSvg)}\n </span>\n `;\n }\n\n // ─── Render ───\n\n override render() {\n // Inline fetch mode takes precedence when src is a non-empty string.\n if (typeof this.src === 'string' && this.src.trim().length > 0) {\n return this._renderInline();\n }\n\n // Sprite mode: requires at least a name.\n if (this.name) {\n return this._renderSprite();\n }\n\n return nothing;\n }\n}\n\n/**\n * Module-level SVG fetch cache. Shared across all `hx-icon` instances so that\n * multiple icons sharing the same `src` URL issue only one network request.\n * The cache stores in-flight `Promise<string>` values — resolved entries remain\n * cached for the lifetime of the page to prevent redundant re-fetches.\n */\nconst _svgCache = new Map<string, Promise<string>>();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-icon': HelixIcon;\n }\n}\n"],"names":["helixIconStyles","css","HelixIcon","LitElement","changed","url","seq","pending","_svgCache","response","text","sanitized","raw","doc","svgEl","s","urlAttrs","ariaAttrs","el","attr","attrName","val","a","n","base","isDecorative","html","nothing","unsafeHTML","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-image-C6pGiI6c.js → hx-image-DUsEi-oN.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { css as g, LitElement as f, html as d, nothing as h } from "lit";
+import { css as g, LitElement as f, html as d, nothing as l } from "lit";
 import { property as r, state as p, customElement as m } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { styleMap as u } from "lit/directives/style-map.js";
@@ -45,10 +45,10 @@ const y = g`
     display: block;
   }
 `;
-var b = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, o, a, l) => {
-  for (var i = l > 1 ? void 0 : l ? S(o, a) : o, n = s.length - 1, c; n >= 0; n--)
-    (c = s[n]) && (i = (l ? c(o, a, i) : c(i)) || i);
-  return l && i && b(o, a, i), i;
+var b = Object.defineProperty, S = Object.getOwnPropertyDescriptor, e = (s, o, a, h) => {
+  for (var i = h > 1 ? void 0 : h ? S(o, a) : o, n = s.length - 1, c; n >= 0; n--)
+    (c = s[n]) && (i = (h ? c(o, a, i) : c(i)) || i);
+  return h && i && b(o, a, i), i;
 };
 let t = class extends f {
   constructor() {
@@ -83,7 +83,8 @@ let t = class extends f {
     return this._usedFallbackSrc && this.fallbackSrc ? this.fallbackSrc : this.src;
   }
   render() {
-    const s = this.decorative || this.alt === "", o = s ? "" : this.alt ?? "", a = this._computeBorderRadius(), l = this._hasCaptionSlot, i = {
+    !this.decorative && this.alt;
+    const s = this.decorative || this.alt === "", o = s ? "" : this.alt ?? "", a = this._computeBorderRadius(), h = this._hasCaptionSlot, i = {
       ...this.ratio ? { "--_ratio": this.ratio } : {},
       ...this.fit ? { "--_fit": this.fit } : {},
       ...a ? { "--_radius": a } : {},
@@ -95,7 +96,6 @@ let t = class extends f {
           class="image__container image__container--error"
           style=${u(i)}
           role="alert"
-          aria-live="polite"
         >
           <slot name="fallback"></slot>
         </figure>
@@ -104,20 +104,20 @@ let t = class extends f {
         <img
           part="base"
           class="image__img"
-          src=${this._currentSrc() || h}
+          src=${this._currentSrc() || l}
           alt=${o}
-          role=${s ? "presentation" : h}
+          role=${s ? "presentation" : l}
           loading=${this.loading}
-          width=${this.width != null ? this.width : h}
-          height=${this.height != null ? this.height : h}
-          srcset=${this.srcset ?? h}
-          sizes=${this.sizes ?? h}
+          width=${this.width != null ? this.width : l}
+          height=${this.height != null ? this.height : l}
+          srcset=${this.srcset ?? l}
+          sizes=${this.sizes ?? l}
           @load=${this._handleLoad}
           @error=${this._handleError}
         />
         <figcaption
           part="caption"
-          class=${_({ image__caption: !0, "image__caption--visible": l })}
+          class=${_({ image__caption: !0, "image__caption--visible": h })}
         >
           <slot name="caption" @slotchange=${this._onCaptionSlotChange}></slot>
         </figcaption>
@@ -177,4 +177,4 @@ t = e([
 export {
   t as H
 };
-//# sourceMappingURL=hx-image-C6pGiI6c.js.map
+//# sourceMappingURL=hx-image-DUsEi-oN.js.map

package/dist/shared/hx-image-DUsEi-oN.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-image-DUsEi-oN.js","sources":["../../src/components/hx-image/hx-image.styles.ts","../../src/components/hx-image/hx-image.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixImageStyles = css`\n :host {\n display: block;\n }\n\n .image__container {\n position: relative;\n display: block;\n overflow: hidden;\n margin: 0;\n padding: 0;\n aspect-ratio: var(--_ratio, var(--hx-image-aspect-ratio));\n border-radius: var(--_radius, var(--hx-image-border-radius, 0));\n }\n\n .image__container--error {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: var(--hx-image-fallback-min-height, 3rem);\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n color: var(--hx-color-neutral-500, #6b7280);\n }\n\n .image__img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: var(--_fit, var(--hx-image-object-fit, cover));\n }\n\n .image__caption {\n display: none;\n padding: var(--hx-image-caption-padding, 0.5rem 0 0);\n color: var(--hx-image-caption-color, var(--hx-color-neutral-600, #4b5563));\n font-size: var(--hx-image-caption-font-size, 0.875rem);\n }\n\n .image__caption--visible {\n display: block;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixImageStyles } from './hx-image.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accessible image wrapper with lazy loading, fallback support, aspect ratio control,\n * responsive image (srcset/sizes) support, and optional caption.\n *\n * @summary Accessible image wrapper with lazy loading, fallback, srcset, and aspect ratio control.\n *\n * @tag hx-image\n *\n * @slot fallback - Custom content shown when the image fails to load and no fallback-src is set.\n * @slot caption - Optional caption content rendered in a figcaption element below the image.\n *\n * @csspart base - The inner img element.\n * @csspart caption - The figcaption element (visible only when caption content is present).\n *\n * @cssprop [--hx-image-object-fit] - Controls how the image fills its container. Maps to object-fit.\n * @cssprop [--hx-image-border-radius] - Border radius of the image. Overridden by the `rounded` prop.\n * @cssprop [--hx-image-aspect-ratio] - Aspect ratio of the image container. Overridden by the `ratio` prop.\n * @cssprop [--hx-image-caption-color] - Text color for the caption.\n * @cssprop [--hx-image-caption-font-size] - Font size for the caption.\n * @cssprop [--hx-image-caption-padding] - Padding for the caption.\n * @cssprop [--hx-image-fallback-min-height] - Minimum height of the error/fallback container.\n *\n * @fires hx-load - Dispatched when the image has successfully loaded.\n * @fires hx-error - Dispatched when the image fails to load (including after fallback-src also fails).\n */\n@customElement('hx-image')\nexport class HelixImage extends LitElement {\n static override styles = [tokenStyles, helixImageStyles];\n\n /**\n * The URL of the image to display.\n * @attr src\n */\n @property({ type: String, reflect: true })\n src = '';\n\n /**\n * Accessible text description of the image.\n * Required for informative images. Use the `decorative` prop for decorative images\n * instead of setting this to an empty string — explicit decorative intent is preferred.\n * @attr alt\n */\n @property({ type: String, reflect: true })\n alt: string | undefined = undefined;\n\n /**\n * Marks the image as decorative (hidden from screen readers).\n * Use this instead of `alt=\"\"` to make decorative intent explicit in markup.\n * When set, the inner img receives `alt=\"\"` and `role=\"presentation\"`.\n * @attr decorative\n */\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /**\n * Width of the image element.\n * @attr width\n */\n @property({ reflect: true })\n width: number | string | undefined = undefined;\n\n /**\n * Height of the image element.\n * @attr height\n */\n @property({ reflect: true })\n height: number | string | undefined = undefined;\n\n /**\n * Loading strategy for the image.\n * @attr loading\n */\n @property({ type: String, reflect: true })\n loading: 'lazy' | 'eager' = 'lazy';\n\n /**\n * How the image should be resized to fit its container.\n * Maps to CSS object-fit.\n * @attr fit\n */\n @property({ type: String, reflect: true })\n fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | undefined = undefined;\n\n /**\n * CSS aspect-ratio value (e.g. \"16/9\", \"1\", \"4/3\").\n * When set, the container maintains this ratio.\n * @attr ratio\n */\n @property({ type: String, reflect: true })\n ratio: string | undefined = undefined;\n\n /**\n * Border radius for the image.\n * Boolean attribute (or `true`) applies the theme's medium radius token.\n * A string value is used directly as a CSS border-radius value (e.g. \"1rem\", \"50%\").\n *\n * Note: When set as an HTML attribute (`<hx-image rounded>`), Lit receives the value as\n * an empty string (`''`). When set programmatically (`el.rounded = true`), it receives\n * a boolean. Both forms apply the theme radius token.\n *\n * @attr rounded\n */\n @property({ type: String, reflect: true })\n rounded: boolean | string | undefined = undefined;\n\n /**\n * Fallback image URL shown when the primary src fails to load.\n * @attr fallback-src\n */\n @property({ type: String, attribute: 'fallback-src', reflect: true })\n fallbackSrc: string | undefined = undefined;\n\n /**\n * A comma-separated list of image candidates for responsive images.\n * Passed directly to the inner img's srcset attribute.\n * Enables Drupal responsive image styles and browser-native image selection.\n * @attr srcset\n */\n @property({ type: String, reflect: true })\n srcset: string | undefined = undefined;\n\n /**\n * Media conditions indicating which image size to use alongside srcset.\n * Works in conjunction with the `srcset` attribute.\n * @attr sizes\n */\n @property({ type: String, reflect: true })\n sizes: string | undefined = undefined;\n\n /** @internal */\n @state()\n private _error = false;\n\n /** @internal */\n @state()\n private _usedFallbackSrc = false;\n\n /** @internal */\n @state()\n private _hasCaptionSlot = false;\n\n /** @internal */\n private _handleLoad(): void {\n this.dispatchEvent(new CustomEvent<void>('hx-load', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _handleError(): void {\n if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {\n // Try the fallback-src before showing the fallback slot\n this._usedFallbackSrc = true;\n return;\n }\n this._error = true;\n this.dispatchEvent(new CustomEvent<void>('hx-error', { bubbles: true, composed: true }));\n }\n\n /** @internal */\n private _onCaptionSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasCaptionSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n /** @internal */\n private _computeBorderRadius(): string | undefined {\n if (this.rounded === true || this.rounded === '' || this.rounded === 'true') {\n return 'var(--hx-border-radius-md, 0.375rem)';\n }\n if (typeof this.rounded === 'string' && this.rounded.length > 0 && this.rounded !== 'false') {\n return this.rounded;\n }\n return undefined;\n }\n\n /** @internal */\n private _currentSrc(): string {\n if (this._usedFallbackSrc && this.fallbackSrc) {\n return this.fallbackSrc;\n }\n return this.src;\n }\n\n override render() {\n if (!this.decorative && !this.alt) {\n devWarn(\n 'hx-image',\n 'Informative images require an `alt` attribute for accessibility (WCAG 1.1.1). ' +\n 'Provide a descriptive `alt` value, or set the `decorative` attribute if the image is decorative.',\n );\n }\n const isDecorative = this.decorative || this.alt === '';\n const altText = isDecorative ? '' : (this.alt ?? '');\n const borderRadius = this._computeBorderRadius();\n const showCaption = this._hasCaptionSlot;\n\n const containerStyles = {\n ...(this.ratio ? { '--_ratio': this.ratio } : {}),\n ...(this.fit ? { '--_fit': this.fit } : {}),\n ...(borderRadius ? { '--_radius': borderRadius } : {}),\n ...(this.width != null\n ? { width: typeof this.width === 'number' ? `${this.width}px` : this.width }\n : {}),\n ...(this.height != null\n ? { height: typeof this.height === 'number' ? `${this.height}px` : this.height }\n : {}),\n };\n\n if (this._error) {\n return html`\n <figure\n class=\"image__container image__container--error\"\n style=${styleMap(containerStyles)}\n role=\"alert\"\n >\n <slot name=\"fallback\"></slot>\n </figure>\n `;\n }\n\n return html`\n <figure class=\"image__container\" style=${styleMap(containerStyles)}>\n <img\n part=\"base\"\n class=\"image__img\"\n src=${this._currentSrc() || nothing}\n alt=${altText}\n role=${isDecorative ? 'presentation' : nothing}\n loading=${this.loading}\n width=${this.width != null ? this.width : nothing}\n height=${this.height != null ? this.height : nothing}\n srcset=${this.srcset ?? nothing}\n sizes=${this.sizes ?? nothing}\n @load=${this._handleLoad}\n @error=${this._handleError}\n />\n <figcaption\n part=\"caption\"\n class=${classMap({ image__caption: true, 'image__caption--visible': showCaption })}\n >\n <slot name=\"caption\" @slotchange=${this._onCaptionSlotChange}></slot>\n </figcaption>\n </figure>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-image': HelixImage;\n }\n}\n"],"names":["helixImageStyles","css","HelixImage","LitElement","e","slot","isDecorative","altText","borderRadius","showCaption","containerStyles","html","styleMap","nothing","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-link-Tmk_YPvW.js → hx-link-Peg2LzOD.js} RENAMED Viewed

@@ -1,9 +1,9 @@
-import { css as v, LitElement as x, nothing as u, svg as f, html as c } from "lit";
-import { property as o, customElement as k } from "lit/decorators.js";
+import { css as v, LitElement as x, nothing as f, svg as u, html as c } from "lit";
+import { property as i, customElement as k } 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 { tokenStyles as m } from "@helixui/tokens/lit";
-const b = v`
+const g = v`
   :host {
     display: inline;
   }
@@ -42,7 +42,10 @@ const b = v`
   .link:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-link-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-link-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.125rem);
   }
@@ -106,27 +109,27 @@ const b = v`
     border: 0;
   }
 `;
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, n, s, l) => {
-  for (var t = l > 1 ? void 0 : l ? y(n, s) : n, d = e.length - 1, h; d >= 0; d--)
-    (h = e[d]) && (t = (l ? h(n, s, t) : h(t)) || t);
-  return l && t && g(n, s, t), t;
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (r, n, s, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(n, s) : n, h = r.length - 1, d; h >= 0; h--)
+    (d = r[h]) && (t = (l ? d(n, s, t) : d(t)) || t);
+  return l && t && y(n, s, t), t;
 };
-let r = class extends x {
+let e = class extends x {
   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;
   }
   // --- Event Handling ---
   /** @internal */
-  _handleClick(e) {
+  _handleClick(r) {
     if (this.disabled) {
-      e.preventDefault(), e.stopPropagation();
+      r.preventDefault(), r.stopPropagation();
       return;
     }
     this.dispatchEvent(
       new CustomEvent("hx-click", {
         bubbles: !0,
         composed: !0,
-        detail: { originalEvent: e }
+        detail: { originalEvent: r }
       })
     );
   }
@@ -138,7 +141,7 @@ let r = class extends x {
   }
   /** @internal */
   _renderExternalIcon() {
-    return this.target !== "_blank" ? u : c`
+    return this.target !== "_blank" ? f : c`
       <svg
         class="link__external-icon"
         part="external-icon"
@@ -150,14 +153,14 @@ let r = class extends x {
         stroke-linecap="round"
         stroke-linejoin="round"
       >
-        ${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" />`}
+        ${u`<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>
     `;
   }
   // --- Render ---
   render() {
-    const e = {
+    const r = {
       link: !0,
       [`link--${this.variant}`]: this.variant !== "default",
       "link--disabled": this.disabled
@@ -165,9 +168,8 @@ let r = class extends x {
     return this.disabled ? c`
         <span
           part="link"
-          class=${p(e)}
+          class=${p(r)}
           role="link"
-          tabindex="0"
           aria-disabled="true"
           @click=${this._handleClick}
         >
@@ -176,7 +178,7 @@ let r = class extends x {
       ` : c`
       <a
         part="link"
-        class=${p(e)}
+        class=${p(r)}
         href=${a(this.href)}
         target=${a(this.target)}
         rel=${a(this._computeRel())}
@@ -189,29 +191,29 @@ let r = class extends x {
     `;
   }
 };
-r.styles = [m, b];
-i([
-  o({ type: String })
-], r.prototype, "href", 2);
-i([
-  o({ type: String })
-], r.prototype, "target", 2);
-i([
-  o({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-i([
-  o({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-i([
-  o({ type: String })
-], r.prototype, "download", 2);
-i([
-  o({ type: String })
-], r.prototype, "rel", 2);
-r = i([
+e.styles = [m, g];
+o([
+  i({ type: String })
+], e.prototype, "href", 2);
+o([
+  i({ type: String })
+], e.prototype, "target", 2);
+o([
+  i({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+o([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  i({ type: String })
+], e.prototype, "download", 2);
+o([
+  i({ type: String })
+], e.prototype, "rel", 2);
+e = o([
   k("hx-link")
-], r);
+], e);
 export {
-  r as H
+  e as H
 };
-//# sourceMappingURL=hx-link-Tmk_YPvW.js.map
+//# sourceMappingURL=hx-link-Peg2LzOD.js.map

package/dist/shared/hx-link-Peg2LzOD.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-link-Peg2LzOD.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-500, #2563eb));\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, #1d4ed8));\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, #1e40af));\n }\n\n .link:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(\n --hx-link-focus-ring-color,\n var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n );\n outline-offset: var(--hx-focus-ring-offset, 2px);\n border-radius: var(--hx-border-radius-sm, 0.125rem);\n }\n\n /* --- Variant: subtle --- */\n\n .link--subtle {\n color: var(--hx-link-color-subtle, var(--hx-color-neutral-600, #475569));\n text-decoration: none;\n }\n\n .link--subtle:hover {\n color: var(--hx-link-color-hover, var(--hx-color-primary-700, #1d4ed8));\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, #b91c1c));\n }\n\n .link--danger:hover {\n color: var(--hx-link-color-danger-hover, var(--hx-color-error-700, #b91c1c));\n }\n\n /* --- Disabled --- */\n\n .link--disabled {\n color: var(--hx-link-color-disabled, var(--hx-color-neutral-400, #94a3b8));\n text-decoration: none;\n pointer-events: none;\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 /* --- 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 { LitElement, html, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixLinkStyles } from './hx-link.styles.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 */\n@customElement('hx-link')\nexport class HelixLink extends LitElement {\n static override styles = [tokenStyles, helixLinkStyles];\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 // --- Event Handling ---\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\">(opens in new tab)</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 if (this.disabled) {\n return html`\n <span\n part=\"link\"\n class=${classMap(classes)}\n role=\"link\"\n aria-disabled=\"true\"\n @click=${this._handleClick}\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 @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","LitElement","e","nothing","html","svg","classes","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}