@helixui/library 2.1.2 → 3.0.0-next.62

package/dist/shared/hx-divider-DwpOrzMW.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-divider-DwpOrzMW.js","sources":["../../src/components/hx-divider/hx-divider.styles.ts","../../src/components/hx-divider/hx-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDividerStyles = css`\n  :host {\n    display: block;\n    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n    --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));\n    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));\n    --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));\n    --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));\n  }\n\n  /* ─── Spacing Variants ─── */\n\n  :host([spacing='none']) {\n    --_spacing: 0;\n  }\n\n  :host([spacing='sm']) {\n    --_spacing: var(--hx-space-2, 0.5rem);\n  }\n\n  :host,\n  :host([spacing='md']) {\n    --_spacing: var(--hx-space-4, 1rem);\n  }\n\n  :host([spacing='lg']) {\n    --_spacing: var(--hx-space-6, 1.5rem);\n  }\n\n  /* ─── Horizontal (default) ─── */\n\n  :host([orientation='horizontal']) {\n    margin-block: var(--_spacing);\n  }\n\n  /* ─── Vertical ─── */\n\n  :host([orientation='vertical']) {\n    display: inline-flex;\n    align-self: stretch;\n    margin-inline: var(--_spacing);\n  }\n\n  /* ─── Base (hr) — horizontal ─── */\n\n  .divider {\n    display: flex;\n    align-items: center;\n    gap: var(--_divider-label-gap);\n    border: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  /* ─── Base — vertical ─── */\n\n  :host([orientation='vertical']) .divider {\n    flex-direction: column;\n    height: 100%;\n  }\n\n  /* ─── Lines flanking label ─── */\n\n  .divider__line {\n    flex: 1;\n    background-color: var(--_divider-color);\n  }\n\n  :host(:not([orientation='vertical'])) .divider__line {\n    height: var(--_divider-width);\n  }\n\n  :host([orientation='vertical']) .divider__line {\n    width: var(--_divider-width);\n    height: auto;\n    min-height: 0;\n  }\n\n  /* ─── Label ─── */\n\n  .divider__label {\n    flex-shrink: 0;\n    color: var(--_divider-label-color);\n    font-size: var(--_divider-label-size);\n    line-height: var(--hx-line-height-tight, 1.25);\n    white-space: nowrap;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .divider__line {\n      background-color: CanvasText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixDividerStyles } from './hx-divider.styles.js';\n\n/**\n * A visual separator element for dividing content sections. Supports\n * horizontal and vertical orientations, configurable spacing, and an optional\n * centered label rendered between two lines.\n *\n * @summary Horizontal or vertical separator line with optional label.\n *\n * @tag hx-divider\n *\n * @slot - Optional label text rendered centered between two lines.\n *\n * @csspart base - The root divider element.\n * @csspart label - The optional centered label wrapper.\n *\n * @cssprop [--hx-divider-color=var(--hx-color-neutral-200)] - Line color.\n * @cssprop [--hx-divider-width=var(--hx-border-width-thin)] - Line thickness.\n * @cssprop [--hx-divider-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-divider-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-divider-label-gap=var(--hx-space-3)] - Gap between lines and label.\n */\n@customElement('hx-divider')\nexport class HelixDivider extends HelixElement {\n  static override styles = [helixDividerStyles];\n\n  /**\n   * Orientation of the divider.\n   * @attr orientation\n   */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Spacing applied to the block axis (horizontal) or inline axis (vertical).\n   * @attr spacing\n   */\n  @property({ type: String, reflect: true })\n  spacing: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * When true, renders the divider as decorative only (role=\"presentation\").\n   * Screen readers will not announce decorative dividers.\n   * @attr decorative\n   */\n  @property({ type: Boolean, reflect: true })\n  decorative = false;\n\n  /**\n   * Optional text label rendered centered between the divider lines.\n   * Also sets aria-label on the separator for assistive technologies.\n   * @attr label\n   */\n  @property({ type: String, reflect: true })\n  label?: string;\n\n  /** @internal */\n  @state()\n  private _hasLabel = false;\n\n  /** @internal */\n  private _checkSlot(slot: HTMLSlotElement): void {\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._hasLabel = nodes.some((node) =>\n      node.nodeType === Node.TEXT_NODE\n        ? (node.textContent ?? '').trim().length > 0\n        : node.nodeType === Node.ELEMENT_NODE,\n    );\n  }\n\n  /** @internal */\n  private _slotChangeHandler = (e: Event): void => {\n    this._checkSlot(e.target as HTMLSlotElement);\n  };\n\n  override firstUpdated(_changedProperties: PropertyValues<this>): void {\n    super.firstUpdated(_changedProperties);\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) this._checkSlot(slot);\n    if (!this.decorative && !this.label && !this._hasLabel) {\n      devWarn(\n        'hx-divider',\n        'Non-decorative separator has no accessible name. Provide a `label` attribute or slot content, or set `decorative` to suppress this warning (WCAG 4.1.2).',\n      );\n    }\n  }\n\n  override render() {\n    const isDecorative = this.decorative;\n    const showLabel = this._hasLabel || !!this.label;\n\n    return html`\n      <div\n        part=\"base\"\n        class=\"divider${showLabel ? ' divider--labeled' : ''}\"\n        role=\"${isDecorative ? 'presentation' : 'separator'}\"\n        aria-orientation=\"${isDecorative ? nothing : this.orientation}\"\n        aria-label=\"${!isDecorative && this.label ? this.label : nothing}\"\n      >\n        <span class=\"divider__line\"></span>\n        ${showLabel\n          ? html`<span part=\"label\" class=\"divider__label\">\n              ${this.label ? html`${this.label}` : nothing}\n              <slot @slotchange=${this._slotChangeHandler}></slot>\n            </span>`\n          : html`<slot @slotchange=${this._slotChangeHandler}></slot>`}\n        <span class=\"divider__line\"></span>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-divider': HelixDivider;\n  }\n}\n\n/** Canonical type alias for the hx-divider component. */\nexport type HxDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","HelixElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC0B3B,IAAMC,IAAN,cAA2BC,EAAa;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAYb,KAAQ,YAAY,IAapB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA;AAAA,EAZQ,WAAWC,GAA6B;AAC9C,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM;AAAA,MAAK,CAACC,MAC3BA,EAAK,aAAa,KAAK,aAClBA,EAAK,eAAe,IAAI,OAAO,SAAS,IACzCA,EAAK,aAAa,KAAK;AAAA,IAAA;AAAA,EAE/B;AAAA,EAOS,aAAaC,GAAgD;;AACpE,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI,GAC1B,CAAC,KAAK,cAAc,CAAC,KAAK,SAAU,KAAK;AAAA,EAM/C;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA,wBAGaD,IAAY,sBAAsB,EAAE;AAAA,gBAC5CD,IAAe,iBAAiB,WAAW;AAAA,4BAC/BA,IAAeG,IAAU,KAAK,WAAW;AAAA,sBAC/C,CAACH,KAAgB,KAAK,QAAQ,KAAK,QAAQG,CAAO;AAAA;AAAA;AAAA,UAG9DF,IACEC;AAAA,gBACI,KAAK,QAAQA,IAAO,KAAK,KAAK,KAAKC,CAAO;AAAA,kCACxB,KAAK,kBAAkB;AAAA,uBAE7CD,sBAAyB,KAAK,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AAvFaT,EACK,SAAS,CAACF,CAAkB;AAO5Ca,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BZ,EAQX,WAAA,eAAA,CAAA;AAOAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9BZ,EAeX,WAAA,WAAA,CAAA;AAQAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/BZ,EAuBX,WAAA,cAAA,CAAA;AAQAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9BZ,EA+BX,WAAA,SAAA,CAAA;AAIQW,EAAA;AAAA,EADPE,EAAA;AAAM,GAlCIb,EAmCH,WAAA,aAAA,CAAA;AAnCGA,IAANW,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdd,CAAA;"}

