@helixui/library 0.1.0

package/dist/shared/hx-divider-BDMW3H-1.js

@@ -0,0 +1,157 @@
+import { css as p, LitElement as v, nothing as c, html as s } from "lit";
+import { property as n, state as _, customElement as g } from "lit/decorators.js";
+import { t as b } from "./lit-Dpo7RLp4.js";
+const f = p`
+  :host {
+    display: block;
+    --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));
+    --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));
+    --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));
+    --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));
+    --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));
+  }
+
+  /* ─── Spacing Variants ─── */
+
+  :host([spacing='none']) {
+    --_spacing: 0;
+  }
+
+  :host([spacing='sm']) {
+    --_spacing: var(--hx-space-2, 0.5rem);
+  }
+
+  :host,
+  :host([spacing='md']) {
+    --_spacing: var(--hx-space-4, 1rem);
+  }
+
+  :host([spacing='lg']) {
+    --_spacing: var(--hx-space-6, 1.5rem);
+  }
+
+  /* ─── Horizontal (default) ─── */
+
+  :host([orientation='horizontal']) {
+    margin-block: var(--_spacing);
+  }
+
+  /* ─── Vertical ─── */
+
+  :host([orientation='vertical']) {
+    display: inline-flex;
+    align-self: stretch;
+    margin-inline: var(--_spacing);
+  }
+
+  /* ─── Base (hr) — horizontal ─── */
+
+  .divider {
+    display: flex;
+    align-items: center;
+    gap: var(--_divider-label-gap);
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* ─── Base — vertical ─── */
+
+  :host([orientation='vertical']) .divider {
+    flex-direction: column;
+    height: 100%;
+  }
+
+  /* ─── Lines flanking label ─── */
+
+  .divider__line {
+    flex: 1;
+    background-color: var(--_divider-color);
+  }
+
+  :host(:not([orientation='vertical'])) .divider__line {
+    height: var(--_divider-width);
+  }
+
+  :host([orientation='vertical']) .divider__line {
+    width: var(--_divider-width);
+    height: auto;
+    min-height: 0;
+  }
+
+  /* ─── Label ─── */
+
+  .divider__label {
+    flex-shrink: 0;
+    color: var(--_divider-label-color);
+    font-size: var(--_divider-label-size);
+    line-height: var(--hx-line-height-tight, 1.25);
+    white-space: nowrap;
+  }
+`;
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (e, i, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? x(i, t) : i, d = e.length - 1, h; d >= 0; d--)
+    (h = e[d]) && (a = (o ? h(i, t, a) : h(a)) || a);
+  return o && a && m(i, t, a), a;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.spacing = "md", this.decorative = !1, this._hasLabel = !1, this._slotChangeHandler = (e) => {
+      this._checkSlot(e.target);
+    };
+  }
+  _checkSlot(e) {
+    const i = e.assignedNodes({ flatten: !0 });
+    this._hasLabel = i.some(
+      (t) => t.nodeType === Node.TEXT_NODE ? (t.textContent ?? "").trim().length > 0 : t.nodeType === Node.ELEMENT_NODE
+    );
+  }
+  firstUpdated(e) {
+    var t;
+    super.firstUpdated(e);
+    const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot:not([name])");
+    i && this._checkSlot(i);
+  }
+  render() {
+    const e = this.decorative, i = this._hasLabel || !!this.label;
+    return s`
+      <div
+        part="base"
+        class="divider"
+        role="${e ? "presentation" : "separator"}"
+        aria-orientation="${e ? c : this.orientation}"
+        aria-label="${!e && this.label ? this.label : c}"
+      >
+        <span class="divider__line"></span>
+        ${i ? s`<span part="label" class="divider__label">
+              ${this.label ? s`${this.label}` : c}
+              <slot @slotchange=${this._slotChangeHandler}></slot>
+            </span>` : s`<slot @slotchange=${this._slotChangeHandler}></slot>`}
+        <span class="divider__line"></span>
+      </div>
+    `;
+  }
+};
+r.styles = [b, f];
+l([
+  n({ type: String, reflect: !0 })
+], r.prototype, "orientation", 2);
+l([
+  n({ type: String, reflect: !0 })
+], r.prototype, "spacing", 2);
+l([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "decorative", 2);
+l([
+  n({ type: String, reflect: !0 })
+], r.prototype, "label", 2);
+l([
+  _()
+], r.prototype, "_hasLabel", 2);
+r = l([
+  g("hx-divider")
+], r);
+export {
+  r as H
+};
+//# sourceMappingURL=hx-divider-BDMW3H-1.js.map

package/dist/shared/hx-divider-BDMW3H-1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-divider-BDMW3H-1.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","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\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 LitElement {\n  static override styles = [tokenStyles, 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  @state()\n  private _hasLabel = false;\n\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  private _slotChangeHandler = (e: Event): void => {\n    this._checkSlot(e.target as HTMLSlotElement);\n  };\n\n  override firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n    if (slot) this._checkSlot(slot);\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\"\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\nexport type WcDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","LitElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","tokenStyles","__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;;;;;;ACwB3B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAWb,KAAQ,YAAY,IAWpB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA,EAXQ,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,EAMS,aAAaC,GAA0C;;AAC9D,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA;AAAA,gBAIKF,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;AA9EaT,EACK,SAAS,CAACW,GAAab,CAAkB;AAOzDc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bb,EAQX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bb,EAeX,WAAA,WAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAuBX,WAAA,cAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9Bb,EA+BX,WAAA,SAAA,CAAA;AAGQY,EAAA;AAAA,EADPE,EAAA;AAAM,GAjCId,EAkCH,WAAA,aAAA,CAAA;AAlCGA,IAANY,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdf,CAAA;"}

package/dist/shared/hx-drawer-CESgUmre.js

@@ -0,0 +1,515 @@
+import { css as b, LitElement as w, nothing as p, html as h } from "lit";
+import { query as f, state as c, property as d, customElement as y } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { t as g } from "./lit-Dpo7RLp4.js";
+const x = b`
+  /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: contents;
+  }
+
+  :host([contained]) {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* ─── Overlay ─── */
+
+  .drawer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--hx-z-index-modal, 400);
+    display: flex;
+    pointer-events: none;
+    visibility: hidden;
+  }
+
+  :host([contained]) .drawer-overlay {
+    position: absolute;
+  }
+
+  .drawer-overlay.is-open {
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  /* ─── Backdrop ─── */
+
+  .drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: var(--hx-drawer-backdrop-color, var(--hx-color-neutral-900));
+    opacity: 0;
+    transition: opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);
+  }
+
+  .drawer-overlay.is-open .drawer-backdrop {
+    opacity: var(--hx-drawer-backdrop-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-backdrop {
+      transition: none;
+    }
+  }
+
+  /* ─── Panel ─── */
+
+  .drawer-panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--hx-drawer-bg, var(--hx-color-neutral-0));
+    color: var(--hx-drawer-color, var(--hx-color-neutral-900));
+    box-shadow: var(--hx-drawer-shadow, var(--hx-shadow-xl));
+    overflow: hidden;
+    outline: none;
+    z-index: 1;
+    transition:
+      transform var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out),
+      opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);
+    opacity: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-panel {
+      transition: none;
+    }
+  }
+
+  /* ─── Placement: end (default — right) ─── */
+
+  :host([placement='end']) .drawer-panel,
+  :host(:not([placement])) .drawer-panel {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-width: 100%;
+    transform: translateX(100%);
+  }
+
+  :host([placement='end']) .drawer-overlay.is-open .drawer-panel,
+  :host(:not([placement])) .drawer-overlay.is-open .drawer-panel {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: start (left) ─── */
+
+  :host([placement='start']) .drawer-panel {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-width: 100%;
+    transform: translateX(-100%);
+  }
+
+  :host([placement='start']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: top ─── */
+
+  :host([placement='top']) .drawer-panel {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-height: 100%;
+    width: 100%;
+    transform: translateY(-100%);
+  }
+
+  :host([placement='top']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ─── Placement: bottom ─── */
+
+  :host([placement='bottom']) .drawer-panel {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--_drawer-size, var(--hx-drawer-size-md, 30rem));
+    max-height: 100%;
+    width: 100%;
+    transform: translateY(100%);
+  }
+
+  :host([placement='bottom']) .drawer-overlay.is-open .drawer-panel {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  /* ─── Header ─── */
+
+  .drawer-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--hx-spacing-4, 1rem);
+    padding: var(
+      --hx-drawer-header-padding,
+      var(--hx-spacing-5, 1.25rem) var(--hx-spacing-6, 1.5rem)
+    );
+    border-bottom: var(--hx-border-width-1, 1px) solid
+      var(--hx-drawer-header-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+
+  .drawer-title {
+    margin: 0;
+    flex: 1 1 auto;
+    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-snug);
+    color: var(--hx-drawer-title-color, var(--hx-color-neutral-900));
+  }
+
+  .drawer-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--hx-spacing-2, 0.5rem);
+    flex-shrink: 0;
+  }
+
+  .drawer-close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    border-radius: var(--hx-border-radius-md, 0.375rem);
+    background: transparent;
+    color: var(--hx-color-neutral-500);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color var(--hx-duration-100, 100ms) ease;
+  }
+
+  .drawer-close-button:hover {
+    background-color: var(--hx-color-neutral-100);
+    color: var(--hx-color-neutral-900);
+  }
+
+  .drawer-close-button:focus-visible {
+    outline: 2px solid var(--hx-color-primary-600);
+    outline-offset: 2px;
+  }
+
+  /* ─── Body ─── */
+
+  .drawer-body {
+    flex: 1 1 auto;
+    padding: var(--hx-drawer-body-padding, var(--hx-spacing-6, 1.5rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  /* ─── Footer ─── */
+
+  .drawer-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--hx-spacing-3, 0.75rem);
+    padding: var(--hx-drawer-footer-padding, var(--hx-spacing-4, 1rem) var(--hx-spacing-6, 1.5rem));
+    border-top: var(--hx-border-width-1, 1px) solid
+      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));
+    flex-shrink: 0;
+  }
+`;
+var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, i = (e, t, r, s) => {
+  for (var a = s > 1 ? void 0 : s ? S(t, r) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (a = (s ? l(t, r, a) : l(a)) || a);
+  return s && a && E(t, r, a), a;
+};
+let k = 0;
+const F = {
+  sm: "20rem",
+  md: "30rem",
+  lg: "40rem",
+  full: "100%"
+}, u = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])',
+  "details > summary"
+].join(",");
+let o = class extends w {
+  constructor() {
+    super(...arguments), this._isOpen = !1, this._hasHeaderActionsSlot = !1, this._hasFooterSlot = !1, this._hasLabelSlot = !1, this._cachedFocusableElements = [], this._triggerElement = null, this._animationTimeout = null, this._previousBodyOverflow = null, this._siblingAriaHiddenElements = [], this._titleId = `hx-drawer-title-${++k}`, this.open = !1, this.placement = "end", this.size = "md", this.contained = !1, this.noHeader = !1, this.noFooter = !1, this.label = "", this._handleKeyDown = (e) => {
+      if (this._isOpen) {
+        if (e.key === "Escape") {
+          e.preventDefault(), this.open = !1;
+          return;
+        }
+        e.key === "Tab" && this._trapFocus(e);
+      }
+    }, this._handleOverlayClick = (e) => {
+      const t = e.target;
+      (t === this._overlayEl || t.classList.contains("drawer-backdrop")) && (this.open = !1);
+    };
+  }
+  // ─── Lifecycle ───
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._removeListeners(), this._animationTimeout !== null && clearTimeout(this._animationTimeout), this._restoreBodyScroll();
+  }
+  updated(e) {
+    super.updated(e), e.has("open") && (this.open ? this._openDrawer() : this._closeDrawer()), e.has("size") && this._applySizeVar();
+  }
+  // ─── Public Methods ───
+  /** Opens the drawer. */
+  show() {
+    this.open = !0;
+  }
+  /** Closes the drawer. */
+  hide() {
+    this.open = !1;
+  }
+  // ─── Private: Size CSS variable ───
+  _applySizeVar() {
+    const e = F[this.size] ?? this.size;
+    this.style.setProperty("--_drawer-size", e);
+  }
+  // ─── Private: Open / Close ───
+  _lockBodyScroll() {
+    this.contained || (this._previousBodyOverflow = document.body.style.overflow, document.body.style.overflow = "hidden");
+  }
+  _restoreBodyScroll() {
+    this._previousBodyOverflow !== null && (document.body.style.overflow = this._previousBodyOverflow, this._previousBodyOverflow = null);
+  }
+  _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(() => {
+        this.dispatchEvent(new CustomEvent("hx-after-show", { bubbles: !0, composed: !0 }));
+      }, t);
+    }).catch(console.error);
+  }
+  _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 }));
+    const e = this._getAnimationDuration();
+    this._animationTimeout = setTimeout(() => {
+      this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })), this._triggerElement && typeof this._triggerElement.focus == "function" && this._triggerElement.focus(), this._triggerElement = null;
+    }, e);
+  }
+  _getAnimationDuration() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
+  }
+  // ─── Background aria-hidden management (P1-03) ───
+  _hideBackgroundFromScreenReaders() {
+    this.contained || (this._siblingAriaHiddenElements = [], Array.from(document.body.children).forEach((e) => {
+      e === this || e.contains(this) || e.hasAttribute("aria-hidden") || (e.setAttribute("aria-hidden", "true"), this._siblingAriaHiddenElements.push(e));
+    }));
+  }
+  _restoreBackgroundForScreenReaders() {
+    this._siblingAriaHiddenElements.forEach((e) => {
+      e.removeAttribute("aria-hidden");
+    }), this._siblingAriaHiddenElements = [];
+  }
+  // ─── Event Listeners (P1-01: use only document listener, not overlay) ───
+  _addListeners() {
+    document.addEventListener("keydown", this._handleKeyDown);
+  }
+  _removeListeners() {
+    document.removeEventListener("keydown", this._handleKeyDown);
+  }
+  // ─── Focus ───
+  _setInitialFocus() {
+    var t;
+    const e = new CustomEvent("hx-initial-focus", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    if (this.dispatchEvent(e), !e.defaultPrevented) {
+      const r = this._cachedFocusableElements;
+      r.length > 0 && r[0] ? r[0].focus() : (t = this._panelEl) == null || t.focus();
+    }
+  }
+  _getFocusableElements() {
+    var s, a;
+    const e = Array.from(
+      ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(u)) ?? []
+    ), t = ((a = this.shadowRoot) == null ? void 0 : a.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((v) => {
+          r.push(v);
+        }));
+      });
+    }), [...e, ...r].filter(
+      (n) => !n.hasAttribute("disabled") && n.getAttribute("tabindex") !== "-1"
+    );
+  }
+  _trapFocus(e) {
+    const t = this._cachedFocusableElements.length > 0 ? this._cachedFocusableElements : this._getFocusableElements();
+    if (t.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    const [r, ...s] = t, a = s.length > 0 ? s[s.length - 1] : r;
+    if (!r || !a) return;
+    const n = document.activeElement;
+    e.shiftKey ? n === r && (e.preventDefault(), a.focus()) : n === a && (e.preventDefault(), r.focus());
+  }
+  // ─── Slot change handlers ───
+  _handleHeaderActionsSlotChange(e) {
+    const t = e.target;
+    this._hasHeaderActionsSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _handleFooterSlotChange(e) {
+    const t = e.target;
+    this._hasFooterSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  _handleLabelSlotChange(e) {
+    const t = e.target;
+    this._hasLabelSlot = t.assignedNodes({ flatten: !0 }).length > 0;
+  }
+  // ─── Render Helpers ───
+  _renderHeader() {
+    return this.noHeader ? p : h`
+      <div part="header" class="drawer-header">
+        <p part="title" id=${this._titleId} class="drawer-title">
+          <slot name="label" @slotchange=${this._handleLabelSlotChange}></slot>
+        </p>
+        <div class="drawer-header-actions">
+          ${this._hasHeaderActionsSlot ? h`<slot
+                name="header-actions"
+                @slotchange=${this._handleHeaderActionsSlotChange}
+              ></slot>` : h`<slot
+                name="header-actions"
+                @slotchange=${this._handleHeaderActionsSlotChange}
+                style="display:none"
+              ></slot>`}
+          <button
+            part="close-button"
+            class="drawer-close-button"
+            aria-label="Close drawer"
+            @click=${() => {
+      this.open = !1;
+    }}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  _renderFooter() {
+    return this.noFooter ? p : h`
+      <div part="footer" class="drawer-footer" ?hidden=${!this._hasFooterSlot}>
+        <slot name="footer" @slotchange=${this._handleFooterSlotChange}></slot>
+      </div>
+    `;
+  }
+  // ─── Render ───
+  render() {
+    const e = {
+      "drawer-overlay": !0,
+      "is-open": this._isOpen
+    }, t = this._hasLabelSlot ? this._titleId : void 0, r = this._hasLabelSlot ? void 0 : this.label || "Drawer";
+    return h`
+      <div
+        part="overlay"
+        class=${_(e)}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby=${m(t)}
+        aria-label=${m(r)}
+        tabindex="-1"
+        @click=${this._handleOverlayClick}
+      >
+        <div class="drawer-backdrop" aria-hidden="true"></div>
+        <div part="panel" class="drawer-panel" tabindex="-1" role="document">
+          ${this._renderHeader()}
+          <div part="body" class="drawer-body">
+            <slot></slot>
+          </div>
+          ${this._renderFooter()}
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [g, x];
+i([
+  f(".drawer-overlay")
+], o.prototype, "_overlayEl", 2);
+i([
+  f(".drawer-panel")
+], o.prototype, "_panelEl", 2);
+i([
+  c()
+], o.prototype, "_isOpen", 2);
+i([
+  c()
+], o.prototype, "_hasHeaderActionsSlot", 2);
+i([
+  c()
+], o.prototype, "_hasFooterSlot", 2);
+i([
+  c()
+], o.prototype, "_hasLabelSlot", 2);
+i([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "open", 2);
+i([
+  d({ type: String, reflect: !0 })
+], o.prototype, "placement", 2);
+i([
+  d({ type: String, reflect: !0 })
+], o.prototype, "size", 2);
+i([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "contained", 2);
+i([
+  d({ type: Boolean, reflect: !0, attribute: "no-header" })
+], o.prototype, "noHeader", 2);
+i([
+  d({ type: Boolean, reflect: !0, attribute: "no-footer" })
+], o.prototype, "noFooter", 2);
+i([
+  d({ type: String })
+], o.prototype, "label", 2);
+o = i([
+  y("hx-drawer")
+], o);
+export {
+  o as H
+};
+//# sourceMappingURL=hx-drawer-CESgUmre.js.map