@helixui/library 3.1.0 → 3.2.0-next.102

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-dropdown-BjDrPUq5.js → hx-dropdown-LyaRc8Rf.js}

@@ -1,9 +1,10 @@
 import { css as u, nothing as m, html as f } from "lit";
 import { property as d, state as g, query as p, customElement as b } from "lit/decorators.js";
-import { d as _ } from "./dev-warn-YlwPHjtX.js";
-import { H as v } from "./helix-element-BNEYeiys.js";
-import { c as y } from "./id-counter-DuX8vsui.js";
-const w = u`
+import { d as v } from "./dev-warn-YlwPHjtX.js";
+import { f as _ } from "./forced-colors-CTEDFRGa.js";
+import { H as y } from "./helix-element-BNEYeiys.js";
+import { c as w } from "./id-counter-DuX8vsui.js";
+const x = u`
   :host {
     display: inline-block;
     position: relative;
@@ -22,8 +23,8 @@ const w = u`
     position: fixed;
     z-index: var(--hx-dropdown-panel-z-index, 1000);
     min-width: var(--hx-dropdown-panel-min-width, 160px);
-    background: var(--hx-dropdown-panel-bg, var(--hx-color-neutral-0, #ffffff));
-    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-neutral-200, #e2e8f0));
+    background: var(--hx-dropdown-panel-bg, var(--hx-color-surface-default, #ffffff));
+    border: 1px solid var(--hx-dropdown-panel-border-color, var(--hx-color-border-default, #d6dbd5));
     border-radius: var(--hx-dropdown-panel-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-dropdown-panel-shadow,
@@ -59,15 +60,15 @@ const w = u`
     }
   }
 `;
-var x = Object.defineProperty, k = Object.getOwnPropertyDescriptor, a = (e, t, n, i) => {
-  for (var s = i > 1 ? void 0 : i ? k(t, n) : t, o = e.length - 1, l; o >= 0; o--)
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, t, n, i) => {
+  for (var s = i > 1 ? void 0 : i ? C(t, n) : t, o = e.length - 1, l; o >= 0; o--)
     (l = e[o]) && (s = (i ? l(t, n, s) : l(s)) || s);
-  return i && s && x(t, n, s), s;
+  return i && s && k(t, n, s), s;
 };
-const C = y("hx-dropdown");
-let r = class extends v {
+const E = w("hx-dropdown");
+let r = class extends y {
   constructor() {
-    super(...arguments), this.open = !1, this.placement = "bottom-start", this.label = "Menu", this.disabled = !1, this.distance = 4, this._panelVisible = !1, this._documentListenerAttached = !1, this._panelId = `${C()}-panel`, this._handleKeydown = (e) => {
+    super(...arguments), this.open = !1, this.placement = "bottom-start", this.label = "Menu", this.disabled = !1, this.distance = 4, this._panelVisible = !1, this._documentListenerAttached = !1, this._panelId = `${E()}-panel`, this._handleKeydown = (e) => {
       e.key === "Escape" && this.open ? (e.stopPropagation(), this._hide(!0)) : e.key === "Tab" && this.open ? this._hide(!1) : this.open && (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") && (e.preventDefault(), this._handleMenuNavigation(e.key));
     }, this._handleOutsideClick = (e) => {
       e.composedPath().includes(this) || this._hide();
@@ -199,7 +200,7 @@ let r = class extends v {
   /** @internal */
   _onPanelSlotChange(e) {
     const i = e.target.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() !== "hx-dropdown-item");
-    i.length > 0 && _(
+    i.length > 0 && v(
       "hx-dropdown",
       `Default slot should contain only hx-dropdown-item elements. Found unexpected: ${i.map((s) => `<${s.tagName.toLowerCase()}>`).join(", ")}. Non-hx-dropdown-item children will be included in keyboard navigation incorrectly.`
     );
@@ -228,7 +229,7 @@ let r = class extends v {
     }
   }
 };
-r.styles = [w];
+r.styles = [x, _];
 a([
   d({ type: Boolean, reflect: !0 })
 ], r.prototype, "open", 2);
@@ -259,4 +260,4 @@ r = a([
 export {
   r as H
 };
-//# sourceMappingURL=hx-dropdown-BjDrPUq5.js.map
+//# sourceMappingURL=hx-dropdown-LyaRc8Rf.js.map

package/dist/shared/hx-dropdown-LyaRc8Rf.js.map

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

package/dist/shared/{hx-field-Dp3qQMut.js → hx-field-B3Qo8OLS.js}

@@ -1,9 +1,9 @@
 import { css as p, nothing as c, html as n } from "lit";
 import { property as o, state as f, customElement as _ } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { d as x } from "./dev-warn-YlwPHjtX.js";
-import { H as b } from "./helix-element-BNEYeiys.js";
-import { c as m } from "./id-counter-DuX8vsui.js";
+import { classMap as x } from "lit/directives/class-map.js";
+import { d as u } from "./dev-warn-YlwPHjtX.js";
+import { H as m } from "./helix-element-BNEYeiys.js";
+import { c as b } from "./id-counter-DuX8vsui.js";
 const v = p`
   :host {
     display: block;
@@ -52,13 +52,13 @@ const v = p`
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #202b39));
     line-height: var(--hx-line-height-normal, 1.5);
     cursor: pointer;
   }
 
   .field__required-marker {
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
@@ -102,24 +102,24 @@ const v = p`
 
   .field__help-text {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-help-text-color, var(--hx-color-neutral-500, #64748b));
+    color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #4a5362));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   .field__error {
     font-size: var(--hx-font-size-xs, 0.75rem);
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
     line-height: var(--hx-line-height-normal, 1.5);
   }
 
   /* ─── Error State ─── */
 
   .field--error .field__label {
-    color: var(--hx-field-error-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));
   }
 
   .field--error .field__control {
-    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #dc2626));
+    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #e5493e));
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.25rem);
   }
