@helixui/library 1.1.2 → 2.0.0-next.30

package/dist/shared/hx-visually-hidden-D6Dv2l8l.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-visually-hidden-D6Dv2l8l.js","sources":["../../src/components/hx-visually-hidden/hx-visually-hidden.styles.ts","../../src/components/hx-visually-hidden/hx-visually-hidden.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixVisuallyHiddenStyles = css`\n  :host {\n    position: absolute !important;\n    width: 1px !important;\n    height: 1px !important;\n    padding: 0 !important;\n    margin: -1px !important;\n    overflow: hidden !important;\n    clip: rect(0, 0, 0, 0) !important;\n    clip-path: inset(50%) !important;\n    white-space: nowrap !important;\n    border: 0 !important;\n  }\n\n  :host([focusable]:focus-within) {\n    position: static !important;\n    width: auto !important;\n    height: auto !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    overflow: visible !important;\n    clip: auto !important;\n    clip-path: none !important;\n    white-space: normal !important;\n    border: 0 !important;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { helixVisuallyHiddenStyles } from './hx-visually-hidden.styles.js';\n\n/**\n * A utility component that hides content visually while keeping it\n * accessible to screen readers. Uses the standard visually-hidden CSS\n * technique — does NOT use `visibility: hidden` or `display: none`,\n * which would also hide content from assistive technologies.\n *\n * @summary Hides content visually while keeping it accessible to screen readers.\n *\n * @tag hx-visually-hidden\n *\n * @slot - The content to hide visually but expose to screen readers.\n *\n * @csspart base - The inner wrapper element containing the slotted content.\n *\n * @example Basic usage — accessible label for an icon button\n * ```html\n * <button>\n *   <hx-icon name=\"close\"></hx-icon>\n *   <hx-visually-hidden>Close dialog</hx-visually-hidden>\n * </button>\n * ```\n *\n * @example Skip link — becomes visible when focused\n * ```html\n * <hx-visually-hidden focusable>\n *   <a href=\"#main-content\">Skip to main content</a>\n * </hx-visually-hidden>\n * ```\n */\n@customElement('hx-visually-hidden')\nexport class HelixVisuallyHidden extends LitElement {\n  static override styles = [helixVisuallyHiddenStyles];\n\n  /**\n   * When true, the component becomes visible when a focusable child\n   * (such as a skip link) receives focus. This enables the standard\n   * \"skip to content\" accessibility pattern.\n   */\n  @property({ type: Boolean, reflect: true })\n  focusable = false;\n\n  override render() {\n    return html`<span part=\"base\"><slot></slot></span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-visually-hidden': HelixVisuallyHidden;\n  }\n}\n"],"names":["helixVisuallyHiddenStyles","css","HelixVisuallyHidden","LitElement","html","__decorateClass","property","customElement"],"mappings":";;;AAEO,MAAMA,IAA4BC;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;;;;;;ACiClC,IAAMC,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,YAAY;AAAA,EAAA;AAAA,EAEH,SAAS;AAChB,WAAOC;AAAA,EACT;AACF;AAdaF,EACK,SAAS,CAACF,CAAyB;AAQnDK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAR/BJ,EASX,WAAA,aAAA,CAAA;AATWA,IAANG,EAAA;AAAA,EADNE,EAAc,oBAAoB;AAAA,GACtBL,CAAA;"}

package/dist/shared/id-counter-JhvVCnjh.js

@@ -0,0 +1,143 @@
+var c = (s) => {
+  throw TypeError(s);
+};
+var l = (s, e, t) => e.has(s) || c("Cannot " + t);
+var n = (s, e, t) => (l(s, e, "read from private field"), t ? t.call(s) : e.get(s)), d = (s, e, t) => e.has(s) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(s) : e.set(s, t), u = (s, e, t, r) => (l(s, e, "write to private field"), r ? r.call(s, t) : e.set(s, t), t);
+import { LitElement as h } from "lit";
+var o;
+const a = class a extends h {
+  constructor() {
+    super(...arguments);
+    d(this, o);
+  }
+  /**
+   * Lazy accessor for `ElementInternals`. Calls `attachInternals()` on first
+   * access and caches the result.
+   *
+   * Only valid when `static formAssociated = true` is declared on the subclass.
+   * Accessing this on a non-form-associated component throws a descriptive error.
+   *
+   * @throws {Error} If accessed on a component where `formAssociated` is `false`
+   * @internal
+   */
+  get _internals() {
+    if (!this.constructor.formAssociated)
+      throw new Error(
+        `[HelixElement] _internals accessed on <${this.tagName.toLowerCase()}> but static formAssociated is not set to true on ${this.constructor.name}.`
+      );
+    const t = n(this, o);
+    if (t !== void 0)
+      return t;
+    const r = this.attachInternals();
+    return u(this, o, r), r;
+  }
+  // ─── Browser Form Callbacks (delegate to hook methods) ───
+  /**
+   * Called by the browser when the element's form-associated disabled state
+   * changes (e.g., a parent `<fieldset disabled>` is toggled).
+   *
+   * Delegates to `_onFormDisabled`. Override that method in subclasses.
+   * @internal
+   */
+  formDisabledCallback(t) {
+    this._onFormDisabled(t);
+  }
+  /**
+   * Called by the browser when the owning form is reset.
+   *
+   * Delegates to `_onFormReset`. Override that method in subclasses.
+   * @internal
+   */
+  formResetCallback() {
+    this._onFormReset();
+  }
+  /**
+   * Called by the browser to restore form state (e.g., back/forward cache).
+   *
+   * Delegates to `_onFormStateRestore`. Override that method in subclasses.
+   * @internal
+   */
+  formStateRestoreCallback(t, r) {
+    this._onFormStateRestore(t, r);
+  }
+  // ─── Hook Methods (override in subclasses) ───
+  /**
+   * Override in subclass to react to the element being disabled or enabled
+   * via a parent `<fieldset>`.
+   *
+   * @param _disabled - `true` when the element is being disabled
+   * @internal
+   */
+  _onFormDisabled(t) {
+  }
+  /**
+   * Override in subclass to reset component state when the owning form resets.
+   * @internal
+   */
+  _onFormReset() {
+  }
+  /**
+   * Override in subclass to restore component state from saved form state.
+   *
+   * @param _state - The saved state value, or `null` if none
+   * @param _mode - `'restore'` for bfcache navigation, `'autocomplete'` for autofill
+   * @internal
+   */
+  _onFormStateRestore(t, r) {
+  }
+  // ─── Convenience Getters ───
+  /**
+   * The associated form element, or `null` if not form-associated or not yet
+   * connected to a form.
+   *
+   * Form-associated subclasses that need a guaranteed non-null return type
+   * should redeclare this getter and delegate to `this._internals.form`.
+   *
+   * @internal
+   */
+  get form() {
+    const t = n(this, o);
+    return !this.constructor.formAssociated || t === void 0 ? null : t.form;
+  }
+  /**
+   * The current `ValidityState` for this element, or `null` if not
+   * form-associated.
+   *
+   * Form-associated subclasses that need a guaranteed `ValidityState` return
+   * should redeclare this getter and delegate to `this._internals.validity`.
+   *
+   * @internal
+   */
+  get validity() {
+    const t = n(this, o);
+    return !this.constructor.formAssociated || t === void 0 ? null : t.validity;
+  }
+  /**
+   * The current validation message, or an empty string if not form-associated
+   * or if the element is valid.
+   *
+   * @internal
+   */
+  get validationMessage() {
+    const t = n(this, o);
+    return !this.constructor.formAssociated || t === void 0 ? "" : t.validationMessage;
+  }
+};
+o = new WeakMap(), a.formAssociated = !1;
+let f = a;
+const i = /* @__PURE__ */ new Map();
+function v(s) {
+  return () => {
+    const e = i.get(s) ?? 0;
+    return i.set(s, e + 1), `${s}-${e}`;
+  };
+}
+function b(s) {
+  s !== void 0 ? i.delete(s) : i.clear();
+}
+export {
+  f as H,
+  v as c,
+  b as r
+};
+//# sourceMappingURL=id-counter-JhvVCnjh.js.map