package/dist/shared/{hx-drawer--WDLuWtS.js → hx-drawer-Cx2ZJhBe.js}

@@ -1,10 +1,11 @@
-import { css as b, LitElement as v, html as h, nothing as w } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { query as m, state as c, property as d, customElement as y } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
+import { css as b, html as h, nothing as v } from "lit";
+import { query as m, state as c, property as d, customElement as w } from "lit/decorators.js";
+import { classMap as x } from "lit/directives/class-map.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
-import { l as _, u as x } from "./body-scroll-lock-VBa5TFP-.js";
-const E = b`
+import { l as y, u as _ } from "./body-scroll-lock-VBa5TFP-.js";
+import { H as g } from "./helix-element-BNEYeiys.js";
+import { c as E } from "./id-counter-DuX8vsui.js";
+const S = b`
   /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
   [hidden] {
     display: none !important;
@@ -172,7 +173,7 @@ const E = b`
   .drawer-title {
     margin: 0;
     flex: 1 1 auto;
-    font-family: var(--hx-font-family-sans);
+    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));
     font-size: var(--hx-font-size-lg);
     font-weight: var(--hx-font-weight-semibold);
     line-height: var(--hx-line-height-tight);
@@ -266,14 +267,34 @@ const E = b`
       var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
     flex-shrink: 0;
   }
+
+  /* ─── Forced Colors (Windows High Contrast) ─── */
+
+  @media (forced-colors: active) {
+    .drawer-panel {
+      border: 1px solid CanvasText;
+    }
+
+    .drawer-header {
+      border-bottom-color: CanvasText;
+    }
+
+    .drawer-footer {
+      border-top-color: CanvasText;
+    }
+
+    .drawer-close-button {
+      color: ButtonText;
+      border: 1px solid ButtonText;
+    }
+  }
 `;
-var S = Object.defineProperty, k = Object.getOwnPropertyDescriptor, o = (e, t, r, s) => {
-  for (var i = s > 1 ? void 0 : s ? k(t, r) : t, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (i = (s ? l(t, r, i) : l(i)) || i);
-  return s && i && S(t, r, i), i;
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? C(t, r) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (s = (i ? l(t, r, s) : l(s)) || s);
+  return i && s && k(t, r, s), s;
 };
-let C = 0;
-const A = {
+const A = E("hx-drawer"), T = {
   sm: "20rem",
   md: "30rem",
   lg: "40rem",
@@ -288,9 +309,9 @@ const A = {
   '[tabindex]:not([tabindex="-1"])',
   "details > summary"
 ].join(",");
-let a = class extends v {
+let o = class extends g {
   constructor() {
-    super(...arguments), this._isOpen = !1, this._hasHeaderActionsSlot = !1, this._hasFooterSlot = !1, this._hasLabelSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._animationTimeout = null, this._hasScrollLock = !1, this._siblingAriaHiddenElements = [], this._titleId = `hx-drawer-title-${++C}`, this.open = !1, this.placement = "end", this.size = "md", this.contained = !1, this.noHeader = !1, this.noFooter = !1, this.label = "", this.labelClose = "Close drawer", this._handleKeyDown = (e) => {
+    super(...arguments), this._isOpen = !1, this._hasHeaderActionsSlot = !1, this._hasFooterSlot = !1, this._hasLabelSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._animationTimeout = null, this._hasScrollLock = !1, this._siblingAriaHiddenElements = [], this._titleId = `${A()}-title`, this.open = !1, this.placement = "end", this.size = "md", this.contained = !1, this.noHeader = !1, this.noFooter = !1, this.label = "", this.labelClose = "Close drawer", this._handleKeyDown = (e) => {
       if (this._isOpen) {
         if (e.key === "Escape") {
           e.preventDefault(), this.open = !1;
@@ -327,38 +348,52 @@ let a = class extends v {
   // ─── Private: Size CSS variable ───
   /** @internal */
   _applySizeVar() {
-    const e = A[this.size] ?? this.size;
+    const e = T[this.size] ?? this.size;
     this.style.setProperty("--_drawer-size", e);
   }
   // ─── Private: Open / Close ───
   /** @internal */
   _lockBodyScroll() {
-    this.contained || this._hasScrollLock || (_(), this._hasScrollLock = !0);
+    this.contained || this._hasScrollLock || (y(), this._hasScrollLock = !0);
   }
   /** @internal */
   _restoreBodyScroll() {
-    this._hasScrollLock && (x(), this._hasScrollLock = !1);
+    this._hasScrollLock && (_(), this._hasScrollLock = !1);
   }
   /** @internal */
   _openDrawer() {
     const e = document.activeElement;
     this._triggerElement = e instanceof HTMLElement ? e : null, this._animationTimeout !== null && (clearTimeout(this._animationTimeout), this._animationTimeout = null), this._applySizeVar(), this._lockBodyScroll(), this._hideBackgroundFromScreenReaders(), this.dispatchEvent(new CustomEvent("hx-show", { bubbles: !0, composed: !0 })), this.updateComplete.then(() => (this._isOpen = !0, this._addListeners(), this.updateComplete)).then(() => {
       this._cachedFocusableElements = this._getFocusableElements(), this._setInitialFocus();
-      const t = this._getAnimationDuration();
-      this._animationTimeout = setTimeout(() => {
+      const t = this._getAnimationDuration(), r = this._panelEl;
+      if (t === 0 || !r)
         this.dispatchEvent(
           new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 })
         );
-      }, t);
+      else {
+        const i = () => {
+          this._animationTimeout !== null && (clearTimeout(this._animationTimeout), this._animationTimeout = null), this.dispatchEvent(
+            new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 })
+          );
+        };
+        r.addEventListener("transitionend", i, { once: !0 }), this._animationTimeout = setTimeout(i, t + 50);
+      }
     }).catch(console.error);
   }
   /** @internal */
   _closeDrawer() {
     this._animationTimeout !== null && (clearTimeout(this._animationTimeout), this._animationTimeout = null), this._isOpen = !1, this._removeListeners(), this._cachedFocusableElements = [], this._restoreBodyScroll(), this._restoreBackgroundForScreenReaders(), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), this._triggerElement && typeof this._triggerElement.focus == "function" && this._triggerElement.focus(), this._triggerElement = null;
-    const e = this._getAnimationDuration();
-    this._animationTimeout = setTimeout(() => {
+    const e = this._getAnimationDuration(), t = this._panelEl;
+    if (e === 0 || !t)
       this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 }));
-    }, e);
+    else {
+      const r = () => {
+        this._animationTimeout !== null && (clearTimeout(this._animationTimeout), this._animationTimeout = null), this.dispatchEvent(
+          new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })
+        );
+      };
+      t.addEventListener("transitionend", r, { once: !0 }), this._animationTimeout = setTimeout(r, e + 50);
+    }
   }
   /** @internal */
   _getAnimationDuration() {
@@ -407,10 +442,10 @@ let a = class extends v {
   }
   /** @internal */
   _getFocusableElements() {
-    var s, i;
+    var i, s;
     const e = Array.from(
-      ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(u)) ?? []
-    ), t = ((i = this.shadowRoot) == null ? void 0 : i.querySelectorAll("slot")) ?? [], r = [];
+      ((i = this.shadowRoot) == null ? void 0 : i.querySelectorAll(u)) ?? []
+    ), t = ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll("slot")) ?? [], r = [];
     return t.forEach((n) => {
       n.assignedElements({ flatten: !0 }).forEach((l) => {
         l instanceof HTMLElement && (l.matches(u) && r.push(l), l.querySelectorAll(u).forEach((f) => {
@@ -428,10 +463,10 @@ let a = class extends v {
       e.preventDefault();
       return;
     }
-    const [r, ...s] = t, i = s.length > 0 ? s[s.length - 1] : r;
-    if (!r || !i) return;
+    const [r, ...i] = t, s = i.length > 0 ? i[i.length - 1] : r;
+    if (!r || !s) return;
     const n = document.activeElement;
-    e.shiftKey ? n === r && (e.preventDefault(), i.focus()) : n === i && (e.preventDefault(), r.focus());
+    e.shiftKey ? n === r && (e.preventDefault(), s.focus()) : n === s && (e.preventDefault(), r.focus());
   }
   // ─── Slot change handlers ───
   /** @internal */
@@ -505,7 +540,7 @@ let a = class extends v {
   }
   /** @internal */
   _renderFooter() {
-    return this.noFooter ? w : h`
+    return this.noFooter ? v : h`
       <div part="footer" class="drawer-footer" ?hidden=${!this._hasFooterSlot}>
         <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
       </div>
@@ -520,7 +555,7 @@ let a = class extends v {
     return h`
       <div
         part="overlay"
