@helixui/library 0.3.4 → 1.0.1

package/dist/shared/hx-dialog-M7so0sRT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-dialog-M7so0sRT.js","sources":["../../src/components/hx-dialog/hx-dialog.styles.ts","../../src/components/hx-dialog/hx-dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDialogStyles = css`\n  :host {\n    display: contents;\n  }\n\n  /* ─── Native dialog reset ─── */\n\n  dialog {\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: inherit;\n    max-width: 100%;\n    max-height: 100%;\n    overflow: visible;\n    /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */\n    position: relative;\n    z-index: calc(var(--hx-z-index-modal, 100) + 1);\n  }\n\n  /* ─── Dialog container ─── */\n\n  .dialog {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));\n    color: var(--hx-dialog-color, var(--hx-color-neutral-900));\n    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));\n    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));\n    width: var(--hx-dialog-width, var(--hx-size-128, 32rem));\n    max-width: calc(100vw - var(--hx-spacing-8, 2rem));\n    max-height: calc(100vh - var(--hx-spacing-8, 2rem));\n    overflow: hidden;\n    outline: none;\n\n    /* Open/close animation */\n    opacity: 0;\n    transform: translateY(var(--hx-spacing-4, 1rem)) scale(0.97);\n    transition:\n      opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out),\n      transform var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n  }\n\n  dialog[open] .dialog {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dialog {\n      transition: none;\n    }\n  }\n\n  /* ─── Native backdrop (modal mode) ─── */\n\n  dialog::backdrop {\n    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n    opacity: 0;\n    transition: opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n  }\n\n  dialog[open]::backdrop {\n    opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    dialog::backdrop {\n      transition: none;\n    }\n  }\n\n  /* ─── Non-modal backdrop overlay ─── */\n\n  .dialog-backdrop {\n    position: fixed;\n    inset: 0;\n    background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n    opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n    /* D5 — backdrop z-index must be lower than the dialog element's z-index */\n    z-index: var(--hx-z-index-modal, 100);\n  }\n\n  /* ─── Header ─── */\n\n  .dialog__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: var(--hx-dialog-header-padding, var(--hx-spacing-5) var(--hx-spacing-6));\n    border-bottom: var(--hx-border-width-1) solid\n      var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));\n    gap: var(--hx-spacing-4);\n    flex-shrink: 0;\n  }\n\n  .dialog__heading {\n    margin: 0;\n    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-snug);\n    color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));\n    flex: 1 1 auto;\n  }\n\n  /* ─── Built-in close button (D17) ─── */\n\n  .dialog__close-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\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    margin-left: auto;\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    cursor: pointer;\n    color: var(--hx-color-neutral-500, #6b7280);\n    font-size: var(--hx-font-size-xl, 1.25rem);\n    line-height: var(--hx-line-height-none, 1);\n    transition:\n      color var(--hx-duration-100, 100ms) ease,\n      background-color var(--hx-duration-100, 100ms) ease;\n  }\n\n  .dialog__close-btn::before {\n    content: '×';\n  }\n\n  .dialog__close-btn:hover {\n    color: var(--hx-color-neutral-900, #111827);\n    background-color: var(--hx-color-neutral-100, #f3f4f6);\n  }\n\n  .dialog__close-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-dialog-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  /* ─── Body ─── */\n\n  .dialog__body {\n    flex: 1 1 auto;\n    padding: var(--hx-dialog-body-padding, var(--hx-spacing-6));\n    overflow-y: auto;\n    overscroll-behavior: contain;\n  }\n\n  /* ─── Footer ─── */\n\n  .dialog__footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--hx-spacing-3);\n    padding: var(--hx-dialog-footer-padding, var(--hx-spacing-4) var(--hx-spacing-6));\n    border-top: var(--hx-border-width-1) solid\n      var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n\n  /* ─── Visually-hidden description (D8) ─── */\n\n  .dialog__description {\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","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { lockBodyScroll, unlockBodyScroll } from '../../utils/body-scroll-lock.js';\nimport { helixDialogStyles } from './hx-dialog.styles.js';\n\n// D21 — deterministic monotonic counter instead of Math.random()\nlet _dialogCounter = 0;\n\n/**\n * A modal and non-modal dialog component built on the native HTML `<dialog>` element.\n * Provides focus trapping, backdrop interaction, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Accessible dialog overlay for confirmations, forms, and detailed content.\n *\n * @tag hx-dialog\n *\n * @slot - Default slot for the dialog body content.\n * @slot header - Slot for custom header content. When provided, replaces the built-in heading.\n * @slot footer - Slot for action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-open - Fired when the dialog opens.\n * @fires {CustomEvent<void>} hx-close - Fired when the dialog closes for any reason.\n * @fires {CustomEvent<void>} hx-cancel - Fired when the dialog is dismissed via Escape key or cancel action.\n *\n * @csspart dialog - The inner container div that holds the dialog content.\n * @csspart backdrop - The non-modal backdrop overlay element.\n * @csspart header - The header region containing the heading and header slot.\n * @csspart close-button - The built-in close button in the dialog header.\n * @csspart body - The scrollable body region containing the default slot.\n * @csspart footer - The footer region containing the footer slot.\n *\n * @cssprop [--hx-dialog-bg=var(--hx-color-neutral-0)] - Dialog background color.\n * @cssprop [--hx-dialog-color=var(--hx-color-neutral-900)] - Dialog text color.\n * @cssprop [--hx-dialog-border-radius=var(--hx-border-radius-lg)] - Dialog corner radius.\n * @cssprop [--hx-dialog-shadow=var(--hx-shadow-xl)] - Dialog box shadow.\n * @cssprop [--hx-dialog-width=32rem] - Dialog width.\n * @cssprop [--hx-dialog-backdrop-color=var(--hx-color-neutral-900)] - Backdrop overlay color.\n * @cssprop [--hx-dialog-backdrop-opacity=0.5] - Backdrop overlay opacity (set to 0 to hide; note\n *   that opacity:0 makes the backdrop invisible but still present in the layout — use pointer-events\n *   carefully if you need a fully non-blocking backdrop).\n * @cssprop [--hx-dialog-header-padding] - Padding inside the dialog header.\n * @cssprop [--hx-dialog-header-border-color=var(--hx-color-neutral-200)] - Header bottom border color.\n * @cssprop [--hx-dialog-heading-color=var(--hx-color-neutral-900)] - Heading text color.\n * @cssprop [--hx-dialog-body-padding] - Padding inside the dialog body.\n * @cssprop [--hx-dialog-footer-padding] - Padding inside the dialog footer.\n * @cssprop [--hx-dialog-footer-border-color=var(--hx-color-neutral-200)] - Footer top border color.\n *\n * @remarks\n * **Browser support for `::backdrop`:** The `dialog::backdrop` pseudo-element inside Shadow DOM\n * is well-supported in Chrome/Chromium and Firefox 122+. For Firefox < 122, modal backdrop\n * animation will silently fall back to no animation. A non-modal backdrop fallback is rendered\n * for non-modal dialogs.\n *\n * **Drupal integration:** This component is Twig-renderable via attributes (`heading`, `open`,\n * `modal`, `close-on-backdrop`). For trigger-button wiring in Drupal behaviors:\n * ```js\n * Drupal.behaviors.hxDialog = {\n *   attach(context) {\n *     context.querySelectorAll('[data-hx-dialog-trigger]').forEach((btn) => {\n *       btn.addEventListener('click', () => {\n *         const id = btn.getAttribute('data-hx-dialog-trigger');\n *         document.getElementById(id)?.showModal();\n *       });\n *     });\n *   },\n * };\n * ```\n * Focus restoration to the trigger element is handled automatically by the component.\n */\n@customElement('hx-dialog')\nexport class HelixDialog extends LitElement {\n  static override styles = [tokenStyles, helixDialogStyles];\n\n  // D10 — observe aria-label attribute without shadowing ARIAMixin.ariaLabel\n  static override get observedAttributes(): string[] {\n    return [...super.observedAttributes, 'aria-label'];\n  }\n\n  // ─── Queries ───\n\n  @query('dialog')\n  private _dialogEl: HTMLDialogElement | null | undefined;\n\n  // ─── Internal state ───\n\n  /** Tracks whether a header slot has been assigned content. */\n  @state()\n  private _hasHeaderSlot = false;\n\n  /** Tracks whether a footer slot has been assigned content. */\n  @state()\n  private _hasFooterSlot = false;\n\n  /** Cached focusable elements — populated on open, cleared on close. */\n  private _cachedFocusableElements: HTMLElement[] = [];\n\n  /** The element that had focus when the dialog opened — restored on close (D1). */\n  private _triggerElement: HTMLElement | null = null;\n\n  /** Pending returnValue to pass to native dialog.close() (D11). */\n  private _pendingReturnValue: string | undefined = undefined;\n\n  // ─── Unique IDs for aria-labelledby / aria-describedby ───\n\n  private readonly _headingId = `hx-dialog-heading-${++_dialogCounter}`;\n  private readonly _descriptionId = `hx-dialog-description-${_dialogCounter}`;\n\n  // ─── Public Properties ───\n\n  /**\n   * Controls whether the dialog is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * When true, renders as a modal dialog with a backdrop and focus trap.\n   * When false, renders as a non-modal dialog.\n   * @attr modal\n   */\n  @property({ type: Boolean, reflect: true })\n  modal = true;\n\n  /**\n   * When true, clicking the backdrop closes the dialog.\n   * @attr close-on-backdrop\n   */\n  @property({\n    attribute: 'close-on-backdrop',\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string | null) => value !== 'false',\n      toAttribute: (value: boolean) => String(value),\n    },\n  })\n  closeOnBackdrop = true;\n\n  /**\n   * Text content for the dialog heading. Used as the accessible label via aria-labelledby.\n   * @attr heading\n   */\n  @property({ type: String })\n  heading = '';\n\n  /**\n   * ARIA role variant. Use `'alertdialog'` for urgent dialogs requiring immediate attention\n   * (e.g., drug interaction warnings, critical lab alerts). Defaults to `'dialog'`.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'dialog' | 'alertdialog' = 'dialog';\n\n  /**\n   * Optional description text linked to the dialog via `aria-describedby`.\n   * When provided, screen readers will announce this text when the dialog receives focus.\n   * Recommended for dialogs that surface critical clinical information.\n   * @attr description\n   */\n  @property({ type: String })\n  description = '';\n\n  /**\n   * Returns the dialog's return value — the string passed to `close(returnValue)`.\n   * Mirrors `HTMLDialogElement.returnValue`.\n   */\n  get returnValue(): string {\n    return this._dialogEl?.returnValue ?? '';\n  }\n\n  // ─── Lifecycle ───\n\n  // D10 — re-render when aria-label attribute changes (without declaring a shadowing property)\n  override attributeChangedCallback(\n    name: string,\n    oldVal: string | null,\n    newVal: string | null,\n  ): void {\n    super.attributeChangedCallback(name, oldVal, newVal);\n    if (name === 'aria-label' && oldVal !== newVal) {\n      this.requestUpdate('aria-label', oldVal);\n    }\n  }\n\n  override firstUpdated(): void {\n    // Initialize header slot state without a querySelector in render()\n    this._hasHeaderSlot = this.querySelector('[slot=\"header\"]') !== null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._removeGlobalListeners();\n    // Restore body scroll if disconnected while open\n    if (this.modal && this.open) {\n      unlockBodyScroll();\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this._openDialog();\n      } else {\n        this._closeDialog();\n      }\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Opens the dialog in the mode determined by the `modal` property. */\n  show(): void {\n    this.open = true;\n  }\n\n  /** Opens the dialog as a modal regardless of the `modal` property setting. */\n  showModal(): void {\n    this.modal = true;\n    this.open = true;\n  }\n\n  /**\n   * Closes the dialog.\n   * @param returnValue - Optional return value string stored as `dialog.returnValue`.\n   */\n  close(returnValue?: string): void {\n    if (returnValue !== undefined) {\n      this._pendingReturnValue = returnValue;\n    }\n    this.open = false;\n  }\n\n  // ─── Private: Open / Close ───\n\n  private _openDialog(): void {\n    const dialog = this._dialogEl;\n    if (!dialog) return;\n\n    // D1 — store the element that triggered the dialog open for focus restoration on close\n    this._triggerElement = document.activeElement as HTMLElement | null;\n\n    if (this.modal) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n      // D4 — lock body scroll when modal dialog is open. Uses a shared reference-counted\n      // lock so that simultaneous hx-dialog / hx-drawer instances don't clobber each other\n      // when one closes before the other (see utils/body-scroll-lock.ts).\n      lockBodyScroll();\n    } else {\n      if (!dialog.open) {\n        dialog.show();\n      }\n    }\n\n    this._addGlobalListeners();\n\n    // Cache focusable elements after the dialog is open in the DOM\n    void this.updateComplete.then(() => {\n      this._cachedFocusableElements = this._getFocusableElements();\n      // D3 — explicitly move initial focus to the first focusable element inside the dialog\n      // (browser's built-in focus delegation cannot reach slotted light DOM through Shadow DOM)\n      this._cachedFocusableElements[0]?.focus();\n    });\n\n    this.dispatchEvent(\n      new CustomEvent('hx-open', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _closeDialog(): void {\n    const dialog = this._dialogEl;\n    if (!dialog) return;\n\n    const wasOpen = dialog.open;\n    if (dialog.open) {\n      // D11 — forward returnValue to native dialog.close() if provided\n      if (this._pendingReturnValue !== undefined) {\n        dialog.close(this._pendingReturnValue);\n        this._pendingReturnValue = undefined;\n      } else {\n        dialog.close();\n      }\n    }\n\n    // D4 — release body scroll lock. Uses shared counter so scroll is only restored\n    // after every open overlay (hx-dialog + hx-drawer) has closed.\n    unlockBodyScroll();\n\n    this._removeGlobalListeners();\n    this._cachedFocusableElements = [];\n\n    // D1 — restore focus to the element that opened the dialog (WCAG 2.4.3)\n    this._triggerElement?.focus();\n    this._triggerElement = null;\n\n    if (wasOpen) {\n      this.dispatchEvent(\n        new CustomEvent('hx-close', {\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n\n  // ─── Event Listeners ───\n\n  private _addGlobalListeners(): void {\n    this._dialogEl?.addEventListener('keydown', this._handleKeyDown);\n    this._dialogEl?.addEventListener('click', this._handleDialogClick);\n    this._dialogEl?.addEventListener('cancel', this._handleNativeCancel);\n  }\n\n  private _removeGlobalListeners(): void {\n    this._dialogEl?.removeEventListener('keydown', this._handleKeyDown);\n    this._dialogEl?.removeEventListener('click', this._handleDialogClick);\n    this._dialogEl?.removeEventListener('cancel', this._handleNativeCancel);\n  }\n\n  // ─── Keyboard Handler ───\n\n  private _handleKeyDown = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') {\n      // Native dialog fires a 'cancel' event before close when Escape is pressed.\n      // We prevent default here and handle it ourselves so we fire hx-cancel\n      // before setting open = false (which triggers hx-close).\n      e.preventDefault();\n      this._cancel();\n      return;\n    }\n\n    if (e.key === 'Tab' && this.modal) {\n      this._trapFocus(e);\n    }\n  };\n\n  // ─── Focus Trap ───\n\n  private _getFocusableElements(): HTMLElement[] {\n    const focusableSelectors = [\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    // Collect focusable elements from slotted light DOM content only.\n    // Shadow DOM elements (e.g., the built-in close button) remain accessible via\n    // the native <dialog> tab order — including them here would cause focus to land\n    // on shadow DOM elements whose document.activeElement resolves to the host,\n    // breaking the test assertions and D7 initial focus behavior.\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(focusableSelectors)) {\n            lightFocusable.push(el);\n          }\n          el.querySelectorAll<HTMLElement>(focusableSelectors).forEach((child) => {\n            lightFocusable.push(child);\n          });\n        }\n      });\n    });\n\n    return lightFocusable.filter(\n      (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n    );\n  }\n\n  private _trapFocus(e: KeyboardEvent): void {\n    const focusable =\n      this._cachedFocusableElements.length > 0\n        ? this._cachedFocusableElements\n        : this._getFocusableElements();\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    const active = document.activeElement;\n    // Also check shadow root active element\n    const shadowActive = this.shadowRoot?.activeElement;\n    const currentActive = (shadowActive ?? active) as HTMLElement | null;\n\n    if (e.shiftKey) {\n      // Shift+Tab: if focus is on first, wrap to last\n      if (currentActive === first) {\n        e.preventDefault();\n        last.focus();\n      }\n    } else {\n      // Tab: if focus is on last, wrap to first\n      if (currentActive === last) {\n        e.preventDefault();\n        first.focus();\n      }\n    }\n  }\n\n  // ─── Backdrop Click ───\n\n  private _handleDialogClick = (e: MouseEvent): void => {\n    if (!this.closeOnBackdrop) return;\n\n    // The native dialog element fills only the content area in showModal().\n    // Clicks on the backdrop reach the <dialog> element itself.\n    // We detect this by checking whether the click target is the dialog element.\n    const target = e.target as HTMLElement;\n    if (target === this._dialogEl) {\n      this._cancel();\n    }\n  };\n\n  // ─── Non-modal backdrop click ───\n\n  private _handleBackdropClick = (): void => {\n    if (!this.closeOnBackdrop) return;\n    this._cancel();\n  };\n\n  // ─── Native cancel (Escape via browser, before our handler runs) ───\n\n  private _handleNativeCancel = (e: Event): void => {\n    // We always prevent the native cancel so we can manage close state ourselves.\n    e.preventDefault();\n  };\n\n  // ─── Cancel logic ───\n\n  private _cancel(): void {\n    this.dispatchEvent(\n      new CustomEvent('hx-cancel', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n\n    this.open = false;\n    // hx-close is dispatched by _closeDialog() which is called via the open property setter\n  }\n\n  // ─── Slot change handlers ───\n\n  private _handleHeaderSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeaderSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\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  // ─── Render Helpers ───\n\n  private _renderHeader() {\n    const hasHeading = this.heading.trim().length > 0;\n\n    // Always render header to include the built-in close button (D17)\n    return html`\n      <div part=\"header\" class=\"dialog__header\">\n        ${hasHeading\n          ? html`<h2 id=${this._headingId} class=\"dialog__heading\">${this.heading}</h2>`\n          : nothing}\n        <slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n        <button\n          part=\"close-button\"\n          class=\"dialog__close-btn\"\n          type=\"button\"\n          aria-label=${`Close ${this.heading.trim() || 'dialog'}`}\n          @click=${() => this.close()}\n        ></button>\n      </div>\n    `;\n  }\n\n  private _renderFooter() {\n    return html`\n      <div part=\"footer\" class=\"dialog__footer\" ?hidden=${!this._hasFooterSlot}>\n        <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n      </div>\n    `;\n  }\n\n  private _renderNonModalBackdrop() {\n    if (this.modal || !this.open) return nothing;\n    return html`\n      <div\n        part=\"backdrop\"\n        class=\"dialog-backdrop\"\n        @click=${this._handleBackdropClick}\n        aria-hidden=\"true\"\n      ></div>\n    `;\n  }\n\n  // D8 — render visually-hidden description for aria-describedby\n  private _renderDescription() {\n    if (!this.description) return nothing;\n    return html`<span id=${this._descriptionId} class=\"dialog__description\"\n      >${this.description}</span\n    >`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasHeading = this.heading.trim().length > 0;\n    // D10 — read aria-label via getAttribute to avoid shadowing ARIAMixin.ariaLabel\n    const ariaLabel = this.getAttribute('aria-label');\n\n    return html`\n      ${this._renderNonModalBackdrop()}\n      <dialog\n        role=${this.variant !== 'dialog' ? this.variant : nothing}\n        aria-labelledby=${hasHeading ? this._headingId : nothing}\n        aria-label=${!hasHeading ? (ariaLabel ?? 'Dialog') : nothing}\n        aria-describedby=${this.description ? this._descriptionId : nothing}\n        aria-modal=${this.modal ? 'true' : nothing}\n      >\n        <div part=\"dialog\" class=\"dialog\">\n          ${this._renderHeader()} ${this._renderDescription()}\n          <div part=\"body\" class=\"dialog__body\">\n            <slot></slot>\n          </div>\n          ${this._renderFooter()}\n        </div>\n      </dialog>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-dialog': HelixDialog;\n  }\n}\n"],"names":["helixDialogStyles","css","_dialogCounter","HelixDialog","LitElement","_a","name","oldVal","newVal","unlockBodyScroll","changedProperties","returnValue","dialog","lockBodyScroll","wasOpen","_b","_c","focusableSelectors","slots","lightFocusable","slot","el","child","focusable","first","rest","last","active","currentActive","hasHeading","html","nothing","ariaLabel","tokenStyles","__decorateClass","query","state","property","value","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;;;;;;ACKjC,IAAIC,IAAiB,GAiERC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAQ,iBAAiB,IAIzB,KAAQ,iBAAiB,IAGzB,KAAQ,2BAA0C,CAAA,GAGlD,KAAQ,kBAAsC,MAG9C,KAAQ,sBAA0C,QAIlD,KAAiB,aAAa,qBAAqB,EAAEF,CAAc,IACnE,KAAiB,iBAAiB,yBAAyBA,CAAc,IASzE,KAAA,OAAO,IAQP,KAAA,QAAQ,IAcR,KAAA,kBAAkB,IAOlB,KAAA,UAAU,IAQV,KAAA,UAAoC,UASpC,KAAA,cAAc,IAuKd,KAAQ,iBAAiB,CAAC,MAA2B;AACnD,UAAI,EAAE,QAAQ,UAAU;AAItB,UAAE,eAAA,GACF,KAAK,QAAA;AACL;AAAA,MACF;AAEA,MAAI,EAAE,QAAQ,SAAS,KAAK,SAC1B,KAAK,WAAW,CAAC;AAAA,IAErB,GA+EA,KAAQ,qBAAqB,CAAC,MAAwB;AACpD,UAAI,CAAC,KAAK,gBAAiB;AAM3B,MADe,EAAE,WACF,KAAK,aAClB,KAAK,QAAA;AAAA,IAET,GAIA,KAAQ,uBAAuB,MAAY;AACzC,MAAK,KAAK,mBACV,KAAK,QAAA;AAAA,IACP,GAIA,KAAQ,sBAAsB,CAAC,MAAmB;AAEhD,QAAE,eAAA;AAAA,IACJ;AAAA,EAAA;AAAA;AAAA,EAjXA,WAAoB,qBAA+B;AACjD,WAAO,CAAC,GAAG,MAAM,oBAAoB,YAAY;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EA0FA,IAAI,cAAsB;;AACxB,aAAOG,IAAA,KAAK,cAAL,gBAAAA,EAAgB,gBAAe;AAAA,EACxC;AAAA;AAAA;AAAA,EAKS,yBACPC,GACAC,GACAC,GACM;AACN,UAAM,yBAAyBF,GAAMC,GAAQC,CAAM,GAC/CF,MAAS,gBAAgBC,MAAWC,KACtC,KAAK,cAAc,cAAcD,CAAM;AAAA,EAE3C;AAAA,EAES,eAAqB;AAE5B,SAAK,iBAAiB,KAAK,cAAc,iBAAiB,MAAM;AAAA,EAClE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,KAAK,uBAAA,GAED,KAAK,SAAS,KAAK,QACrBE,EAAA;AAAA,EAEJ;AAAA,EAES,QAAQC,GAA+C;AAC9D,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,MAAM,MAC1B,KAAK,OACP,KAAK,YAAA,IAEL,KAAK,aAAA;AAAA,EAGX;AAAA;AAAA;AAAA,EAKA,OAAa;AACX,SAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAGA,YAAkB;AAChB,SAAK,QAAQ,IACb,KAAK,OAAO;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAMC,GAA4B;AAChC,IAAIA,MAAgB,WAClB,KAAK,sBAAsBA,IAE7B,KAAK,OAAO;AAAA,EACd;AAAA;AAAA,EAIQ,cAAoB;AAC1B,UAAMC,IAAS,KAAK;AACpB,IAAKA,MAGL,KAAK,kBAAkB,SAAS,eAE5B,KAAK,SACFA,EAAO,QACVA,EAAO,UAAA,GAKTC,EAAA,KAEKD,EAAO,QACVA,EAAO,KAAA,GAIX,KAAK,oBAAA,GAGA,KAAK,eAAe,KAAK,MAAM;;AAClC,WAAK,2BAA2B,KAAK,sBAAA,IAGrCP,IAAA,KAAK,yBAAyB,CAAC,MAA/B,QAAAA,EAAkC;AAAA,IACpC,CAAC,GAED,KAAK;AAAA,MACH,IAAI,YAAY,WAAW;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,eAAqB;;AAC3B,UAAMO,IAAS,KAAK;AACpB,QAAI,CAACA,EAAQ;AAEb,UAAME,IAAUF,EAAO;AACvB,IAAIA,EAAO,SAEL,KAAK,wBAAwB,UAC/BA,EAAO,MAAM,KAAK,mBAAmB,GACrC,KAAK,sBAAsB,UAE3BA,EAAO,MAAA,IAMXH,EAAA,GAEA,KAAK,uBAAA,GACL,KAAK,2BAA2B,CAAA,IAGhCJ,IAAA,KAAK,oBAAL,QAAAA,EAAsB,SACtB,KAAK,kBAAkB,MAEnBS,KACF,KAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAGP;AAAA;AAAA,EAIQ,sBAA4B;;AAClC,KAAAT,IAAA,KAAK,cAAL,QAAAA,EAAgB,iBAAiB,WAAW,KAAK,kBACjDU,IAAA,KAAK,cAAL,QAAAA,EAAgB,iBAAiB,SAAS,KAAK,sBAC/CC,IAAA,KAAK,cAAL,QAAAA,EAAgB,iBAAiB,UAAU,KAAK;AAAA,EAClD;AAAA,EAEQ,yBAA+B;;AACrC,KAAAX,IAAA,KAAK,cAAL,QAAAA,EAAgB,oBAAoB,WAAW,KAAK,kBACpDU,IAAA,KAAK,cAAL,QAAAA,EAAgB,oBAAoB,SAAS,KAAK,sBAClDC,IAAA,KAAK,cAAL,QAAAA,EAAgB,oBAAoB,UAAU,KAAK;AAAA,EACrD;AAAA;AAAA,EAqBQ,wBAAuC;;AAC7C,UAAMC,IAAqB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,EACA,KAAK,GAAG,GAOJC,MAAQb,IAAA,KAAK,eAAL,gBAAAA,EAAiB,iBAAkC,YAAW,CAAA,GACtEc,IAAgC,CAAA;AAEtC,WAAAD,EAAM,QAAQ,CAACE,MAAS;AACtB,MAAAA,EAAK,iBAAiB,EAAE,SAAS,GAAA,CAAM,EAAE,QAAQ,CAACC,MAAO;AACvD,QAAIA,aAAc,gBACZA,EAAG,QAAQJ,CAAkB,KAC/BE,EAAe,KAAKE,CAAE,GAExBA,EAAG,iBAA8BJ,CAAkB,EAAE,QAAQ,CAACK,MAAU;AACtE,UAAAH,EAAe,KAAKG,CAAK;AAAA,QAC3B,CAAC;AAAA,MAEL,CAAC;AAAA,IACH,CAAC,GAEMH,EAAe;AAAA,MACpB,CAACE,MAAO,CAACA,EAAG,aAAa,UAAU,KAAKA,EAAG,aAAa,UAAU,MAAM;AAAA,IAAA;AAAA,EAE5E;AAAA,EAEQ,WAAW,GAAwB;;AACzC,UAAME,IACJ,KAAK,yBAAyB,SAAS,IACnC,KAAK,2BACL,KAAK,sBAAA;AACX,QAAIA,EAAU,WAAW,GAAG;AAC1B,QAAE,eAAA;AACF;AAAA,IACF;AAEA,UAAM,CAACC,GAAO,GAAGC,CAAI,IAAIF,GACnBG,IAAOD,EAAK,SAAS,IAAIA,EAAKA,EAAK,SAAS,CAAC,IAAID;AAEvD,QAAI,CAACA,KAAS,CAACE,EAAM;AAErB,UAAMC,IAAS,SAAS,eAGlBC,MADevB,IAAA,KAAK,eAAL,gBAAAA,EAAiB,kBACCsB;AAEvC,IAAI,EAAE,WAEAC,MAAkBJ,MACpB,EAAE,eAAA,GACFE,EAAK,MAAA,KAIHE,MAAkBF,MACpB,EAAE,eAAA,GACFF,EAAM,MAAA;AAAA,EAGZ;AAAA;AAAA,EAgCQ,UAAgB;AACtB,SAAK;AAAA,MACH,IAAI,YAAY,aAAa;AAAA,QAC3B,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA,GAGH,KAAK,OAAO;AAAA,EAEd;AAAA;AAAA,EAIQ,wBAAwB,GAAgB;AAC9C,UAAMJ,IAAO,EAAE;AACf,SAAK,iBAAiBA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACvE;AAAA,EAEQ,wBAAwB,GAAgB;AAC9C,UAAMA,IAAO,EAAE;AACf,SAAK,iBAAiBA,EAAK,cAAc,EAAE,SAAS,GAAA,CAAM,EAAE,SAAS;AAAA,EACvE;AAAA;AAAA,EAIQ,gBAAgB;AACtB,UAAMS,IAAa,KAAK,QAAQ,KAAA,EAAO,SAAS;AAGhD,WAAOC;AAAA;AAAA,UAEDD,IACEC,WAAc,KAAK,UAAU,4BAA4B,KAAK,OAAO,UACrEC,CAAO;AAAA,0CACuB,KAAK,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA,uBAK/C,SAAS,KAAK,QAAQ,KAAA,KAAU,QAAQ,EAAE;AAAA,mBAC9C,MAAM,KAAK,MAAA,CAAO;AAAA;AAAA;AAAA;AAAA,EAInC;AAAA,EAEQ,gBAAgB;AACtB,WAAOD;AAAA,0DAC+C,CAAC,KAAK,cAAc;AAAA,0CACpC,KAAK,uBAAuB;AAAA;AAAA;AAAA,EAGpE;AAAA,EAEQ,0BAA0B;AAChC,WAAI,KAAK,SAAS,CAAC,KAAK,OAAaC,IAC9BD;AAAA;AAAA;AAAA;AAAA,iBAIM,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,EAIxC;AAAA;AAAA,EAGQ,qBAAqB;AAC3B,WAAK,KAAK,cACHA,aAAgB,KAAK,cAAc;AAAA,SACrC,KAAK,WAAW;AAAA,SAFSC;AAAA,EAIhC;AAAA;AAAA,EAIS,SAAS;AAChB,UAAMF,IAAa,KAAK,QAAQ,KAAA,EAAO,SAAS,GAE1CG,IAAY,KAAK,aAAa,YAAY;AAEhD,WAAOF;AAAA,QACH,KAAK,yBAAyB;AAAA;AAAA,eAEvB,KAAK,YAAY,WAAW,KAAK,UAAUC,CAAO;AAAA,0BACvCF,IAAa,KAAK,aAAaE,CAAO;AAAA,qBAC1CF,IAAuCE,IAAzBC,KAAa,QAAmB;AAAA,2BACzC,KAAK,cAAc,KAAK,iBAAiBD,CAAO;AAAA,qBACtD,KAAK,QAAQ,SAASA,CAAO;AAAA;AAAA;AAAA,YAGtC,KAAK,cAAA,CAAe,IAAI,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,YAIjD,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,EAI9B;AACF;AA9da5B,EACK,SAAS,CAAC8B,GAAajC,CAAiB;AAUhDkC,EAAA;AAAA,EADPC,EAAM,QAAQ;AAAA,GAVJhC,EAWH,WAAA,aAAA,CAAA;AAMA+B,EAAA;AAAA,EADPE,EAAA;AAAM,GAhBIjC,EAiBH,WAAA,kBAAA,CAAA;AAIA+B,EAAA;AAAA,EADPE,EAAA;AAAM,GApBIjC,EAqBH,WAAA,kBAAA,CAAA;AAuBR+B,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3C/BlC,EA4CX,WAAA,QAAA,CAAA;AAQA+B,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnD/BlC,EAoDX,WAAA,SAAA,CAAA;AAcA+B,EAAA;AAAA,EARCG,EAAS;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,MACT,eAAe,CAACC,MAAyBA,MAAU;AAAA,MACnD,aAAa,CAACA,MAAmB,OAAOA,CAAK;AAAA,IAAA;AAAA,EAC/C,CACD;AAAA,GAjEUnC,EAkEX,WAAA,mBAAA,CAAA;AAOA+B,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxEflC,EAyEX,WAAA,WAAA,CAAA;AAQA+B,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhF9BlC,EAiFX,WAAA,WAAA,CAAA;AASA+B,EAAA;AAAA,EADCG,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzFflC,EA0FX,WAAA,eAAA,CAAA;AA1FWA,IAAN+B,EAAA;AAAA,EADNK,EAAc,WAAW;AAAA,GACbpC,CAAA;"}

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