@@ -165,11 +165,11 @@ var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (e, t, i
     (d = e[h]) && (s = (a ? d(t, i, s) : d(s)) || s);
   return a && s && y(t, i, s), s;
 };
-const S = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA", "BUTTON"]), E = m("hx-field");
+const S = /* @__PURE__ */ new Set(["INPUT", "SELECT", "TEXTAREA", "BUTTON"]), E = b("hx-field");
 function C(e) {
   return S.has(e.tagName) || e.tagName.includes("-");
 }
-let r = class extends b {
+let r = class extends m {
   constructor() {
     super(...arguments), this.label = "", this.required = !1, this.error = "", this.helpText = "", this.disabled = !1, this.size = "md", this.layout = "column", this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._fieldId = E(), this._helpTextId = `${this._fieldId}-help`, this._errorId = `${this._fieldId}-error`, this._a11yDescId = `${this._fieldId}-desc`, this._slottedControl = null, this._a11yDescEl = null;
   }
@@ -196,7 +196,7 @@ let r = class extends b {
     super.disconnectedCallback(), (e = this._a11yDescEl) == null || e.remove(), this._a11yDescEl = null, this._slottedControl && (this._slottedControl.removeAttribute("aria-label"), this._slottedControl.removeAttribute("aria-required"), this._slottedControl.removeAttribute("aria-invalid"), this._slottedControl.removeAttribute("aria-describedby"), this._slottedControl = null);
   }
   updated(e) {
-    super.updated(e), e.has("size") && (["sm", "md", "lg"].includes(this.size) || x(
+    super.updated(e), e.has("size") && (["sm", "md", "lg"].includes(this.size) || u(
       "hx-field",
       `Invalid hx-size value: "${this.size}". Expected "sm" | "md" | "lg". Defaulting to "md".`
     )), this._syncA11yDescEl(), this._syncSlottedControl();
@@ -264,7 +264,7 @@ let r = class extends b {
       "field--layout-inline": this.layout === "inline"
     };
     return n`
-      <div part="field" class=${u(i)}>
+      <div part="field" class=${x(i)}>
         <!-- Label -->
         <div class="field__label-wrapper">
           <slot name="label" @slotchange=${this._handleLabelSlotChange}>
@@ -352,4 +352,4 @@ r = l([
 export {
   r as H
 };
-//# sourceMappingURL=hx-field-Dp3qQMut.js.map
+//# sourceMappingURL=hx-field-B3Qo8OLS.js.map

package/dist/shared/hx-field-B3Qo8OLS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-field-B3Qo8OLS.js","sources":["../../src/components/hx-field/hx-field.styles.ts","../../src/components/hx-field/hx-field.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFieldStyles = 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-field-gap, var(--hx-space-1, 0.25rem));\n    font-family: var(--hx-field-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Inline Layout ─── */\n\n  .field--layout-inline {\n    flex-direction: row;\n    align-items: baseline;\n    flex-wrap: wrap;\n  }\n\n  .field--layout-inline .field__label-wrapper {\n    display: flex;\n    align-items: baseline;\n    flex-shrink: 0;\n    min-width: 8rem;\n  }\n\n  /* ─── Label ─── */\n\n  .field__label-wrapper {\n    display: contents;\n  }\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-field-label-color, var(--hx-color-text-strong, #202b39));\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: pointer;\n  }\n\n  .field__required-marker {\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Control Wrapper ─── */\n\n  .field__control {\n    display: block;\n  }\n\n  /* ─── Error Slot Announcer (visually hidden live region) ─── */\n\n  .field__error-slot-announcer {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) .field__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='lg']) .field__label {\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  :host([hx-size='sm']) .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='lg']) .field__help-text {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .field__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-field-help-text-color, var(--hx-color-text-muted, #4a5362));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .field__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* ─── Error State ─── */\n\n  .field--error .field__label {\n    color: var(--hx-field-error-color, var(--hx-color-error-text, #c92a2a));\n  }\n\n  .field--error .field__control {\n    outline: 2px solid var(--hx-field-error-color, var(--hx-color-error-500, #e5493e));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .field__label {\n      color: CanvasText;\n    }\n\n    .field__required-marker {\n      color: LinkText;\n    }\n\n    .field--error .field__label {\n      color: LinkText;\n    }\n\n    .field--error .field__control {\n      outline-color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .field__label {\n      color: GrayText;\n    }\n\n    .field__help-text {\n      color: GrayText;\n    }\n\n    .field__error {\n      color: LinkText;\n    }\n  }\n`;\n","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { helixFieldStyles } from './hx-field.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\n/** Native form control tag names that can receive ARIA attributes. */\nconst FORM_CONTROL_TAGS = new Set(['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON']);\n\nconst _nextFieldId = createIdCounter('hx-field');\n\n/** Returns true if the element is a native form control or a custom element. */\nfunction isFormControl(el: Element): el is HTMLElement {\n  return FORM_CONTROL_TAGS.has(el.tagName) || el.tagName.includes('-');\n}\n\n/**\n * Layout wrapper providing consistent label + input + help text + validation\n * message structure for any form control. Use this when wrapping non-HELiX\n * form controls or native HTML elements in the HELiX form field pattern.\n *\n * This component is NOT form-associated — it is a pure visual layout wrapper.\n *\n * **Light DOM side effect:** This component injects a visually-hidden `<span>`\n * into its light DOM children for ARIA describedby linkage across the shadow\n * DOM boundary. This span has `id=\"${fieldId}-desc\"` and is removed on\n * `disconnectedCallback`. This is an intentional, documented accessibility\n * mechanism.\n *\n * @summary Layout wrapper for label, control, help text, and error message.\n *\n * @tag hx-field\n *\n * @slot - The form control element (native or custom).\n * @slot label - Custom label content (overrides the label property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n * @slot error - Custom error content (overrides the error property).\n * @slot description - Additional descriptive content above the control.\n *\n * @csspart field - The outer field container.\n * @csspart label - The label element.\n * @csspart control - The wrapper around slotted content.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart required-indicator - The required asterisk span.\n *\n * @cssprop [--hx-field-label-color=var(--hx-color-neutral-700)] - Label color.\n * @cssprop [--hx-field-error-color=var(--hx-color-error-500)] - Error color.\n * @cssprop [--hx-field-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-field-gap=var(--hx-space-1, 0.25rem)] - Gap between field segments.\n * @cssprop [--hx-field-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-font-family-sans] - Font family.\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-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-neutral-500] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n */\n@customElement('hx-field')\nexport class HelixField extends HelixElement {\n  static override styles = [helixFieldStyles];\n\n  // ─── Properties ───\n\n  /**\n   * The visible label text for the field.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the field is required. Shows a required indicator on the label.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the control for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Visual disabled state applied via opacity. Does not affect slotted control\n   * interactivity — set disabled on the slotted control directly.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Size variant controlling label and help text font sizes.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Layout variant. 'column' stacks label above control; 'inline' places them side-by-side.\n   * @attr layout\n   */\n  @property({ type: String, reflect: true })\n  layout: 'column' | 'inline' = 'column';\n\n  // ─── Slot Tracking ───\n\n  /**\n   * Tracks whether any content is assigned to the label slot, used to conditionally render the label property.\n   * @internal\n   */\n  @state() private _hasLabelSlot = false;\n\n  /**\n   * Tracks whether any content is assigned to the error slot, used to toggle error state rendering.\n   * @internal\n   */\n  @state() private _hasErrorSlot = false;\n\n  /**\n   * Tracks whether any content is assigned to the help-text slot, used to toggle help text rendering.\n   * @internal\n   */\n  @state() private _hasHelpSlot = false;\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLabelSlot = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedElements().length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpSlot = slot.assignedElements().length > 0;\n  }\n\n  // ─── Unique IDs for Accessibility ───\n\n  /**\n   * Unique ID for this field instance, used as a base for all derived accessibility IDs.\n   * @internal\n   */\n  private _fieldId = _nextFieldId();\n\n  /**\n   * ID for the help text element, allowing aria-describedby to reference it.\n   * @internal\n   */\n  private _helpTextId = `${this._fieldId}-help`;\n\n  /**\n   * ID for the error message element, allowing aria-describedby to reference it.\n   * @internal\n   */\n  private _errorId = `${this._fieldId}-error`;\n\n  /**\n   * ID for the light-DOM description span injected for cross-shadow-root aria-describedby linkage.\n   * @internal\n   */\n  private _a11yDescId = `${this._fieldId}-desc`;\n\n  // ─── A11y: Slotted control tracking + light-DOM description element ───\n\n  /**\n   * The first form control in the default slot. We set aria attributes on this\n   * element to bridge the shadow DOM accessibility boundary.\n   * @internal\n   */\n  private _slottedControl: HTMLElement | null = null;\n\n  /**\n   * A visually-hidden span injected into the host's light DOM (assigned to the\n   * default slot). Because it lives in the same document as the slotted input,\n   * `aria-describedby` can reference its ID without cross-shadow-root IDREF\n   * limitations.\n   *\n   * **Documented side effect:** This element is intentionally injected into the\n   * component's light DOM children. It is invisible to users but present in the\n   * accessibility tree. It is removed in `disconnectedCallback`. Consumers\n   * should not remove or modify this span (identifiable by its `id` ending in\n   * `-desc`).\n   * @internal\n   */\n  private _a11yDescEl: HTMLElement | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._ensureA11yDescEl();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._a11yDescEl?.remove();\n    this._a11yDescEl = null;\n    // Remove aria attributes we set on the slotted control\n    if (this._slottedControl) {\n      this._slottedControl.removeAttribute('aria-label');\n      this._slottedControl.removeAttribute('aria-required');\n      this._slottedControl.removeAttribute('aria-invalid');\n      this._slottedControl.removeAttribute('aria-describedby');\n      this._slottedControl = null;\n    }\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n\n    // P2-01: Warn on invalid size values\n    if (changedProps.has('size')) {\n      const validSizes = ['sm', 'md', 'lg'];\n      if (!validSizes.includes(this.size)) {\n        devWarn(\n          'hx-field',\n          `Invalid hx-size value: \"${this.size}\". Expected \"sm\" | \"md\" | \"lg\". Defaulting to \"md\".`,\n        );\n      }\n    }\n\n    this._syncA11yDescEl();\n    this._syncSlottedControl();\n  }\n\n  /** Creates a visually-hidden span in light DOM used as the ARIA description anchor. */\n  /** @internal */\n  private _ensureA11yDescEl(): void {\n    if (this._a11yDescEl) return;\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document === 'undefined') return;\n    const span = document.createElement('span');\n    span.id = this._a11yDescId;\n    // Visually hidden but present in the accessibility tree\n    span.style.cssText =\n      'position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';\n    this.appendChild(span);\n    this._a11yDescEl = span;\n  }\n\n  /** Keeps the light-DOM description span in sync with the current error/help text. */\n  /** @internal */\n  private _syncA11yDescEl(): void {\n    if (!this._a11yDescEl) return;\n    const hasError = !!this.error || this._hasErrorSlot;\n    if (hasError && this.error) {\n      this._a11yDescEl.textContent = this.error;\n    } else if (this.helpText) {\n      this._a11yDescEl.textContent = this.helpText;\n    } else {\n      this._a11yDescEl.textContent = '';\n    }\n  }\n\n  /** Tracks the first form control assigned to the default slot. */\n  /** @internal */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const assigned = slot.assignedElements();\n    this._slottedControl = assigned.find(isFormControl) ?? null;\n    this._syncSlottedControl();\n  }\n\n  /**\n   * Focuses the slotted form control when the shadow DOM label is clicked.\n   * The shadow `<label>` cannot use `for`/`id` to link to a slotted input\n   * across the shadow boundary, so we handle focus programmatically.\n   */\n  /** @internal */\n  private _handleLabelClick(_e: Event): void {\n    this._slottedControl?.focus();\n  }\n\n  /**\n   * Applies ARIA attributes to the slotted form control, bridging the\n   * shadow DOM accessibility boundary.\n   *\n   * - aria-label: associates the field label with the control\n   * - aria-required: communicates required state to AT\n   * - aria-invalid: communicates error state to AT\n   * - aria-describedby: points to the light-DOM description span\n   *\n   * **Skip conditions:**\n   * - `HX-*` elements manage their own ARIA attributes; bridging is skipped.\n   * - Elements with `data-aria-managed` attribute opt out of ARIA mutation;\n   *   bridging is skipped entirely for those elements.\n   */\n  /** @internal */\n  private _syncSlottedControl(): void {\n    const control = this._slottedControl;\n    if (!control) return;\n\n    // hx-* elements manage their own ARIA attributes; skip bridging for them\n    if (control.tagName.startsWith('HX-')) return;\n\n    // Elements that declare data-aria-managed opt out of ARIA mutation\n    if (control.hasAttribute('data-aria-managed')) return;\n\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasDesc = !!(this.error || this.helpText || this._hasErrorSlot || this._hasHelpSlot);\n\n    // Label association: aria-label bridges the shadow DOM boundary\n    if (this.label && !this._hasLabelSlot) {\n      control.setAttribute('aria-label', this.label);\n    } else {\n      control.removeAttribute('aria-label');\n    }\n\n    // Required state\n    if (this.required) {\n      control.setAttribute('aria-required', 'true');\n    } else {\n      control.removeAttribute('aria-required');\n    }\n\n    // Invalid state\n    if (hasError) {\n      control.setAttribute('aria-invalid', 'true');\n    } else {\n      control.removeAttribute('aria-invalid');\n    }\n\n    // Description (error or help text) via light-DOM span\n    if (hasDesc) {\n      control.setAttribute('aria-describedby', this._a11yDescId);\n    } else {\n      control.removeAttribute('aria-describedby');\n    }\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasHelp = !!this.helpText || this._hasHelpSlot;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--size-sm': this.size === 'sm',\n      'field--size-md': this.size === 'md',\n      'field--size-lg': this.size === 'lg',\n      'field--layout-inline': this.layout === 'inline',\n    };\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <div class=\"field__label-wrapper\">\n          <slot name=\"label\" @slotchange=${this._handleLabelSlotChange}>\n            ${this.label && !this._hasLabelSlot\n              ? html`\n                  <label part=\"label\" class=\"field__label\" @click=${this._handleLabelClick}>\n                    ${this.label}\n                    ${this.required\n                      ? html`<span\n                          part=\"required-indicator\"\n                          class=\"field__required-marker\"\n                          aria-hidden=\"true\"\n                          >*</span\n                        >`\n                      : nothing}\n                  </label>\n                `\n              : nothing}\n          </slot>\n        </div>\n\n        <!-- Description -->\n        <slot name=\"description\"></slot>\n\n        <!-- Control (default slot) -->\n        <div part=\"control\" class=\"field__control\">\n          <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n        </div>\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${this.error\n            ? html`\n                <div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                  ${this.error}\n                </div>\n              `\n            : nothing}\n        </slot>\n\n        <!-- Slotted error live region — ensures slotted error content is announced -->\n        <div aria-live=\"assertive\" class=\"field__error-slot-announcer\"></div>\n\n        <!-- Help text (always in DOM so slot detection works; hidden when no help or error is shown) -->\n        <div\n          part=\"help-text\"\n          class=\"field__help-text\"\n          id=${this._helpTextId}\n          ?hidden=${!hasHelp || hasError}\n        >\n          <slot name=\"help-text\" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-field': HelixField;\n  }\n}\n"],"names":["helixFieldStyles","css","FORM_CONTROL_TAGS","_nextFieldId","createIdCounter","isFormControl","el","HelixField","HelixElement","slot","_a","changedProps","devWarn","span","assigned","_e","control","hasError","hasDesc","hasHelp","fieldClasses","html","classMap","nothing","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/{hx-field-label-BC8QViXv.js → hx-field-label-BVRyyKeh.js}

@@ -1,6 +1,7 @@
 import { css as d, html as a, nothing as h } from "lit";
 import { property as c, customElement as f } from "lit/decorators.js";
-import { H as x } from "./helix-element-BNEYeiys.js";
+import { a as x } from "./forced-colors-CTEDFRGa.js";
+import { H as m } from "./helix-element-BNEYeiys.js";
 const u = d`
   :host {
     display: block;
@@ -12,20 +13,20 @@ const u = d`
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));
     font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));
