@helixui/library 1.0.1 → 1.1.2

package/dist/shared/{hx-grid-BsDBCTbt.js → hx-grid-gEjuF0cR.js}

@@ -1,23 +1,24 @@
 import { css as m, 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 f = m`
+const v = m`
   :host {
     display: block;
     box-sizing: border-box;
     width: 100%;
   }
-`, v = m`
+`, x = m`
   :host {
     display: block;
     min-width: 0;
     min-height: 0;
   }
 `;
-var x = Object.defineProperty, G = Object.getOwnPropertyDescriptor, e = (t, l, a, p) => {
-  for (var o = p > 1 ? void 0 : p ? G(l, a) : l, n = t.length - 1, u; n >= 0; n--)
+var G = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (t, l, a, p) => {
+  for (var o = p > 1 ? void 0 : p ? _(l, a) : l, n = t.length - 1, u; n >= 0; n--)
     (u = t[n]) && (o = (p ? u(l, a, o) : u(o)) || o);
-  return p && o && x(l, a, o), o;
+  return p && o && G(l, a, o), o;
 };
 const h = {
   none: "0",
@@ -31,38 +32,43 @@ let r = class extends c {
   constructor() {
     super(...arguments), this.columns = 1, this.gap = "md", this.align = "stretch", this.justify = "stretch";
   }
+  /** @internal */
   _gridTemplateColumns() {
     const t = this.columns;
     return typeof t == "number" || /^\d+$/.test(String(t)) ? `var(--hx-grid-columns, repeat(${t}, 1fr))` : `var(--hx-grid-columns, ${t})`;
   }
+  /** @internal */
   _resolveGap(t) {
     return h[t] ?? h.md;
   }
+  /** @internal */
   _computedRowGap() {
     return this.rowGap ? `var(--hx-grid-row-gap, ${this._resolveGap(this.rowGap)})` : `var(--hx-grid-row-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;
   }
+  /** @internal */
   _computedColumnGap() {
     return this.columnGap ? `var(--hx-grid-column-gap, ${this._resolveGap(this.columnGap)})` : `var(--hx-grid-column-gap, var(--hx-grid-gap, ${this._resolveGap(this.gap)}))`;
   }
-  _baseStyle() {
-    return [
-      "display: grid",
-      `grid-template-columns: ${this._gridTemplateColumns()}`,
-      `row-gap: ${this._computedRowGap()}`,
-      `column-gap: ${this._computedColumnGap()}`,
-      `align-items: ${this.align}`,
-      `justify-items: ${this.justify}`
-    ].join("; ");
+  /** @internal */
+  _baseStyleMap() {
+    return {
+      display: "grid",
+      "grid-template-columns": this._gridTemplateColumns(),
+      "row-gap": this._computedRowGap(),
+      "column-gap": this._computedColumnGap(),
+      "align-items": this.align,
+      "justify-items": this.justify
+    };
   }
   render() {
     return d`
-      <div part="base" role="presentation" style=${this._baseStyle()}>
+      <div part="base" role="presentation" style=${f(this._baseStyleMap())}>
         <slot></slot>
       </div>
     `;
   }
 };
-r.styles = [y, f];
+r.styles = [y, v];
 e([
   s({ reflect: !0 })
 ], r.prototype, "columns", 2);
@@ -91,6 +97,7 @@ let i = class extends c {
   connectedCallback() {
     super.connectedCallback(), this._applyHostGridStyles();
   }
+  /** @internal */
   _applyHostGridStyles() {
     this.column ? this.style.gridColumn = this.column : this.span !== void 0 ? this.style.gridColumn = `span ${this.span}` : this.style.gridColumn = "", this.row ? this.style.gridRow = this.row : this.style.gridRow = "";
   }
@@ -98,7 +105,7 @@ let i = class extends c {
     return d`<slot></slot>`;
   }
 };
-i.styles = [y, v];
+i.styles = [y, x];
 e([
   s({ reflect: !0 })
 ], i.prototype, "column", 2);
@@ -115,4 +122,4 @@ export {
   r as H,
   i as a
 };
-//# sourceMappingURL=hx-grid-BsDBCTbt.js.map
+//# sourceMappingURL=hx-grid-gEjuF0cR.js.map

package/dist/shared/hx-grid-gEjuF0cR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-grid-gEjuF0cR.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';\ntype AlignValue = 'start' | 'center' | 'end' | 'stretch';\ntype JustifyValue = 'start' | 'center' | 'end' | 'stretch';\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: GapSize = '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: GapSize | 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: GapSize | undefined;\n\n  /**\n   * Aligns grid items along the block axis (align-items).\n   * @attr align\n   */\n  @property({ reflect: true })\n  align: AlignValue = 'stretch';\n\n  /**\n   * Justifies grid items along the inline axis (justify-items).\n   * @attr justify\n   */\n  @property({ reflect: true })\n  justify: JustifyValue = '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    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-help-text-DaOPN1iB.js → hx-help-text-BAcEGRUE.js}

@@ -1,4 +1,4 @@
-import { css as p, html as n, LitElement as v, nothing as c } from "lit";
+import { css as p, LitElement as v, nothing as c, html as n } from "lit";
 import { property as f, customElement as u } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
@@ -132,4 +132,4 @@ i = x([
 export {
   i as H
 };
-//# sourceMappingURL=hx-help-text-DaOPN1iB.js.map
+//# sourceMappingURL=hx-help-text-BAcEGRUE.js.map

package/dist/shared/{hx-help-text-DaOPN1iB.js.map → hx-help-text-BAcEGRUE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-help-text-DaOPN1iB.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #b45309);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #15803d);\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 { helixHelpTextStyles } from './hx-help-text.styles.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    d=\"M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends LitElement {\n  static override styles = [tokenStyles, helixHelpTextStyles];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\n/** Canonical type alias for the hx-help-text component. */\nexport type HxHelpText = HelixHelpText;\n\n/** @deprecated Use {@link HxHelpText} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","LitElement","classes","icon","role","ariaLive","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACMnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AA6BO,IAAMG,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACQ,GAAahB,CAAmB;AAQ1DiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}
+{"version":3,"file":"hx-help-text-BAcEGRUE.js","sources":["../../src/components/hx-help-text/hx-help-text.styles.ts","../../src/components/hx-help-text/hx-help-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixHelpTextStyles = css`\n  :host {\n    display: block;\n  }\n\n  .help-text {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-help-text-icon-gap, 0.375rem);\n    font-family: var(--hx-help-text-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-help-text-font-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-help-text-font-weight, var(--hx-font-weight-normal, 400));\n    line-height: var(--hx-help-text-line-height, var(--hx-line-height-normal, 1.5));\n    color: var(--hx-help-text-color, var(--hx-color-neutral-500, #6b7280));\n    margin: 0;\n  }\n\n  .help-text__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .help-text__text {\n    min-width: 0;\n  }\n\n  /* ─── Variant: default ─── */\n\n  .help-text--default {\n    --hx-help-text-color: var(--hx-color-neutral-500, #6b7280);\n  }\n\n  /* ─── Variant: error ─── */\n\n  .help-text--error {\n    --hx-help-text-color: var(--hx-color-error-600, #dc2626);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  .help-text--warning {\n    --hx-help-text-color: var(--hx-color-warning-700, #b45309);\n  }\n\n  /* ─── Variant: success ─── */\n\n  .help-text--success {\n    --hx-help-text-color: var(--hx-color-success-700, #15803d);\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 { helixHelpTextStyles } from './hx-help-text.styles.js';\n\n/** Icon SVG for error variant (circle with exclamation mark). */\nconst errorIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <line\n    x1=\"8\"\n    y1=\"4.5\"\n    x2=\"8\"\n    y2=\"8.5\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.75\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for warning variant (triangle with exclamation mark). */\nconst warningIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <path\n    d=\"M7.134 2.5a1 1 0 011.732 0l5.196 9a1 1 0 01-.866 1.5H2.804a1 1 0 01-.866-1.5l5.196-9z\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    fill=\"none\"\n  />\n  <line\n    x1=\"8\"\n    y1=\"6\"\n    x2=\"8\"\n    y2=\"9\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.25\"\n    stroke-linecap=\"round\"\n  />\n  <circle cx=\"8\" cy=\"11\" r=\"0.625\" fill=\"currentColor\" />\n</svg>`;\n\n/** Icon SVG for success variant (circle with checkmark). */\nconst successIcon = html`<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\" width=\"1em\" height=\"1em\">\n  <circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\" fill=\"none\" />\n  <path\n    d=\"M5.25 8.25l1.75 1.75 3.75-3.75\"\n    stroke=\"currentColor\"\n    stroke-width=\"1.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    fill=\"none\"\n  />\n</svg>`;\n\n/** Map of variant to icon template. Default has no icon. */\nconst variantIcons = {\n  default: nothing,\n  error: errorIcon,\n  warning: warningIcon,\n  success: successIcon,\n} as const;\n\n/**\n * Standardized help/hint text displayed below form fields.\n * Used by hx-field as a consistent sub-component for guidance and validation messages.\n *\n * Non-default variants render an inline icon alongside the text to satisfy\n * WCAG 1.4.1 (color is not the sole visual indicator). The `error` variant\n * uses `role=\"alert\"` for immediate screen-reader announcement; `warning`\n * and `success` use `aria-live=\"polite\"` for non-intrusive announcements.\n *\n * @summary Help text displayed below form controls for guidance or validation feedback.\n *\n * @tag hx-help-text\n *\n * @slot - The help text content.\n *\n * @csspart base - The root element of the help text.\n * @csspart icon - The icon wrapper (only rendered for non-default variants).\n * @csspart text - The text wrapper around the default slot.\n *\n * @cssprop [--hx-help-text-color=var(--hx-color-neutral-500)] - Text color.\n * @cssprop [--hx-help-text-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-help-text-font-size=var(--hx-font-size-sm)] - Font size.\n * @cssprop [--hx-help-text-font-weight=var(--hx-font-weight-normal)] - Font weight.\n * @cssprop [--hx-help-text-line-height=var(--hx-line-height-normal)] - Line height.\n * @cssprop [--hx-help-text-icon-gap=0.375rem] - Gap between icon and text.\n */\n@customElement('hx-help-text')\nexport class HelixHelpText extends LitElement {\n  static override styles = [tokenStyles, helixHelpTextStyles];\n\n  /**\n   * Visual variant that determines the text color and icon.\n   * Use `error` for validation errors, `warning` for cautions, `success` for confirmation.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'error' | 'warning' | 'success' = 'default';\n\n  override render() {\n    const classes = {\n      'help-text': true,\n      [`help-text--${this.variant}`]: true,\n    };\n\n    const icon = variantIcons[this.variant];\n    const role = this.variant === 'error' ? 'alert' : undefined;\n    const ariaLive =\n      this.variant === 'warning' || this.variant === 'success' ? 'polite' : undefined;\n\n    return html`<span\n      part=\"base\"\n      class=${classMap(classes)}\n      role=${ifDefined(role)}\n      aria-live=${ifDefined(ariaLive)}\n      >${icon !== nothing\n        ? html`<span part=\"icon\" class=\"help-text__icon\">${icon}</span>`\n        : nothing}<span part=\"text\" class=\"help-text__text\"><slot></slot></span>\n    </span>`;\n  }\n}\n\n/** Canonical type alias for the hx-help-text component. */\nexport type HxHelpText = HelixHelpText;\n\n/** @deprecated Use {@link HxHelpText} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcHelpText = HelixHelpText;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-help-text': HelixHelpText;\n  }\n}\n"],"names":["helixHelpTextStyles","css","errorIcon","html","warningIcon","successIcon","variantIcons","nothing","HelixHelpText","LitElement","classes","icon","role","ariaLive","classMap","ifDefined","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACMnC,MAAMC,IAAYC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAeZC,IAAcD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAoBdE,IAAcF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAadG,IAAe;AAAA,EACnB,SAASC;AAAA,EACT,OAAOL;AAAA,EACP,SAASE;AAAA,EACT,SAASC;AACX;AA6BO,IAAMG,IAAN,cAA4BC,EAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,UAAuD;AAAA,EAAA;AAAA,EAE9C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,aAAa;AAAA,MACb,CAAC,cAAc,KAAK,OAAO,EAAE,GAAG;AAAA,IAAA,GAG5BC,IAAOL,EAAa,KAAK,OAAO,GAChCM,IAAO,KAAK,YAAY,UAAU,UAAU,QAC5CC,IACJ,KAAK,YAAY,aAAa,KAAK,YAAY,YAAY,WAAW;AAExE,WAAOV;AAAA;AAAA,cAEGW,EAASJ,CAAO,CAAC;AAAA,aAClBK,EAAUH,CAAI,CAAC;AAAA,kBACVG,EAAUF,CAAQ,CAAC;AAAA,SAC5BF,MAASJ,IACRJ,8CAAiDQ,CAAI,YACrDJ,CAAO;AAAA;AAAA,EAEf;AACF;AAhCaC,EACK,SAAS,CAACQ,GAAahB,CAAmB;AAQ1DiB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BV,EASX,WAAA,WAAA,CAAA;AATWA,IAANS,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBX,CAAA;"}

package/dist/shared/{hx-icon--xsJztDh.js → hx-icon-CP6OnLoM.js}

@@ -90,6 +90,7 @@ let s = class extends S {
     e.has("src") && this.src !== this._fetchedSrc && this._fetchInlineSvg(this.src);
   }
   // ─── Inline SVG Fetch ───
+  /** @internal */
   async _fetchInlineSvg(e) {
     const i = ++this._fetchSeq;
     if (!e) {
@@ -123,6 +124,7 @@ let s = class extends S {
    * any ARIA attributes from the inner SVG to prevent conflicts with the
    * wrapper's own ARIA semantics.
    */
+  /** @internal */
   _sanitizeSvg(e) {
     const r = new DOMParser().parseFromString(e, "image/svg+xml");
     if (r.querySelector("parsererror"))
@@ -157,6 +159,7 @@ let s = class extends S {
    * Returns the href used in the `<use>` element for sprite mode.
    * If `name` already begins with `#` it is treated as an inline reference.
    */
+  /** @internal */
   _spriteHref() {
     const e = this.name;
     if (e.startsWith("#"))
@@ -164,6 +167,7 @@ let s = class extends S {
     const i = this.spriteUrl ?? "";
     return i ? `${i}#${e}` : `#${e}`;
   }
+  /** @internal */
   _renderSprite() {
     const e = !this.label.trim();
     return m`
@@ -182,6 +186,7 @@ let s = class extends S {
       </svg>
     `;
   }
+  /** @internal */
   _renderInline() {
     if (!this._inlineSvg)
       return n;
@@ -232,4 +237,4 @@ const v = /* @__PURE__ */ new Map();
 export {
   s as H
 };
-//# sourceMappingURL=hx-icon--xsJztDh.js.map
+//# sourceMappingURL=hx-icon-CP6OnLoM.js.map

package/dist/shared/hx-icon-CP6OnLoM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-icon-CP6OnLoM.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    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-icon-button-iu0i_faq.js → hx-icon-button-DzH_bRtC.js}

@@ -169,7 +169,18 @@ let r = class extends p {
   get form() {
     return this._internals.form;
   }
+  /** Called by the browser when the form is reset. No value to reset. */
+  formResetCallback() {
+  }
+  /** Called by the browser to restore form state. No value to restore. */
+  formStateRestoreCallback(t, n) {
+  }
+  /** Called when a parent fieldset is disabled/enabled. */
+  formDisabledCallback(t) {
+    this.disabled = t;
+  }
   // ─── Event Handling ───
+  /** @internal */
   _handleClick(t) {
     if (this.disabled) {
       t.preventDefault(), t.stopPropagation();
@@ -184,9 +195,11 @@ let r = class extends p {
     ), this.href || (this.type === "submit" && this._internals.form ? this._internals.form.requestSubmit() : this.type === "reset" && this._internals.form && this._internals.form.reset());
   }
   // ─── Render Helpers ───
+  /** @internal */
   _normalizedLabel() {
     return this.label.trim();
   }
+  /** @internal */
   _classes() {
     return {
       button: !0,
@@ -194,6 +207,7 @@ let r = class extends p {
       [`button--${this.size}`]: !0
     };
   }
+  /** @internal */
   _iconSlot() {
     return c`<span part="icon" class="icon"><slot></slot></span>`;
   }
@@ -262,4 +276,4 @@ r = o([
 export {
   r as H
 };
-//# sourceMappingURL=hx-icon-button-iu0i_faq.js.map
+//# sourceMappingURL=hx-icon-button-DzH_bRtC.js.map

package/dist/shared/{hx-icon-button-iu0i_faq.js.map → hx-icon-button-DzH_bRtC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-icon-button-iu0i_faq.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  private _internals: ElementInternals;\n\n  constructor() {\n    super();\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  // ─── Event Handling ───\n\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('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  private _normalizedLabel(): string {\n    return this.label.trim();\n  }\n\n  private _classes() {\n    return {\n      button: true,\n      [`button--${this.variant}`]: true,\n      [`button--${this.size}`]: true,\n    };\n  }\n\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","e","html","normalizedLabel","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}
+{"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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"}

package/dist/shared/{hx-image-xyb_tHCR.js → hx-image-C6pGiI6c.js}

@@ -54,9 +54,11 @@ let t = class extends f {
   constructor() {
     super(...arguments), this.src = "", this.alt = void 0, this.decorative = !1, this.width = void 0, this.height = void 0, this.loading = "lazy", this.fit = void 0, this.ratio = void 0, this.rounded = void 0, this.fallbackSrc = void 0, this.srcset = void 0, this.sizes = void 0, this._error = !1, this._usedFallbackSrc = !1, this._hasCaptionSlot = !1;
   }
+  /** @internal */
   _handleLoad() {
     this.dispatchEvent(new CustomEvent("hx-load", { bubbles: !0, composed: !0 }));
   }
+  /** @internal */
   _handleError() {
     if (!this._error && this.fallbackSrc && !this._usedFallbackSrc) {
       this._usedFallbackSrc = !0;
@@ -64,16 +66,19 @@ let t = class extends f {
     }
     this._error = !0, this.dispatchEvent(new CustomEvent("hx-error", { bubbles: !0, composed: !0 }));
   }
+  /** @internal */
   _onCaptionSlotChange(s) {
     const o = s.target;
     this._hasCaptionSlot = o.assignedNodes({ flatten: !0 }).length > 0;
   }
+  /** @internal */
   _computeBorderRadius() {
     if (this.rounded === !0 || this.rounded === "" || this.rounded === "true")
       return "var(--hx-border-radius-md, 0.375rem)";
     if (typeof this.rounded == "string" && this.rounded.length > 0 && this.rounded !== "false")
       return this.rounded;
   }
+  /** @internal */
   _currentSrc() {
     return this._usedFallbackSrc && this.fallbackSrc ? this.fallbackSrc : this.src;
   }
@@ -172,4 +177,4 @@ t = e([
 export {
   t as H
 };
-//# sourceMappingURL=hx-image-xyb_tHCR.js.map
+//# sourceMappingURL=hx-image-C6pGiI6c.js.map

package/dist/shared/hx-image-C6pGiI6c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-image-C6pGiI6c.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';\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    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          aria-live=\"polite\"\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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"}