@helixui/library 1.0.0 → 1.0.1

package/dist/shared/{hx-accordion-Cyswa6J3.js → hx-accordion-DT8qHOay.js}

@@ -1,9 +1,9 @@
-import { css as b, svg as C, LitElement as w, nothing as S, html as _ } from "lit";
-import { property as m, customElement as E } from "lit/decorators.js";
+import { css as w, svg as S, LitElement as _, nothing as u, html as E } from "lit";
+import { property as h, customElement as $ } from "lit/decorators.js";
 import { tokenStyles as k } from "@helixui/tokens/lit";
 import { classMap as D } from "lit/directives/class-map.js";
 import { d as A } from "./dev-warn-YlwPHjtX.js";
-const I = b`
+const L = w`
   :host {
     display: block;
     font-family: var(--hx-font-family-sans, sans-serif);
@@ -13,7 +13,7 @@ const I = b`
     border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));
     overflow: hidden;
   }
-`, O = b`
+`, I = w`
   :host {
     display: block;
   }
@@ -134,12 +134,12 @@ const I = b`
     }
   }
 `;
-var P = Object.defineProperty, j = Object.getOwnPropertyDescriptor, g = (e, r, o, t) => {
-  for (var n = t > 1 ? void 0 : t ? j(r, o) : r, i = e.length - 1, a; i >= 0; i--)
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (e, r, o, t) => {
+  for (var n = t > 1 ? void 0 : t ? P(r, o) : r, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (n = (t ? a(r, o, n) : a(n)) || n);
-  return t && n && P(r, o, n), n;
+  return t && n && O(r, o, n), n;
 };
-const L = C`
+const j = S`
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="16"
@@ -155,9 +155,21 @@ const L = C`
     <polyline points="6 9 12 15 18 9"></polyline>
   </svg>
 `;
-let s = class extends w {
+let s = class extends _ {
   constructor() {
-    super(...arguments), this._uid = `hx-accordion-item-${++s._counter}`, this.expanded = !1, this.disabled = !1;
+    super(...arguments), this._uid = `hx-accordion-item-${++s._counter}`, this.expanded = !1, this.disabled = !1, this.level = 3;
+  }
+  // ─── Heading Level Helper ───
+  /**
+   * Returns a clamped heading level (1–6) for use as `aria-level` on the
+   * `<summary>` element. Per the WAI-ARIA APG Accordion pattern, the
+   * `<summary>` must be a **direct child** of `<details>` for native
+   * disclosure behaviour to work. Instead of wrapping `<summary>` inside
+   * an `<h3>` (which breaks the native toggle), we apply
+   * `role="heading" aria-level="N"` directly on `<summary>`.
+   */
+  get _headingLevel() {
+    return Math.max(1, Math.min(6, this.level));
   }
   // ─── Toggle Logic ───
   _toggle() {
@@ -183,21 +195,23 @@ let s = class extends w {
       "item--expanded": this.expanded,
       "item--disabled": this.disabled
     };
-    return _`
+    return E`
       <details part="item" class=${D(e)} ?open=${this.expanded}>
         <summary
           id=${`${this._uid}-trigger`}
           part="trigger"
           class="trigger"
+          role="heading"
+          aria-level=${this._headingLevel}
           tabindex=${this.disabled ? "-1" : "0"}
-          aria-expanded=${this.expanded ? "true" : "false"}
-          aria-disabled=${this.disabled ? "true" : "false"}
+          aria-expanded=${this.expanded ? "true" : u}
+          aria-disabled=${this.disabled ? "true" : u}
           aria-controls=${`${this._uid}-content`}
           @click=${this._handleSummaryClick}
           @keydown=${this._handleKeyDown}
         >
           <slot name="trigger"></slot>
-          <span part="icon" class="icon">${L}</span>
+          <span part="icon" class="icon">${j}</span>
         </summary>
         <div class="content-wrapper">
           <div class="content-inner">
@@ -207,7 +221,7 @@ let s = class extends w {
               class="content"
               role="region"
               aria-labelledby=${`${this._uid}-trigger`}
-              aria-hidden=${this.expanded ? S : "true"}
+              aria-hidden=${this.expanded ? u : "true"}
             >
               <slot></slot>
             </div>
@@ -217,23 +231,26 @@ let s = class extends w {
     `;
   }
 };
-s.styles = [k, O];
+s.styles = [k, I];
 s._counter = 0;