@@ -1 +1 @@
-{"version":3,"file":"hx-divider-XgWIz4Mr.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${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\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,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;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;"}
+{"version":3,"file":"hx-divider-XgWIz4Mr.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${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\n/** @deprecated Use {@link HxDivider} instead. The `Wc` prefix was a legacy naming convention. */\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,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;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-bTF0nbrg.js → hx-drawer-CYxuhIQ0.js}

@@ -1,9 +1,10 @@
 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 { query as f, state as c, property as d, customElement as g } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
-import { tokenStyles as g } from "@helixui/tokens/lit";
-const x = b`
+import { tokenStyles as y } from "@helixui/tokens/lit";
+import { l as x, u as E } from "./body-scroll-lock-VBa5TFP-.js";
+const S = b`
   /* P2-03: Explicit [hidden] rule to survive CSS resets that may override the UA stylesheet. */
   [hidden] {
     display: none !important;
@@ -188,8 +189,11 @@ const x = b`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 2rem;
-    height: 2rem;
+    /* WCAG 2.5.5 (healthcare mandate): minimum 44x44px touch target */
+    min-width: var(--hx-touch-target-min, 2.75rem);
+    min-height: var(--hx-touch-target-min, 2.75rem);
+    width: var(--hx-touch-target-min, 2.75rem);
+    height: var(--hx-touch-target-min, 2.75rem);
     padding: 0;
     border: none;
     border-radius: var(--hx-border-radius-md, 0.375rem);
@@ -206,8 +210,12 @@ const x = b`
   }
 
   .drawer-close-button:focus-visible {
-    outline: 2px solid var(--hx-color-primary-600);
-    outline-offset: 2px;
+    outline: var(--hx-focus-ring-width, 2px) solid
+      var(
+        --hx-drawer-close-btn-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-500))
+      );
+    outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
   /* ─── Body ─── */