package/dist/shared/id-counter-JhvVCnjh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-counter-JhvVCnjh.js","sources":["../../src/base/helix-element.ts","../../src/base/id-counter.ts"],"sourcesContent":["import { LitElement } from 'lit';\n\n/**\n * `HelixElement` extends `LitElement` with shared infrastructure for all HELiX\n * components: lazy `ElementInternals` access, form lifecycle hook delegation,\n * and convenience validity getters.\n *\n * Form association is opt-in via `static formAssociated = true` on the subclass.\n * When set, `HelixElement` provides a lazy `_internals` accessor that calls\n * `attachInternals()` on first access — eliminating constructor boilerplate.\n *\n * Form components should also override the `_onForm*` hook methods rather than\n * re-declaring the raw browser callbacks (`formResetCallback`, etc.).\n *\n * @example Non-form component — no configuration required:\n * ```ts\n * class HxCard extends HelixElement {\n *   // no formAssociated needed\n * }\n * ```\n *\n * @example Form-associated component:\n * ```ts\n * class HxTextInput extends HelixElement {\n *   static override formAssociated = true;\n *\n *   override _onFormReset(): void {\n *     this.value = '';\n *     this._internals.setFormValue('');\n *   }\n *\n *   override _onFormDisabled(disabled: boolean): void {\n *     this.disabled = disabled;\n *   }\n * }\n * ```\n *\n * @public\n */\nexport class HelixElement extends LitElement {\n  /**\n   * Set to `true` on the subclass to enable ElementInternals form association.\n   *\n   * IMPORTANT: This MUST be redeclared as `static override formAssociated = true`\n   * on each form-associated subclass. The browser's form association mechanism\n   * inspects `formAssociated` on the *registered* custom element class, not\n   * on ancestor classes.\n   *\n   * @internal\n   */\n  static formAssociated = false;\n\n  #internals: ElementInternals | undefined;\n\n  /**\n   * Lazy accessor for `ElementInternals`. Calls `attachInternals()` on first\n   * access and caches the result.\n   *\n   * Only valid when `static formAssociated = true` is declared on the subclass.\n   * Accessing this on a non-form-associated component throws a descriptive error.\n   *\n   * @throws {Error} If accessed on a component where `formAssociated` is `false`\n   * @internal\n   */\n  get _internals(): ElementInternals {\n    if (!(this.constructor as typeof HelixElement).formAssociated) {\n      throw new Error(\n        `[HelixElement] _internals accessed on <${this.tagName.toLowerCase()}> but ` +\n          `static formAssociated is not set to true on ${this.constructor.name}.`,\n      );\n    }\n    const cached = this.#internals;\n    if (cached !== undefined) {\n      return cached;\n    }\n    const internals = this.attachInternals();\n    this.#internals = internals;\n    return internals;\n  }\n\n  // ─── Browser Form Callbacks (delegate to hook methods) ───\n\n  /**\n   * Called by the browser when the element's form-associated disabled state\n   * changes (e.g., a parent `<fieldset disabled>` is toggled).\n   *\n   * Delegates to `_onFormDisabled`. Override that method in subclasses.\n   * @internal\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this._onFormDisabled(disabled);\n  }\n\n  /**\n   * Called by the browser when the owning form is reset.\n   *\n   * Delegates to `_onFormReset`. Override that method in subclasses.\n   * @internal\n   */\n  formResetCallback(): void {\n    this._onFormReset();\n  }\n\n  /**\n   * Called by the browser to restore form state (e.g., back/forward cache).\n   *\n   * Delegates to `_onFormStateRestore`. Override that method in subclasses.\n   * @internal\n   */\n  formStateRestoreCallback(\n    state: File | string | FormData | null,\n    mode: 'restore' | 'autocomplete',\n  ): void {\n    this._onFormStateRestore(state, mode);\n  }\n\n  // ─── Hook Methods (override in subclasses) ───\n\n  /**\n   * Override in subclass to react to the element being disabled or enabled\n   * via a parent `<fieldset>`.\n   *\n   * @param _disabled - `true` when the element is being disabled\n   * @internal\n   */\n  protected _onFormDisabled(_disabled: boolean): void {}\n\n  /**\n   * Override in subclass to reset component state when the owning form resets.\n   * @internal\n   */\n  protected _onFormReset(): void {}\n\n  /**\n   * Override in subclass to restore component state from saved form state.\n   *\n   * @param _state - The saved state value, or `null` if none\n   * @param _mode - `'restore'` for bfcache navigation, `'autocomplete'` for autofill\n   * @internal\n   */\n  protected _onFormStateRestore(\n    _state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {}\n\n  // ─── Convenience Getters ───\n\n  /**\n   * The associated form element, or `null` if not form-associated or not yet\n   * connected to a form.\n   *\n   * Form-associated subclasses that need a guaranteed non-null return type\n   * should redeclare this getter and delegate to `this._internals.form`.\n   *\n   * @internal\n   */\n  get form(): HTMLFormElement | null {\n    const internals = this.#internals;\n    if (!(this.constructor as typeof HelixElement).formAssociated || internals === undefined) {\n      return null;\n    }\n    return internals.form;\n  }\n\n  /**\n   * The current `ValidityState` for this element, or `null` if not\n   * form-associated.\n   *\n   * Form-associated subclasses that need a guaranteed `ValidityState` return\n   * should redeclare this getter and delegate to `this._internals.validity`.\n   *\n   * @internal\n   */\n  get validity(): ValidityState | null {\n    const internals = this.#internals;\n    if (!(this.constructor as typeof HelixElement).formAssociated || internals === undefined) {\n      return null;\n    }\n    return internals.validity;\n  }\n\n  /**\n   * The current validation message, or an empty string if not form-associated\n   * or if the element is valid.\n   *\n   * @internal\n   */\n  get validationMessage(): string {\n    const internals = this.#internals;\n    if (!(this.constructor as typeof HelixElement).formAssociated || internals === undefined) {\n      return '';\n    }\n    return internals.validationMessage;\n  }\n}\n","/**\n * Module-level monotonic ID counter factory.\n *\n * Provides collision-free, deterministic, SSR-safe IDs for components that\n * need stable element IDs (for ARIA relationships, label associations, etc.)\n * without relying on Math.random() which causes hydration mismatches.\n *\n * @public\n */\n\nconst counters = new Map<string, number>();\n\n/**\n * Creates a monotonic ID generator for the given namespace.\n *\n * @param namespace - Component namespace (e.g. 'hx-text-input')\n * @returns A function that returns the next unique ID string\n * @public\n *\n * @example\n * ```ts\n * const nextId = createIdCounter('hx-text-input');\n * private _id = nextId(); // 'hx-text-input-0', 'hx-text-input-1', ...\n * ```\n */\nexport function createIdCounter(namespace: string): () => string {\n  return () => {\n    const current = counters.get(namespace) ?? 0;\n    counters.set(namespace, current + 1);\n    return `${namespace}-${current}`;\n  };\n}\n\n/**\n * Resets the counter for the given namespace (or all namespaces if omitted).\n * Use in test `beforeEach()` for counter isolation between tests.\n *\n * @param namespace - Optional namespace to reset. If omitted, resets all counters.\n * @public\n */\nexport function resetIdCounter(namespace?: string): void {\n  if (namespace !== undefined) {\n    counters.delete(namespace);\n  } else {\n    counters.clear();\n  }\n}\n"],"names":["_HelixElement","LitElement","__privateAdd","_internals","cached","__privateGet","internals","__privateSet","disabled","state","mode","_disabled","_state","_mode","HelixElement","counters","createIdCounter","namespace","current","resetIdCounter"],"mappings":";;;;;;;AAuCO,MAAMA,IAAN,MAAMA,UAAqBC,EAAW;AAAA,EAAtC;AAAA;AAaL,IAAAC,EAAA,MAAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYA,IAAI,aAA+B;AACjC,QAAI,CAAE,KAAK,YAAoC;AAC7C,YAAM,IAAI;AAAA,QACR,0CAA0C,KAAK,QAAQ,YAAA,CAAa,qDACnB,KAAK,YAAY,IAAI;AAAA,MAAA;AAG1E,UAAMC,IAASC,EAAA,MAAKF;AACpB,QAAIC,MAAW;AACb,aAAOA;AAET,UAAME,IAAY,KAAK,gBAAA;AACvB,WAAAC,EAAA,MAAKJ,GAAaG,IACXA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,qBAAqBE,GAAyB;AAC5C,SAAK,gBAAgBA,CAAQ;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,oBAA0B;AACxB,SAAK,aAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,yBACEC,GACAC,GACM;AACN,SAAK,oBAAoBD,GAAOC,CAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWU,gBAAgBC,GAA0B;AAAA,EAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAM3C,eAAqB;AAAA,EAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAStB,oBACRC,GACAC,GACM;AAAA,EAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaT,IAAI,OAA+B;AACjC,UAAMP,IAAYD,EAAA,MAAKF;AACvB,WAAI,CAAE,KAAK,YAAoC,kBAAkBG,MAAc,SACtE,OAEFA,EAAU;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,IAAI,WAAiC;AACnC,UAAMA,IAAYD,EAAA,MAAKF;AACvB,WAAI,CAAE,KAAK,YAAoC,kBAAkBG,MAAc,SACtE,OAEFA,EAAU;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,IAAI,oBAA4B;AAC9B,UAAMA,IAAYD,EAAA,MAAKF;AACvB,WAAI,CAAE,KAAK,YAAoC,kBAAkBG,MAAc,SACtE,KAEFA,EAAU;AAAA,EACnB;AACF;AA9IEH,IAAA,eAFAH,EAAO,iBAAiB;AAXnB,IAAMc,IAANd;AC7BP,MAAMe,wBAAe,IAAA;AAed,SAASC,EAAgBC,GAAiC;AAC/D,SAAO,MAAM;AACX,UAAMC,IAAUH,EAAS,IAAIE,CAAS,KAAK;AAC3C,WAAAF,EAAS,IAAIE,GAAWC,IAAU,CAAC,GAC5B,GAAGD,CAAS,IAAIC,CAAO;AAAA,EAChC;AACF;AASO,SAASC,EAAeF,GAA0B;AACvD,EAAIA,MAAc,SAChBF,EAAS,OAAOE,CAAS,IAEzBF,EAAS,MAAA;AAEb;"}

package/dist/shared/{toast-factory-DTy-qN8r.js → toast-factory-oPHbhMZI.js}

@@ -1,8 +1,8 @@
-import { css as m, LitElement as f, html as l, nothing as u } from "lit";
-import { property as c, query as g, customElement as v } from "lit/decorators.js";
+import { css as p, LitElement as f, html as l, nothing as u } from "lit";
+import "./document-token-adoption-Dym9ALA4.js";
+import { property as c, query as g, state as b, customElement as v } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
-import { tokenStyles as x } from "@helixui/tokens/lit";
-const y = m`
+const y = p`
   /* ─── hx-toast host ─── */
 
   :host {
@@ -124,13 +124,16 @@ const y = m`
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    /* WCAG 2.5.5: minimum 44×44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
     padding: var(--hx-space-1, 0.25rem);
     background: transparent;
     border: none;
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     color: inherit;
     cursor: pointer;
-    opacity: 0.7;
+    opacity: var(--hx-opacity-75, 0.75);
     transition: opacity var(--hx-transition-fast, 150ms ease);
   }
 
@@ -154,11 +157,11 @@ const y = m`
       transition: none;
     }
   }