-        class=${g(e)}
+        class=${x(e)}
         role="dialog"
         aria-modal="true"
         aria-labelledby=${p(t)}
@@ -540,53 +575,53 @@ let a = class extends v {
     `;
   }
 };
-a.styles = [E];
-o([
+o.styles = [S];
+a([
   m(".drawer-overlay")
-], a.prototype, "_overlayEl", 2);
-o([
+], o.prototype, "_overlayEl", 2);
+a([
   m(".drawer-panel")
-], a.prototype, "_panelEl", 2);
-o([
+], o.prototype, "_panelEl", 2);
+a([
   c()
-], a.prototype, "_isOpen", 2);
-o([
+], o.prototype, "_isOpen", 2);
+a([
   c()
-], a.prototype, "_hasHeaderActionsSlot", 2);
-o([
+], o.prototype, "_hasHeaderActionsSlot", 2);
+a([
   c()
-], a.prototype, "_hasFooterSlot", 2);
-o([
+], o.prototype, "_hasFooterSlot", 2);
+a([
   c()
-], a.prototype, "_hasLabelSlot", 2);
-o([
+], o.prototype, "_hasLabelSlot", 2);
+a([
   d({ type: Boolean, reflect: !0 })
-], a.prototype, "open", 2);
-o([
+], o.prototype, "open", 2);
+a([
   d({ type: String, reflect: !0 })
-], a.prototype, "placement", 2);
-o([
+], o.prototype, "placement", 2);
+a([
   d({ type: String, reflect: !0, attribute: "hx-size" })
-], a.prototype, "size", 2);
-o([
+], o.prototype, "size", 2);
+a([
   d({ type: Boolean, reflect: !0 })
-], a.prototype, "contained", 2);
-o([
+], o.prototype, "contained", 2);
+a([
   d({ type: Boolean, reflect: !0, attribute: "no-header" })
-], a.prototype, "noHeader", 2);
-o([
+], o.prototype, "noHeader", 2);
+a([
   d({ type: Boolean, reflect: !0, attribute: "no-footer" })
-], a.prototype, "noFooter", 2);
-o([
+], o.prototype, "noFooter", 2);
+a([
   d({ type: String })
-], a.prototype, "label", 2);
-o([
+], o.prototype, "label", 2);
+a([
   d({ type: String, attribute: "label-close" })
-], a.prototype, "labelClose", 2);
-a = o([
-  y("hx-drawer")
-], a);
+], o.prototype, "labelClose", 2);
+o = a([
+  w("hx-drawer")
+], o);
 export {
-  a as H
+  o as H
 };
-//# sourceMappingURL=hx-drawer--WDLuWtS.js.map
+//# sourceMappingURL=hx-drawer-Cx2ZJhBe.js.map

package/dist/shared/hx-drawer-Cx2ZJhBe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-drawer-Cx2ZJhBe.js","sources":["../../src/components/hx-drawer/hx-drawer.styles.ts","../../src/components/hx-drawer/hx-drawer.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDrawerStyles = css`\n  /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: contents;\n  }\n\n  :host([contained]) {\n    display: block;\n    position: relative;\n    overflow: hidden;\n  }\n\n  /* ─── Overlay ─── */\n\n  .drawer-overlay {\n    position: fixed;\n    inset: 0;\n    z-index: var(--hx-z-index-modal, 1400);\n    display: flex;\n    pointer-events: none;\n    visibility: hidden;\n  }\n\n  :host([contained]) .drawer-overlay {\n    position: absolute;\n  }\n\n  .drawer-overlay.is-open {\n    pointer-events: auto;\n    visibility: visible;\n  }\n\n  /* ─── Backdrop ─── */\n\n  .drawer-backdrop {\n    position: absolute;\n    inset: 0;\n    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));\n    opacity: 0;\n    transition: opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);\n  }\n\n  .drawer-overlay.is-open .drawer-backdrop {\n    opacity: var(--hx-drawer-backdrop-opacity, 0.5);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .drawer-backdrop {\n      transition: none;\n    }\n  }\n\n  /* ─── Panel ─── */\n\n  .drawer-panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));\n    color: var(--hx-drawer-color, var(--hx-color-neutral-900));\n    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));\n    overflow: hidden;\n    outline: none;\n    z-index: 1; /* local stacking context: panel above backdrop within overlay container */\n    transition:\n      transform var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out),\n      opacity var(--hx-duration-slow, 300ms) var(--hx-easing-out, ease-out);\n    opacity: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .drawer-panel {\n      transition: none;\n    }\n\n    .drawer-close-button {\n      transition: none;\n    }\n  }\n\n  /* ─── Placement: end (default — right) ─── */\n\n  :host([placement='end']) .drawer-panel,\n  :host(:not([placement])) .drawer-panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: 0;\n    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-width: 100%;\n    transform: translateX(100%);\n  }\n\n  :host([placement='end']) .drawer-overlay.is-open .drawer-panel,\n  :host(:not([placement])) .drawer-overlay.is-open .drawer-panel {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* ─── Placement: start (left) ─── */\n\n  :host([placement='start']) .drawer-panel {\n    top: 0;\n    inset-inline-start: 0;\n    bottom: 0;\n    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-width: 100%;\n    transform: translateX(-100%);\n  }\n\n  :host([placement='start']) .drawer-overlay.is-open .drawer-panel {\n    transform: translateX(0);\n    opacity: 1;\n  }\n\n  /* ─── Placement: top ─── */\n\n  :host([placement='top']) .drawer-panel {\n    top: 0;\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-height: 100%;\n    width: 100%;\n    transform: translateY(-100%);\n  }\n\n  :host([placement='top']) .drawer-overlay.is-open .drawer-panel {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* ─── Placement: bottom ─── */\n\n  :host([placement='bottom']) .drawer-panel {\n    bottom: 0;\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));\n    max-height: 100%;\n    width: 100%;\n    transform: translateY(100%);\n  }\n\n  :host([placement='bottom']) .drawer-overlay.is-open .drawer-panel {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  /* ─── Header ─── */\n\n  .drawer-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--hx-space-4, 1rem);\n    padding: var(--hx-drawer-header-padding, var(--hx-space-5, 1.25rem) var(--hx-space-6, 1.5rem));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n\n  .drawer-title {\n    margin: 0;\n    flex: 1 1 auto;\n    font-family: var(--hx-drawer-font-family, var(--hx-font-family-sans));\n    font-size: var(--hx-font-size-lg);\n    font-weight: var(--hx-font-weight-semibold);\n    line-height: var(--hx-line-height-tight);\n    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));\n  }\n\n  .drawer-header-actions {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n    flex-shrink: 0;\n  }\n\n  .drawer-close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    width: var(--hx-touch-target-min, 2.75rem);\n    height: var(--hx-touch-target-min, 2.75rem);\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background: transparent;\n    color: var(--hx-color-neutral-500);\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: background-color var(--hx-duration-fast, 100ms) var(--hx-easing-default, ease);\n  }\n\n  .drawer-close-button:hover {\n    background-color: var(--hx-color-neutral-100);\n    color: var(--hx-color-neutral-900);\n  }\n\n  .drawer-close-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-drawer-close-btn-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-500))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Visually-hidden close button (no-header mode, WCAG 4.1.2) ─── */\n  /* Keeps the button reachable by keyboard/AT but invisible to sighted users. */\n\n  .drawer-close-button--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  /* When focused via keyboard, restore visibility so users know where focus is. */\n  .drawer-close-button--sr-only:focus-visible {\n    position: static;\n    width: auto;\n    height: auto;\n    clip: auto;\n    white-space: normal;\n    overflow: visible;\n    margin: 0;\n  }\n\n  /* ─── Body ─── */\n\n  .drawer-body {\n    flex: 1 1 auto;\n    padding: var(--hx-drawer-body-padding, var(--hx-space-6, 1.5rem));\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  /* ─── Footer ─── */\n\n  .drawer-footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-drawer-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .drawer-panel {\n      border: 1px solid CanvasText;\n    }\n\n    .drawer-header {\n      border-bottom-color: CanvasText;\n    }\n\n    .drawer-footer {\n      border-top-color: CanvasText;\n    }\n\n    .drawer-close-button {\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n  }\n`;\n","import { 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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { lockBodyScroll, unlockBodyScroll } from '../../utils/body-scroll-lock.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixDrawerStyles } from './hx-drawer.styles.js';\n\nconst _nextDrawerId = createIdCounter('hx-drawer');\n\ntype DrawerSizePreset = 'sm' | 'md' | 'lg' | 'full';\ntype DrawerSize = DrawerSizePreset | (string & Record<never, never>);\n\nconst DRAWER_SIZE_MAP: Record<DrawerSizePreset, string> = {\n  sm: '20rem',\n  md: '30rem',\n  lg: '40rem',\n  full: '100%',\n};\n\nconst FOCUSABLE_SELECTORS = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n  'details > summary',\n].join(',');\n\n/**\n * A slide-in drawer panel that can appear from any edge of the viewport.\n * Supports focus trapping, overlay backdrop, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * ## Architecture Note: Native `<dialog>` Migration\n *\n * This component currently uses `role=\"dialog\"` + `aria-modal=\"true\"` on a\n * `<div>` rather than the native `<dialog>` element. This is intentional for\n * the current release because:\n *\n * 1. **SSR compatibility**: Native `<dialog>` requires `showModal()` to activate\n *    its modal behavior (focus trapping, backdrop, top-layer). This JavaScript\n *    call is not available during server-side rendering, which is a primary\n *    consumption pattern for Drupal/Twig templates.\n *\n * 2. **Contained mode**: The `contained` property constrains the drawer to a\n *    positioned parent. Native `<dialog>` in modal mode renders in the top layer\n *    and cannot be constrained to a parent element.\n *\n * 3. **Animation control**: The current CSS transition approach provides precise\n *    control over slide-in/slide-out animations. Native `<dialog>` `::backdrop`\n *    animations have inconsistent cross-browser support.\n *\n * Migration to native `<dialog>` is tracked as a future enhancement. When browser\n * support for `CloseWatcher`, `::backdrop` transitions, and declarative dialog\n * opening stabilizes, this component will be migrated to native semantics.\n *\n * @summary Slide-in panel overlay from any viewport edge.\n *\n * @tag hx-drawer\n *\n * @slot label - The drawer title text.\n * @slot header-actions - Action buttons displayed in the header near the close button.\n * @slot - Default slot for the drawer body content.\n * @slot footer - Action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-show - Fired when the drawer begins to open.\n * @fires {CustomEvent<void>} hx-after-show - Fired after the drawer open animation completes.\n * @fires {CustomEvent<void>} hx-hide - Fired when the drawer begins to close.\n * @fires {CustomEvent<void>} hx-after-hide - Fired after the drawer close animation completes.\n * @fires {CustomEvent<void>} hx-initial-focus - Fired when initial focus is set inside the drawer. Cancelable to override focus behavior.\n *\n * **Event naming rationale:** hx-drawer uses the `hx-show`/`hx-hide`/`hx-after-show`/`hx-after-hide`\n * pattern shared by all overlay components (hx-popover, hx-tooltip, hx-dropdown). This differs from\n * hx-dialog's `hx-open`/`hx-close`/`hx-cancel` events, which align with native `<dialog>` semantics.\n * The distinction is intentional: overlays are transient visibility toggles, while dialog is a stateful\n * container with cancel semantics.\n *\n * @csspart overlay - The full-screen overlay container (includes backdrop and panel).\n * @csspart panel - The drawer panel itself.\n * @csspart header - The header region containing the title and actions.\n * @csspart title - The drawer title element.\n * @csspart close-button - The built-in close button.\n * @csspart close-btn - The visually-hidden close button rendered when noHeader is true.\n * @csspart body - The scrollable body region.\n * @csspart footer - The footer region.\n *\n * @attr [label] - Accessible label for the dialog when no visible label slot is provided.\n *\n * @cssprop [--hx-drawer-bg=var(--hx-color-neutral-0)] - Drawer panel background color.\n * @cssprop [--hx-drawer-color=var(--hx-color-neutral-900)] - Drawer panel text color.\n * @cssprop [--hx-drawer-shadow=var(--hx-shadow-xl)] - Drawer panel box shadow.\n * @cssprop [--hx-drawer-backdrop-color=var(--hx-color-neutral-900)] - Backdrop color.\n * @cssprop [--hx-drawer-backdrop-opacity=0.5] - Backdrop opacity.\n * @cssprop [--hx-drawer-header-padding] - Padding inside the header.\n * @cssprop [--hx-drawer-header-border-color=var(--hx-color-neutral-200)] - Header border color.\n * @cssprop [--hx-drawer-title-color=var(--hx-color-neutral-900)] - Title text color.\n * @cssprop [--hx-drawer-body-padding] - Padding inside the body.\n * @cssprop [--hx-drawer-footer-padding] - Padding inside the footer.\n * @cssprop [--hx-drawer-footer-border-color=var(--hx-color-neutral-200)] - Footer border color.\n */\n@customElement('hx-drawer')\nexport class HelixDrawer extends HelixElement {\n  static override styles = [helixDrawerStyles];\n\n  // ─── Queries ───\n\n  /**\n   * Reference to the overlay element that wraps the backdrop and panel.\n   * @internal\n   */\n  @query('.drawer-overlay')\n  private _overlayEl: HTMLElement | null | undefined;\n\n  /**\n   * Reference to the drawer panel element used for focus management.\n   * @internal\n   */\n  @query('.drawer-panel')\n  private _panelEl: HTMLElement | null | undefined;\n\n  // ─── Internal state ───\n\n  /**\n   * Whether the drawer is in the open state and visible to the user.\n   * @internal\n   */\n  @state()\n  private _isOpen = false;\n\n  /**\n   * Whether the header-actions slot has any assigned content.\n   * @internal\n   */\n  @state()\n  private _hasHeaderActionsSlot = false;\n\n  /**\n   * Whether the footer slot has any assigned content.\n   * @internal\n   */\n  @state()\n  private _hasFooterSlot = false;\n\n  /**\n   * Whether the label slot has any assigned content.\n   * @internal\n   */\n  @state()\n  private _hasLabelSlot = false;\n\n  /**\n   * Cached list of focusable elements within the drawer, used for focus trapping.\n   * @internal\n   */\n  private _cachedFocusableElements: HTMLElement[] = [];\n  /**\n   * The element that triggered the drawer to open, restored focus when the drawer closes.\n   * @internal\n   */\n  private _triggerElement: HTMLElement | null = null;\n  /**\n   * Handle for the pending animation end timeout, cleared when the drawer opens or closes again.\n   * @internal\n   */\n  private _animationTimeout: ReturnType<typeof setTimeout> | null = null;\n  /** Whether this drawer instance currently holds a body-scroll lock. */\n  /** @internal */\n  private _hasScrollLock = false;\n  /**\n   * Elements outside the drawer that were given aria-hidden during open, restored on close.\n   * @internal\n   */\n  private _siblingAriaHiddenElements: Element[] = [];\n\n  /**\n   * Unique ID for the title element, used by aria-labelledby to link the dialog to its label.\n   * @internal\n   */\n  private readonly _titleId = `${_nextDrawerId()}-title`;\n\n  // ─── Public Properties ───\n\n  /**\n   * Controls whether the drawer is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Which edge of the viewport the drawer slides in from.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: 'start' | 'end' | 'top' | 'bottom' = 'end';\n\n  /**\n   * The size of the drawer panel. Use 'sm', 'md', 'lg', 'full', or any valid CSS length.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' | 'full' | (string & Record<never, never>) = 'md';\n\n  /**\n   * When true, the drawer is constrained to its positioned parent instead of the viewport.\n   * The host element must have `position: relative` (or the library handles it via :host).\n   * @attr contained\n   */\n  @property({ type: Boolean, reflect: true })\n  contained = false;\n\n  /**\n   * When true, the header (title, header-actions, close button) is hidden.\n   * @attr no-header\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-header' })\n  noHeader = false;\n\n  /**\n   * When true, the footer slot is hidden.\n   * @attr no-footer\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-footer' })\n  noFooter = false;\n\n  /**\n   * Accessible label for the dialog when the `label` slot is not populated.\n   * When the `label` slot is used, `aria-labelledby` takes precedence.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /** Accessible label for the built-in close button. Override for localized text. */\n  @property({ type: String, attribute: 'label-close' })\n  labelClose = 'Close drawer';\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Backward compat: accept legacy `size` attribute. When present and `hx-size`\n    // is not set, map the value and emit a deprecation warning.\n    const legacySize = this.getAttribute('size');\n    if (legacySize !== null && !this.hasAttribute('hx-size')) {\n      devWarn('hx-drawer', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as DrawerSize;\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._removeListeners();\n    if (this._animationTimeout !== null) {\n      clearTimeout(this._animationTimeout);\n    }\n    this._restoreBodyScroll();\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._openDrawer();\n      } else {\n        this._closeDrawer();\n      }\n    }\n\n    if (changedProperties.has('size')) {\n      this._applySizeVar();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Opens the drawer. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Closes the drawer. */\n  hide(): void {\n    this.open = false;\n  }\n\n  // ─── Private: Size CSS variable ───\n\n  /** @internal */\n  private _applySizeVar(): void {\n    const resolvedSize = DRAWER_SIZE_MAP[this.size as DrawerSizePreset] ?? this.size;\n    this.style.setProperty('--_drawer-size', resolvedSize);\n  }\n\n  // ─── Private: Open / Close ───\n\n  /** @internal */\n  private _lockBodyScroll(): void {\n    if (this.contained || this._hasScrollLock) return;\n    // Uses a shared reference-counted lock so that simultaneous hx-dialog / hx-drawer\n    // instances don't clobber each other when one closes before the other\n    // (see utils/body-scroll-lock.ts).\n    lockBodyScroll();\n    this._hasScrollLock = true;\n  }\n\n  /** @internal */\n  private _restoreBodyScroll(): void {\n    if (!this._hasScrollLock) return;\n    unlockBodyScroll();\n    this._hasScrollLock = false;\n  }\n\n  /** @internal */\n  private _openDrawer(): void {\n    // Capture trigger for focus restoration (P2-04: use instanceof guard)\n    const active = document.activeElement;\n    this._triggerElement = active instanceof HTMLElement ? active : null;\n\n    // P1-05: clear any pending animation timeout before scheduling a new one\n    if (this._animationTimeout !== null) {\n      clearTimeout(this._animationTimeout);\n      this._animationTimeout = null;\n    }\n\n    this._applySizeVar();\n    this._lockBodyScroll();\n    this._hideBackgroundFromScreenReaders();\n\n    // Dispatch hx-show before visual update\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n\n    // Transition to open state\n    void this.updateComplete\n      .then(() => {\n        this._isOpen = true;\n        this._addListeners();\n\n        // Set initial focus after next render\n        return this.updateComplete;\n      })\n      .then(() => {\n        this._cachedFocusableElements = this._getFocusableElements();\n        this._setInitialFocus();\n\n        // Dispatch hx-after-show when the panel's CSS transition completes.\n        // If prefers-reduced-motion is active (duration === 0) or the element\n        // is missing, fire immediately — transitionend will never fire.\n        const duration = this._getAnimationDuration();\n        const panel = this._panelEl;\n        if (duration === 0 || !panel) {\n          this.dispatchEvent(\n            new CustomEvent<void>('hx-after-show', { bubbles: true, composed: true }),\n          );\n        } else {\n          const emitAfterShow = () => {\n            if (this._animationTimeout !== null) {\n              clearTimeout(this._animationTimeout);\n              this._animationTimeout = null;\n            }\n            this.dispatchEvent(\n              new CustomEvent<void>('hx-after-show', { bubbles: true, composed: true }),\n            );\n          };\n          panel.addEventListener('transitionend', emitAfterShow, { once: true });\n          // Safety fallback: if transitionend never fires (e.g. transition\n          // cancelled, element removed), ensure the event is still dispatched.\n          this._animationTimeout = setTimeout(emitAfterShow, duration + 50);\n        }\n      })\n      .catch(console.error);\n  }\n\n  /** @internal */\n  private _closeDrawer(): void {\n    // P1-05: clear any pending animation timeout before scheduling a new one\n    if (this._animationTimeout !== null) {\n      clearTimeout(this._animationTimeout);\n      this._animationTimeout = null;\n    }\n\n    this._isOpen = false;\n    this._removeListeners();\n    this._cachedFocusableElements = [];\n    this._restoreBodyScroll();\n    this._restoreBackgroundForScreenReaders();\n\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n\n    // Restore focus to the trigger immediately — before any animation timeout.\n    // WCAG 2.4.3: focus must never remain on invisible or inert content.\n    if (this._triggerElement && typeof this._triggerElement.focus === 'function') {\n      this._triggerElement.focus();\n    }\n    this._triggerElement = null;\n\n    // Dispatch hx-after-hide when the panel's CSS transition completes.\n    // If prefers-reduced-motion is active (duration === 0) or the element\n    // is missing, fire immediately — transitionend will never fire.\n    const duration = this._getAnimationDuration();\n    const panel = this._panelEl;\n    if (duration === 0 || !panel) {\n      this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n    } else {\n      const emitAfterHide = () => {\n        if (this._animationTimeout !== null) {\n          clearTimeout(this._animationTimeout);\n          this._animationTimeout = null;\n        }\n        this.dispatchEvent(\n          new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }),\n        );\n      };\n      panel.addEventListener('transitionend', emitAfterHide, { once: true });\n      // Safety fallback: if transitionend never fires (e.g. transition\n      // cancelled, element removed), ensure the event is still dispatched.\n      this._animationTimeout = setTimeout(emitAfterHide, duration + 50);\n    }\n  }\n\n  /** @internal */\n  private _getAnimationDuration(): number {\n    if (typeof window === 'undefined') return 0;\n    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return 0;\n    return 300;\n  }\n\n  // ─── Background aria-hidden management (P1-03) ───\n\n  /** @internal */\n  private _hideBackgroundFromScreenReaders(): void {\n    if (this.contained) return;\n    this._siblingAriaHiddenElements = [];\n    // Walk the parent chain once to find which body child is an ancestor of this component.\n    // This avoids calling child.contains(this) in a loop (which is O(n * depth)).\n    // Starting from parentElement avoids aliasing `this` to a local variable.\n    let ancestorBodyChild: Element | null = null;\n    let el: Element | null = this.parentElement;\n    while (el && el.parentElement !== document.body) {\n      el = el.parentElement;\n    }\n    if (el && el.parentElement === document.body) {\n      ancestorBodyChild = el;\n    }\n    Array.from(document.body.children).forEach((child) => {\n      if (child === this || child === ancestorBodyChild) return;\n      if (!child.hasAttribute('aria-hidden')) {\n        child.setAttribute('aria-hidden', 'true');\n        this._siblingAriaHiddenElements.push(child);\n      }\n    });\n  }\n\n  /** @internal */\n  private _restoreBackgroundForScreenReaders(): void {\n    this._siblingAriaHiddenElements.forEach((el) => {\n      el.removeAttribute('aria-hidden');\n    });\n    this._siblingAriaHiddenElements = [];\n  }\n\n  // ─── Event Listeners (P1-01: use only document listener, not overlay) ───\n\n  /** @internal */\n  private _addListeners(): void {\n    document.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  /** @internal */\n  private _removeListeners(): void {\n    document.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  // ─── Keyboard Handler ───\n\n  /**\n   * Handles keyboard events on the document to trap focus and close the drawer on Escape.\n   * @internal\n   */\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    if (!this._isOpen) return;\n\n    if (e.key === 'Escape') {\n      e.preventDefault();\n      this.open = false;\n      return;\n    }\n\n    if (e.key === 'Tab') {\n      this._trapFocus(e);\n    }\n  };\n\n  // ─── Focus ───\n\n  /** @internal */\n  private _setInitialFocus(): void {\n    const event = new CustomEvent<void>('hx-initial-focus', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    this.dispatchEvent(event);\n\n    if (!event.defaultPrevented) {\n      const focusable = this._cachedFocusableElements;\n      if (focusable.length > 0 && focusable[0]) {\n        focusable[0].focus();\n      } else {\n        this._panelEl?.focus();\n      }\n    }\n  }\n\n  /** @internal */\n  private _getFocusableElements(): HTMLElement[] {\n    const shadowFocusable = Array.from(\n      this.shadowRoot?.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS) ?? [],\n    );\n\n    const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n    const lightFocusable: HTMLElement[] = [];\n\n    slots.forEach((slot) => {\n      slot.assignedElements({ flatten: true }).forEach((el) => {\n        if (el instanceof HTMLElement) {\n          if (el.matches(FOCUSABLE_SELECTORS)) {\n            lightFocusable.push(el);\n          }\n          el.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTORS).forEach((child) => {\n            lightFocusable.push(child);\n          });\n        }\n      });\n    });\n\n    return [...shadowFocusable, ...lightFocusable].filter(\n      (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n    );\n  }\n\n  /** @internal */\n  private _trapFocus(e: KeyboardEvent): void {\n    const focusable =\n      this._cachedFocusableElements.length > 0\n        ? this._cachedFocusableElements\n        : this._getFocusableElements();\n\n    if (focusable.length === 0) {\n      e.preventDefault();\n      return;\n    }\n\n    const [first, ...rest] = focusable;\n    const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n    if (!first || !last) return;\n\n    // P1-02: Use document.activeElement for reliable detection of slotted (light DOM) elements.\n    // shadowRoot.activeElement returns the <slot> host for slotted content, not the actual element.\n    const active = document.activeElement as HTMLElement | null;\n\n    if (e.shiftKey) {\n      if (active === first) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      if (active === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  }\n\n  // ─── Overlay Click ───\n\n  /**\n   * Handles clicks on the overlay backdrop to close the drawer when the user clicks outside the panel.\n   * @internal\n   */\n  private _handleOverlayClick = (e: MouseEvent): void => {\n    // Only close when clicking the overlay itself (backdrop), not the panel\n    const target = e.target as HTMLElement;\n    if (target === this._overlayEl || target.classList.contains('drawer-backdrop')) {\n      this.open = false;\n    }\n  };\n\n  // ─── Slot change handlers ───\n\n  /** @internal */\n  private _handleHeaderActionsSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeaderActionsSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderHeader() {\n    if (this.noHeader) {\n      // WCAG 4.1.2: When the header is hidden there must still be a reachable close\n      // mechanism for keyboard and mouse/touch users. Render a visually-hidden close\n      // button that is focusable and announced by screen readers.\n      return html`\n        <button\n          part=\"close-btn\"\n          class=\"drawer-close-button drawer-close-button--sr-only\"\n          aria-label=${this.labelClose}\n          @click=${() => {\n            this.open = false;\n          }}\n        ></button>\n      `;\n    }\n\n    return html`\n      <div part=\"header\" class=\"drawer-header\">\n        <h2 part=\"title\" id=${this._titleId} class=\"drawer-title\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>\n        </h2>\n        <div class=\"drawer-header-actions\">\n          ${this._hasHeaderActionsSlot\n            ? html`<slot\n                name=\"header-actions\"\n                @slotchange=${this._handleHeaderActionsSlotChange}\n              ></slot>`\n            : html`<slot\n                name=\"header-actions\"\n                @slotchange=${this._handleHeaderActionsSlotChange}\n                style=\"display:none\"\n              ></slot>`}\n          <button\n            part=\"close-button\"\n            class=\"drawer-close-button\"\n            aria-label=${this.labelClose}\n            @click=${() => {\n              this.open = false;\n            }}\n          >\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              <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n              <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderFooter() {\n    if (this.noFooter) return nothing;\n\n    return html`\n      <div part=\"footer\" class=\"drawer-footer\" ?hidden=${!this._hasFooterSlot}>\n        <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const overlayClasses = {\n      'drawer-overlay': true,\n      'is-open': this._isOpen,\n    };\n\n    // P1-06: ensure the dialog always has an accessible name.\n    // Priority: aria-labelledby (slot) > aria-label (prop) > aria-label (fallback \"Drawer\")\n    const ariaLabelledby = this._hasLabelSlot ? this._titleId : undefined;\n    const ariaLabel = !this._hasLabelSlot ? this.label || 'Drawer' : undefined;\n\n    return html`\n      <div\n        part=\"overlay\"\n        class=${classMap(overlayClasses)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=${ifDefined(ariaLabelledby)}\n        aria-label=${ifDefined(ariaLabel)}\n        tabindex=\"-1\"\n        @click=${this._handleOverlayClick}\n      >\n        <div class=\"drawer-backdrop\" aria-hidden=\"true\"></div>\n        <div part=\"panel\" class=\"drawer-panel\" tabindex=\"-1\">\n          ${this._renderHeader()}\n          <div part=\"body\" class=\"drawer-body\">\n            <slot></slot>\n          </div>\n          ${this._renderFooter()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-drawer': HelixDrawer;\n  }\n  interface HTMLElementEventMap {\n    'hx-show': CustomEvent<void>;\n    'hx-after-show': CustomEvent<void>;\n    'hx-hide': CustomEvent<void>;\n    'hx-after-hide': CustomEvent<void>;\n    'hx-initial-focus': CustomEvent<void>;\n  }\n}\n"],"names":["helixDrawerStyles","css","_nextDrawerId","createIdCounter","DRAWER_SIZE_MAP","FOCUSABLE_SELECTORS","HelixDrawer","HelixElement","target","legacySize","changedProperties","resolvedSize","lockBodyScroll","unlockBodyScroll","active","duration","panel","emitAfterShow","emitAfterHide","ancestorBodyChild","el","child","event","focusable","_a","shadowFocusable","slots","_b","lightFocusable","slot","first","rest","last","html","nothing","overlayClasses","ariaLabelledby","ariaLabel","classMap","ifDefined","__decorateClass","query","state","property","customElement"],"mappings":";;;;;;;AAEO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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"}