@@ -232,13 +240,13 @@ const x = b`
     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;
+var k = Object.defineProperty, F = Object.getOwnPropertyDescriptor, i = (e, t, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? F(t, r) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (o = (s ? l(t, r, o) : l(o)) || o);
+  return s && o && k(t, r, o), o;
 };
-let k = 0;
-const F = {
+let A = 0;
+const C = {
   sm: "20rem",
   md: "30rem",
   lg: "40rem",
@@ -253,9 +261,9 @@ const F = {
   '[tabindex]:not([tabindex="-1"])',
   "details > summary"
 ].join(",");
-let o = class extends w {
+let a = 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) => {
+    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-${++A}`, 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;
@@ -286,15 +294,15 @@ let o = class extends w {
   }
   // ─── Private: Size CSS variable ───
   _applySizeVar() {
-    const e = F[this.size] ?? this.size;
+    const e = C[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");
+    this.contained || this._hasScrollLock || (x(), this._hasScrollLock = !0);
   }
   _restoreBodyScroll() {
-    this._previousBodyOverflow !== null && (document.body.style.overflow = this._previousBodyOverflow, this._previousBodyOverflow = null);
+    this._hasScrollLock && (E(), this._hasScrollLock = !1);
   }
   _openDrawer() {
     const e = document.activeElement;
@@ -307,10 +315,10 @@ let o = class extends w {
     }).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 }));