-`, w = m`
+`, w = p`
   :host {
     display: block;
     position: fixed;
-    z-index: var(--hx-z-index-toast, 9000);
+    z-index: var(--hx-z-index-toast, 1700);
     pointer-events: none;
   }
 
@@ -228,14 +231,14 @@ const y = m`
     --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);
   }
 `;
-var L = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (e, a, r, s) => {
-  for (var t = s > 1 ? void 0 : s ? S(a, r) : a, i = e.length - 1, n; i >= 0; i--)
-    (n = e[i]) && (t = (s ? n(a, r, t) : n(t)) || t);
-  return s && t && L(a, r, t), t;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, a, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? S(a, r) : a, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (e = (s ? i(a, r, e) : i(e)) || e);
+  return s && e && C(a, r, e), e;
 };
 let o = class extends f {
   constructor() {
-    super(...arguments), this.variant = "default", this.duration = 3e3, this.closable = !1, this.open = !1, this.closeLabel = "Dismiss notification", this._timer = null, this._timerStartedAt = null, this._timerRemaining = null;
+    super(...arguments), this.variant = "default", this.duration = 5e3, this.closable = !1, this.open = !1, this.labelClose = "Dismiss notification", this._hasActionContent = !1, this._timer = null, this._timerStartedAt = null, this._timerRemaining = null;
   }
   // ─── Reduced Motion ───
   /** @internal Returns true when the user has opted into reduced motion. */
@@ -243,8 +246,8 @@ let o = class extends f {
     return typeof window > "u" ? !1 : window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   }
   // ─── Lifecycle ───
-  updated(e) {
-    super.updated(e), e.has("open") && (this.open ? (this.removeAttribute("aria-hidden"), this._emitShow(), this.duration > 0 && !this._reducedMotion && this._startTimer()) : (this.setAttribute("aria-hidden", "true"), this._clearTimer(), this._emitHide()));
+  updated(t) {
+    super.updated(t), t.has("open") && (this.open ? (this.removeAttribute("aria-hidden"), this._emitShow(), this.duration > 0 && !this._reducedMotion && !this._hasActionContent && this._startTimer()) : (this.setAttribute("aria-hidden", "true"), this._clearTimer(), this._emitHide()));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._clearTimer();
@@ -260,9 +263,9 @@ let o = class extends f {
   }
   // ─── Private Helpers ───
   /** @internal */
-  _startTimer(e) {
+  _startTimer(t) {
     this._clearTimerHandle();
-    const a = e ?? this.duration;
+    const a = t ?? this.duration;
     this._timerStartedAt = Date.now(), this._timerRemaining = a, this._timer = setTimeout(() => {
       this.open = !1;
     }, a);
@@ -271,8 +274,8 @@ let o = class extends f {
   _pauseTimer() {
     if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null)
       return;
-    const e = Date.now() - this._timerStartedAt;
-    this._timerRemaining = Math.max(0, this._timerRemaining - e), this._clearTimerHandle();
+    const t = Date.now() - this._timerStartedAt;
+    this._timerRemaining = Math.max(0, this._timerRemaining - t), this._clearTimerHandle();
   }
   /** @internal */
   _clearTimerHandle() {
@@ -289,9 +292,9 @@ let o = class extends f {
   /** @internal */
   _emitHide() {
     this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 }));
-    let e = !1;
+    let t = !1;
     const a = () => {
-      e || (e = !0, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
+      t || (t = !0, this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })));
     }, r = this._toastEl;
     r && r.addEventListener("transitionend", a, { once: !0 }), setTimeout(a, 300);
   }
@@ -316,6 +319,11 @@ let o = class extends f {
   _handleClose() {
     this.hide();
   }
+  /** @internal */
+  _handleActionSlotChange(t) {
+    const a = t.target;
+    this._hasActionContent = a.assignedNodes({ flatten: !0 }).length > 0, this._hasActionContent && this.open && this._pauseTimer();
+  }
   // ─── ARIA Helpers ───
   /** @internal */
   get _role() {
@@ -385,7 +393,7 @@ let o = class extends f {
   }
   // ─── Render ───
   render() {
-    const e = this._severityLabel;
+    const t = this._severityLabel;
     return l`
       <div
         part="base"
@@ -402,7 +410,7 @@ let o = class extends f {
         @focusout=${this._handleFocusOut}
       >
         ${this.open ? l`
-              ${e ? l`<span class="toast__severity-label">${e}: </span>` : u}
+              ${t ? l`<span class="toast__severity-label">${t}: </span>` : u}
               <span part="icon" class="toast__icon">
                 <slot name="icon">${this._defaultIcon}</slot>
               </span>
@@ -410,13 +418,13 @@ let o = class extends f {
                 <slot></slot>
               </span>
               <span part="action" class="toast__action">
-                <slot name="action"></slot>
+                <slot name="action" @slotchange=${this._handleActionSlotChange}></slot>
               </span>
               ${this.closable ? l`
                     <button
                       part="close-button"
                       class="toast__close"
-                      aria-label=${this.closeLabel}
+                      aria-label=${this.labelClose}
                       @click=${this._handleClose}
                     >
                       <svg
@@ -439,7 +447,7 @@ let o = class extends f {
     `;
   }
 };
-o.styles = [x, y];
+o.styles = [y];
 o._SEVERITY_LABELS = {
   success: "Success",
   warning: "Warning",
@@ -459,18 +467,21 @@ h([
   c({ type: Boolean, reflect: !0 })
 ], o.prototype, "open", 2);
 h([
-  c({ attribute: "close-label" })
-], o.prototype, "closeLabel", 2);
+  c({ attribute: "label-close" })
+], o.prototype, "labelClose", 2);
 h([
   g(".toast")
 ], o.prototype, "_toastEl", 2);
+h([
+  b()
+], o.prototype, "_hasActionContent", 2);
 o = h([
   v("hx-toast")
 ], o);
-var E = Object.defineProperty, T = Object.getOwnPropertyDescriptor, p = (e, a, r, s) => {
-  for (var t = s > 1 ? void 0 : s ? T(a, r) : a, i = e.length - 1, n; i >= 0; i--)
-    (n = e[i]) && (t = (s ? n(a, r, t) : n(t)) || t);
-  return s && t && E(a, r, t), t;
+var E = Object.defineProperty, L = Object.getOwnPropertyDescriptor, m = (t, a, r, s) => {
+  for (var e = s > 1 ? void 0 : s ? L(a, r) : a, n = t.length - 1, i; n >= 0; n--)
+    (i = t[n]) && (e = (s ? i(a, r, e) : i(e)) || e);
+  return s && e && E(a, r, e), e;
 };
 let d = class extends f {
   constructor() {
@@ -490,32 +501,33 @@ let d = class extends f {
     `;
   }
 };
-d.styles = [x, w];
-p([
+d.styles = [w];
+m([
   c({ type: String, reflect: !0 })
 ], d.prototype, "placement", 2);
-p([
+m([
   c({ type: Number, attribute: "stack-limit" })
 ], d.prototype, "stackLimit", 2);
-d = p([
+d = m([
   v("hx-toast-stack")
 ], d);
-function M(e) {
-  var i;
-  const a = e.placement ?? "bottom-end", r = `hx-toast-stack[placement="${a}"]`;
+function I(t) {
+  var n;
+  if (typeof document > "u") throw new Error("toast() requires a browser environment");
+  const a = t.placement ?? "bottom-end", r = `hx-toast-stack[placement="${a}"]`;
   let s = document.querySelector(r);
   if (s || (s = document.createElement("hx-toast-stack"), s.placement = a, document.body.appendChild(s)), s.stackLimit > 0) {
-    const n = [...s.querySelectorAll("hx-toast")].filter((b) => b.open);
-    n.length >= s.stackLimit && ((i = n[0]) == null || i.hide());
+    const i = [...s.querySelectorAll("hx-toast")].filter((x) => x.open);
+    i.length >= s.stackLimit && ((n = i[0]) == null || n.hide());
   }
-  const t = document.createElement("hx-toast");
-  return t.variant = e.variant ?? "default", t.duration = e.duration ?? 3e3, t.closable = !0, t.textContent = e.message, t.addEventListener("hx-after-hide", () => {
-    t.remove();
-  }), s.appendChild(t), t.show(), t;
+  const e = document.createElement("hx-toast");
+  return e.variant = t.variant ?? "default", e.duration = t.duration ?? 3e3, e.closable = !0, e.textContent = t.message, e.addEventListener("hx-after-hide", () => {
+    e.remove();
+  }), s.appendChild(e), e.show(), e;
 }
 export {
   o as H,
   d as a,
-  M as t
+  I as t
 };
-//# sourceMappingURL=toast-factory-DTy-qN8r.js.map
+//# sourceMappingURL=toast-factory-oPHbhMZI.js.map

package/dist/shared/toast-factory-oPHbhMZI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-factory-oPHbhMZI.js","sources":["../../src/components/hx-toast/hx-toast.styles.ts","../../src/components/hx-toast/hx-toast.ts","../../src/components/hx-toast/hx-toast-stack.ts","../../src/components/hx-toast/toast-factory.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToastStyles = css`\n  /* ─── hx-toast host ─── */\n\n  :host {\n    display: block;\n    pointer-events: none;\n  }\n\n  :host([open]) {\n    pointer-events: auto;\n  }\n\n  /* ─── Toast base ─── */\n\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));\n    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    box-shadow: var(\n      --hx-toast-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    opacity: 0;\n    transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));\n    transition:\n      opacity var(--hx-transition-normal, 250ms ease),\n      transform var(--hx-transition-normal, 250ms ease);\n    width: var(--hx-toast-width, 20rem);\n    max-width: 100%;\n    pointer-events: auto;\n  }\n\n  :host([open]) .toast {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  /* ─── Variant overrides ─── */\n\n  .toast--success {\n    --hx-toast-bg: var(--hx-color-success-600, #16a34a);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .toast--warning {\n    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);\n    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);\n  }\n\n  .toast--danger {\n    --hx-toast-bg: var(--hx-color-error-600, #dc2626);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .toast--info {\n    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* Visually hidden — non-color cue for severity variants (success/warning/danger/info). */\n  /* Ensures variant is not conveyed by color alone for color-blind users.                */\n\n  .toast__severity-label {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Icon ─── */\n\n  .toast__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    line-height: 1;\n  }\n\n  .toast__icon:empty {\n    display: none;\n  }\n\n  /* ─── Message ─── */\n\n  .toast__message {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* ─── Action slot ─── */\n\n  .toast__action {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .toast__action:empty {\n    display: none;\n  }\n\n  /* ─── Close button ─── */\n\n  .toast__close {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: var(--hx-space-1, 0.25rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: inherit;\n    cursor: pointer;\n    opacity: var(--hx-opacity-75, 0.75);\n    transition: opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .toast__close:hover {\n    opacity: 1;\n  }\n\n  .toast__close:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid currentColor;\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast {\n      transition: none;\n    }\n\n    .toast__close {\n      transition: none;\n    }\n  }\n`;\n\nexport const helixToastStackStyles = css`\n  :host {\n    display: block;\n    position: fixed;\n    z-index: var(--hx-z-index-toast, 1700);\n    pointer-events: none;\n  }\n\n  .toast-stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-space-4, 1rem);\n    pointer-events: none;\n  }\n\n  /* ─── Placements ─── */\n\n  :host([placement='top-start']) {\n    top: 0;\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n  }\n\n  :host([placement='top-center']) {\n    top: 0;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    inset-inline-end: auto;\n    bottom: auto;\n  }\n\n  :host([placement='top-end']) {\n    top: 0;\n    inset-inline-end: 0;\n    inset-inline-start: auto;\n    bottom: auto;\n  }\n\n  :host([placement='bottom-start']) {\n    bottom: 0;\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    top: auto;\n  }\n\n  :host([placement='bottom-center']) {\n    bottom: 0;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    inset-inline-end: auto;\n    top: auto;\n  }\n\n  :host([placement='bottom-end']) {\n    bottom: 0;\n    inset-inline-end: 0;\n    inset-inline-start: auto;\n    top: auto;\n  }\n\n  /* ─── Bottom placements: reverse order so newest is on top ─── */\n\n  :host([placement^='bottom']) .toast-stack {\n    flex-direction: column-reverse;\n  }\n\n  /* ─── Slide direction by placement ─── */\n\n  :host([placement^='top']) ::slotted(hx-toast) {\n    --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixToastStyles } from './hx-toast.styles.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * A transient notification message that auto-dismisses after a configurable duration.\n * Supports multiple visual variants, a closable button, icon/action slots, and full\n * ARIA live region semantics for screen readers.\n *\n * @summary Transient notification toast component.\n *\n * @tag hx-toast\n *\n * @slot - Default slot for the notification message.\n * @slot icon - Optional icon rendered before the message.\n * @slot action - Optional action button rendered after the message.\n *\n * @fires {CustomEvent} hx-show - Dispatched when the toast becomes visible.\n * @fires {CustomEvent} hx-hide - Dispatched when the toast begins hiding.\n * @fires {CustomEvent} hx-after-hide - Dispatched after the hide animation completes.\n *\n * @csspart base - The inner toast container div.\n * @csspart icon - The icon slot wrapper.\n * @csspart message - The message slot wrapper.\n * @csspart close-button - The dismiss button (only when closable).\n * @csspart action - The action slot wrapper.\n *\n * @cssprop [--hx-toast-bg=var(--hx-color-neutral-900)] - Toast background color.\n * @cssprop [--hx-toast-color=var(--hx-color-neutral-0)] - Toast text color.\n * @cssprop [--hx-toast-border-radius=var(--hx-border-radius-md)] - Toast border radius.\n * @cssprop [--hx-toast-shadow] - Toast box shadow.\n * @cssprop [--hx-toast-width=20rem] - Toast width.\n */\n@customElement('hx-toast')\nexport class HelixToast extends LitElement {\n  static override styles = [helixToastStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' | 'info' = 'default';\n\n  /**\n   * Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts.\n   * @attr duration\n   */\n  @property({ type: Number })\n  duration = 5000;\n\n  /**\n   * Whether to show a close button.\n   * @attr closable\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Whether the toast is currently visible.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Accessible label for the close button. Override for localization.\n   * @attr label-close\n   */\n  @property({ attribute: 'label-close' })\n  labelClose = 'Dismiss notification';\n\n  // ─── Private State ───\n\n  /** @internal */\n  @query('.toast') private _toastEl!: HTMLElement | null;\n\n  /** @internal Tracks whether the action slot has slotted content. */\n  @state() private _hasActionContent = false;\n\n  /** @internal */\n  private _timer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Reduced Motion ───\n\n  /** @internal Returns true when the user has opted into reduced motion. */\n  private get _reducedMotion(): boolean {\n    // Guard for SSR — window.matchMedia is unavailable server-side\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  /** @internal */\n  private _timerStartedAt: number | null = null;\n\n  /** @internal */\n  private _timerRemaining: number | null = null;\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.removeAttribute('aria-hidden');\n        this._emitShow();\n        if (this.duration > 0 && !this._reducedMotion && !this._hasActionContent) {\n          this._startTimer();\n        }\n      } else {\n        this.setAttribute('aria-hidden', 'true');\n        this._clearTimer();\n        this._emitHide();\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTimer();\n  }\n\n  // ─── Public API ───\n\n  /** Show the toast. */\n  show(): void {\n    if (!this.open) {\n      this.open = true;\n    }\n  }\n\n  /** Hide the toast. */\n  hide(): void {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _startTimer(remaining?: number): void {\n    this._clearTimerHandle();\n    const delay = remaining ?? this.duration;\n    this._timerStartedAt = Date.now();\n    this._timerRemaining = delay;\n    this._timer = setTimeout(() => {\n      this.open = false;\n    }, delay);\n  }\n\n  /** @internal */\n  private _pauseTimer(): void {\n    if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null) {\n      return;\n    }\n    const elapsed = Date.now() - this._timerStartedAt;\n    this._timerRemaining = Math.max(0, this._timerRemaining - elapsed);\n    this._clearTimerHandle();\n  }\n\n  /** @internal */\n  private _clearTimerHandle(): void {\n    if (this._timer !== null) {\n      clearTimeout(this._timer);\n      this._timer = null;\n    }\n  }\n\n  /** @internal */\n  private _clearTimer(): void {\n    this._clearTimerHandle();\n    this._timerStartedAt = null;\n    this._timerRemaining = null;\n  }\n\n  /** @internal */\n  private _emitShow(): void {\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _emitHide(): void {\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n\n    let fired = false;\n    const fireAfterHide = () => {\n      if (fired) return;\n      fired = true;\n      this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n    };\n\n    // Fire on transitionend if available; fallback ensures it fires in test environments\n    // and when transitions are disabled (prefers-reduced-motion, no CSS transitions).\n    const base = this._toastEl;\n    if (base) {\n      base.addEventListener('transitionend', fireAfterHide, { once: true });\n    }\n    // Fallback fires after the CSS transition duration (250ms) plus a small buffer.\n    setTimeout(fireAfterHide, 300);\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleMouseEnter(): void {\n    this._pauseTimer();\n  }\n\n  /** @internal */\n  private _handleMouseLeave(): void {\n    if (this.open && this.duration > 0) {\n      this._startTimer(this._timerRemaining ?? undefined);\n    }\n  }\n\n  /** @internal */\n  private _handleFocusIn(): void {\n    this._pauseTimer();\n  }\n\n  /** @internal */\n  private _handleFocusOut(): void {\n    if (this.open && this.duration > 0) {\n      this._startTimer(this._timerRemaining ?? undefined);\n    }\n  }\n\n  /** @internal */\n  private _handleClose(): void {\n    this.hide();\n  }\n\n  /** @internal */\n  private _handleActionSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasActionContent = slot.assignedNodes({ flatten: true }).length > 0;\n    if (this._hasActionContent && this.open) {\n      this._pauseTimer();\n    }\n  }\n\n  // ─── ARIA Helpers ───\n\n  /** @internal */\n  private get _role(): 'alert' | 'status' {\n    return this.variant === 'danger' ? 'alert' : 'status';\n  }\n\n  /** @internal */\n  private get _ariaLive(): 'assertive' | 'polite' {\n    return this.variant === 'danger' ? 'assertive' : 'polite';\n  }\n\n  // ─── WCAG 1.4.1: Default Icons ───\n  // Each semantic variant renders a default icon when no icon is slotted,\n  // ensuring the severity is not conveyed by color alone.\n\n  /** @internal */\n  private _renderSuccessIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderWarningIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDangerIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal Returns the default icon for the current variant, or nothing for 'default'. */\n  private get _defaultIcon() {\n    switch (this.variant) {\n      case 'success':\n        return this._renderSuccessIcon();\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'danger':\n        return this._renderDangerIcon();\n      case 'info':\n        return this._renderInfoIcon();\n      default:\n        return nothing;\n    }\n  }\n\n  // ─── WCAG 1.4.1: Severity label map ───\n\n  /** @internal */\n  private static readonly _SEVERITY_LABELS: Partial<Record<ToastVariant, string>> = {\n    success: 'Success',\n    warning: 'Warning',\n    danger: 'Error',\n    info: 'Info',\n  };\n\n  /** @internal */\n  private get _severityLabel(): string {\n    return HelixToast._SEVERITY_LABELS[this.variant] ?? '';\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const severityLabel = this._severityLabel;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          toast: true,\n          [`toast--${this.variant}`]: true,\n        })}\n        role=${this._role}\n        aria-live=${this._ariaLive}\n        aria-atomic=\"true\"\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}\n      >\n        ${this.open\n          ? html`\n              ${severityLabel\n                ? html`<span class=\"toast__severity-label\">${severityLabel}: </span>`\n                : nothing}\n              <span part=\"icon\" class=\"toast__icon\">\n                <slot name=\"icon\">${this._defaultIcon}</slot>\n              </span>\n              <span part=\"message\" class=\"toast__message\">\n                <slot></slot>\n              </span>\n              <span part=\"action\" class=\"toast__action\">\n                <slot name=\"action\" @slotchange=${this._handleActionSlotChange}></slot>\n              </span>\n              ${this.closable\n                ? html`\n                    <button\n                      part=\"close-button\"\n                      class=\"toast__close\"\n                      aria-label=${this.labelClose}\n                      @click=${this._handleClose}\n                    >\n                      <svg\n                        aria-hidden=\"true\"\n                        width=\"16\"\n                        height=\"16\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"2\"\n                        stroke-linecap=\"round\"\n                        stroke-linejoin=\"round\"\n                      >\n                        <path d=\"M18 6L6 18M6 6l12 12\" />\n                      </svg>\n                    </button>\n                  `\n                : nothing}\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toast': HelixToast;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { helixToastStackStyles } from './hx-toast.styles.js';\n\nexport type ToastStackPlacement =\n  | 'top-start'\n  | 'top-center'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-center'\n  | 'bottom-end';\n\n/**\n * A fixed-position container that stacks `hx-toast` elements at the specified\n * corner of the viewport. Enforces a maximum visible toast count via `stack-limit`.\n *\n * @summary Toast stack container managing position and count limits.\n *\n * @tag hx-toast-stack\n *\n * @slot - Accepts `hx-toast` elements.\n *\n * @csspart base - The inner stack container div.\n *\n * @cssprop [--hx-z-index-toast=9000] - Z-index for the fixed stack.\n */\n@customElement('hx-toast-stack')\nexport class HelixToastStack extends LitElement {\n  static override styles = [helixToastStackStyles];\n\n  /**\n   * Corner of the viewport where toasts appear.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top-start'\n    | 'top-center'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-center'\n    | 'bottom-end' = 'bottom-end';\n\n  /**\n   * Maximum number of simultaneously visible toasts. 0 = unlimited.\n   * @attr stack-limit\n   */\n  @property({ type: Number, attribute: 'stack-limit' })\n  stackLimit = 3;\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'toast-stack': true,\n          [`toast-stack--${this.placement}`]: true,\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toast-stack': HelixToastStack;\n  }\n}\n","import { HelixToast } from './hx-toast.js';\nimport { HelixToastStack } from './hx-toast-stack.js';\nimport type { ToastVariant } from './hx-toast.js';\nimport type { ToastStackPlacement } from './hx-toast-stack.js';\n\nexport interface ToastOptions {\n  /** The notification message text. */\n  message: string;\n  /** Visual variant. Defaults to 'default'. */\n  variant?: ToastVariant;\n  /** Auto-dismiss duration in ms. 0 = persistent. Defaults to 3000. */\n  duration?: number;\n  /** Placement of the shared stack. Defaults to 'bottom-end'. */\n  placement?: ToastStackPlacement;\n}\n\n/**\n * Imperatively create and display a toast notification.\n *\n * Creates a shared `hx-toast-stack` on `document.body` if one does not exist,\n * then appends a new `hx-toast` with the given options. Respects the stack's\n * `stackLimit` by hiding the oldest visible toast when the limit is exceeded.\n *\n * @example\n * import { toast } from '@helixui/library/components/hx-toast/index.js';\n * toast({ message: 'Patient record saved.', variant: 'success' });\n */\nexport function toast(options: ToastOptions): HelixToast {\n  if (typeof document === 'undefined') throw new Error('toast() requires a browser environment');\n  const placement = options.placement ?? 'bottom-end';\n\n  // Find or create a dedicated stack for this placement\n  const stackSelector = `hx-toast-stack[placement=\"${placement}\"]`;\n  let stack = document.querySelector<HelixToastStack>(stackSelector);\n  if (!stack) {\n    stack = document.createElement('hx-toast-stack');\n    stack.placement = placement;\n    // Intentional design decision: the toast stack is appended to document.body rather\n    // than inserted near the caller. This is required so that the fixed-position overlay\n    // is not clipped by an ancestor with `overflow: hidden`, `transform`, or `filter`\n    // (all of which create a new stacking context and break fixed positioning).\n    // Drupal compatibility note: Drupal's BigPipe / AJAX behaviors can re-attach the\n    // document body without removing these stacks. The selector check above\n    // (`document.querySelector`) ensures only one stack per placement is ever created,\n    // preventing duplicates on re-attach cycles.\n    document.body.appendChild(stack);\n  }\n\n  // Enforce stack limit: hide oldest open toast if at capacity\n  if (stack.stackLimit > 0) {\n    const openToasts = [...stack.querySelectorAll<HelixToast>('hx-toast')].filter((t) => t.open);\n    if (openToasts.length >= stack.stackLimit) {\n      openToasts[0]?.hide();\n    }\n  }\n\n  // Create toast element\n  const toastEl = document.createElement('hx-toast');\n  toastEl.variant = options.variant ?? 'default';\n  toastEl.duration = options.duration ?? 3000;\n  toastEl.closable = true;\n  toastEl.textContent = options.message;\n\n  // Remove from DOM after hiding\n  toastEl.addEventListener('hx-after-hide', () => {\n    toastEl.remove();\n  });\n\n  stack.appendChild(toastEl);\n  toastEl.show();\n\n  return toastEl;\n}\n"],"names":["helixToastStyles","css","helixToastStackStyles","HelixToast","LitElement","changedProperties","remaining","delay","elapsed","fired","fireAfterHide","base","e","slot","html","nothing","severityLabel","classMap","__decorateClass","property","query","state","customElement","HelixToastStack","toast","options","placement","stackSelector","stack","openToasts","t","_a","toastEl"],"mappings":";;;;AAEO,MAAMA,IAAmBC;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;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;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;AAAA;AAAA;AAAA;AAAA;AAAA,GA6JnBC,IAAwBD;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACzH9B,IAAME,IAAN,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"}

package/dist/utilities/adoptedStylesheetRegistry.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @module adoptedStylesheetRegistry
+ *
+ * A registry that integrates with the `@helixui/adopted-stylesheets` package
+ * when available, falling back to the `lightStyleRegistry` pattern for
+ * environments that do not support the Constructable Stylesheets API or where
+ * the adopted-stylesheets package is not installed.
+ *
+ * This module provides a unified `register` API so call sites do not need to
+ * branch on capability detection.
+ *
+ * @example
+ * ```ts
+ * import { adoptedStylesheetRegistry } from '../../utilities/adoptedStylesheetRegistry.js';
+ *
+ * // Registers via adopted stylesheets when available, falls back to <style> injection.
+ * adoptedStylesheetRegistry.register('hx-card', 'p { font-size: var(--hx-font-size-md); }');
+ * ```
+ */
+/**
+ * Registers a stylesheet for the given component, using the most capable
+ * available mechanism:
+ *
+ * 1. **Constructable Stylesheets** (`document.adoptedStyleSheets`) — preferred;
+ *    zero-duplication via `CSSStyleSheet` identity.
+ * 2. **`<style>` injection** — fallback for older browsers or SSR-hydrated pages
+ *    that do not support Constructable Stylesheets. Delegates to `injectLightStyles`
+ *    which scopes selectors via `[data-hx-styled="componentName"]`.
+ *
+ * Calling `register` multiple times with the same `componentName` is safe —
+ * the implementation deduplicates at the sheet level.
+ *
+ * @param componentName - The component tag name (e.g. `'hx-card'`).
+ * @param css - The CSS string to register. For fallback mode, selectors will be
+ *   scoped under `[data-hx-styled="componentName"]`.
+ */
+declare function register(componentName: string, css: string): void;
+/**
+ * The unified registry object for light DOM stylesheet management.
+ * Consumers should use this rather than calling `injectLightStyles` directly
+ * when they want automatic capability detection.
+ */
+export declare const adoptedStylesheetRegistry: {
+    register: typeof register;
+};
+export {};
+//# sourceMappingURL=adoptedStylesheetRegistry.d.ts.map

package/dist/utilities/adoptedStylesheetRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adoptedStylesheetRegistry.d.ts","sourceRoot":"","sources":["../../src/utilities/adoptedStylesheetRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAgBH;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAiB1D;AAED;;;;GAIG;AACH,eAAO,MAAM,yBAAyB;;CAAe,CAAC"}

package/dist/utilities/document-token-adoption.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Adopts the full set of HELiX design tokens into `document.adoptedStyleSheets`.
+ * Safe to call multiple times — only the first invocation has any effect.
+ * Uses a document-level marker to survive multiple bundled copies of the library.
+ *
+ * The tokens are declared on `:root` so they participate in CSS inheritance
+ * and can be overridden by `hx-theme` (which declares on its `:host`).
+ */
+export declare function ensureDocumentTokens(): void;
+//# sourceMappingURL=document-token-adoption.d.ts.map

package/dist/utilities/document-token-adoption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-token-adoption.d.ts","sourceRoot":"","sources":["../../src/utilities/document-token-adoption.ts"],"names":[],"mappings":"AA4BA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,IAAI,CAkB3C"}

package/dist/utilities/generateScopedSelectors.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @module generateScopedSelectors
+ *
+ * Generates CSS with all selectors scoped under a `[data-hx-styled="componentName"]`
+ * attribute selector. This ensures injected light DOM styles only apply to content
+ * wrapped in `<hx-style-scope component="...">` and do not leak to the rest of the page.
+ *
+ * @example
+ * ```ts
+ * import { generateScopedSelectors } from './generateScopedSelectors.js';
+ *
+ * const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');
+ * // '[data-hx-styled="hx-card"] p { color: red; }'
+ * ```
+ */
+/**
+ * Wraps all CSS selectors to be scoped under `[data-hx-styled="componentName"]`.
+ *
+ * Handles:
+ * - Standard selectors: `p { ... }` → `[data-hx-styled="hx-card"] p { ... }`
+ * - `::slotted(*)` patterns: `::slotted(p) { ... }` → `[data-hx-styled="hx-card"] p { ... }`
+ * - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped
+ * - `:host` selectors are replaced with the scope attribute selector
+ *
+ * @param componentName - The component tag name used as the scope identifier.
+ * @param css - The CSS string to transform.
+ * @returns The transformed CSS with all selectors scoped.
+ */
+export declare function generateScopedSelectors(componentName: string, css: string): string;
+//# sourceMappingURL=generateScopedSelectors.d.ts.map

package/dist/utilities/generateScopedSelectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateScopedSelectors.d.ts","sourceRoot":"","sources":["../../src/utilities/generateScopedSelectors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGlF"}

package/dist/utilities/injectLightStyles.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @module injectLightStyles
+ *
+ * Core utility for injecting scoped `<style>` elements into `document.head`
+ * to style light DOM slotted content in HELiX components. Uses the
+ * `lightStyleRegistry` to deduplicate — each component type is injected at
+ * most once per page lifetime.
+ *
+ * This is the primary mechanism for ensuring Drupal-slotted content inherits
+ * proper typography and spacing when rendered into HELiX components.
+ *
+ * @example
+ * ```ts
+ * import { injectLightStyles } from '../../utilities/injectLightStyles.js';
+ *
+ * // In connectedCallback:
+ * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');
+ * ```
+ */
+/**
+ * Injects a scoped `<style>` element into `document.head` for light DOM content
+ * belonging to `componentName`. The CSS is automatically scoped via
+ * `generateScopedSelectors` so styles only apply inside
+ * `[data-hx-styled="componentName"]` wrappers.
+ *
+ * Safe to call multiple times — subsequent calls for the same `componentName`
+ * are no-ops (deduplication via `lightStyleRegistry`).
+ *
+ * No-op in SSR environments where `document` is not defined.
+ *
+ * @param componentName - The component tag name used as the scope identifier
+ *   (e.g. `'hx-card'`). Must be unique per component type.
+ * @param css - The raw CSS to scope and inject. Selectors will be prefixed with
+ *   `[data-hx-styled="componentName"]`.
+ */
+export declare function injectLightStyles(componentName: string, css: string): void;
+//# sourceMappingURL=injectLightStyles.d.ts.map

package/dist/utilities/injectLightStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectLightStyles.d.ts","sourceRoot":"","sources":["../../src/utilities/injectLightStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAKH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAa1E"}