-    color: var(--hx-field-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-field-label-color, var(--hx-color-text-strong, #313e4b));
     line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));
     font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));
   }
 
   .required-indicator {
-    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #b91c1c));
+    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #c92a2a));
     font-weight: var(--hx-font-weight-bold, 700);
   }
 
   .optional-indicator {
     font-size: var(--hx-font-size-xs, 0.75rem);
     font-weight: var(--hx-font-weight-normal, 400);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #66787b);
   }
 
   /* ─── High Contrast Mode (forced-colors) ─── */
@@ -61,7 +62,7 @@ var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (i, r, o
     (p = i[s]) && (e = (l ? p(r, o, e) : p(e)) || e);
   return l && e && v(r, o, e), e;
 };
-let t = class extends x {
+let t = class extends m {
   constructor() {
     super(...arguments), this.for = "", this.required = !1, this.optional = !1;
   }
@@ -73,7 +74,7 @@ let t = class extends x {
     return this.for ? a`<label part="base" class="label" for=${this.for}>${o}</label>` : a`<span part="base" class="label">${o}</span>`;
   }
 };
-t.styles = [u];
+t.styles = [u, x];
 n([
   c({ type: String })
 ], t.prototype, "for", 2);
@@ -89,4 +90,4 @@ t = n([
 export {
   t as H
 };
-//# sourceMappingURL=hx-field-label-BC8QViXv.js.map
+//# sourceMappingURL=hx-field-label-BVRyyKeh.js.map

package/dist/shared/hx-field-label-BVRyyKeh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-field-label-BVRyyKeh.js","sources":["../../src/components/hx-field-label/hx-field-label.styles.ts","../../src/components/hx-field-label/hx-field-label.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixFieldLabelStyles = css`\n  :host {\n    display: block;\n  }\n\n  .label {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--hx-space-1, 0.25rem);\n    font-size: var(--hx-font-label-size, var(--hx-font-size-sm, 0.875rem));\n    font-weight: var(--hx-font-label-weight, var(--hx-font-weight-medium, 500));\n    color: var(--hx-field-label-color, var(--hx-color-text-strong, #313e4b));\n    line-height: var(--hx-font-label-line-height, var(--hx-line-height-normal, 1.5));\n    font-family: var(--hx-font-label-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  .required-indicator {\n    color: var(--hx-field-label-required-color, var(--hx-color-error-text, #c92a2a));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  .optional-indicator {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-normal, 400);\n    color: var(--hx-color-text-muted, #66787b);\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .label {\n      color: CanvasText;\n    }\n\n    .required-indicator {\n      color: LinkText;\n    }\n\n    .optional-indicator {\n      color: GrayText;\n    }\n  }\n\n  .visually-hidden {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixFieldLabelStyles } from './hx-field-label.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/**\n * Standardized label for form fields. Used as a consistent sub-component\n * for hx-field and other form field components.\n *\n * ## Label Association\n *\n * **For inputs in light DOM (the typical consumer deployment):** Use\n * `aria-labelledby` pointing to the host element's `id`. The `for` attribute\n * renders a native `<label for=\"...\">` inside shadow DOM, but the HTML spec\n * scopes `for`/`id` lookup to the same tree — a shadow-DOM label cannot\n * associate with a light-DOM input. Example:\n *\n * ```html\n * <hx-field-label id=\"label-email\">Email</hx-field-label>\n * <input id=\"email\" aria-labelledby=\"label-email\" />\n * ```\n *\n * **For inputs in the same shadow root:** The `for` attribute works as\n * expected for direct label association.\n *\n * When `for` is unset, renders a `<span>` that can be referenced via\n * `aria-labelledby` for labeling controls across the shadow DOM boundary.\n *\n * @summary Standardized label for form fields.\n *\n * @tag hx-field-label\n *\n * @slot - Label text content.\n * @slot required-indicator - Custom required marker (defaults to \"*\").\n *\n * @csspart base - The label or span element.\n * @csspart required-indicator - The required indicator wrapper.\n * @csspart optional-indicator - The optional text indicator.\n *\n * @cssprop [--hx-field-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-field-label-required-color=var(--hx-color-danger, var(--hx-color-error-text, #b91c1c))] - Required indicator color.\n * @cssprop [--hx-font-label-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-font-label-weight=var(--hx-font-weight-medium)] - Label font weight.\n * @cssprop [--hx-font-label-line-height=var(--hx-line-height-normal)] - Label line height.\n * @cssprop [--hx-font-label-family=var(--hx-font-family-sans)] - Label 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-font-family-sans] - Font family.\n * @cssprop [--hx-color-error-text] - Color.\n * @cssprop [--hx-font-weight-bold] - Font weight.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-font-weight-normal] - Font weight.\n * @cssprop [--hx-color-neutral-500] - Color.\n */\n@customElement('hx-field-label')\nexport class HelixFieldLabel extends HelixElement {\n  static override styles = [helixFieldLabelStyles, forcedColorsSurface];\n\n  /**\n   * The ID of the associated form control. When set, renders a native\n   * `<label for=\"...\">` element for direct label association.\n   * @attr for\n   */\n  @property({ type: String })\n  for = '';\n\n  /**\n   * Whether the associated field is required. Shows a required indicator (*).\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the associated field is optional. Shows \"(optional)\" text.\n   * @attr optional\n   */\n  @property({ type: Boolean, reflect: true })\n  optional = false;\n\n  override render() {\n    const requiredIndicator = this.required\n      ? html`<span part=\"required-indicator\" class=\"required-indicator\"\n          ><span aria-hidden=\"true\"><slot name=\"required-indicator\">*</slot></span\n          ><span class=\"visually-hidden\">required</span></span\n        >`\n      : nothing;\n\n    const optionalIndicator = this.optional\n      ? html`<span part=\"optional-indicator\" class=\"optional-indicator\">(optional)</span>`\n      : nothing;\n\n    const content = html`<slot></slot>${requiredIndicator}${optionalIndicator}`;\n\n    if (this.for) {\n      return html`<label part=\"base\" class=\"label\" for=${this.for}>${content}</label>`;\n    }\n\n    return html`<span part=\"base\" class=\"label\">${content}</span>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-field-label': HelixFieldLabel;\n  }\n}\n"],"names":["helixFieldLabelStyles","css","HelixFieldLabel","HelixElement","requiredIndicator","html","nothing","optionalIndicator","content","forcedColorsSurface","__decorateClass","property","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;;;;;;AC0D9B,IAAMC,IAAN,cAA8BC,EAAa;AAAA,EAA3C,cAAA;AAAA,UAAA,GAAA,SAAA,GASL,KAAA,MAAM,IAON,KAAA,WAAW,IAOX,KAAA,WAAW;AAAA,EAAA;AAAA,EAEF,SAAS;AAChB,UAAMC,IAAoB,KAAK,WAC3BC;AAAA;AAAA;AAAA,aAIAC,GAEEC,IAAoB,KAAK,WAC3BF,kFACAC,GAEEE,IAAUH,iBAAoBD,CAAiB,GAAGG,CAAiB;AAEzE,WAAI,KAAK,MACAF,yCAA4C,KAAK,GAAG,IAAIG,CAAO,aAGjEH,oCAAuCG,CAAO;AAAA,EACvD;AACF;AA7CaN,EACK,SAAS,CAACF,GAAuBS,CAAmB;AAQpEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfT,EASX,WAAA,OAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAf/BT,EAgBX,WAAA,YAAA,CAAA;AAOAQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/BT,EAuBX,WAAA,YAAA,CAAA;AAvBWA,IAANQ,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBV,CAAA;"}