+    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(() => {
-      this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 })), this._triggerElement && typeof this._triggerElement.focus == "function" && this._triggerElement.focus(), this._triggerElement = null;
+      this.dispatchEvent(new CustomEvent("hx-after-hide", { bubbles: !0, composed: !0 }));
     }, e);
   }
   _getAnimationDuration() {
@@ -348,10 +356,10 @@ let o = class extends w {
     }
   }
   _getFocusableElements() {
-    var s, a;
+    var s, o;
     const e = Array.from(
       ((s = this.shadowRoot) == null ? void 0 : s.querySelectorAll(u)) ?? []
-    ), t = ((a = this.shadowRoot) == null ? void 0 : a.querySelectorAll("slot")) ?? [], r = [];
+    ), t = ((o = this.shadowRoot) == null ? void 0 : o.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) => {
@@ -368,10 +376,10 @@ let o = class extends w {
       e.preventDefault();
       return;
     }
-    const [r, ...s] = t, a = s.length > 0 ? s[s.length - 1] : r;
-    if (!r || !a) return;
+    const [r, ...s] = t, o = s.length > 0 ? s[s.length - 1] : r;
+    if (!r || !o) return;
     const n = document.activeElement;
-    e.shiftKey ? n === r && (e.preventDefault(), a.focus()) : n === a && (e.preventDefault(), r.focus());
+    e.shiftKey ? n === r && (e.preventDefault(), o.focus()) : n === o && (e.preventDefault(), r.focus());
   }
   // ─── Slot change handlers ───
   _handleHeaderActionsSlotChange(e) {
@@ -455,7 +463,7 @@ let o = class extends w {
         @click=${this._handleOverlayClick}
       >
         <div class="drawer-backdrop" aria-hidden="true"></div>
-        <div part="panel" class="drawer-panel" tabindex="-1" role="document">
+        <div part="panel" class="drawer-panel" tabindex="-1">
           ${this._renderHeader()}
           <div part="body" class="drawer-body">
             <slot></slot>
@@ -466,50 +474,50 @@ let o = class extends w {
     `;
   }
 };
-o.styles = [g, x];
+a.styles = [y, S];
 i([
   f(".drawer-overlay")
-], o.prototype, "_overlayEl", 2);
+], a.prototype, "_overlayEl", 2);
 i([
   f(".drawer-panel")
-], o.prototype, "_panelEl", 2);
+], a.prototype, "_panelEl", 2);
 i([
   c()
-], o.prototype, "_isOpen", 2);
+], a.prototype, "_isOpen", 2);
 i([
   c()
-], o.prototype, "_hasHeaderActionsSlot", 2);
+], a.prototype, "_hasHeaderActionsSlot", 2);
 i([
   c()
-], o.prototype, "_hasFooterSlot", 2);
+], a.prototype, "_hasFooterSlot", 2);
 i([
   c()
-], o.prototype, "_hasLabelSlot", 2);
+], a.prototype, "_hasLabelSlot", 2);
 i([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
+], a.prototype, "open", 2);
 i([
   d({ type: String, reflect: !0 })
-], o.prototype, "placement", 2);
+], a.prototype, "placement", 2);
 i([
   d({ type: String, reflect: !0 })
-], o.prototype, "size", 2);
+], a.prototype, "size", 2);
 i([
   d({ type: Boolean, reflect: !0 })
-], o.prototype, "contained", 2);
+], a.prototype, "contained", 2);
 i([
   d({ type: Boolean, reflect: !0, attribute: "no-header" })
-], o.prototype, "noHeader", 2);
+], a.prototype, "noHeader", 2);
 i([
   d({ type: Boolean, reflect: !0, attribute: "no-footer" })
-], o.prototype, "noFooter", 2);
+], a.prototype, "noFooter", 2);
 i([
   d({ type: String })
-], o.prototype, "label", 2);
-o = i([
-  y("hx-drawer")
-], o);
+], a.prototype, "label", 2);
+a = i([
+  g("hx-drawer")
+], a);
 export {
-  o as H
+  a as H
 };
-//# sourceMappingURL=hx-drawer-bTF0nbrg.js.map
+//# sourceMappingURL=hx-drawer-CYxuhIQ0.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hx-drawer-CYxuhIQ0.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, 400);\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-300, 300ms) var(--hx-ease-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;\n    transition:\n      transform var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out),\n      opacity var(--hx-duration-300, 300ms) var(--hx-ease-out, ease-out);\n    opacity: 0;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .drawer-panel {\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    right: 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    left: 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    left: 0;\n    right: 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    left: 0;\n    right: 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-spacing-4, 1rem);\n    padding: var(\n      --hx-drawer-header-padding,\n      var(--hx-spacing-5, 1.25rem) var(--hx-spacing-6, 1.5rem)\n    );\n    border-bottom: var(--hx-border-width-1, 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-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-snug);\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-spacing-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-100, 100ms) 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  /* ─── Body ─── */\n\n  .drawer-body {\n    flex: 1 1 auto;\n    padding: var(--hx-drawer-body-padding, var(--hx-spacing-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-spacing-3, 0.75rem);\n    padding: var(--hx-drawer-footer-padding, var(--hx-spacing-4, 1rem) var(--hx-spacing-6, 1.5rem));\n    border-top: var(--hx-border-width-1, 1px) solid\n      var(--hx-drawer-footer-border-color, var(--hx-color-neutral-200));\n    flex-shrink: 0;\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\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 { tokenStyles } from '@helixui/tokens/lit';\nimport { lockBodyScroll, unlockBodyScroll } from '../../utils/body-scroll-lock.js';\nimport { helixDrawerStyles } from './hx-drawer.styles.js';\n\n// Module-level counter for stable, SSR-safe IDs (avoids Math.random() hydration mismatch)\nlet _hxDrawerIdCounter = 0;\n\ntype DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';\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 * @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 * @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-btn - The built-in close button.\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 LitElement {\n  static override styles = [tokenStyles, 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  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 = `hx-drawer-title-${++_hxDrawerIdCounter}`;\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: DrawerPlacement = 'end';\n\n  /**\n   * The size of the drawer panel. Use 'sm', 'md', 'lg', 'full', or any valid CSS length.\n   * @attr size\n   */\n  @property({ type: String, reflect: true })\n  size: DrawerSize = '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  // ─── Lifecycle ───\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: Map<string, unknown>): 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  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  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  private _restoreBodyScroll(): void {\n    if (!this._hasScrollLock) return;\n    unlockBodyScroll();\n    this._hasScrollLock = false;\n  }\n\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('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 after animation duration\n        const duration = this._getAnimationDuration();\n        this._animationTimeout = setTimeout(() => {\n          this.dispatchEvent(new CustomEvent('hx-after-show', { bubbles: true, composed: true }));\n        }, duration);\n      })\n      .catch(console.error);\n  }\n\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('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    // Animation cleanup only — no focus management inside this timeout.\n    const duration = this._getAnimationDuration();\n    this._animationTimeout = setTimeout(() => {\n      this.dispatchEvent(new CustomEvent('hx-after-hide', { bubbles: true, composed: true }));\n    }, duration);\n  }\n\n  private _getAnimationDuration(): number {\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  private _hideBackgroundFromScreenReaders(): void {\n    if (this.contained) return;\n    this._siblingAriaHiddenElements = [];\n    Array.from(document.body.children).forEach((child) => {\n      if (child === this || child.contains(this)) return;\n      if (!child.hasAttribute('aria-hidden')) {\n        child.setAttribute('aria-hidden', 'true');\n        this._siblingAriaHiddenElements.push(child);\n      }\n    });\n  }\n\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  private _addListeners(): void {\n    document.addEventListener('keydown', this._handleKeyDown);\n  }\n\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  private _setInitialFocus(): void {\n    const event = new CustomEvent('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  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  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  private _handleHeaderActionsSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHeaderActionsSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\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  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  private _renderHeader() {\n    if (this.noHeader) return nothing;\n\n    return html`\n      <div part=\"header\" class=\"drawer-header\">\n        <p part=\"title\" id=${this._titleId} class=\"drawer-title\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}></slot>\n        </p>\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-btn\"\n            class=\"drawer-close-button\"\n            aria-label=\"Close drawer\"\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  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}\n"],"names":["helixDrawerStyles","css","_hxDrawerIdCounter","DRAWER_SIZE_MAP","FOCUSABLE_SELECTORS","HelixDrawer","LitElement","target","changedProperties","resolvedSize","lockBodyScroll","unlockBodyScroll","active","duration","child","el","event","focusable","_a","shadowFocusable","slots","_b","lightFocusable","slot","first","rest","last","nothing","html","overlayClasses","ariaLabelledby","ariaLabel","classMap","ifDefined","tokenStyles","__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-DnjLnkTj.js → hx-dropdown-7cfowTWv.js}

@@ -49,10 +49,10 @@ const w = h`
     }
   }
 `;
-var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, i, n) => {
-  for (var s = n > 1 ? void 0 : n ? k(t, i) : t, o = e.length - 1, d; o >= 0; o--)
-    (d = e[o]) && (s = (n ? d(t, i, s) : d(s)) || s);
-  return n && s && x(t, i, 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, d; o >= 0; o--)
+    (d = e[o]) && (s = (i ? d(t, n, s) : d(s)) || s);
+  return i && s && x(t, n, s), s;
 };
 let r = class extends c {
   constructor() {
@@ -78,21 +78,21 @@ let r = class extends c {
   _hide(e = !0) {
     var t;
     if (this.open && (this.open = !1, this._panelVisible = !1, document.removeEventListener("click", this._handleOutsideClick), this.dispatchEvent(new CustomEvent("hx-hide", { bubbles: !0, composed: !0 })), e)) {
-      const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), n = i == null ? void 0 : i.assignedElements()[0];
-      n == null || n.focus();
+      const n = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), i = n == null ? void 0 : n.assignedElements()[0];
+      i == null || i.focus();
     }
   }
   // ─── Positioning ───
   async _updatePosition() {
     const e = this._triggerWrapper, t = this._panel;
     if (!e || !t) return;
-    const i = this.placement.replace(/^start$/, "left").replace(/^end$/, "right"), { x: n, y: s } = await b(e, t, {
-      placement: i,
+    const n = this.placement.replace(/^start$/, "left").replace(/^end$/, "right"), { x: i, y: s } = await b(e, t, {
+      placement: n,
       strategy: "fixed",
       middleware: [_(this.distance), v(), y({ padding: 8 })]
     });
     Object.assign(t.style, {
-      left: `${n}px`,
+      left: `${i}px`,
       top: `${s}px`
     });
   }
@@ -111,28 +111,28 @@ let r = class extends c {
     var s;
     const t = this._getFocusableMenuItems();
     if (t.length === 0) return;
-    const i = t.indexOf(document.activeElement);
-    let n;
-    e === "ArrowDown" ? n = i < t.length - 1 ? i + 1 : 0 : e === "ArrowUp" ? n = i > 0 ? i - 1 : t.length - 1 : e === "Home" ? n = 0 : n = t.length - 1, (s = t[n]) == null || s.focus();
+    const n = t.indexOf(document.activeElement);
+    let i;
+    e === "ArrowDown" ? i = n < t.length - 1 ? n + 1 : 0 : e === "ArrowUp" ? i = n > 0 ? n - 1 : t.length - 1 : e === "Home" ? i = 0 : i = t.length - 1, (s = t[i]) == null || s.focus();
   }
   // P0-01 / P2-01: Get focusable menu items from slotted content.
   _getFocusableMenuItems() {
     const e = this._panel;
     if (!e) return [];
-    const t = e.querySelector("slot"), i = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], n = [];
-    for (const s of i)
-      s instanceof HTMLElement && (s.matches('[role="menuitem"]') ? n.push(s) : s.querySelectorAll('[role="menuitem"]').forEach((o) => n.push(o)));
-    return n;
+    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((o) => i.push(o)));
+    return i;
   }
   // P0-01: Find the first focusable element in slotted panel content.
   _getFirstFocusableItem() {
     const e = this._panel;
     if (!e) return null;
-    const t = e.querySelector("slot"), i = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], n = '[role="menuitem"], button, [tabindex]:not([tabindex="-1"]), a[href], input, select, textarea';
-    for (const s of i) {
+    const t = e.querySelector("slot"), n = (t == null ? void 0 : t.assignedElements({ flatten: !0 })) ?? [], i = '[role="menuitem"], button, [tabindex]:not([tabindex="-1"]), a[href], input, select, textarea';
+    for (const s of n) {
       if (!(s instanceof HTMLElement)) continue;
-      if (s.matches(n)) return s;
-      const o = s.querySelector(n);
+      if (s.matches(i)) return s;
+      const o = s.querySelector(i);
       if (o) return o;
     }
     return null;
@@ -142,14 +142,14 @@ let r = class extends c {
   }
   _handlePanelClick(e) {
     var o;
-    const i = e.target.closest('[role="menuitem"], [data-value]');
-    if (!i) return;
-    const n = i.dataset.value ?? i.getAttribute("value") ?? null, s = ((o = i.textContent) == null ? void 0 : o.trim()) ?? "";
+    const n = e.target.closest('[role="menuitem"], [data-value]');
+    if (!n) return;
+    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,
         composed: !0,
-        detail: { value: n, label: s }
+        detail: { value: i, label: s }
       })
     ), this._hide();
   }
@@ -183,17 +183,17 @@ let r = class extends c {
     this._setupTriggerAria();
   }
   _setupTriggerAria() {
-    var i;
-    const e = (i = this.shadowRoot) == null ? void 0 : i.querySelector('slot[name="trigger"]');
+    var n;
+    const e = (n = this.shadowRoot) == null ? void 0 : n.querySelector('slot[name="trigger"]');
     if (!e) return;
     const t = e.assignedElements()[0];
-    t ? (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this.open)), t.setAttribute("aria-controls", this._panelId), this.removeAttribute("aria-expanded")) : this.setAttribute("aria-expanded", String(this.open));
+    t ? (t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", String(this.open)), this.removeAttribute("aria-expanded")) : this.setAttribute("aria-expanded", String(this.open));
   }
   updated(e) {
     var t;
     if (e.has("open")) {
-      const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), n = i == null ? void 0 : i.assignedElements()[0];
-      n ? n.setAttribute("aria-expanded", String(this.open)) : this.setAttribute("aria-expanded", String(this.open));
+      const n = (t = this.shadowRoot) == null ? void 0 : t.querySelector('slot[name="trigger"]'), i = n == null ? void 0 : n.assignedElements()[0];
+      i ? i.setAttribute("aria-expanded", String(this.open)) : this.setAttribute("aria-expanded", String(this.open));
     }
   }
 };