-g([
-  m({ type: Boolean, reflect: !0 })
+p([
+  h({ type: Boolean, reflect: !0 })
 ], s.prototype, "expanded", 2);
-g([
-  m({ type: Boolean, reflect: !0 })
+p([
+  h({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
-s = g([
-  E("hx-accordion-item")
+p([
+  h({ type: Number })
+], s.prototype, "level", 2);
+s = p([
+  $("hx-accordion-item")
 ], s);
-var q = Object.defineProperty, R = Object.getOwnPropertyDescriptor, $ = (e, r, o, t) => {
+var q = Object.defineProperty, R = Object.getOwnPropertyDescriptor, C = (e, r, o, t) => {
   for (var n = t > 1 ? void 0 : t ? R(r, o) : r, i = e.length - 1, a; i >= 0; i--)
     (a = e[i]) && (n = (t ? a(r, o, n) : a(n)) || n);
   return t && n && q(r, o, n), n;
 };
-let c = class extends w {
+let c = class extends _ {
   constructor() {
     super(...arguments), this.mode = "single", this._handleChildExpand = (e) => {
       if (this.mode !== "single") return;
@@ -242,14 +259,14 @@ let c = class extends w {
         t !== r && t.expanded && (t.expanded = !1, t._dispatchToggleEvent(!1));
       });
     }, this._handleKeyDown = (e) => {
-      var f, u, x, v;
+      var f, v, x, y;
       if (this._getTriggers().length === 0) return;
       const o = ((f = this.shadowRoot) == null ? void 0 : f.activeElement) ?? document.activeElement;
       let t = null;
       const n = Array.from(this.querySelectorAll("hx-accordion-item"));
       for (const l of n) {
-        const y = (u = l.shadowRoot) == null ? void 0 : u.querySelector("summary");
-        if (y === o || ((x = l.shadowRoot) == null ? void 0 : x.activeElement) === y) {
+        const b = (v = l.shadowRoot) == null ? void 0 : v.querySelector('[part="trigger"]');
+        if (b === o || ((x = l.shadowRoot) == null ? void 0 : x.activeElement) === b) {
           t = l;
           break;
         }
@@ -275,8 +292,8 @@ let c = class extends w {
           return;
       }
       e.preventDefault();
-      const h = i[d], p = (v = h == null ? void 0 : h.shadowRoot) == null ? void 0 : v.querySelector("summary");
-      p == null || p.focus();
+      const g = i[d], m = (y = g == null ? void 0 : g.shadowRoot) == null ? void 0 : y.querySelector('[part="trigger"]');
+      m == null || m.focus();
     };
   }
   // ─── Lifecycle ───
@@ -302,7 +319,7 @@ let c = class extends w {
     const e = this.querySelectorAll("hx-accordion-item"), r = [];
     return e.forEach((o) => {
       var n;
-      const t = (n = o.shadowRoot) == null ? void 0 : n.querySelector("summary");
+      const t = (n = o.shadowRoot) == null ? void 0 : n.querySelector('[part="trigger"]');
       t && r.push(t);
     }), r;
   }
@@ -318,22 +335,22 @@ let c = class extends w {
   }
   // ─── Render ───
   render() {
-    return _`
+    return E`
       <div part="accordion" class="accordion">
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;
   }
 };
-c.styles = [k, I];
-$([
-  m({ type: String, reflect: !0 })
+c.styles = [k, L];
+C([
+  h({ type: String, reflect: !0 })
 ], c.prototype, "mode", 2);
-c = $([
-  E("hx-accordion")
+c = C([
+  $("hx-accordion")
 ], c);
 export {
   c as H,
   s as a
 };
-//# sourceMappingURL=hx-accordion-Cyswa6J3.js.map
+//# sourceMappingURL=hx-accordion-DT8qHOay.js.map

package/dist/shared/hx-accordion-DT8qHOay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-accordion-DT8qHOay.js","sources":["../../src/components/hx-accordion/hx-accordion.styles.ts","../../src/components/hx-accordion/hx-accordion-item.styles.ts","../../src/components/hx-accordion/hx-accordion-item.ts","../../src/components/hx-accordion/hx-accordion.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAccordionStyles = css`\n  :host {\n    display: block;\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .accordion {\n    border-radius: var(--hx-accordion-border-radius, var(--hx-border-radius-md, 0.375rem));\n    overflow: hidden;\n  }\n`;\n","import { css } from 'lit';\n\nexport const helixAccordionItemStyles = css`\n  :host {\n    display: block;\n  }\n\n  .item {\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #dee2e6));\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  :host(:first-child) .item {\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-accordion-border-color, var(--hx-color-neutral-200, #dee2e6));\n  }\n\n  /* Remove native details marker */\n  .trigger {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-accordion-trigger-padding, var(--hx-space-4, 1rem));\n    cursor: pointer;\n    list-style: none;\n    font-size: var(--hx-font-size-md, 1rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    color: var(--hx-accordion-trigger-color, var(--hx-color-neutral-800, #212529));\n    background-color: var(--hx-accordion-trigger-bg, transparent);\n    user-select: none;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* Hide the native details disclosure triangle */\n  .trigger::-webkit-details-marker {\n    display: none;\n  }\n\n  .trigger::marker {\n    display: none;\n  }\n\n  .item--disabled .trigger {\n    cursor: not-allowed;\n  }\n\n  :host(:not([disabled])) .trigger:hover {\n    background-color: var(--hx-accordion-trigger-hover-bg, var(--hx-color-neutral-50, #f8f9fa));\n  }\n\n  .trigger:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));\n    outline-offset: var(--hx-focus-ring-offset, -2px);\n  }\n\n  /* ─── Icon ─── */\n\n  .icon {\n    flex-shrink: 0;\n    width: 1.25rem;\n    height: 1.25rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--hx-accordion-icon-color, var(--hx-color-neutral-500, #6c757d));\n    transition: transform var(--hx-transition-normal, 250ms ease);\n  }\n\n  .item--expanded .icon {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Content animation via CSS grid trick ─── */\n\n  .content-wrapper {\n    display: grid;\n    grid-template-rows: 0fr;\n    transition: grid-template-rows var(--hx-transition-normal, 250ms ease);\n    overflow: hidden;\n  }\n\n  .item--expanded .content-wrapper,\n  details[open]:not(.item--expanded) .content-wrapper {\n    grid-template-rows: 1fr;\n  }\n\n  .content-inner {\n    overflow: hidden;\n  }\n\n  .content {\n    padding: var(--hx-accordion-content-padding, 0 var(--hx-space-4, 1rem) var(--hx-space-4, 1rem));\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    color: var(--hx-accordion-content-color, var(--hx-color-neutral-600, #495057));\n  }\n\n  /* ─── Disabled host ─── */\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .trigger {\n      transition: none;\n    }\n\n    .icon {\n      transition: none;\n    }\n\n    .content-wrapper {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, svg, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAccordionItemStyles } from './hx-accordion-item.styles.js';\n\nconst chevronIcon = svg`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\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    aria-hidden=\"true\"\n  >\n    <polyline points=\"6 9 12 15 18 9\"></polyline>\n  </svg>\n`;\n\n/**\n * An individual accordion item with collapsible content.\n *\n * @summary Collapsible panel that can be expanded or collapsed.\n *\n * @tag hx-accordion-item\n *\n * @slot trigger - The heading/trigger content for this item.\n * @slot - Default slot for the collapsible body content.\n *\n * @attr {number} level - Heading level (1–6) for the trigger via `role=\"heading\" aria-level`.\n *   Defaults to 3. Set this to match the document outline — e.g., use `level=\"2\"` when the\n *   accordion appears under an `<h1>` landmark.\n *\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-expand - Dispatched when the item is expanded.\n * @fires {CustomEvent<{expanded: boolean, itemId: string}>} hx-collapse - Dispatched when the item is collapsed.\n *\n * @csspart item - The outer details element container.\n * @csspart trigger - The summary/trigger element.\n * @csspart content - The collapsible content area.\n * @csspart icon - The expand/collapse icon.\n *\n * @cssprop [--hx-accordion-border-color=var(--hx-color-neutral-200)] - Border color between items.\n * @cssprop [--hx-accordion-trigger-padding=var(--hx-space-4)] - Trigger padding.\n * @cssprop [--hx-accordion-trigger-color=var(--hx-color-neutral-800)] - Trigger text color.\n * @cssprop [--hx-accordion-trigger-bg=transparent] - Trigger background color.\n * @cssprop [--hx-accordion-trigger-hover-bg=var(--hx-color-neutral-50)] - Trigger hover background.\n * @cssprop [--hx-accordion-icon-color=var(--hx-color-neutral-500)] - Icon color.\n * @cssprop [--hx-accordion-content-padding=0 var(--hx-space-4) var(--hx-space-4)] - Content padding.\n * @cssprop [--hx-accordion-content-color=var(--hx-color-neutral-600)] - Content text color.\n */\n@customElement('hx-accordion-item')\nexport class HelixAccordionItem extends LitElement {\n  static override styles = [tokenStyles, helixAccordionItemStyles];\n\n  private static _counter = 0;\n  private _uid = `hx-accordion-item-${++HelixAccordionItem._counter}`;\n\n  /**\n   * Whether this item is expanded.\n   * @attr expanded\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * Whether this item is disabled (cannot be toggled).\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Heading level (1–6) applied via `role=\"heading\" aria-level` on the summary\n   * trigger. Defaults to 3. Set to match the document outline around the\n   * accordion so screen readers surface accordion items in the heading list.\n   * @attr level\n   */\n  @property({ type: Number })\n  level: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  // ─── Heading Level Helper ───\n\n  /**\n   * Returns a clamped heading level (1–6) for use as `aria-level` on the\n   * `<summary>` element. Per the WAI-ARIA APG Accordion pattern, the\n   * `<summary>` must be a **direct child** of `<details>` for native\n   * disclosure behaviour to work. Instead of wrapping `<summary>` inside\n   * an `<h3>` (which breaks the native toggle), we apply\n   * `role=\"heading\" aria-level=\"N\"` directly on `<summary>`.\n   */\n  private get _headingLevel(): number {\n    return Math.max(1, Math.min(6, this.level));\n  }\n\n  // ─── Toggle Logic ───\n\n  private _toggle(): void {\n    if (this.disabled) return;\n\n    const willExpand = !this.expanded;\n    this.expanded = willExpand;\n\n    this._dispatchToggleEvent(willExpand);\n  }\n\n  _dispatchToggleEvent(expanded: boolean): void {\n    const detail = { expanded, itemId: this.id || '' };\n    const options = { bubbles: true, composed: true, detail };\n\n    if (expanded) {\n      this.dispatchEvent(new CustomEvent('hx-expand', options));\n    } else {\n      this.dispatchEvent(new CustomEvent('hx-collapse', options));\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleSummaryClick(e: MouseEvent): void {\n    e.preventDefault();\n    this._toggle();\n  }\n\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const itemClasses = {\n      item: true,\n      'item--expanded': this.expanded,\n      'item--disabled': this.disabled,\n    };\n\n    return html`\n      <details part=\"item\" class=${classMap(itemClasses)} ?open=${this.expanded}>\n        <summary\n          id=${`${this._uid}-trigger`}\n          part=\"trigger\"\n          class=\"trigger\"\n          role=\"heading\"\n          aria-level=${this._headingLevel}\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-expanded=${this.expanded ? 'true' : nothing}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-controls=${`${this._uid}-content`}\n          @click=${this._handleSummaryClick}\n          @keydown=${this._handleKeyDown}\n        >\n          <slot name=\"trigger\"></slot>\n          <span part=\"icon\" class=\"icon\">${chevronIcon}</span>\n        </summary>\n        <div class=\"content-wrapper\">\n          <div class=\"content-inner\">\n            <div\n              id=${`${this._uid}-content`}\n              part=\"content\"\n              class=\"content\"\n              role=\"region\"\n              aria-labelledby=${`${this._uid}-trigger`}\n              aria-hidden=${this.expanded ? nothing : 'true'}\n            >\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </details>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-accordion-item': HelixAccordionItem;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAccordionStyles } from './hx-accordion.styles.js';\nimport './hx-accordion-item.js';\nimport type { HelixAccordionItem } from './hx-accordion-item.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/**\n * An accordion container that manages collapsible content sections.\n *\n * @summary Collapsible content sections with single or multi-expand modes.\n *\n * @tag hx-accordion\n *\n * @slot - Default slot for hx-accordion-item elements.\n *\n * @csspart accordion - The outer container wrapping all accordion items.\n *\n * @cssprop [--hx-accordion-border-radius=var(--hx-border-radius-md)] - Outer border radius.\n *\n * @example\n * ```html\n * <hx-accordion mode=\"single\">\n *   <hx-accordion-item>\n *     <span slot=\"trigger\">What is this?</span>\n *     <p>Answer content here.</p>\n *   </hx-accordion-item>\n * </hx-accordion>\n * ```\n */\n@customElement('hx-accordion')\nexport class HelixAccordion extends LitElement {\n  static override styles = [tokenStyles, helixAccordionStyles];\n\n  /**\n   * Expansion mode: 'single' collapses all other items when one expands.\n   * 'multi' allows multiple items open simultaneously.\n   * @attr mode\n   */\n  @property({ type: String, reflect: true })\n  mode: 'single' | 'multi' = 'single';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('hx-expand', this._handleChildExpand);\n    this.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('hx-expand', this._handleChildExpand);\n    this.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  protected override firstUpdated(): void {\n    this._enforceSingleMode();\n  }\n\n  // ─── Single-expand coordination ───\n\n  private _enforceSingleMode(): void {\n    if (this.mode !== 'single') return;\n\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n    let foundExpanded = false;\n\n    items.forEach((item) => {\n      if (item.expanded) {\n        if (foundExpanded) {\n          item.expanded = false;\n        } else {\n          foundExpanded = true;\n        }\n      }\n    });\n  }\n\n  /**\n   * Handles expand events from child accordion items to enforce single-expand mode.\n   * @internal\n   */\n  private _handleChildExpand = (e: Event): void => {\n    if (this.mode !== 'single') return;\n\n    const expandedItem = e.composedPath()[0] as HelixAccordionItem;\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n\n    items.forEach((item) => {\n      if (item !== expandedItem && item.expanded) {\n        item.expanded = false;\n        item._dispatchToggleEvent(false);\n      }\n    });\n  };\n\n  // ─── Arrow key navigation (ARIA APG Accordion pattern) ───\n\n  /**\n   * Handles keyboard navigation between accordion triggers using arrow, Home, and End keys.\n   * @internal\n   */\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    const triggers = this._getTriggers();\n    if (triggers.length === 0) return;\n\n    const activeEl = this.shadowRoot?.activeElement ?? document.activeElement;\n    let currentItem: HelixAccordionItem | null = null;\n\n    const items = Array.from(this.querySelectorAll<HelixAccordionItem>('hx-accordion-item'));\n    for (const item of items) {\n      const summary = item.shadowRoot?.querySelector('[part=\"trigger\"]');\n      if (summary === activeEl || item.shadowRoot?.activeElement === summary) {\n        currentItem = item;\n        break;\n      }\n    }\n\n    if (!currentItem) return;\n\n    const enabledItems = items.filter((item) => !item.disabled);\n    const currentIndex = enabledItems.indexOf(currentItem);\n    if (currentIndex === -1) return;\n\n    let targetIndex = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        targetIndex = (currentIndex + 1) % enabledItems.length;\n        break;\n      case 'ArrowUp':\n        targetIndex = (currentIndex - 1 + enabledItems.length) % enabledItems.length;\n        break;\n      case 'Home':\n        targetIndex = 0;\n        break;\n      case 'End':\n        targetIndex = enabledItems.length - 1;\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const targetItem = enabledItems[targetIndex];\n    const targetSummary = targetItem?.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n    targetSummary?.focus();\n  };\n\n  private _getTriggers(): HTMLElement[] {\n    const items = this.querySelectorAll<HelixAccordionItem>('hx-accordion-item');\n    const triggers: HTMLElement[] = [];\n    items.forEach((item) => {\n      const summary = item.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]');\n      if (summary) triggers.push(summary);\n    });\n    return triggers;\n  }\n\n  // ─── Slot validation ───\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target;\n    if (!(slot instanceof HTMLSlotElement)) return;\n    const invalid = slot\n      .assignedElements()\n      .filter((el) => el.tagName.toLowerCase() !== 'hx-accordion-item');\n    if (invalid.length > 0) {\n      devWarn(\n        'hx-accordion',\n        `Default slot expects <hx-accordion-item> elements. Found unexpected: ${invalid.map((el) => `<${el.tagName.toLowerCase()}>`).join(', ')}`,\n      );\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div part=\"accordion\" class=\"accordion\">\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-accordion': HelixAccordion;\n  }\n}\n"],"names":["helixAccordionStyles","css","helixAccordionItemStyles","chevronIcon","svg","HelixAccordionItem","LitElement","willExpand","expanded","options","itemClasses","html","classMap","nothing","tokenStyles","__decorateClass","property","customElement","HelixAccordion","expandedItem","item","activeEl","_a","currentItem","items","summary","_b","_c","enabledItems","currentIndex","targetIndex","targetItem","targetSummary","_d","foundExpanded","triggers","slot","invalid","el","devWarn"],"mappings":";;;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCAvBC,IAA2BD;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;;;;;;ACIxC,MAAME,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDb,IAAMC,IAAN,cAAiCC,EAAW;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAIL,KAAQ,OAAO,qBAAqB,EAAED,EAAmB,QAAQ,IAOjE,KAAA,WAAW,IAOX,KAAA,WAAW,IASX,KAAA,QAA+B;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY/B,IAAY,gBAAwB;AAClC,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,KAAK,CAAC;AAAA,EAC5C;AAAA;AAAA,EAIQ,UAAgB;AACtB,QAAI,KAAK,SAAU;AAEnB,UAAME,IAAa,CAAC,KAAK;AACzB,SAAK,WAAWA,GAEhB,KAAK,qBAAqBA,CAAU;AAAA,EACtC;AAAA,EAEA,qBAAqBC,GAAyB;AAE5C,UAAMC,IAAU,EAAE,SAAS,IAAM,UAAU,IAAM,QADlC,EAAE,UAAAD,GAAU,QAAQ,KAAK,MAAM,GAAA,EACG;AAEjD,IAAIA,IACF,KAAK,cAAc,IAAI,YAAY,aAAaC,CAAO,CAAC,IAExD,KAAK,cAAc,IAAI,YAAY,eAAeA,CAAO,CAAC;AAAA,EAE9D;AAAA;AAAA,EAIQ,oBAAoB,GAAqB;AAC/C,MAAE,eAAA,GACF,KAAK,QAAA;AAAA,EACP;AAAA,EAEQ,eAAe,GAAwB;AAC7C,KAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAA,GACF,KAAK,QAAA;AAAA,EAET;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMC,IAAc;AAAA,MAClB,MAAM;AAAA,MACN,kBAAkB,KAAK;AAAA,MACvB,kBAAkB,KAAK;AAAA,IAAA;AAGzB,WAAOC;AAAA,mCACwBC,EAASF,CAAW,CAAC,UAAU,KAAK,QAAQ;AAAA;AAAA,eAEhE,GAAG,KAAK,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA,uBAId,KAAK,aAAa;AAAA,qBACpB,KAAK,WAAW,OAAO,GAAG;AAAA,0BACrB,KAAK,WAAW,SAASG,CAAO;AAAA,0BAChC,KAAK,WAAW,SAASA,CAAO;AAAA,0BAChC,GAAG,KAAK,IAAI,UAAU;AAAA,mBAC7B,KAAK,mBAAmB;AAAA,qBACtB,KAAK,cAAc;AAAA;AAAA;AAAA,2CAGGV,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKnC,GAAG,KAAK,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA,gCAIT,GAAG,KAAK,IAAI,UAAU;AAAA,4BAC1B,KAAK,WAAWU,IAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ1D;AACF;AA3HaR,EACK,SAAS,CAACS,GAAaZ,CAAwB;AADpDG,EAGI,WAAW;AAQ1BU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAV/BX,EAWX,WAAA,YAAA,CAAA;AAOAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjB/BX,EAkBX,WAAA,YAAA,CAAA;AASAU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfX,EA2BX,WAAA,SAAA,CAAA;AA3BWA,IAANU,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBZ,CAAA;;;;;;ACvBN,IAAMa,IAAN,cAA6BZ,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,OAA2B,UA2C3B,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,UAAI,KAAK,SAAS,SAAU;AAE5B,YAAMa,IAAe,EAAE,aAAA,EAAe,CAAC;AAGvC,MAFc,KAAK,iBAAqC,mBAAmB,EAErE,QAAQ,CAACC,MAAS;AACtB,QAAIA,MAASD,KAAgBC,EAAK,aAChCA,EAAK,WAAW,IAChBA,EAAK,qBAAqB,EAAK;AAAA,MAEnC,CAAC;AAAA,IACH,GAQA,KAAQ,iBAAiB,CAAC,MAA2B;;AAEnD,UADiB,KAAK,aAAA,EACT,WAAW,EAAG;AAE3B,YAAMC,MAAWC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,kBAAiB,SAAS;AAC5D,UAAIC,IAAyC;AAE7C,YAAMC,IAAQ,MAAM,KAAK,KAAK,iBAAqC,mBAAmB,CAAC;AACvF,iBAAWJ,KAAQI,GAAO;AACxB,cAAMC,KAAUC,IAAAN,EAAK,eAAL,gBAAAM,EAAiB,cAAc;AAC/C,YAAID,MAAYJ,OAAYM,IAAAP,EAAK,eAAL,gBAAAO,EAAiB,mBAAkBF,GAAS;AACtE,UAAAF,IAAcH;AACd;AAAA,QACF;AAAA,MACF;AAEA,UAAI,CAACG,EAAa;AAElB,YAAMK,IAAeJ,EAAM,OAAO,CAACJ,MAAS,CAACA,EAAK,QAAQ,GACpDS,IAAeD,EAAa,QAAQL,CAAW;AACrD,UAAIM,MAAiB,GAAI;AAEzB,UAAIC,IAAc;AAElB,cAAQ,EAAE,KAAA;AAAA,QACR,KAAK;AACH,UAAAA,KAAeD,IAAe,KAAKD,EAAa;AAChD;AAAA,QACF,KAAK;AACH,UAAAE,KAAeD,IAAe,IAAID,EAAa,UAAUA,EAAa;AACtE;AAAA,QACF,KAAK;AACH,UAAAE,IAAc;AACd;AAAA,QACF,KAAK;AACH,UAAAA,IAAcF,EAAa,SAAS;AACpC;AAAA,QACF;AACE;AAAA,MAAA;AAGJ,QAAE,eAAA;AACF,YAAMG,IAAaH,EAAaE,CAAW,GACrCE,KAAgBC,IAAAF,KAAA,gBAAAA,EAAY,eAAZ,gBAAAE,EAAwB,cAA2B;AACzE,MAAAD,KAAA,QAAAA,EAAe;AAAA,IACjB;AAAA,EAAA;AAAA;AAAA,EAxGS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,iBAAiB,aAAa,KAAK,kBAAkB,GAC1D,KAAK,iBAAiB,WAAW,KAAK,cAAc;AAAA,EACtD;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,oBAAoB,aAAa,KAAK,kBAAkB,GAC7D,KAAK,oBAAoB,WAAW,KAAK,cAAc;AAAA,EACzD;AAAA,EAEmB,eAAqB;AACtC,SAAK,mBAAA;AAAA,EACP;AAAA;AAAA,EAIQ,qBAA2B;AACjC,QAAI,KAAK,SAAS,SAAU;AAE5B,UAAMR,IAAQ,KAAK,iBAAqC,mBAAmB;AAC3E,QAAIU,IAAgB;AAEpB,IAAAV,EAAM,QAAQ,CAACJ,MAAS;AACtB,MAAIA,EAAK,aACHc,IACFd,EAAK,WAAW,KAEhBc,IAAgB;AAAA,IAGtB,CAAC;AAAA,EACH;AAAA,EAyEQ,eAA8B;AACpC,UAAMV,IAAQ,KAAK,iBAAqC,mBAAmB,GACrEW,IAA0B,CAAA;AAChC,WAAAX,EAAM,QAAQ,CAACJ,MAAS;;AACtB,YAAMK,KAAUH,IAAAF,EAAK,eAAL,gBAAAE,EAAiB,cAA2B;AAC5D,MAAIG,KAASU,EAAS,KAAKV,CAAO;AAAA,IACpC,CAAC,GACMU;AAAA,EACT;AAAA;AAAA,EAIQ,kBAAkB,GAAgB;AACxC,UAAMC,IAAO,EAAE;AACf,QAAI,EAAEA,aAAgB,iBAAkB;AACxC,UAAMC,IAAUD,EACb,iBAAA,EACA,OAAO,CAACE,MAAOA,EAAG,QAAQ,YAAA,MAAkB,mBAAmB;AAClE,IAAID,EAAQ,SAAS,KACnBE;AAAA,MACE;AAAA,MACA,wEAAwEF,EAAQ,IAAI,CAACC,MAAO,IAAIA,EAAG,QAAQ,YAAA,CAAa,GAAG,EAAE,KAAK,IAAI,CAAC;AAAA,IAAA;AAAA,EAG7I;AAAA;AAAA,EAIS,SAAS;AAChB,WAAO3B;AAAA;AAAA,4BAEiB,KAAK,iBAAiB;AAAA;AAAA;AAAA,EAGhD;AACF;AA1JaO,EACK,SAAS,CAACJ,GAAad,CAAoB;AAQ3De,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAR9BE,EASX,WAAA,QAAA,CAAA;AATWA,IAANH,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBC,CAAA;"}

package/dist/shared/{hx-alert-Cg-zxRiU.js → hx-alert-D6uok29t.js}

@@ -1,5 +1,5 @@
-import { css as v, LitElement as f, html as o, nothing as d } from "lit";
-import { property as i, state as u, customElement as p } from "lit/decorators.js";
+import { css as v, LitElement as p, html as i, nothing as d } from "lit";
+import { property as n, state as u, customElement as f } from "lit/decorators.js";
 import { classMap as x } from "lit/directives/class-map.js";
 import { tokenStyles as g } from "@helixui/tokens/lit";
 const b = v`
@@ -11,6 +11,23 @@ const b = v`
     display: none;
   }
 
+  /* ─── Screen-reader-only announcement region ─── */
+  /* Always present in DOM so AT registers it before content is injected.     */
+  /* Visually hidden via clip-path technique (superior to display:none which  */
+  /* removes the element from the AT tree entirely).                          */
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   * {
     box-sizing: border-box;
   }
@@ -43,6 +60,23 @@ const b = v`
     border-radius: 0;
   }
 
+  /* ─── Severity Label (WCAG 1.4.1) ─── */
+  /* Visually hidden — provides a non-color cue for screen readers and users    */
+  /* who cannot distinguish variants by color alone (e.g. color-blind users).  */
+  /* Always present regardless of showIcon so severity is never color-only.    */
+
+  .alert__severity-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
   /* ─── Icon ─── */
 
   .alert__icon {
@@ -175,19 +209,19 @@ const b = v`
     --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);
   }
 `;
-var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, t, l, n) => {
-  for (var s = n > 1 ? void 0 : n ? _(t, l) : t, c = e.length - 1, h; c >= 0; c--)
-    (h = e[c]) && (s = (n ? h(t, l, s) : h(s)) || s);
-  return n && s && m(t, l, s), s;
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, a = (e, t, s, h) => {
+  for (var o = h > 1 ? void 0 : h ? _(t, s) : t, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (o = (h ? c(t, s, o) : c(o)) || o);
+  return h && o && m(t, s, o), o;
 };
-let r = class extends f {
+let r = class extends p {
   constructor() {
-    super(...arguments), this.variant = "info", this.dismissible = !1, this.open = !1, this.showIcon = !1, this.accent = !1, this.returnFocusTo = null, this._hasActions = !1, this._hasTitle = !1, this._actionsSlotChangeHandler = null, this._titleSlotChangeHandler = null;
+    super(...arguments), this.variant = "info", this.dismissible = !1, this.heading = "", this.open = !1, this.showIcon = !1, this.accent = !1, this.returnFocusTo = null, this._hasActions = !1, this._hasTitle = !1, this._actionsSlotChangeHandler = null, this._titleSlotChangeHandler = null;
   }
   // ─── Private Helpers ───
   /** Returns true when the variant requires assertive announcement. */
   get _isAssertive() {
-    return this.variant === "error" || this.variant === "warning";
+    return this.variant === "error";
   }
   /**
    * Returns the appropriate ARIA role based on variant.
@@ -219,32 +253,51 @@ let r = class extends f {
     }, t.addEventListener("slotchange", this._titleSlotChangeHandler));
   }
   updated(e) {
-    super.updated(e), e.has("variant") && this.setAttribute("role", this._role), e.has("open") && (this.open ? this.removeAttribute("aria-hidden") : this.setAttribute("aria-hidden", "true"));
+    if (super.updated(e), e.has("variant") && this.setAttribute("role", this._role), e.has("open"))
+      if (this.open)
+        this.removeAttribute("aria-hidden"), e.get("open") === !1 && Promise.resolve().then(() => {
+          const s = this.renderRoot.querySelector(".sr-only");
+          s && (s.textContent = "", Promise.resolve().then(() => {
+            var c;
+            const o = {
+              info: "Info:",
+              success: "Success:",
+              warning: "Warning:",
+              error: "Error:"
+            }[this.variant] ?? "", l = ((c = this.textContent) == null ? void 0 : c.trim()) ?? "";
+            s.textContent = o ? `${o} ${l}` : l;
+          }));
+        });
+      else {
+        this.setAttribute("aria-hidden", "true");
+        const t = this.renderRoot.querySelector(".sr-only");
+        t && (t.textContent = "");
+      }
   }
   // ─── Default Icons ───
   _renderInfoIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    return i`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
         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"
       />
     </svg>`;
   }
   _renderSuccessIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    return i`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
         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"
       />
     </svg>`;
   }
   _renderWarningIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    return i`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
         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"
       />
     </svg>`;
   }
   _renderErrorIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    return i`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
         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"
       />
@@ -264,7 +317,7 @@ let r = class extends f {
     }
   }
   _renderCloseIcon() {
-    return o`<svg viewBox="0 0 20 20" aria-hidden="true">
+    return i`<svg viewBox="0 0 20 20" aria-hidden="true">
       <path
         d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
       />
@@ -294,10 +347,21 @@ let r = class extends f {
       alert: !0,
       [`alert--${this.variant}`]: !0,
       "alert--accent": this.accent
-    };
-    return o`
+    }, s = {
+      info: "Info:",
+      success: "Success:",
+      warning: "Warning:",
+      error: "Error:"
+    }[this.variant] ?? "";
+    return i`
+      <div
+        class="sr-only"
+        aria-live=${this._isAssertive ? "assertive" : "polite"}
+        aria-atomic="true"
+      ></div>
       <div part="alert" class=${x(e)}>
-        ${this.showIcon ? o`
+        <span class="alert__severity-label">${s}</span>
+        ${this.showIcon ? i`
               <div part="icon" class="alert__icon">
                 <slot name="icon">${this._renderDefaultIcon()}</slot>
               </div>
@@ -316,11 +380,11 @@ let r = class extends f {
           </div>
         </div>
 
-        ${this.dismissible ? o`
+        ${this.dismissible ? i`
               <button
                 part="close-button"
                 class="alert__close-button"
-                aria-label="Close"
+                aria-label=${`Close ${this.heading ? `${this.heading} ` : ""}alert`}
                 @click=${this._handleDismiss}
               >
                 ${this._renderCloseIcon()}
@@ -332,22 +396,25 @@ let r = class extends f {
 };
 r.styles = [g, b];
 a([
-  i({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], r.prototype, "variant", 2);
 a([
-  i({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], r.prototype, "dismissible", 2);
 a([
-  i({ type: Boolean, reflect: !0 })
+  n({ type: String })
+], r.prototype, "heading", 2);
+a([
+  n({ type: Boolean, reflect: !0 })
 ], r.prototype, "open", 2);
 a([
-  i({ type: Boolean, reflect: !0, attribute: "show-icon" })
+  n({ type: Boolean, reflect: !0, attribute: "show-icon" })
 ], r.prototype, "showIcon", 2);
 a([
-  i({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], r.prototype, "accent", 2);
 a([
-  i({ type: String, attribute: "return-focus-to" })
+  n({ type: String, attribute: "return-focus-to" })
 ], r.prototype, "returnFocusTo", 2);
 a([
   u()
@@ -356,9 +423,9 @@ a([
   u()
 ], r.prototype, "_hasTitle", 2);
 r = a([
-  p("hx-alert")
+  f("hx-alert")
 ], r);
 export {
   r as H
 };
-//# sourceMappingURL=hx-alert-Cg-zxRiU.js.map
+//# sourceMappingURL=hx-alert-D6uok29t.js.map

package/dist/shared/hx-alert-D6uok29t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-alert-D6uok29t.js","sources":["../../src/components/hx-alert/hx-alert.styles.ts","../../src/components/hx-alert/hx-alert.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixAlertStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host(:not([open])) {\n    display: none;\n  }\n\n  /* ─── Screen-reader-only announcement region ─── */\n  /* Always present in DOM so AT registers it before content is injected.     */\n  /* Visually hidden via clip-path technique (superior to display:none which  */\n  /* removes the element from the AT tree entirely).                          */\n\n  .sr-only {\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  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Alert Container ─── */\n\n  .alert {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-alert-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-alert-padding, var(--hx-space-4, 1rem));\n    border: var(--hx-alert-border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-radius: var(--hx-alert-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-alert-bg, var(--hx-color-info-50, #e8f4fd));\n    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n    font-family: var(--hx-alert-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  }\n\n  /* ─── Accent Variant (left border stripe) ─── */\n  /* Removes full border and replaces with a left-side accent stripe.         */\n  /* Common healthcare/enterprise dashboard pattern for dense information UIs. */\n\n  .alert--accent {\n    border-width: 0;\n    border-left: var(--hx-alert-accent-width, 4px) solid\n      var(--hx-alert-border-color, var(--hx-color-info-200, #b3d9ef));\n    border-radius: 0;\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* Visually hidden — provides a non-color cue for screen readers and users    */\n  /* who cannot distinguish variants by color alone (e.g. color-blind users).  */\n  /* Always present regardless of showIcon so severity is never color-only.    */\n\n  .alert__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  .alert__icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-alert-icon-color, var(--hx-color-info-500, #3b82f6));\n  }\n\n  .alert__icon svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n  }\n\n  /* ─── Title ─── */\n\n  .alert__title {\n    display: none;\n    font-weight: var(--hx-font-weight-semibold, 600);\n    margin-bottom: var(--hx-space-1, 0.25rem);\n  }\n\n  .alert__title--visible {\n    display: block;\n  }\n\n  /* ─── Message ─── */\n\n  .alert__message {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Actions ─── */\n  /* Hidden by default; shown via JS slotchange detection to avoid invisible  */\n  /* margin-top spacing when no actions are slotted.                          */\n\n  .alert__actions {\n    display: none;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    margin-top: var(--hx-space-2, 0.5rem);\n  }\n\n  .alert__actions--visible {\n    display: flex;\n  }\n\n  /* ─── Close Button ─── */\n  /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n  /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n  /* the target size is independent of the consumer's base font size.         */\n\n  .alert__close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    margin-left: auto;\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-alert-color, var(--hx-color-info-800, #1a3a4a));\n    cursor: pointer;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n    opacity: 0.7;\n  }\n\n  .alert__close-button:hover {\n    opacity: 1;\n    /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+.   */\n    /* Falls back to transparent (no hover background) in older environments.  */\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .alert__close-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    opacity: 1;\n  }\n\n  .alert__close-button svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    fill: currentColor;\n  }\n\n  /* ─── Variant: info ─── */\n\n  :host([variant='info']) .alert,\n  :host(:not([variant])) .alert {\n    --hx-alert-bg: var(--hx-color-info-50, #e8f4fd);\n    --hx-alert-border-color: var(--hx-color-info-200, #b3d9ef);\n    --hx-alert-color: var(--hx-color-info-800, #1a3a4a);\n    --hx-alert-icon-color: var(--hx-color-info-500, #3b82f6);\n  }\n\n  /* ─── Variant: success ─── */\n\n  :host([variant='success']) .alert {\n    --hx-alert-bg: var(--hx-color-success-50, #ecfdf5);\n    --hx-alert-border-color: var(--hx-color-success-200, #a7f3d0);\n    --hx-alert-color: var(--hx-color-success-800, #065f46);\n    --hx-alert-icon-color: var(--hx-color-success-500, #10b981);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  :host([variant='warning']) .alert {\n    --hx-alert-bg: var(--hx-color-warning-50, #fffbeb);\n    --hx-alert-border-color: var(--hx-color-warning-200, #fde68a);\n    --hx-alert-color: var(--hx-color-warning-800, #92400e);\n    --hx-alert-icon-color: var(--hx-color-warning-500, #f59e0b);\n  }\n\n  /* ─── Variant: error ─── */\n\n  :host([variant='error']) .alert {\n    --hx-alert-bg: var(--hx-color-error-50, #fef2f2);\n    --hx-alert-border-color: var(--hx-color-error-200, #fecaca);\n    --hx-alert-color: var(--hx-color-error-800, #991b1b);\n    --hx-alert-icon-color: var(--hx-color-error-500, #ef4444);\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 { tokenStyles } from '@helixui/tokens/lit';\nimport { helixAlertStyles } from './hx-alert.styles.js';\n\n/** Alert variant determines visual styling and ARIA semantics. */\nexport type AlertVariant = 'info' | 'success' | 'warning' | 'error';\n\n/**\n * A feedback component for communicating status messages, warnings, and errors.\n * Critical for healthcare patient safety alerts.\n *\n * @summary Feedback alert for status messages with variant-based styling and ARIA live regions.\n *\n * @tag hx-alert\n *\n * @slot - Default slot for alert message content.\n * @slot title - Optional title/headline for the alert.\n * @slot icon - Custom icon to override the default variant icon.\n * @slot actions - Action buttons rendered within the alert.\n *\n * @attr {string} heading - Text used to build the close button's contextual aria-label\n *   (e.g., \"Close Low blood pressure alert\"). When absent the label falls back to \"Close alert\".\n *\n * @fires {CustomEvent<{reason: string}>} hx-close - Dispatched when the user dismisses the alert.\n * @fires {CustomEvent} hx-after-close - Dispatched after the alert is dismissed.\n *\n * @csspart alert - The outer alert container.\n * @csspart title - The title/headline container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n * @csspart actions - The actions container.\n *\n * @cssprop [--hx-alert-bg=var(--hx-color-info-50)] - Alert background color.\n * @cssprop [--hx-alert-color=var(--hx-color-info-800)] - Alert text color.\n * @cssprop [--hx-alert-border-color=var(--hx-color-info-200)] - Alert border color.\n * @cssprop [--hx-alert-border-radius=var(--hx-border-radius-md)] - Alert border radius.\n * @cssprop [--hx-alert-border-width=var(--hx-border-width-thin)] - Alert border width.\n * @cssprop [--hx-alert-padding=var(--hx-space-4)] - Alert padding.\n * @cssprop [--hx-alert-gap=var(--hx-space-3)] - Gap between alert elements.\n * @cssprop [--hx-alert-icon-color=var(--hx-color-info-500)] - Alert icon color.\n * @cssprop [--hx-alert-font-family=var(--hx-font-family-sans)] - Alert font family.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-alert-accent-width=4px] - Width of the left border accent stripe.\n */\n@customElement('hx-alert')\nexport class HelixAlert extends LitElement {\n  static override styles = [tokenStyles, helixAlertStyles];\n\n  // ─── Properties ───\n\n  /**\n   * Visual variant of the alert that determines colors and ARIA semantics.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: AlertVariant = 'info';\n\n  /**\n   * Whether the alert can be dismissed by the user.\n   * @attr dismissible\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissible = false;\n\n  /**\n   * Optional heading text that provides context for the close button's accessible label.\n   * When provided, the close button is announced as \"Close [heading] alert\".\n   * When absent, the close button falls back to \"Close alert\".\n   * @attr heading\n   */\n  @property({ type: String })\n  heading = '';\n\n  /**\n   * Whether the alert is visible. Add the `open` attribute to show the alert.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Whether to show the default variant icon. Add `show-icon` attribute to display the icon.\n   * @attr show-icon\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-icon' })\n  showIcon = false;\n\n  /**\n   * When true, applies a left border accent stripe instead of a full border.\n   * Common healthcare/enterprise dashboard pattern for visual distinction of alert types.\n   * @attr accent\n   */\n  @property({ type: Boolean, reflect: true })\n  accent = false;\n\n  /**\n   * CSS selector for the element to return focus to after the alert is dismissed.\n   * When set, the component will find and focus the matching element after dismissal.\n   * If not set, focus management is the caller's responsibility via the hx-after-close event.\n   * @attr return-focus-to\n   */\n  @property({ type: String, attribute: 'return-focus-to' })\n  returnFocusTo: string | null = null;\n\n  // ─── State ───\n\n  @state()\n  private _hasActions = false;\n\n  @state()\n  private _hasTitle = false;\n\n  // ─── Private Handler References ───\n\n  private _actionsSlotChangeHandler: (() => void) | null = null;\n  private _titleSlotChangeHandler: (() => void) | null = null;\n\n  // ─── Private Helpers ───\n\n  /** Returns true when the variant requires assertive announcement. */\n  private get _isAssertive(): boolean {\n    return this.variant === 'error';\n  }\n\n  /**\n   * Returns the appropriate ARIA role based on variant.\n   * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n   * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n   */\n  private get _role(): string {\n    return this._isAssertive ? 'alert' : 'status';\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Apply ARIA role to the host element for reliable screen reader support across\n    // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n    // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n    this.setAttribute('role', this._role);\n    if (!this.open) {\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n    if (actionsSlot && this._actionsSlotChangeHandler) {\n      actionsSlot.removeEventListener('slotchange', this._actionsSlotChangeHandler);\n    }\n    const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n    if (titleSlot && this._titleSlotChangeHandler) {\n      titleSlot.removeEventListener('slotchange', this._titleSlotChangeHandler);\n    }\n  }\n\n  override firstUpdated(): void {\n    // Track actions slot content to avoid invisible spacing when no actions are slotted.\n    const actionsSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"actions\"]');\n    if (actionsSlot) {\n      this._actionsSlotChangeHandler = () => {\n        this._hasActions = actionsSlot.assignedNodes({ flatten: true }).length > 0;\n      };\n      actionsSlot.addEventListener('slotchange', this._actionsSlotChangeHandler);\n    }\n\n    // Track title slot content so the title container doesn't create dead space when empty.\n    const titleSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"title\"]');\n    if (titleSlot) {\n      this._titleSlotChangeHandler = () => {\n        this._hasTitle = titleSlot.assignedNodes({ flatten: true }).length > 0;\n      };\n      titleSlot.addEventListener('slotchange', this._titleSlotChangeHandler);\n    }\n  }\n\n  protected override updated(changedProperties: Map<PropertyKey, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('variant')) {\n      // Keep host ARIA role in sync with variant (assertive vs. polite).\n      this.setAttribute('role', this._role);\n    }\n    if (changedProperties.has('open')) {\n      // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n      // When open transitions from false→true, removing aria-hidden signals to AT\n      // that the live region content should be announced.\n      if (this.open) {\n        this.removeAttribute('aria-hidden');\n        // Trigger announcement via the sr-only polite live region for ATs (JAWS+Chrome,\n        // NVDA) that do not re-announce existing content when aria-hidden is merely removed.\n        // We inject text after a microtask so the DOM has settled and the live region\n        // is registered by the AT before content arrives.\n        const previousOpen = changedProperties.get('open');\n        if (previousOpen === false) {\n          Promise.resolve().then(() => {\n            const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n            if (announcer) {\n              announcer.textContent = '';\n              // Second microtask ensures the clear is processed before re-injection,\n              // guaranteeing the AT sees a content change rather than no-op.\n              Promise.resolve().then(() => {\n                const severityLabels: Record<string, string> = {\n                  info: 'Info:',\n                  success: 'Success:',\n                  warning: 'Warning:',\n                  error: 'Error:',\n                };\n                const prefix = severityLabels[this.variant] ?? '';\n                const message = this.textContent?.trim() ?? '';\n                announcer.textContent = prefix ? `${prefix} ${message}` : message;\n              });\n            }\n          });\n        }\n      } else {\n        this.setAttribute('aria-hidden', 'true');\n        // Clear the announcer when hidden so stale text is not re-read on next open.\n        const announcer = this.renderRoot.querySelector<HTMLElement>('.sr-only');\n        if (announcer) {\n          announcer.textContent = '';\n        }\n      }\n    }\n  }\n\n  // ─── Default Icons ───\n\n  private _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\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  private _renderSuccessIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\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  private _renderWarningIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\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  private _renderErrorIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\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  private _renderDefaultIcon() {\n    switch (this.variant) {\n      case 'success':\n        return this._renderSuccessIcon();\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'error':\n        return this._renderErrorIcon();\n      case 'info':\n      default:\n        return this._renderInfoIcon();\n    }\n  }\n\n  private _renderCloseIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n      />\n    </svg>`;\n  }\n\n  // ─── Event Handling ───\n\n  private _handleDismiss(): void {\n    this.open = false;\n\n    /**\n     * Dispatched when the user dismisses the alert.\n     * @event hx-close\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-close', {\n        bubbles: true,\n        composed: true,\n        detail: { reason: 'user' },\n      }),\n    );\n\n    /**\n     * Dispatched after the alert is dismissed.\n     * @event hx-after-close\n     */\n    this.dispatchEvent(\n      new CustomEvent('hx-after-close', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    // Return focus to a designated element if specified via returnFocusTo.\n    if (this.returnFocusTo) {\n      const target = document.querySelector(this.returnFocusTo);\n      if (target instanceof HTMLElement) {\n        target.focus();\n      }\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      alert: true,\n      [`alert--${this.variant}`]: true,\n      'alert--accent': this.accent,\n    };\n\n    // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n    // is never conveyed by color alone, regardless of whether showIcon is set.\n    const SEVERITY_LABELS: Record<string, string> = {\n      info: 'Info:',\n      success: 'Success:',\n      warning: 'Warning:',\n      error: 'Error:',\n    };\n    const severityLabel = SEVERITY_LABELS[this.variant] ?? '';\n\n    return html`\n      <div\n        class=\"sr-only\"\n        aria-live=${this._isAssertive ? 'assertive' : 'polite'}\n        aria-atomic=\"true\"\n      ></div>\n      <div part=\"alert\" class=${classMap(classes)}>\n        <span class=\"alert__severity-label\">${severityLabel}</span>\n        ${this.showIcon\n          ? html`\n              <div part=\"icon\" class=\"alert__icon\">\n                <slot name=\"icon\">${this._renderDefaultIcon()}</slot>\n              </div>\n            `\n          : nothing}\n\n        <div part=\"message\" class=\"alert__message\">\n          <div part=\"title\" class=\"alert__title ${this._hasTitle ? 'alert__title--visible' : ''}\">\n            <slot name=\"title\"></slot>\n          </div>\n          <slot></slot>\n          <div\n            part=\"actions\"\n            class=\"alert__actions ${this._hasActions ? 'alert__actions--visible' : ''}\"\n          >\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n\n        ${this.dismissible\n          ? html`\n              <button\n                part=\"close-button\"\n                class=\"alert__close-button\"\n                aria-label=${`Close ${this.heading ? `${this.heading} ` : ''}alert`}\n                @click=${this._handleDismiss}\n              >\n                ${this._renderCloseIcon()}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-alert': HelixAlert;\n  }\n}\n\nexport type { HelixAlert as HxAlert };\n"],"names":["helixAlertStyles","css","HelixAlert","LitElement","actionsSlot","titleSlot","changedProperties","announcer","prefix","message","_a","html","target","classes","severityLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}