@helixui/library 3.2.0-next.91 → 3.2.0-next.94

package/dist/shared/hx-dialog-DRN_1-Y-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-dialog-DRN_1-Y-.js","sources":["../../src/components/hx-dialog/hx-dialog.styles.ts","../../src/components/hx-dialog/hx-dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-dialog styles.\n *\n * Component-tier tokens with two-level var() fallback:\n *   var(--hx-dialog-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n *   neutral-0 = #FFFFFF, neutral-100 = #EBEEE9, neutral-200 = #D6DBD5,\n *   neutral-500 = #66787B, neutral-800 = #202B39, neutral-900 = #0D1825,\n *   primary-500 = #429797.\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, 1400) + 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-surface-default, #ffffff));\n    color: var(--hx-dialog-color, var(--hx-color-text-primary, #0d1825));\n    border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1)));\n    width: var(--hx-dialog-width, var(--hx-container-narrow, 32rem));\n    max-width: calc(100vw - var(--hx-space-8, 2rem));\n    max-height: calc(100vh - var(--hx-space-8, 2rem));\n    overflow: hidden;\n    outline: none;\n\n    /* Open/close animation */\n    opacity: 0;\n    transform: translateY(var(--hx-space-4, 1rem)) scale(0.97);\n    transition:\n      opacity var(--hx-duration-normal, 200ms) var(--hx-easing-out, ease-out),\n      transform var(--hx-duration-normal, 200ms) var(--hx-easing-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    .dialog__close-btn {\n      transition: none;\n    }\n  }\n\n  /* ─── Native backdrop (modal mode) ─── */\n\n  dialog::backdrop {\n    background-color: var(\n      --hx-dialog-backdrop-color,\n      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))\n    );\n    opacity: 0;\n    transition: opacity var(--hx-duration-normal, 200ms) var(--hx-easing-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(\n      --hx-dialog-backdrop-color,\n      var(--hx-color-surface-overlay, rgba(0, 0, 0, 0.75))\n    );\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, 1400);\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-space-5, 1.25rem) var(--hx-space-6, 1.5rem));\n    border-bottom: var(--hx-border-width-thin, 1px) solid\n      var(--hx-dialog-header-border-color, var(--hx-color-border-default, #d6dbd5));\n    gap: var(--hx-space-4, 1rem);\n    flex-shrink: 0;\n  }\n\n  .dialog__heading {\n    margin: 0;\n    font-family: var(--hx-dialog-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-lg, 1.125rem);\n    font-weight: var(--hx-font-weight-semibold, 600);\n    line-height: var(--hx-line-height-tight, 1.25);\n    color: var(--hx-dialog-heading-color, var(--hx-color-text-primary, #0d1825));\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-inline-start: auto;\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    cursor: pointer;\n    color: var(--hx-dialog-close-btn-color, var(--hx-color-text-muted, #4a5362));\n    font-size: var(--hx-font-size-xl, 1.25rem);\n    line-height: 1; /* intentional literal: icon button needs line-height 1; no token maps to exactly 1 */\n    transition:\n      color var(--hx-duration-fast, 100ms) ease,\n      background-color var(--hx-duration-fast, 100ms) ease;\n  }\n\n  .dialog__close-btn::before {\n    content: '×';\n  }\n\n  .dialog__close-btn:hover {\n    color: var(--hx-dialog-close-btn-hover-color, var(--hx-color-text-primary, #0d1825));\n    background-color: var(--hx-dialog-close-btn-hover-bg, var(--hx-color-surface-sunken, #ebeee9));\n  }\n\n  .dialog__close-btn:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-dialog-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\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-space-6, 1.5rem));\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-space-3, 0.75rem);\n    padding: var(--hx-dialog-footer-padding, var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem));\n    border-top: var(--hx-border-width-thin, 1px) solid\n      var(--hx-dialog-footer-border-color, var(--hx-color-border-default, #d6dbd5));\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  /* ─── Forced Colors (Windows High Contrast) ─── */\n  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n  @media (forced-colors: active) {\n    .dialog {\n      border: 1px solid CanvasText;\n    }\n\n    .dialog__header {\n      border-bottom-color: CanvasText;\n    }\n\n    .dialog__footer {\n      border-top-color: CanvasText;\n    }\n\n    .dialog__close-btn {\n      color: ButtonText;\n      border: 1px solid ButtonText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { lockBodyScroll, unlockBodyScroll } from '../../utils/body-scroll-lock.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixDialogStyles } from './hx-dialog.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nconst _nextDialogId = createIdCounter('hx-dialog');\n\n// Module-level constant avoids rebuilding the selector string on every _getFocusableElements call.\n// Pattern matches hx-drawer's FOCUSABLE_SELECTORS constant at module scope.\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 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 * **Event naming rationale:** hx-dialog intentionally uses `hx-open`/`hx-close`/`hx-cancel`\n * instead of the `hx-show`/`hx-hide`/`hx-after-show`/`hx-after-hide` pattern used by overlay\n * components (hx-drawer, hx-popover, hx-tooltip). This aligns with the native `<dialog>`\n * element's `close` and `cancel` events and communicates that the dialog is a stateful container\n * (open/closed) rather than a transient visibility toggle (show/hide).\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 * @cssprop [--hx-z-index-modal] - Z-index layer.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-neutral-900] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-shadow-xl] - Box shadow.\n * @cssprop [--hx-container-narrow] - CSS custom property.\n * @cssprop [--hx-space-8] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-duration-normal] - Animation duration.\n * @cssprop [--hx-easing-out] - CSS custom property.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-dialog-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-lg] - Font size.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-line-height-tight] - Line height.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-font-size-xl] - Font size.\n * @cssprop [--hx-duration-fast] - Animation duration.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-dialog-close-btn-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-space-3] - Spacing token.\n */\n@customElement('hx-dialog')\nexport class HelixDialog extends HelixElement {\n  static override styles = [helixDialogStyles, forcedColorsSurface];\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  /** @internal */\n  @query('dialog')\n  private _dialogEl: HTMLDialogElement | null | undefined;\n\n  // ─── Internal state ───\n\n  /** Tracks whether a header slot has been assigned content.  * @internal\n   */\n  @state()\n  private _hasHeaderSlot = false;\n\n  /** Tracks whether a footer slot has been assigned content.  * @internal\n   */\n  @state()\n  private _hasFooterSlot = false;\n\n  /** Cached focusable elements — populated on open, cleared on close. */\n  /** @internal */\n  private _cachedFocusableElements: HTMLElement[] = [];\n\n  /**\n   * Guards against re-entrant open/close calls within a single async open cycle.\n   *\n   * STATE MANAGEMENT CONTRACT\n   * ─────────────────────────\n   * `this.open` (the Lit property) is the single source of truth for dialog open state.\n   * All native `<dialog>` state changes (`showModal()`, `show()`, `close()`) flow exclusively\n   * from `updated()` → `_openDialog()` / `_closeDialog()`. External callers MUST only set\n   * `this.open`; they must never call native dialog methods directly.\n   *\n   * `_isTransitioning` is set to `true` at the start of `_openDialog()` to prevent a second\n   * open call from running concurrently while the first is awaiting `updateComplete`. It is\n   * cleared synchronously after the async tail completes. A 200 ms fallback timeout ensures\n   * the flag is always released even if `updateComplete` never resolves (e.g. detached DOM).\n   *\n   * `_closeDialog()` does NOT use `_isTransitioning` as a guard — it always runs immediately\n   * to honour a `this.open = false` that arrives during the open async tail. The open async\n   * tail checks `this.open` before touching focus so it can abort cleanly.\n   */\n  /** @internal */\n  private _isTransitioning = false;\n\n  /** Fallback timer that releases `_isTransitioning` if the open async tail never fires. */\n  /** @internal */\n  private _transitionFallbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  /** The element that had focus when the dialog opened — restored on close (D1). */\n  /** @internal */\n  private _triggerElement: HTMLElement | null = null;\n\n  /** Pending returnValue to pass to native dialog.close() (D11). */\n  /** @internal */\n  private _pendingReturnValue: string | undefined = undefined;\n\n  // ─── Unique IDs for aria-labelledby / aria-describedby ───\n\n  /** @internal */\n  private readonly _dialogId = _nextDialogId();\n  /** @internal */\n  private readonly _headingId = `${this._dialogId}-heading`;\n  /** @internal */\n  private readonly _descriptionId = `${this._dialogId}-description`;\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, dialog renders as a modal with backdrop and focus trap using the native\n   * `showModal()` API. When false (default), dialog renders as a non-modal overlay using\n   * the native `show()` API. Defaults to false, consistent with HTML boolean attribute\n   * semantics (absent = false, present = true).\n   * @attr modal\n   */\n  @property({ type: Boolean, reflect: true })\n  modal = false;\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, reflect: true })\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  /** Accessible label for the close button. Override for localized text. */\n  @property({ type: String, attribute: 'label-close' })\n  labelClose = 'Close dialog';\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    // Warn when no accessible heading is available.\n    // _hasHeaderSlot is maintained by the slotchange handler; check it here\n    // on first paint so a missing heading triggers the dev warning immediately.\n    if (!this.heading.trim() && !this._hasHeaderSlot) {\n      devWarn(\n        'hx-dialog',\n        'No heading or header slot provided. Dialog will use a fallback aria-label. Provide a `heading` attribute or populate the `header` slot for a descriptive accessible name.',\n      );\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTransitionFallback();\n    this._isTransitioning = false;\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: PropertyValues<this>): 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  /** Clears the fallback timer that releases `_isTransitioning`. @internal */\n  private _clearTransitionFallback(): void {\n    if (this._transitionFallbackTimer !== null) {\n      clearTimeout(this._transitionFallbackTimer);\n      this._transitionFallbackTimer = null;\n    }\n  }\n\n  /** @internal */\n  private _openDialog(): void {\n    const dialog = this._dialogEl;\n    if (!dialog) return;\n\n    // Guard: already open in the native dialog — nothing to do.\n    if (dialog.open) return;\n\n    // Guard: re-entrant call during our own async open tail — skip.\n    if (this._isTransitioning) return;\n\n    this._isTransitioning = true;\n\n    // 200 ms fallback — releases the transitioning flag if updateComplete never\n    // resolves (e.g. component detached mid-cycle or in a test environment that\n    // does not flush promises). Prevents the dialog from getting permanently stuck.\n    this._clearTransitionFallback();\n    this._transitionFallbackTimer = setTimeout(() => {\n      this._transitionFallbackTimer = null;\n      this._isTransitioning = false;\n    }, 200);\n\n    // D1 — store the element that triggered the dialog open for focus restoration on close\n    const active = document.activeElement;\n    this._triggerElement = active instanceof HTMLElement ? active : null;\n\n    if (this.modal) {\n      // showModal() throws if the dialog is already in the DOM as open — guard above\n      // ensures dialog.open is false before reaching here.\n      dialog.showModal();\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      dialog.show();\n    }\n\n    this._addGlobalListeners();\n\n    // Cache focusable elements after the dialog is open in the DOM.\n    void this.updateComplete.then(() => {\n      // Cancel if `this.open` was set to false during this async tail — `_closeDialog`\n      // already ran synchronously and we must not clobber its state.\n      this._clearTransitionFallback();\n      this._isTransitioning = false;\n      if (!this.open) return;\n\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<void>('hx-open', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  /** @internal */\n  private _closeDialog(): void {\n    const dialog = this._dialogEl;\n    if (!dialog) return;\n\n    // Guard: already closed in the native dialog — nothing to do, but still\n    // release any stuck transitioning state so the next open can proceed.\n    if (!dialog.open) {\n      // Release transitioning lock in case we are in the open async tail.\n      this._clearTransitionFallback();\n      this._isTransitioning = false;\n      return;\n    }\n\n    // Close always wins over a concurrent open async tail. We clear the\n    // transitioning flag and cancel the fallback so the open tail's own\n    // early-return check (`if (!this.open) return`) fires correctly.\n    this._clearTransitionFallback();\n    this._isTransitioning = false;\n\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    // D4 — release body scroll lock only when this dialog was opened as modal.\n    // Non-modal dialogs never call lockBodyScroll(), so the unlock must be symmetric.\n    if (this.modal) {\n      unlockBodyScroll();\n    }\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    this.dispatchEvent(\n      new CustomEvent<void>('hx-close', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // ─── Event Listeners ───\n\n  /** @internal */\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  /** @internal */\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  /** @internal */\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  /** @internal */\n  private _getFocusableElements(): HTMLElement[] {\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(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    const filtered = lightFocusable.filter(\n      (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n    );\n\n    // WCAG 2.4.3: if no light DOM focusable elements exist, fall back to the shadow\n    // close button so the dialog always has at least one reachable focus target.\n    if (filtered.length === 0) {\n      const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.dialog__close-btn');\n      if (closeBtn) filtered.push(closeBtn);\n    }\n\n    return filtered;\n  }\n\n  /** @internal */\n  private _trapFocus(e: KeyboardEvent): void {\n    const focusable =\n      this._cachedFocusableElements.length > 0\n        ? this._cachedFocusableElements\n        : this._getFocusableElements();\n    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 currentActiveEl = shadowActive ?? active;\n    const currentActive = currentActiveEl instanceof HTMLElement ? currentActiveEl : null;\n\n    // The shadow close button may be the first focusable element when no light DOM\n    // content exists (WCAG 2.1.2). Check both the element reference and shadow root\n    // active element so Shift+Tab wraps correctly across the shadow boundary.\n    const closeBtn = this.shadowRoot?.querySelector<HTMLElement>('.dialog__close-btn');\n\n    if (e.shiftKey) {\n      // Shift+Tab: if focus is on first, wrap to last\n      const isOnFirst =\n        currentActive === first ||\n        (closeBtn !== null && shadowActive === closeBtn && first === closeBtn);\n      if (isOnFirst) {\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  /** @internal */\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  /** @internal */\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  /** @internal */\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  /** @internal */\n  private _cancel(): void {\n    this.dispatchEvent(\n      new CustomEvent<void>('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  /** @internal */\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  /** @internal */\n  private _handleFooterSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\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=${this.labelClose}\n          @click=${() => this.close()}\n        ></button>\n      </div>\n    `;\n  }\n\n  /** @internal */\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  /** @internal */\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  /** @internal */\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  interface HTMLElementEventMap {\n    'hx-open': CustomEvent<void>;\n    'hx-close': CustomEvent<void>;\n    'hx-cancel': CustomEvent<void>;\n  }\n}\n"],"names":["helixDialogStyles","css","_nextDialogId","createIdCounter","FOCUSABLE_SELECTORS","HelixDialog","HelixElement","_a","name","oldVal","newVal","unlockBodyScroll","changedProperties","returnValue","dialog","active","lockBodyScroll","_b","_c","slots","lightFocusable","slot","el","child","filtered","closeBtn","focusable","first","rest","last","shadowActive","currentActiveEl","currentActive","hasHeading","html","nothing","ariaLabel","forcedColorsSurface","__decorateClass","query","state","property","value","customElement"],"mappings":"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"}

package/dist/shared/{hx-drawer-DDhDz7RI.js → hx-drawer-Y1Ui2IWJ.js}

@@ -217,10 +217,7 @@ const k = b`
 
   .drawer-close-button:focus-visible {
     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, #429797))
-      );
+      var(--hx-drawer-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -628,4 +625,4 @@ o = a([
 export {
   o as H
 };
-//# sourceMappingURL=hx-drawer-DDhDz7RI.js.map
+//# sourceMappingURL=hx-drawer-Y1Ui2IWJ.js.map

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

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

@@ -1,7 +1,7 @@
 import { css as x, nothing as p, html as f } from "lit";
-import { property as n, state as b, query as g, customElement as _ } from "lit/decorators.js";
+import { property as n, state as v, query as g, customElement as _ } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
-import { ifDefined as v } from "lit/directives/if-defined.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
 import { repeat as w } from "lit/directives/repeat.js";
 import { F as z } from "./FormMixin-B8PXk5RQ.js";
 import { b as F } from "./forced-colors-CTEDFRGa.js";
@@ -52,7 +52,7 @@ const k = x`
     min-height: var(--hx-space-32, 8rem);
     padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);
     border: var(--hx-border-width-thin, 1px) dashed