@@ -226,4 +226,4 @@ r = a([
 export {
   r as H
 };
-//# sourceMappingURL=hx-dropdown-DnjLnkTj.js.map
+//# sourceMappingURL=hx-dropdown-7cfowTWv.js.map

package/dist/shared/hx-dropdown-7cfowTWv.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-dropdown-7cfowTWv.js","sources":["../../src/components/hx-dropdown/hx-dropdown.styles.ts","../../src/components/hx-dropdown/hx-dropdown.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDropdownStyles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n    opacity: 0.5;\n  }\n\n  .trigger-wrapper {\n    display: inline-block;\n  }\n\n  [part='panel'] {\n    position: fixed;\n    z-index: var(--hx-dropdown-panel-z-index, 1000);\n    min-width: var(--hx-dropdown-panel-min-width, 160px);\n    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));\n    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e5e7eb));\n    border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));\n    box-shadow: var(\n      --hx-dropdown-panel-shadow,\n      0 4px 16px var(--hx-overlay-black-12, rgba(0, 0, 0, 0.12))\n    );\n    visibility: hidden;\n    opacity: 0;\n    pointer-events: none;\n    transition:\n      opacity 0.15s ease,\n      visibility 0.15s ease;\n    outline: none;\n  }\n\n  [part='panel'].panel--visible {\n    visibility: visible;\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='panel'] {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport {\n  computePosition,\n  flip,\n  shift,\n  offset,\n  type Placement as FloatingPlacement,\n} from '@floating-ui/dom';\nimport { helixDropdownStyles } from './hx-dropdown.styles.js';\n\n// P2-03: Export so TypeScript consumers can import this type for prop typing.\nexport type DropdownPlacement =\n  | 'top'\n  | 'top-start'\n  | 'top-end'\n  | 'bottom'\n  | 'bottom-start'\n  | 'bottom-end'\n  | 'start'\n  | 'end';\n\n/**\n * A dropdown component — a button that opens a floating panel on click.\n *\n * @summary Button that opens a floating menu panel on click.\n *\n * @tag hx-dropdown\n *\n * @slot trigger - The element that opens the dropdown (e.g. hx-button).\n * @slot - Default slot for dropdown panel content (e.g. menu items).\n *\n * @fires {CustomEvent<void>} hx-show - Dispatched when the dropdown is opened.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the dropdown is closed.\n * @fires {CustomEvent<{value: string | null; label: string}>} hx-select - Dispatched when a menu item is selected.\n *\n * @csspart trigger - The trigger wrapper element.\n * @csspart panel - The floating panel element.\n *\n * @cssprop [--hx-dropdown-panel-bg=var(--hx-color-neutral-0)] - Panel background color.\n * @cssprop [--hx-dropdown-panel-border-color=var(--hx-color-neutral-200)] - Panel border color.\n * @cssprop [--hx-dropdown-panel-border-radius=var(--hx-border-radius-md)] - Panel border radius.\n * @cssprop [--hx-dropdown-panel-shadow=0 4px 16px rgba(0,0,0,0.12)] - Panel box shadow.\n * @cssprop [--hx-dropdown-panel-z-index=1000] - Panel z-index.\n * @cssprop [--hx-dropdown-panel-min-width=160px] - Panel minimum width.\n *\n * @example\n * ```html\n * <hx-dropdown>\n *   <button slot=\"trigger\">Open Menu</button>\n *   <ul>\n *     <li data-value=\"edit\">Edit</li>\n *     <li data-value=\"delete\">Delete</li>\n *   </ul>\n * </hx-dropdown>\n * ```\n */\n@customElement('hx-dropdown')\nexport class HelixDropdown extends LitElement {\n  static override styles = [tokenStyles, helixDropdownStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Whether the dropdown panel is open.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Preferred placement of the panel relative to the trigger.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement: DropdownPlacement = 'bottom-start';\n\n  /**\n   * Whether the dropdown is disabled. Prevents opening.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Gap in pixels between the trigger and the panel.\n   * @attr distance\n   */\n  @property({ type: Number })\n  distance = 4;\n\n  // ─── Internal State ───\n\n  /**\n   * Whether the dropdown panel is currently visible.\n   * @internal\n   */\n  @state() private _panelVisible = false;\n\n  // P1-02: Unique panel ID for aria-controls.\n  /**\n   * Monotonically incrementing counter used to generate unique panel IDs across instances.\n   * @internal\n   */\n  private static _instanceCounter = 0;\n  /**\n   * Unique ID assigned to the floating panel element, referenced by `aria-controls` on the trigger.\n   * @internal\n   */\n  private _panelId = `hx-dropdown-panel-${++HelixDropdown._instanceCounter}`;\n\n  /**\n   * Reference to the floating panel element inside the shadow DOM.\n   * @internal\n   */\n  @query('[part=\"panel\"]') private _panel: HTMLElement | undefined;\n  /**\n   * Reference to the trigger wrapper element inside the shadow DOM.\n   * @internal\n   */\n  @query('[part=\"trigger\"]') private _triggerWrapper: HTMLElement | undefined;\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._handleOutsideClick = this._handleOutsideClick.bind(this);\n    this._handleKeydown = this._handleKeydown.bind(this);\n    this.addEventListener('keydown', this._handleKeydown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeydown);\n    document.removeEventListener('click', this._handleOutsideClick);\n  }\n\n  // ─── Open/Close ───\n\n  private async _show(): Promise<void> {\n    if (this.open || this.disabled) return;\n    this.open = true;\n    this._panelVisible = true;\n    // Add outside-click listener synchronously before any await so it is registered\n    // by the time the test fires an outside click after a single await el.updateComplete.\n    document.addEventListener('click', this._handleOutsideClick, { capture: true });\n    await this.updateComplete;\n    // P0-01: Fix focus management — use slot.assignedElements() to traverse slotted (light DOM) content.\n    // Focus is set after updateComplete (panel is rendered) but before _updatePosition so\n    // it executes in the same microtask as the test's await-continuation.\n    const panel = this._panel;\n    if (panel) {\n      const firstFocusable = this._getFirstFocusableItem();\n      firstFocusable?.focus();\n    }\n    await this._updatePosition();\n    this.dispatchEvent(new CustomEvent('hx-show', { bubbles: true, composed: true }));\n  }\n\n  // P2-02: returnFocus=true only on Escape; Tab should let focus advance naturally.\n  private _hide(returnFocus = true): void {\n    if (!this.open) return;\n    this.open = false;\n    this._panelVisible = false;\n    document.removeEventListener('click', this._handleOutsideClick);\n    this.dispatchEvent(new CustomEvent('hx-hide', { bubbles: true, composed: true }));\n    if (returnFocus) {\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n      const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n      trigger?.focus();\n    }\n  }\n\n  // ─── Positioning ───\n\n  private async _updatePosition(): Promise<void> {\n    const reference = this._triggerWrapper;\n    const panel = this._panel;\n    if (!reference || !panel) return;\n\n    // Map 'start' and 'end' to floating-ui's 'left'/'right'\n    const floatingPlacement = this.placement\n      .replace(/^start$/, 'left')\n      .replace(/^end$/, 'right') as FloatingPlacement;\n\n    const { x, y } = await computePosition(reference, panel, {\n      placement: floatingPlacement,\n      strategy: 'fixed',\n      middleware: [offset(this.distance), flip(), shift({ padding: 8 })],\n    });\n\n    Object.assign(panel.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  // ─── Event Handlers ───\n\n  private _handleTriggerClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this.open) {\n      this._hide();\n    } else {\n      void this._show();\n    }\n  }\n\n  private _handleTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      void this._show();\n    }\n  }\n\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape' && this.open) {\n      e.stopPropagation();\n      this._hide(true); // return focus to trigger on Escape\n    } else if (e.key === 'Tab' && this.open) {\n      // P2-02: Do not return focus to trigger on Tab — let focus advance naturally to next page element.\n      this._hide(false);\n    } else if (\n      this.open &&\n      (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End')\n    ) {\n      // P2-01: Arrow key roving within panel per APG Menu Button pattern.\n      e.preventDefault();\n      this._handleMenuNavigation(e.key);\n    }\n  }\n\n  // P2-01: Move focus among menuitem elements using arrow keys.\n  private _handleMenuNavigation(key: string): void {\n    const items = this._getFocusableMenuItems();\n    if (items.length === 0) return;\n    const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n    let nextIndex: number;\n    if (key === 'ArrowDown') {\n      nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n    } else if (key === 'ArrowUp') {\n      nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n    } else if (key === 'Home') {\n      nextIndex = 0;\n    } else {\n      nextIndex = items.length - 1;\n    }\n    items[nextIndex]?.focus();\n  }\n\n  // P0-01 / P2-01: Get focusable menu items from slotted content.\n  private _getFocusableMenuItems(): HTMLElement[] {\n    const panel = this._panel;\n    if (!panel) return [];\n    const slot = panel.querySelector<HTMLSlotElement>('slot');\n    const assignedNodes = slot?.assignedElements({ flatten: true }) ?? [];\n    const items: HTMLElement[] = [];\n    for (const node of assignedNodes) {\n      if (!(node instanceof HTMLElement)) continue;\n      if (node.matches('[role=\"menuitem\"]')) {\n        items.push(node);\n      } else {\n        node.querySelectorAll<HTMLElement>('[role=\"menuitem\"]').forEach((item) => items.push(item));\n      }\n    }\n    return items;\n  }\n\n  // P0-01: Find the first focusable element in slotted panel content.\n  private _getFirstFocusableItem(): HTMLElement | null {\n    const panel = this._panel;\n    if (!panel) return null;\n    const slot = panel.querySelector<HTMLSlotElement>('slot');\n    const assignedNodes = slot?.assignedElements({ flatten: true }) ?? [];\n    const focusableSelector =\n      '[role=\"menuitem\"], button, [tabindex]:not([tabindex=\"-1\"]), a[href], input, select, textarea';\n    for (const node of assignedNodes) {\n      if (!(node instanceof HTMLElement)) continue;\n      if (node.matches(focusableSelector)) return node;\n      const found = node.querySelector<HTMLElement>(focusableSelector);\n      if (found) return found;\n    }\n    return null;\n  }\n\n  private _handleOutsideClick(e: MouseEvent): void {\n    const path = e.composedPath();\n    if (!path.includes(this)) {\n      this._hide();\n    }\n  }\n\n  private _handlePanelClick(e: MouseEvent): void {\n    const target = e.target as HTMLElement;\n    // P2-06: Narrow selector — bare 'li' and 'button' cause spurious hx-select events.\n    const item = target.closest<HTMLElement>('[role=\"menuitem\"], [data-value]');\n    if (!item) return;\n\n    const value = item.dataset['value'] ?? item.getAttribute('value') ?? null;\n    const label = item.textContent?.trim() ?? '';\n\n    this.dispatchEvent(\n      new CustomEvent('hx-select', {\n        bubbles: true,\n        composed: true,\n        detail: { value, label },\n      }),\n    );\n\n    this._hide();\n  }\n\n  // ─── Render ───\n\n  override render() {\n    return html`\n      <div\n        part=\"trigger\"\n        class=\"trigger-wrapper\"\n        @click=${this._handleTriggerClick}\n        @keydown=${this._handleTriggerKeydown}\n      >\n        <slot name=\"trigger\" @slotchange=${this._onTriggerSlotChange}></slot>\n      </div>\n      <div\n        part=\"panel\"\n        id=${this._panelId}\n        aria-hidden=${this._panelVisible ? 'false' : 'true'}\n        class=${this._panelVisible ? 'panel panel--visible' : 'panel'}\n        @click=${this._handlePanelClick}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  // ─── ARIA setup for trigger slot ───\n\n  private _onTriggerSlotChange(): void {\n    this._setupTriggerAria();\n  }\n\n  override firstUpdated(): void {\n    this._setupTriggerAria();\n  }\n\n  private _setupTriggerAria(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n    if (!slot) return;\n    const trigger = slot.assignedElements()[0] as HTMLElement | undefined;\n    if (trigger) {\n      // P1-01: Use aria-haspopup=\"menu\" per ARIA 1.1+ / APG Menu Button pattern.\n      trigger.setAttribute('aria-haspopup', 'menu');\n      trigger.setAttribute('aria-expanded', String(this.open));\n      // aria-controls is intentionally omitted: the panel lives in Shadow DOM and\n      // IDREF values cannot be resolved across shadow boundaries by assistive technology.\n      // P2-06: Remove host fallback when a trigger element is present.\n      this.removeAttribute('aria-expanded');\n    } else {\n      // P2-06: Fallback — set aria-expanded on host when trigger slot is empty or unassigned.\n      this.setAttribute('aria-expanded', String(this.open));\n    }\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('open')) {\n      // Keep aria-expanded in sync\n      const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]');\n      const trigger = slot?.assignedElements()[0] as HTMLElement | undefined;\n      if (trigger) {\n        trigger.setAttribute('aria-expanded', String(this.open));\n      } else {\n        // P2-06: Fallback — keep host aria-expanded in sync when trigger slot is empty.\n        this.setAttribute('aria-expanded', String(this.open));\n      }\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-dropdown': HelixDropdown;\n  }\n}\n"],"names":["helixDropdownStyles","css","HelixDropdown","LitElement","firstFocusable","returnFocus","slot","_a","trigger","reference","panel","floatingPlacement","x","y","computePosition","offset","flip","shift","key","items","currentIndex","nextIndex","assignedNodes","node","item","focusableSelector","found","value","label","html","changedProperties","tokenStyles","__decorateClass","property","state","query","customElement"],"mappings":"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"}