package/dist/shared/{hx-dropdown-n5-XSmiV.js → hx-dropdown-BjDrPUq5.js}

@@ -1,9 +1,9 @@
-import { css as h, LitElement as c, nothing as u, html as m } from "lit";
-import "./document-token-adoption-DuYNKd4k.js";
-import { property as l, state as f, query as p, customElement as g } from "lit/decorators.js";
-import { d as b } from "./dev-warn-YlwPHjtX.js";
-import { computePosition as _, offset as v, flip as y, shift as w } from "@floating-ui/dom";
-const x = h`
+import { css as u, nothing as m, html as f } from "lit";
+import { property as d, state as g, query as p, customElement as b } from "lit/decorators.js";
+import { d as _ } from "./dev-warn-YlwPHjtX.js";
+import { H as v } from "./helix-element-BNEYeiys.js";
+import { c as y } from "./id-counter-DuX8vsui.js";
+const w = u`
   :host {
     display: inline-block;
     position: relative;
@@ -23,7 +23,7 @@ const x = h`
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
     background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,
@@ -49,15 +49,25 @@ const x = h`
       transition: none;
     }
   }
+
+  /* ─── High Contrast Mode (forced-colors) ─── */
+
+  @media (forced-colors: active) {
+    [part='panel'] {
+      background-color: Canvas;
+      border: 2px solid CanvasText;
+    }
+  }
 `;
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, n, i) => {
-  for (var s = i > 1 ? void 0 : i ? C(t, n) : t, r = e.length - 1, d; r >= 0; r--)
-    (d = e[r]) && (s = (i ? d(t, n, s) : d(s)) || s);
-  return i && s && k(t, n, s), s;
+var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, n, i) => {
+  for (var s = i > 1 ? void 0 : i ? k(t, n) : t, o = e.length - 1, l; o >= 0; o--)
+    (l = e[o]) && (s = (i ? l(t, n, s) : l(s)) || s);
+  return i && s && x(t, n, s), s;
 };
-let o = class extends c {
+const C = y("hx-dropdown");
+let r = class extends v {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "bottom-start", this.label = "Menu", this.disabled = !1, this.distance = 4, this._panelVisible = !1, this._documentListenerAttached = !1, this._panelId = `hx-dropdown-panel-${++o._instanceCounter}`, this._handleKeydown = (e) => {
+    super(...arguments), this.open = !1, this.placement = "bottom-start", this.label = "Menu", this.disabled = !1, this.distance = 4, this._panelVisible = !1, this._documentListenerAttached = !1, this._panelId = `${C()}-panel`, this._handleKeydown = (e) => {
       e.key === "Escape" && this.open ? (e.stopPropagation(), this._hide(!0)) : e.key === "Tab" && this.open ? this._hide(!1) : this.open && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") && (e.preventDefault(), this._handleMenuNavigation(e.key));
     }, this._handleOutsideClick = (e) => {
       e.composedPath().includes(this) || this._hide();
@@ -94,14 +104,14 @@ let o = class extends c {
   async _updatePosition() {
     const e = this._triggerWrapper, t = this._panel;
     if (!e || !t) return;
-    const n = this.placement.replace(/^start$/, "left").replace(/^end$/, "right"), { x: i, y: s } = await _(e, t, {
+    const n = this.placement.replace(/^start$/, "left").replace(/^end$/, "right"), { computePosition: i, flip: s, shift: o, offset: l } = await import("@floating-ui/dom"), { x: c, y: h } = await i(e, t, {
       placement: n,
       strategy: "fixed",
-      middleware: [v(this.distance), y(), w({ padding: 8 })]
+      middleware: [l(this.distance), s(), o({ padding: 8 })]
     });
     Object.assign(t.style, {
-      left: `${i}px`,
-      top: `${s}px`
+      left: `${c}px`,
+      top: `${h}px`
     });
   }
   // ─── Event Handlers ───
@@ -130,7 +140,7 @@ let o = class extends c {
     if (!e) return [];
     const t = e.querySelector("slot"), n = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], i = [];
     for (const s of n)
-      s instanceof HTMLElement && (s.matches('[role="menuitem"]') ? i.push(s) : s.querySelectorAll('[role="menuitem"]').forEach((r) => i.push(r)));
+      s instanceof HTMLElement && (s.matches('[role="menuitem"]') ? i.push(s) : s.querySelectorAll('[role="menuitem"]').forEach((o) => i.push(o)));
     return i;
   }
   // P0-01: Find the first focusable element in slotted panel content.
@@ -142,17 +152,17 @@ let o = class extends c {
     for (const s of n) {
       if (!(s instanceof HTMLElement)) continue;
       if (s.matches(i)) return s;
-      const r = s.querySelector(i);
-      if (r) return r;
+      const o = s.querySelector(i);
+      if (o) return o;
     }
     return null;
   }
   /** @internal */
   _handlePanelClick(e) {
-    var r;
+    var o;
     const n = e.target.closest('[role="menuitem"], [data-value]');
     if (!n) return;
-    const i = n.dataset.value ?? n.getAttribute("value") ?? null, s = ((r = n.textContent) == null ? void 0 : r.trim()) ?? "";
+    const i = n.dataset.value ?? n.getAttribute("value") ?? null, s = ((o = n.textContent) == null ? void 0 : o.trim()) ?? "";
     this.dispatchEvent(
       new CustomEvent("hx-select", {
         bubbles: !0,
@@ -163,7 +173,7 @@ let o = class extends c {
   }
   // ─── Render ───
   render() {
-    return m`
+    return f`
       <div
         part="trigger"
         class="trigger-wrapper"
@@ -176,7 +186,7 @@ let o = class extends c {
         part="panel"
         id=${this._panelId}
         role="menu"
-        aria-hidden=${this._panelVisible ? u : "true"}
+        aria-hidden=${this._panelVisible ? m : "true"}
         aria-label=${this.label}
         class=${this._panelVisible ? "panel panel--visible" : "panel"}
         @click=${this._handlePanelClick}
@@ -189,7 +199,7 @@ let o = class extends c {
   /** @internal */
   _onPanelSlotChange(e) {
     const i = e.target.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() !== "hx-dropdown-item");
-    i.length > 0 && b(
+    i.length > 0 && _(
       "hx-dropdown",
       `Default slot should contain only hx-dropdown-item elements. Found unexpected: ${i.map((s) => `<${s.tagName.toLowerCase()}>`).join(", ")}. Non-hx-dropdown-item children will be included in keyboard navigation incorrectly.`
     );
@@ -218,36 +228,35 @@ let o = class extends c {
     }
   }
 };
-o.styles = [x];
-o._instanceCounter = 0;
+r.styles = [w];
 a([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
 a([
-  l({ type: String, reflect: !0 })
-], o.prototype, "placement", 2);
+  d({ type: String, reflect: !0 })
+], r.prototype, "placement", 2);
 a([
-  l()
-], o.prototype, "label", 2);
+  d()
+], r.prototype, "label", 2);
 a([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
 a([
-  l({ type: Number })
-], o.prototype, "distance", 2);
+  d({ type: Number })
+], r.prototype, "distance", 2);
 a([
-  f()
-], o.prototype, "_panelVisible", 2);
+  g()
+], r.prototype, "_panelVisible", 2);
 a([
   p('[part="panel"]')
-], o.prototype, "_panel", 2);
+], r.prototype, "_panel", 2);
 a([
   p('[part="trigger"]')
-], o.prototype, "_triggerWrapper", 2);
-o = a([
-  g("hx-dropdown")
-], o);
+], r.prototype, "_triggerWrapper", 2);
+r = a([
+  b("hx-dropdown")
+], r);
 export {
-  o as H
+  r as H
 };
-//# sourceMappingURL=hx-dropdown-n5-XSmiV.js.map
+//# sourceMappingURL=hx-dropdown-BjDrPUq5.js.map