-      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #8e9c98));
+      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #66787b));
     border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));
     background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));
     cursor: pointer;
@@ -620,13 +620,13 @@ let o = class extends z($(S)) {
           id=${this._dropzoneId}
           role="button"
           tabindex=${this.disabled ? "-1" : "0"}
-          aria-label=${v(this._effectiveLabel || (this.label ? void 0 : t))}
-          aria-labelledby=${v(
+          aria-label=${b(this._effectiveLabel || (this.label ? void 0 : t))}
+          aria-labelledby=${b(
       !this._effectiveLabel && this.label ? this._labelId : void 0
     )}
           aria-disabled=${this.disabled ? "true" : p}
           aria-invalid=${e ? "true" : p}
-          aria-describedby=${v(e ? this._errorId : void 0)}
+          aria-describedby=${b(e ? this._errorId : void 0)}
           @click=${this._handleDropzoneClick}
           @keydown=${this._handleDropzoneKeyDown}
           @dragover=${this._handleDragOver}
@@ -641,7 +641,7 @@ let o = class extends z($(S)) {
           type="file"
           tabindex="-1"
           aria-hidden="true"
-          accept=${v(this.accept || void 0)}
+          accept=${b(this.accept || void 0)}
           ?multiple=${this.multiple}
           ?disabled=${this.disabled}
           @change=${this._handleFileInputChange}
@@ -705,13 +705,13 @@ s([
   n({ attribute: "label-drag-detected" })
 ], o.prototype, "labelDragDetected", 2);
 s([
-  b()
+  v()
 ], o.prototype, "_files", 2);
 s([
-  b()
+  v()
 ], o.prototype, "_dragOver", 2);
 s([
-  b()
+  v()
 ], o.prototype, "_hasFileListSlot", 2);
 s([
   g(".file-input")
@@ -722,4 +722,4 @@ o = s([
 export {
   o as H
 };
-//# sourceMappingURL=hx-file-upload-zTDbjsRw.js.map
+//# sourceMappingURL=hx-file-upload-B4L_Nkm-.js.map

package/dist/shared/{hx-file-upload-zTDbjsRw.js.map → hx-file-upload-B4L_Nkm-.js.map}

@@ -1 +1 @@
-{"version":3,"file":"hx-file-upload-zTDbjsRw.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-file-upload-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Label ─── */\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-text-strong, #202b39);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Dropzone ─── */\n\n  .dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-space-32, 8rem);\n    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n    border: var(--hx-border-width-thin, 1px) dashed\n      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #8e9c98));\n    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));\n    cursor: pointer;\n    text-align: center;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    color: var(--hx-color-text-secondary, #313e4b);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .dropzone:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-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    border-color: var(\n      --hx-file-upload-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-500))\n    );\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #429797);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #429797) 8%,\n        var(--hx-color-surface-default, #ffffff)\n      )\n    );\n    border-style: solid;\n  }\n\n  .dropzone--error {\n    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dropzone {\n      transition: none;\n    }\n  }\n\n  /* ─── Hidden file input ─── */\n\n  .file-input {\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-width: 0;\n  }\n\n  /* ─── File list ─── */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .file-list:empty {\n    display: none;\n  }\n\n  /* ─── File item ─── */\n\n  .file-item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-surface-default, #ffffff);\n  }\n\n  .file-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .file-item__name {\n    flex: 1;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-text-strong, #202b39);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .file-item__size {\n    flex-shrink: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-text-muted, #4a5362);\n  }\n\n  .file-item__remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    min-height: 44px;\n    padding: var(--hx-space-1, 0.25rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-text-muted, #4a5362);\n    cursor: pointer;\n    line-height: 1;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .file-item__remove:hover {\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-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  @media (prefers-reduced-motion: reduce) {\n    .file-item__remove {\n      transition: none;\n    }\n  }\n\n  /* ─── Progress bar ─── */\n\n  .progress-track {\n    width: 100%;\n    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));\n    background-color: var(--hx-color-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    width: 100%;\n    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #429797));\n    border-radius: inherit;\n    transform-origin: left center;\n    transform: scaleX(var(--_progress-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only utility ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Error message ─── */\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Forced colors (Windows High Contrast / Forced Colors Mode) ─── */\n\n  @media (forced-colors: active) {\n    .dropzone {\n      border: 2px dashed ButtonText;\n      background-color: Canvas;\n      color: ButtonText;\n    }\n\n    .dropzone--drag-over {\n      border: 2px solid Highlight;\n      outline: none;\n      background-color: Canvas;\n    }\n\n    .dropzone--error {\n      border: 2px solid LinkText;\n    }\n\n    .dropzone:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .progress-bar {\n      background: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .file-item__remove:hover {\n      outline: 2px solid Highlight;\n      background-color: transparent;\n      color: ButtonText;\n    }\n\n    .file-item__remove:focus-visible {\n      outline: 2px solid Highlight;\n    }\n\n    :host([disabled]) .dropzone {\n      border-color: GrayText;\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextFileUploadId = createIdCounter('hx-file-upload');\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/** Detail for the hx-upload event dispatched by hx-file-upload. */\nexport interface HxFileUploadDetail {\n  files: File[];\n}\n\n/** Detail for the hx-remove event dispatched by hx-file-upload. */\nexport interface HxFileRemoveDetail {\n  file: File;\n  index: number;\n}\n\n/** Detail for the hx-error event dispatched by hx-file-upload. */\nexport interface HxFileErrorDetail {\n  message: string;\n  files: File[];\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-file-upload-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-space-32] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-file-upload-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-file-upload-progress-height=var(--hx-space-1)] - Height.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends FormMixin(mixinDelegatesAria(HelixElement)) {\n  static override styles = [helixFileUploadStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Accepted file types as a comma-separated list of MIME types or extensions.\n   * Mirrors the native `<input type=\"file\" accept>` attribute.\n   * @attr accept\n   */\n  @property({ type: String })\n  accept = '';\n\n  /**\n   * Maximum allowed file size in bytes. 0 means unlimited.\n   * @attr max-size\n   */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  /**\n   * Maximum number of files that can be selected. 0 means unlimited.\n   * @attr max-files\n   */\n  @property({ type: Number, attribute: 'max-files' })\n  maxFiles = 0;\n\n  /**\n   * Whether multiple files may be selected at once.\n   * @attr multiple\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Visible label text for the dropzone.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the component is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Instructional text shown in the dropzone when no custom slot content is provided.\n   * Also used as the accessible label for the dropzone.\n   * @attr label-dropzone\n   */\n  @property({ type: String, attribute: 'label-dropzone' })\n  labelDropzone = 'Drag files here or click to browse';\n\n  /** Accessible label for the selected files list. */\n  @property({ type: String, attribute: 'label-file-list' })\n  labelFileList = 'Selected files';\n\n  /**\n   * Accessible label for the dropzone when no visible label text is provided.\n   * Falls back to `label-dropzone` prop value, then a default string.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * `accessible-label` takes precedence when both are set.\n   *\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Returns the effective label for the dropzone, checking accessible-label first,\n   * then the aria-label attribute, falling back to empty string.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n  }\n\n  /**\n   * Generates upload progress description for screen readers.\n   * @param name - file name\n   * @param progress - progress percentage 0-100\n   */\n  @property({ attribute: false })\n  labelUploadProgress: (name: string, progress: number) => string = (name, progress) =>\n    `Upload progress for ${name}: ${progress}%`;\n\n  /**\n   * Screen reader announcement when file drag detected. Override for i18n.\n   * @attr label-drag-detected\n   */\n  @property({ attribute: 'label-drag-detected' })\n  labelDragDetected = 'File detected. Release to upload.';\n\n  // ─── Internal State ───\n\n  /** The list of currently selected file entries, each with a file reference and upload progress. @internal */\n  @state() private _files: FileEntry[] = [];\n  /** Whether a file is currently being dragged over the dropzone. @internal */\n  @state() private _dragOver = false;\n  /** Whether the named file-list slot contains projected content. @internal */\n  @state() private _hasFileListSlot = false;\n\n  // ─── Internal References ───\n\n  /** Reference to the hidden native file input element used to open the OS file picker. @internal */\n  @query('.file-input')\n  private _fileInput: HTMLInputElement | null | undefined;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _baseId = _nextFileUploadId();\n  /** @internal */\n  private readonly _labelId = `${this._baseId}-label`;\n  /** @internal */\n  private readonly _errorId = `${this._baseId}-error`;\n  /** @internal */\n  private readonly _dropzoneId = `${this._baseId}-dropzone`;\n  /** @internal */\n  private readonly _liveId = `${this._baseId}-live`;\n\n  // ─── Slot Handling ───\n\n  /** @internal */\n  private _handleFileListSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_files' as keyof HelixFileUpload) || changedProperties.has('name')) {\n      this._syncFormValue();\n    }\n    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    _state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (_mode === 'restore' || _mode === 'autocomplete') {\n      this._files = [];\n      this._internals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this._files.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n\n    if (this._files.length === 1) {\n      // Single file — pass directly as File (accepted by setFormValue)\n      const firstEntry = this._files[0];\n      if (firstEntry) {\n        this._internals.setFormValue(firstEntry.file);\n      }\n      return;\n    }\n\n    // Multiple files — use FormData so all files are submitted under the same name\n    const formData = new FormData();\n    for (const entry of this._files) {\n      formData.append(this.name, entry.file, entry.file.name);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  // ─── Validation ───\n\n  /**\n   * Validates a file against `accept` and `maxSize` constraints.\n   * Returns null on success, or an error message string on failure.\n   */\n  /** @internal */\n  private _validateFile(file: File): string | null {\n    if (this.accept) {\n      const accepted = this._isAccepted(file);\n      if (!accepted) {\n        return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n      }\n    }\n\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n      return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Checks whether a file is accepted given the `accept` attribute value.\n   * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n   * and extensions (e.g. \".pdf\").\n   */\n  /** @internal */\n  private _isAccepted(file: File): boolean {\n    const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const token of tokens) {\n      if (token.startsWith('.')) {\n        // Extension match\n        if (file.name.toLowerCase().endsWith(token)) return true;\n      } else if (token.endsWith('/*')) {\n        // Wildcard MIME type e.g. \"image/*\"\n        const baseType = token.slice(0, -2);\n        if (file.type.toLowerCase().startsWith(baseType)) return true;\n      } else {\n        // Exact MIME type\n        if (file.type.toLowerCase() === token) return true;\n      }\n    }\n\n    return false;\n  }\n\n  // ─── File Processing ───\n\n  /** @internal */\n  private _processFiles(rawFiles: File[]): void {\n    if (this.disabled) return;\n\n    const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n    const validFiles: File[] = [];\n    const invalidFiles: File[] = [];\n    const errorMessages: string[] = [];\n\n    for (const file of candidateFiles) {\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        invalidFiles.push(file);\n        errorMessages.push(validationError);\n      } else {\n        validFiles.push(file);\n      }\n    }\n\n    if (invalidFiles.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: { message: errorMessages.join(' '), files: invalidFiles },\n        }),\n      );\n    }\n\n    if (validFiles.length === 0) return;\n\n    // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n    const currentCount = this.multiple ? this._files.length : 0;\n    const capacity =\n      this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n    const allowedFiles = validFiles.slice(0, capacity);\n\n    if (allowedFiles.length === 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n            files: validFiles,\n          },\n        }),\n      );\n      return;\n    }\n\n    if (allowedFiles.length > 0) {\n      const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n      if (this.multiple) {\n        this._files = [...this._files, ...newEntries];\n      } else {\n        this._files = newEntries;\n      }\n\n      this._handleInteractionInput();\n\n      this.dispatchEvent(\n        new CustomEvent<{ files: File[] }>('hx-upload', {\n          bubbles: true,\n          composed: true,\n          detail: { files: allowedFiles },\n        }),\n      );\n    }\n\n    // If remaining valid files were cut by maxFiles, report that too\n    const overflow = validFiles.slice(capacity);\n    if (overflow.length > 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n            files: overflow,\n          },\n        }),\n      );\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Sets the upload progress for a file at the given index.\n   * @param index - Zero-based index into the current file list.\n   * @param percent - Progress percentage from 0 to 100.\n   */\n  setProgress(index: number, percent: number): void {\n    if (index < 0 || index >= this._files.length) return;\n    const clamped = Math.max(0, Math.min(100, percent));\n    this._files = this._files.map((entry, i) =>\n      i === index ? { ...entry, progress: clamped } : entry,\n    );\n  }\n\n  /**\n   * Returns a read-only copy of the currently selected files.\n   */\n  get files(): File[] {\n    return this._files.map((e) => e.file);\n  }\n\n  // ─── Drag and Drop Handlers ───\n\n  /** @internal */\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragOver = true;\n  }\n\n  /** @internal */\n  private _handleDragLeave(e: DragEvent): void {\n    // Only clear drag state when leaving the dropzone entirely\n    const target = e.relatedTarget as Node | null;\n    if (target && this.contains(target)) return;\n    const dropzone = this.shadowRoot?.querySelector('.dropzone');\n    if (dropzone && dropzone.contains(target)) return;\n    this._dragOver = false;\n  }\n\n  /** @internal */\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragOver = false;\n    if (this.disabled) return;\n\n    const dt = e.dataTransfer;\n    if (!dt) return;\n\n    const rawFiles = Array.from(dt.files);\n    if (rawFiles.length === 0) return;\n\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Click / Keyboard Handlers ───\n\n  /** @internal */\n  private _handleDropzoneClick(): void {\n    if (this.disabled) return;\n    this._fileInput?.click();\n  }\n\n  /** @internal */\n  private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._fileInput?.click();\n    }\n  }\n\n  /** @internal */\n  private _handleFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const rawFiles = Array.from(input.files);\n    // Reset the input so the same file can be re-selected after removal\n    input.value = '';\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Remove Handler ───\n\n  /** @internal */\n  private _handleRemove(index: number): void {\n    if (this.disabled) return;\n    const entry = this._files[index];\n    if (!entry) return;\n\n    const removedFile = entry.file;\n    this._files = this._files.filter((_, i) => i !== index);\n\n    this.dispatchEvent(\n      new CustomEvent<{ file: File; index: number }>('hx-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { file: removedFile, index },\n      }),\n    );\n\n    // Restore focus after removal so keyboard users are not stranded.\n    this.updateComplete\n      .then(() => {\n        if (this._files.length === 0) {\n          // List is now empty — return focus to the dropzone.\n          const dropzone = this.shadowRoot?.querySelector<HTMLElement>('[part=\"dropzone\"]');\n          dropzone?.focus();\n        } else {\n          // Focus the remove button at the same position, or the previous one if\n          // the removed item was the last in the list.\n          const removeButtons =\n            this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.file-item__remove');\n          if (removeButtons && removeButtons.length > 0) {\n            const targetIndex = index < this._files.length ? index : this._files.length - 1;\n            const targetButton = removeButtons[targetIndex];\n            if (targetButton) {\n              targetButton.focus();\n            }\n          }\n        }\n      })\n      .catch(() => {\n        // Focus restoration is best-effort; ignore errors.\n      });\n  }\n\n  // ─── Formatters ───\n\n  /** @internal */\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderFileList() {\n    if (this._hasFileListSlot) return nothing;\n    if (this._files.length === 0) return nothing;\n\n    return html`\n      <ul part=\"file-list\" class=\"file-list\" aria-label=${this.labelFileList}>\n        ${repeat(\n          this._files,\n          (entry) => entry.file.name + entry.file.size,\n          (entry, index) => html`\n            <li part=\"file-item\" class=\"file-item\">\n              <div class=\"file-item__row\">\n                <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n                <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n                <button\n                  type=\"button\"\n                  class=\"file-item__remove\"\n                  aria-label=${`Remove ${entry.file.name}`}\n                  @click=${() => this._handleRemove(index)}\n                >\n                  <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M1 1L13 13M13 1L1 13\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.75\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              </div>\n              <div\n                part=\"progress\"\n                class=\"progress-track\"\n                role=\"progressbar\"\n                aria-valuenow=${entry.progress}\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-label=${this.labelUploadProgress(entry.file.name, entry.progress)}\n              >\n                <div\n                  class=\"progress-bar\"\n                  style=\"--_progress-ratio: ${String(entry.progress / 100)}\"\n                ></div>\n              </div>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n\n    const dropzoneClasses = {\n      dropzone: true,\n      'dropzone--drag-over': this._dragOver,\n      'dropzone--error': hasError,\n    };\n\n    const dropzoneLabel = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;\n\n    return html`\n      <div class=\"field\">\n        ${this.label\n          ? html`\n              <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n\n        <div\n          part=\"dropzone\"\n          class=${classMap(dropzoneClasses)}\n          id=${this._dropzoneId}\n          role=\"button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ifDefined(this._effectiveLabel || (!this.label ? dropzoneLabel : undefined))}\n          aria-labelledby=${ifDefined(\n            !this._effectiveLabel && this.label ? this._labelId : undefined,\n          )}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-invalid=${hasError ? 'true' : nothing}\n          aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n          @click=${this._handleDropzoneClick}\n          @keydown=${this._handleDropzoneKeyDown}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n          @drop=${this._handleDrop}\n        >\n          <slot>${this.labelDropzone}</slot>\n        </div>\n\n        <input\n          class=\"file-input\"\n          type=\"file\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          accept=${ifDefined(this.accept || undefined)}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this._handleFileInputChange}\n        />\n\n        <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n        ${this._renderFileList()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>\n            `\n          : nothing}\n\n        <div id=${this._liveId} class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${this._dragOver ? this.labelDragDetected : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-file-upload': HelixFileUpload;\n  }\n}\n"],"names":["helixFileUploadStyles","css","_nextFileUploadId","createIdCounter","HelixFileUpload","FormMixin","mixinDelegatesAria","HelixElement","name","progress","_a","_b","slot","changedProperties","errorEl","msg","disabled","_state","_mode","firstEntry","formData","entry","file","maxMb","tokens","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dropzone","dt","input","removedFile","_","removeButtons","targetIndex","targetButton","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","forcedColorsField","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}
+{"version":3,"file":"hx-file-upload-B4L_Nkm-.js","sources":["../../src/components/hx-file-upload/hx-file-upload.styles.ts","../../src/components/hx-file-upload/hx-file-upload.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFileUploadStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    font-family: var(--hx-file-upload-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Label ─── */\n\n  .field__label {\n    display: flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-text-strong, #202b39);\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Dropzone ─── */\n\n  .dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2, 0.5rem);\n    min-height: var(--hx-space-32, 8rem);\n    padding: var(--hx-space-6, 1.5rem) var(--hx-space-4, 1rem);\n    border: var(--hx-border-width-thin, 1px) dashed\n      var(--hx-file-upload-dropzone-border-color, var(--hx-color-border-strong, #66787b));\n    border-radius: var(--hx-file-upload-dropzone-border-radius, var(--hx-border-radius-lg, 0.5rem));\n    background-color: var(--hx-file-upload-dropzone-bg, var(--hx-color-surface-raised, #f5f8f3));\n    cursor: pointer;\n    text-align: center;\n    transition:\n      border-color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    user-select: none;\n    color: var(--hx-color-text-secondary, #313e4b);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  .dropzone:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-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    border-color: var(\n      --hx-file-upload-focus-ring-color,\n      var(--hx-focus-ring-color, var(--hx-color-primary-500))\n    );\n  }\n\n  .dropzone--drag-over {\n    border-color: var(--hx-color-primary-500, #429797);\n    background-color: var(\n      --hx-file-upload-dropzone-active-bg,\n      color-mix(\n        in srgb,\n        var(--hx-color-primary-500, #429797) 8%,\n        var(--hx-color-surface-default, #ffffff)\n      )\n    );\n    border-style: solid;\n  }\n\n  .dropzone--error {\n    border-color: var(--hx-file-upload-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .dropzone {\n      transition: none;\n    }\n  }\n\n  /* ─── Hidden file input ─── */\n\n  .file-input {\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-width: 0;\n  }\n\n  /* ─── File list ─── */\n\n  .file-list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-2, 0.5rem);\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .file-list:empty {\n    display: none;\n  }\n\n  /* ─── File item ─── */\n\n  .file-item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-md, 0.375rem);\n    background-color: var(--hx-color-surface-default, #ffffff);\n  }\n\n  .file-item__row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  .file-item__name {\n    flex: 1;\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-color-text-strong, #202b39);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .file-item__size {\n    flex-shrink: 0;\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-color-text-muted, #4a5362);\n  }\n\n  .file-item__remove {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 44px;\n    min-height: 44px;\n    padding: var(--hx-space-1, 0.25rem);\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-color-text-muted, #4a5362);\n    cursor: pointer;\n    line-height: 1;\n    transition:\n      color var(--hx-transition-fast, 150ms ease),\n      background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .file-item__remove:hover {\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));\n    background-color: color-mix(in srgb, var(--hx-color-error-500, #e5493e) 8%, transparent);\n  }\n\n  .file-item__remove:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-file-upload-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  @media (prefers-reduced-motion: reduce) {\n    .file-item__remove {\n      transition: none;\n    }\n  }\n\n  /* ─── Progress bar ─── */\n\n  .progress-track {\n    width: 100%;\n    height: var(--hx-file-upload-progress-height, var(--hx-space-1, 0.25rem));\n    background-color: var(--hx-color-border-default, #d6dbd5);\n    border-radius: var(--hx-border-radius-full, 9999px);\n    overflow: hidden;\n  }\n\n  .progress-bar {\n    height: 100%;\n    width: 100%;\n    background-color: var(--hx-file-upload-progress-color, var(--hx-color-primary-500, #429797));\n    border-radius: inherit;\n    transform-origin: left center;\n    transform: scaleX(var(--_progress-ratio, 0));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .progress-bar {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only utility ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Error message ─── */\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-file-upload-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Forced colors (Windows High Contrast / Forced Colors Mode) ─── */\n\n  @media (forced-colors: active) {\n    .dropzone {\n      border: 2px dashed ButtonText;\n      background-color: Canvas;\n      color: ButtonText;\n    }\n\n    .dropzone--drag-over {\n      border: 2px solid Highlight;\n      outline: none;\n      background-color: Canvas;\n    }\n\n    .dropzone--error {\n      border: 2px solid LinkText;\n    }\n\n    .dropzone:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .progress-bar {\n      background: Highlight;\n      forced-color-adjust: none;\n    }\n\n    .file-item__remove:hover {\n      outline: 2px solid Highlight;\n      background-color: transparent;\n      color: ButtonText;\n    }\n\n    .file-item__remove:focus-visible {\n      outline: 2px solid Highlight;\n    }\n\n    :host([disabled]) .dropzone {\n      border-color: GrayText;\n      color: GrayText;\n      opacity: 1;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixFileUploadStyles } from './hx-file-upload.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\n\nconst _nextFileUploadId = createIdCounter('hx-file-upload');\n\ninterface FileEntry {\n  file: File;\n  progress: number;\n}\n\n/** Detail for the hx-upload event dispatched by hx-file-upload. */\nexport interface HxFileUploadDetail {\n  files: File[];\n}\n\n/** Detail for the hx-remove event dispatched by hx-file-upload. */\nexport interface HxFileRemoveDetail {\n  file: File;\n  index: number;\n}\n\n/** Detail for the hx-error event dispatched by hx-file-upload. */\nexport interface HxFileErrorDetail {\n  message: string;\n  files: File[];\n}\n\n/**\n * A drag-and-drop file upload component with client-side validation,\n * file list management, per-file progress, and native form association.\n *\n * @summary Form-associated file upload dropzone with drag-and-drop, validation, and progress tracking.\n *\n * @tag hx-file-upload\n *\n * @slot - Default dropzone content. Replaces the built-in \"Drag files here or click to browse\" prompt.\n * @slot file-list - Custom file list display. When provided, the built-in file list is hidden.\n *\n * @fires {CustomEvent<{files: File[]}>} hx-upload - Dispatched when valid files are selected via drag-and-drop or the file picker.\n * @fires {CustomEvent<{file: File, index: number}>} hx-remove - Dispatched when a file is removed from the list.\n * @fires {CustomEvent<{message: string, files: File[]}>} hx-error - Dispatched when file validation fails (type or size constraint).\n *\n * @csspart dropzone - The drag-and-drop target area.\n * @csspart file-list - The container wrapping the list of selected files.\n * @csspart file-item - An individual file entry in the list.\n * @csspart progress - The progress bar track for a file item.\n * @csspart label - The visible label element.\n * @csspart error - The error message container below the dropzone.\n *\n * @cssprop [--hx-file-upload-dropzone-bg=var(--hx-color-neutral-50)] - Dropzone background color.\n * @cssprop [--hx-file-upload-dropzone-border-color=var(--hx-color-neutral-300)] - Dropzone border color.\n * @cssprop [--hx-file-upload-dropzone-border-radius=var(--hx-border-radius-lg)] - Dropzone border radius.\n * @cssprop [--hx-file-upload-dropzone-active-bg] - Dropzone background when a file is dragged over.\n * @cssprop [--hx-file-upload-progress-color=var(--hx-color-primary-500)] - Progress bar fill color.\n * @cssprop [--hx-file-upload-error-color=var(--hx-color-error-500)] - Error state and remove-button hover color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-file-upload-font-family=var(--hx-font-family-sans)] - CSS custom property.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-font-weight-medium] - Font weight.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-space-32] - Spacing token.\n * @cssprop [--hx-space-6] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-color-neutral-50] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-file-upload-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-800] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-file-upload-progress-height=var(--hx-space-1)] - Height.\n * @cssprop [--hx-border-radius-full] - CSS custom property.\n */\n@customElement('hx-file-upload')\nexport class HelixFileUpload extends FormMixin(mixinDelegatesAria(HelixElement)) {\n  static override styles = [helixFileUploadStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * The form field name used during form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * Accepted file types as a comma-separated list of MIME types or extensions.\n   * Mirrors the native `<input type=\"file\" accept>` attribute.\n   * @attr accept\n   */\n  @property({ type: String })\n  accept = '';\n\n  /**\n   * Maximum allowed file size in bytes. 0 means unlimited.\n   * @attr max-size\n   */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  /**\n   * Maximum number of files that can be selected. 0 means unlimited.\n   * @attr max-files\n   */\n  @property({ type: Number, attribute: 'max-files' })\n  maxFiles = 0;\n\n  /**\n   * Whether multiple files may be selected at once.\n   * @attr multiple\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Visible label text for the dropzone.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the component is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Error message displayed below the dropzone. Also puts the dropzone in an error visual state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Instructional text shown in the dropzone when no custom slot content is provided.\n   * Also used as the accessible label for the dropzone.\n   * @attr label-dropzone\n   */\n  @property({ type: String, attribute: 'label-dropzone' })\n  labelDropzone = 'Drag files here or click to browse';\n\n  /** Accessible label for the selected files list. */\n  @property({ type: String, attribute: 'label-file-list' })\n  labelFileList = 'Selected files';\n\n  /**\n   * Accessible label for the dropzone when no visible label text is provided.\n   * Falls back to `label-dropzone` prop value, then a default string.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * `accessible-label` takes precedence when both are set.\n   *\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Returns the effective label for the dropzone, checking accessible-label first,\n   * then the aria-label attribute, falling back to empty string.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n  }\n\n  /**\n   * Generates upload progress description for screen readers.\n   * @param name - file name\n   * @param progress - progress percentage 0-100\n   */\n  @property({ attribute: false })\n  labelUploadProgress: (name: string, progress: number) => string = (name, progress) =>\n    `Upload progress for ${name}: ${progress}%`;\n\n  /**\n   * Screen reader announcement when file drag detected. Override for i18n.\n   * @attr label-drag-detected\n   */\n  @property({ attribute: 'label-drag-detected' })\n  labelDragDetected = 'File detected. Release to upload.';\n\n  // ─── Internal State ───\n\n  /** The list of currently selected file entries, each with a file reference and upload progress. @internal */\n  @state() private _files: FileEntry[] = [];\n  /** Whether a file is currently being dragged over the dropzone. @internal */\n  @state() private _dragOver = false;\n  /** Whether the named file-list slot contains projected content. @internal */\n  @state() private _hasFileListSlot = false;\n\n  // ─── Internal References ───\n\n  /** Reference to the hidden native file input element used to open the OS file picker. @internal */\n  @query('.file-input')\n  private _fileInput: HTMLInputElement | null | undefined;\n\n  // ─── Stable IDs ───\n\n  /** @internal */\n  private readonly _baseId = _nextFileUploadId();\n  /** @internal */\n  private readonly _labelId = `${this._baseId}-label`;\n  /** @internal */\n  private readonly _errorId = `${this._baseId}-error`;\n  /** @internal */\n  private readonly _dropzoneId = `${this._baseId}-dropzone`;\n  /** @internal */\n  private readonly _liveId = `${this._baseId}-live`;\n\n  // ─── Slot Handling ───\n\n  /** @internal */\n  private _handleFileListSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasFileListSlot = slot.assignedElements({ flatten: true }).length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_files' as keyof HelixFileUpload) || changedProperties.has('name')) {\n      this._syncFormValue();\n    }\n    // Force screen reader re-announcement when error text changes (a11y-v3-005)\n    if (changedProperties.has('error') && this.error) {\n      const errorEl = this.shadowRoot?.querySelector('[role=\"alert\"]');\n      if (errorEl) {\n        const msg = this.error;\n        requestAnimationFrame(() => {\n          errorEl.textContent = '';\n          requestAnimationFrame(() => {\n            errorEl.textContent = msg;\n          });\n        });\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** @internal */\n  protected override _onFormReset(): void {\n    this._files = [];\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  /** @internal */\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** @internal */\n  protected override _onFormStateRestore(\n    _state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (_mode === 'restore' || _mode === 'autocomplete') {\n      this._files = [];\n      this._internals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  private _syncFormValue(): void {\n    if (this._files.length === 0) {\n      this._internals.setFormValue(null);\n      return;\n    }\n\n    if (this._files.length === 1) {\n      // Single file — pass directly as File (accepted by setFormValue)\n      const firstEntry = this._files[0];\n      if (firstEntry) {\n        this._internals.setFormValue(firstEntry.file);\n      }\n      return;\n    }\n\n    // Multiple files — use FormData so all files are submitted under the same name\n    const formData = new FormData();\n    for (const entry of this._files) {\n      formData.append(this.name, entry.file, entry.file.name);\n    }\n    this._internals.setFormValue(formData);\n  }\n\n  // ─── Validation ───\n\n  /**\n   * Validates a file against `accept` and `maxSize` constraints.\n   * Returns null on success, or an error message string on failure.\n   */\n  /** @internal */\n  private _validateFile(file: File): string | null {\n    if (this.accept) {\n      const accepted = this._isAccepted(file);\n      if (!accepted) {\n        return `\"${file.name}\" has an unsupported file type. Accepted types: ${this.accept}`;\n      }\n    }\n\n    if (this.maxSize > 0 && file.size > this.maxSize) {\n      const maxMb = (this.maxSize / (1024 * 1024)).toFixed(1);\n      return `\"${file.name}\" exceeds the maximum size of ${maxMb} MB.`;\n    }\n\n    return null;\n  }\n\n  /**\n   * Checks whether a file is accepted given the `accept` attribute value.\n   * Handles MIME types (e.g. \"image/png\"), wildcard MIME types (e.g. \"image/*\"),\n   * and extensions (e.g. \".pdf\").\n   */\n  /** @internal */\n  private _isAccepted(file: File): boolean {\n    const tokens = this.accept.split(',').map((t) => t.trim().toLowerCase());\n\n    for (const token of tokens) {\n      if (token.startsWith('.')) {\n        // Extension match\n        if (file.name.toLowerCase().endsWith(token)) return true;\n      } else if (token.endsWith('/*')) {\n        // Wildcard MIME type e.g. \"image/*\"\n        const baseType = token.slice(0, -2);\n        if (file.type.toLowerCase().startsWith(baseType)) return true;\n      } else {\n        // Exact MIME type\n        if (file.type.toLowerCase() === token) return true;\n      }\n    }\n\n    return false;\n  }\n\n  // ─── File Processing ───\n\n  /** @internal */\n  private _processFiles(rawFiles: File[]): void {\n    if (this.disabled) return;\n\n    const candidateFiles = this.multiple ? rawFiles : rawFiles.slice(0, 1);\n    const validFiles: File[] = [];\n    const invalidFiles: File[] = [];\n    const errorMessages: string[] = [];\n\n    for (const file of candidateFiles) {\n      const validationError = this._validateFile(file);\n      if (validationError) {\n        invalidFiles.push(file);\n        errorMessages.push(validationError);\n      } else {\n        validFiles.push(file);\n      }\n    }\n\n    if (invalidFiles.length > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: { message: errorMessages.join(' '), files: invalidFiles },\n        }),\n      );\n    }\n\n    if (validFiles.length === 0) return;\n\n    // Enforce maxFiles limit (only in multiple mode — single-file mode always replaces)\n    const currentCount = this.multiple ? this._files.length : 0;\n    const capacity =\n      this.maxFiles > 0 ? Math.max(0, this.maxFiles - currentCount) : validFiles.length;\n    const allowedFiles = validFiles.slice(0, capacity);\n\n    if (allowedFiles.length === 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed.`,\n            files: validFiles,\n          },\n        }),\n      );\n      return;\n    }\n\n    if (allowedFiles.length > 0) {\n      const newEntries: FileEntry[] = allowedFiles.map((file) => ({ file, progress: 0 }));\n\n      if (this.multiple) {\n        this._files = [...this._files, ...newEntries];\n      } else {\n        this._files = newEntries;\n      }\n\n      this._handleInteractionInput();\n\n      this.dispatchEvent(\n        new CustomEvent<{ files: File[] }>('hx-upload', {\n          bubbles: true,\n          composed: true,\n          detail: { files: allowedFiles },\n        }),\n      );\n    }\n\n    // If remaining valid files were cut by maxFiles, report that too\n    const overflow = validFiles.slice(capacity);\n    if (overflow.length > 0 && this.maxFiles > 0) {\n      this.dispatchEvent(\n        new CustomEvent<{ message: string; files: File[] }>('hx-error', {\n          bubbles: true,\n          composed: true,\n          detail: {\n            message: `Maximum of ${this.maxFiles} file${this.maxFiles === 1 ? '' : 's'} allowed. ${overflow.length} file${overflow.length === 1 ? ' was' : 's were'} not added.`,\n            files: overflow,\n          },\n        }),\n      );\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Sets the upload progress for a file at the given index.\n   * @param index - Zero-based index into the current file list.\n   * @param percent - Progress percentage from 0 to 100.\n   */\n  setProgress(index: number, percent: number): void {\n    if (index < 0 || index >= this._files.length) return;\n    const clamped = Math.max(0, Math.min(100, percent));\n    this._files = this._files.map((entry, i) =>\n      i === index ? { ...entry, progress: clamped } : entry,\n    );\n  }\n\n  /**\n   * Returns a read-only copy of the currently selected files.\n   */\n  get files(): File[] {\n    return this._files.map((e) => e.file);\n  }\n\n  // ─── Drag and Drop Handlers ───\n\n  /** @internal */\n  private _handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (this.disabled) return;\n    this._dragOver = true;\n  }\n\n  /** @internal */\n  private _handleDragLeave(e: DragEvent): void {\n    // Only clear drag state when leaving the dropzone entirely\n    const target = e.relatedTarget as Node | null;\n    if (target && this.contains(target)) return;\n    const dropzone = this.shadowRoot?.querySelector('.dropzone');\n    if (dropzone && dropzone.contains(target)) return;\n    this._dragOver = false;\n  }\n\n  /** @internal */\n  private _handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    this._dragOver = false;\n    if (this.disabled) return;\n\n    const dt = e.dataTransfer;\n    if (!dt) return;\n\n    const rawFiles = Array.from(dt.files);\n    if (rawFiles.length === 0) return;\n\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Click / Keyboard Handlers ───\n\n  /** @internal */\n  private _handleDropzoneClick(): void {\n    if (this.disabled) return;\n    this._fileInput?.click();\n  }\n\n  /** @internal */\n  private _handleDropzoneKeyDown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._fileInput?.click();\n    }\n  }\n\n  /** @internal */\n  private _handleFileInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    if (!input.files || input.files.length === 0) return;\n\n    const rawFiles = Array.from(input.files);\n    // Reset the input so the same file can be re-selected after removal\n    input.value = '';\n    this._processFiles(rawFiles);\n  }\n\n  // ─── Remove Handler ───\n\n  /** @internal */\n  private _handleRemove(index: number): void {\n    if (this.disabled) return;\n    const entry = this._files[index];\n    if (!entry) return;\n\n    const removedFile = entry.file;\n    this._files = this._files.filter((_, i) => i !== index);\n\n    this.dispatchEvent(\n      new CustomEvent<{ file: File; index: number }>('hx-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { file: removedFile, index },\n      }),\n    );\n\n    // Restore focus after removal so keyboard users are not stranded.\n    this.updateComplete\n      .then(() => {\n        if (this._files.length === 0) {\n          // List is now empty — return focus to the dropzone.\n          const dropzone = this.shadowRoot?.querySelector<HTMLElement>('[part=\"dropzone\"]');\n          dropzone?.focus();\n        } else {\n          // Focus the remove button at the same position, or the previous one if\n          // the removed item was the last in the list.\n          const removeButtons =\n            this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.file-item__remove');\n          if (removeButtons && removeButtons.length > 0) {\n            const targetIndex = index < this._files.length ? index : this._files.length - 1;\n            const targetButton = removeButtons[targetIndex];\n            if (targetButton) {\n              targetButton.focus();\n            }\n          }\n        }\n      })\n      .catch(() => {\n        // Focus restoration is best-effort; ignore errors.\n      });\n  }\n\n  // ─── Formatters ───\n\n  /** @internal */\n  private _formatSize(bytes: number): string {\n    if (bytes < 1024) return `${bytes} B`;\n    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _renderFileList() {\n    if (this._hasFileListSlot) return nothing;\n    if (this._files.length === 0) return nothing;\n\n    return html`\n      <ul part=\"file-list\" class=\"file-list\" aria-label=${this.labelFileList}>\n        ${repeat(\n          this._files,\n          (entry) => entry.file.name + entry.file.size,\n          (entry, index) => html`\n            <li part=\"file-item\" class=\"file-item\">\n              <div class=\"file-item__row\">\n                <span class=\"file-item__name\" title=${entry.file.name}> ${entry.file.name} </span>\n                <span class=\"file-item__size\">${this._formatSize(entry.file.size)}</span>\n                <button\n                  type=\"button\"\n                  class=\"file-item__remove\"\n                  aria-label=${`Remove ${entry.file.name}`}\n                  @click=${() => this._handleRemove(index)}\n                >\n                  <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M1 1L13 13M13 1L1 13\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.75\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              </div>\n              <div\n                part=\"progress\"\n                class=\"progress-track\"\n                role=\"progressbar\"\n                aria-valuenow=${entry.progress}\n                aria-valuemin=\"0\"\n                aria-valuemax=\"100\"\n                aria-label=${this.labelUploadProgress(entry.file.name, entry.progress)}\n              >\n                <div\n                  class=\"progress-bar\"\n                  style=\"--_progress-ratio: ${String(entry.progress / 100)}\"\n                ></div>\n              </div>\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error;\n\n    const dropzoneClasses = {\n      dropzone: true,\n      'dropzone--drag-over': this._dragOver,\n      'dropzone--error': hasError,\n    };\n\n    const dropzoneLabel = this.label ? `${this.label} — ${this.labelDropzone}` : this.labelDropzone;\n\n    return html`\n      <div class=\"field\">\n        ${this.label\n          ? html`\n              <label part=\"label\" class=\"field__label\" id=${this._labelId} for=${this._dropzoneId}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n\n        <div\n          part=\"dropzone\"\n          class=${classMap(dropzoneClasses)}\n          id=${this._dropzoneId}\n          role=\"button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-label=${ifDefined(this._effectiveLabel || (!this.label ? dropzoneLabel : undefined))}\n          aria-labelledby=${ifDefined(\n            !this._effectiveLabel && this.label ? this._labelId : undefined,\n          )}\n          aria-disabled=${this.disabled ? 'true' : nothing}\n          aria-invalid=${hasError ? 'true' : nothing}\n          aria-describedby=${ifDefined(hasError ? this._errorId : undefined)}\n          @click=${this._handleDropzoneClick}\n          @keydown=${this._handleDropzoneKeyDown}\n          @dragover=${this._handleDragOver}\n          @dragleave=${this._handleDragLeave}\n          @drop=${this._handleDrop}\n        >\n          <slot>${this.labelDropzone}</slot>\n        </div>\n\n        <input\n          class=\"file-input\"\n          type=\"file\"\n          tabindex=\"-1\"\n          aria-hidden=\"true\"\n          accept=${ifDefined(this.accept || undefined)}\n          ?multiple=${this.multiple}\n          ?disabled=${this.disabled}\n          @change=${this._handleFileInputChange}\n        />\n\n        <slot name=\"file-list\" @slotchange=${this._handleFileListSlotChange}></slot>\n\n        ${this._renderFileList()}\n        ${hasError\n          ? html`\n              <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>\n            `\n          : nothing}\n\n        <div id=${this._liveId} class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${this._dragOver ? this.labelDragDetected : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-file-upload': HelixFileUpload;\n  }\n}\n"],"names":["helixFileUploadStyles","css","_nextFileUploadId","createIdCounter","HelixFileUpload","FormMixin","mixinDelegatesAria","HelixElement","name","progress","_a","_b","slot","changedProperties","errorEl","msg","disabled","_state","_mode","firstEntry","formData","entry","file","maxMb","tokens","token","baseType","rawFiles","candidateFiles","validFiles","invalidFiles","errorMessages","validationError","currentCount","capacity","allowedFiles","newEntries","overflow","index","percent","clamped","i","target","dropzone","dt","input","removedFile","_","removeButtons","targetIndex","targetButton","bytes","nothing","html","repeat","hasError","dropzoneClasses","dropzoneLabel","classMap","ifDefined","forcedColorsField","__decorateClass","property","state","query","customElement"],"mappings":";;;;;;;;;;AAEO,MAAMA,IAAwBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/{hx-icon-button-BmV97nqz.js → hx-icon-button-CGNdQSFM.js}

@@ -36,10 +36,7 @@ const v = f`
 
   .button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(
-        --hx-icon-button-focus-ring-color,
-        var(--hx-focus-ring-color, var(--hx-color-primary-500, #429797))
-      );
+      var(--hx-icon-button-focus-ring-color, var(--hx-focus-ring-color, #0f7078));
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -109,7 +106,7 @@ const v = f`
   .button--tertiary {
     --hx-icon-button-bg: transparent;
     --hx-icon-button-color: var(--hx-color-text-strong, #202b39);
-    --hx-icon-button-border-color: var(--hx-color-border-strong, #8e9c98);
+    --hx-icon-button-border-color: var(--hx-color-border-strong, #66787b);
   }
 
   .button--tertiary:hover {
@@ -304,4 +301,4 @@ r = o([
 export {
   r as H
 };
-//# sourceMappingURL=hx-icon-button-BmV97nqz.js.map
+//# sourceMappingURL=hx-icon-button-CGNdQSFM.js.map