@helixui/library 3.3.1-next.118 → 3.4.0-next.121

package/dist/shared/hx-banner-D3DzpfcP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-banner-D3DzpfcP.js","sources":["../../src/components/hx-banner/hx-banner.styles.ts","../../src/components/hx-banner/hx-banner.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * hx-banner styles.\n *\n * Component-tier tokens with two-level var() fallback:\n *   var(--hx-banner-{prop}, var(--hx-color-{semantic}, #hex))\n * Inner hex fallbacks track the \"precision cool\" palette (3.2.0):\n *   info-50 = #EFF6FE, info-200 = #BEDCFC, info-500 = #0C8BEB, info-800 = #064172,\n *   success-50 = #EAFAEC, success-200 = #BAE6C2, success-500 = #3B9E58, success-800 = #0B4D23,\n *   warning-50 = #FFF3EA, warning-200 = #FACFAE, warning-500 = #C2711C, warning-800 = #603301,\n *   error-50 = #FFF2F0, error-200 = #FCCBC4, error-500 = #E5493E, error-800 = #7A090A,\n *   primary-400 = #6AB1B1.\n */\nexport const helixBannerStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n    position: var(--hx-banner-position, sticky);\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: var(--hx-banner-z-index, 100);\n  }\n\n  :host(:not([open])) {\n    display: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* Visually hidden — ensures variant is never conveyed by color alone.   */\n  /* Always rendered so screen readers can identify the banner severity.   */\n\n  .banner__severity-label {\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  /* ─── Banner Container ─── */\n\n  .banner {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-banner-gap, var(--hx-space-3, 0.75rem));\n    padding: var(--hx-banner-padding, var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem));\n    background-color: var(--hx-banner-bg, var(--hx-color-info-50, #eff6fe));\n    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));\n    border-bottom: var(--hx-banner-border-width, var(--hx-border-width-thin, 1px)) solid\n      var(--hx-banner-border-color, var(--hx-color-info-200, #bedcfc));\n    font-family: var(--hx-banner-font-family, var(--hx-font-family-sans, sans-serif));\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    line-height: var(--hx-line-height-normal, 1.5);\n    width: 100%;\n  }\n\n  /* ─── Icon ─── */\n\n  .banner__icon {\n    display: flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-banner-icon-color, var(--hx-color-info-500, #0c8beb));\n  }\n\n  .banner__icon svg {\n    width: var(--hx-space-5, 1.25rem);\n    height: var(--hx-space-5, 1.25rem);\n    fill: currentColor;\n  }\n\n  /* ─── Message ─── */\n\n  .banner__message {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* ─── Action Link ─── */\n\n  .banner__action {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    color: var(--hx-banner-action-color, var(--hx-banner-color, var(--hx-color-info-800, #064172)));\n    font-weight: var(--hx-font-weight-semibold, 600);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n    cursor: pointer;\n    background: transparent;\n    border: none;\n    padding: 0;\n    font-size: inherit;\n    font-family: inherit;\n  }\n\n  .banner__action:hover {\n    opacity: var(--hx-opacity-90, 0.9);\n  }\n\n  .banner__action:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-banner-action-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n  }\n\n  /* ─── Close Button ─── */\n  /* Minimum 44px touch target per WCAG 2.5.8 (Target Size Minimum, AA) and */\n  /* Apple HIG / Google Material guidelines. Uses absolute px units to ensure */\n  /* the target size is independent of the consumer's base font size.         */\n\n  .banner__close-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    min-width: var(--hx-touch-target-size, 44px);\n    min-height: var(--hx-touch-target-size, 44px);\n    margin-inline-start: auto;\n    padding: 0;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background: transparent;\n    color: var(--hx-banner-color, var(--hx-color-info-800, #064172));\n    cursor: pointer;\n    font-size: var(--hx-font-size-md, 1rem);\n    line-height: 1;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      opacity var(--hx-transition-fast, 150ms ease);\n    opacity: var(--hx-opacity-75, 0.75);\n  }\n\n  .banner__close-button:hover {\n    opacity: var(--hx-opacity-100, 1);\n    /* color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+.   */\n    /* Falls back to transparent (no hover background) in older environments.  */\n    background-color: color-mix(in srgb, currentColor 10%, transparent);\n  }\n\n  .banner__close-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(--hx-banner-close-btn-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n    opacity: 1;\n  }\n\n  .banner__close-button svg {\n    width: var(--hx-space-4, 1rem);\n    height: var(--hx-space-4, 1rem);\n    fill: currentColor;\n  }\n\n  /* ─── Variant: info ─── */\n\n  :host([variant='info']) .banner,\n  :host(:not([variant])) .banner {\n    --hx-banner-bg: var(--hx-color-info-50, #eff6fe);\n    --hx-banner-border-color: var(--hx-color-info-200, #bedcfc);\n    --hx-banner-color: var(--hx-color-info-800, #064172);\n    --hx-banner-icon-color: var(--hx-color-info-500, #0c8beb);\n  }\n\n  /* ─── Variant: success ─── */\n\n  :host([variant='success']) .banner {\n    --hx-banner-bg: var(--hx-color-success-50, #eafaec);\n    --hx-banner-border-color: var(--hx-color-success-200, #bae6c2);\n    --hx-banner-color: var(--hx-color-success-800, #0b4d23);\n    --hx-banner-icon-color: var(--hx-color-success-500, #3b9e58);\n  }\n\n  /* ─── Variant: warning ─── */\n\n  :host([variant='warning']) .banner {\n    --hx-banner-bg: var(--hx-color-warning-50, #fff3ea);\n    --hx-banner-border-color: var(--hx-color-warning-200, #facfae);\n    --hx-banner-color: var(--hx-color-warning-800, #603301);\n    --hx-banner-icon-color: var(--hx-color-warning-500, #c2711c);\n  }\n\n  /* ─── Variant: error ─── */\n\n  :host([variant='error']) .banner {\n    --hx-banner-bg: var(--hx-color-error-50, #fff2f0);\n    --hx-banner-border-color: var(--hx-color-error-200, #fccbc4);\n    --hx-banner-color: var(--hx-color-error-800, #7a090a);\n    --hx-banner-icon-color: var(--hx-color-error-500, #e5493e);\n  }\n\n  /* ─── Position: fixed ─── */\n  /* When position=\"fixed\", override the host-level CSS custom property.    */\n  /* The :host rule above sets position via var(--hx-banner-position).      */\n  /* We use an attribute selector to override it cleanly without duplication. */\n\n  :host([position='fixed']) {\n    position: fixed;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .banner__close-button {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced Colors (Windows High Contrast) ─── */\n  /* Belt-and-suspenders: rich per-class HC overrides PLUS the forcedColorsSurface mixin. */\n\n  @media (forced-colors: active) {\n    .banner {\n      border-bottom-color: CanvasText;\n    }\n\n    .banner__icon svg {\n      fill: CanvasText;\n    }\n\n    .banner__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 } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { HelixElement } from '../../base/index.js';\nimport { helixBannerStyles } from './hx-banner.styles.js';\nimport { forcedColorsSurface } from '../../styles/forced-colors.js';\n\n/** Banner variant determines visual styling and ARIA semantics. */\nexport type BannerVariant = 'info' | 'success' | 'warning' | 'error';\n\n/** Banner position determines CSS positioning behavior. */\nexport type BannerPosition = 'sticky' | 'fixed';\n\n/**\n * A full-width page-level banner for persistent notifications and announcements.\n * Designed for healthcare applications requiring prominent system-level messaging.\n *\n * @summary Full-width page-level banner for persistent notifications with variant-based styling and ARIA live regions.\n *\n * @tag hx-banner\n *\n * @slot - Default slot for banner message content.\n * @slot action - Optional slot to override the built-in action link with custom content.\n *\n * @fires {CustomEvent<{reason: string}>} hx-dismiss - Dispatched when the user dismisses the banner.\n *\n * @csspart banner - The outer banner container.\n * @csspart icon - The icon container.\n * @csspart message - The message content area.\n * @csspart action - The action link element (only rendered when action-label and action-href are set).\n * @csspart close-button - The dismiss button (only rendered when dismissible).\n *\n * @cssprop [--hx-banner-bg=var(--hx-color-info-50)] - Banner background color.\n * @cssprop [--hx-banner-color=var(--hx-color-info-800)] - Banner text color.\n * @cssprop [--hx-banner-border-color=var(--hx-color-info-200)] - Banner bottom border color.\n * @cssprop [--hx-banner-border-width=var(--hx-border-width-thin)] - Banner bottom border width.\n * @cssprop [--hx-banner-padding=var(--hx-space-3) var(--hx-space-4)] - Banner padding.\n * @cssprop [--hx-banner-gap=var(--hx-space-3)] - Gap between banner elements.\n * @cssprop [--hx-banner-icon-color=var(--hx-color-info-500)] - Banner icon color.\n * @cssprop [--hx-banner-font-family=var(--hx-font-family-sans)] - Banner font family.\n * @cssprop [--hx-banner-action-color=var(--hx-banner-color)] - Action link color.\n * @cssprop [--hx-banner-position=sticky] - CSS position value (sticky or fixed).\n * @cssprop [--hx-banner-z-index=100] - Banner z-index for stacking context.\n * @cssprop [--hx-touch-target-size=44px] - Minimum touch target size for the close button.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-color-info-50] - Color.\n * @cssprop [--hx-color-info-800] - Color.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-info-200] - Color.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-line-height-normal] - Line height.\n * @cssprop [--hx-color-info-500] - Color.\n * @cssprop [--hx-space-5] - Spacing token.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-opacity-90] - Opacity.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-opacity-75] - Opacity.\n * @cssprop [--hx-opacity-100] - Opacity.\n * @cssprop [--hx-color-success-50] - Color.\n * @cssprop [--hx-color-success-200] - Color.\n * @cssprop [--hx-color-success-800] - Color.\n * @cssprop [--hx-color-success-500] - Color.\n * @cssprop [--hx-color-warning-50] - Color.\n * @cssprop [--hx-color-warning-200] - Color.\n * @cssprop [--hx-color-warning-800] - Color.\n * @cssprop [--hx-color-warning-500] - Color.\n * @cssprop [--hx-color-error-50] - Color.\n * @cssprop [--hx-color-error-200] - Color.\n * @cssprop [--hx-color-error-800] - Color.\n * @cssprop [--hx-color-error-500] - Color.\n */\n@customElement('hx-banner')\nexport class HelixBanner extends HelixElement {\n  static override styles = [helixBannerStyles, forcedColorsSurface];\n\n  // ─── Properties ───\n\n  /**\n   * Visual variant of the banner that determines colors and ARIA semantics.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'info' | 'success' | 'warning' | 'error' = 'info';\n\n  /**\n   * CSS positioning behavior. \"sticky\" keeps the banner in flow; \"fixed\" pins it to the viewport.\n   * @attr position\n   */\n  @property({ type: String, reflect: true })\n  position: 'sticky' | 'fixed' = 'sticky';\n\n  /**\n   * Whether the banner can be dismissed by the user.\n   * @attr dismissible\n   */\n  @property({ type: Boolean, reflect: true })\n  dismissible = false;\n\n  /**\n   * Heading text for the banner, used to provide context in the action link's and\n   * close button's accessible labels.\n   * @attr heading\n   */\n  @property({ type: String })\n  heading = '';\n\n  /**\n   * Label text for the optional action link. Requires action-href to render.\n   * @attr action-label\n   */\n  @property({ type: String, attribute: 'action-label' })\n  actionLabel = '';\n\n  /**\n   * URL for the optional action link. Requires action-label to render.\n   * @attr action-href\n   */\n  @property({ type: String, attribute: 'action-href' })\n  actionHref = '';\n\n  /**\n   * Whether the banner is visible. Defaults to true — banners are shown by default.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = true;\n\n  /** Accessible label for the dismiss button. Override for localized text. */\n  @property({ type: String, attribute: 'label-close' })\n  labelClose = 'Dismiss banner';\n\n  /**\n   * Override for the severity prefix announced to screen readers (e.g., \"Info:\", \"Error:\").\n   * When not set, defaults to the English label matching the current variant.\n   * @attr severity-label\n   */\n  @property({ attribute: 'severity-label' })\n  severityLabel: string | undefined;\n\n  // ─── Private Helpers ───\n\n  /** Returns the default English severity label for the current variant. */\n  private _defaultSeverityLabel(): string {\n    const labels: Record<string, string> = {\n      info: 'Info:',\n      success: 'Success:',\n      warning: 'Warning:',\n      error: 'Error:',\n    };\n    return labels[this.variant] ?? '';\n  }\n\n  /** Returns the effective severity label, using the override if provided. */\n  private get _effectiveSeverityLabel(): string {\n    return this.severityLabel ?? this._defaultSeverityLabel();\n  }\n\n  /** Returns true when the variant requires assertive announcement. */\n  /** @internal */\n  private get _isAssertive(): boolean {\n    return this.variant === 'error' || this.variant === 'warning';\n  }\n\n  /**\n   * Returns the appropriate ARIA role based on variant.\n   * role=\"alert\" implies aria-live=\"assertive\"; role=\"status\" implies aria-live=\"polite\".\n   * We do NOT set aria-live explicitly to avoid double-announcements in JAWS.\n   */\n  /** @internal */\n  private get _role(): string {\n    return this._isAssertive ? 'alert' : 'status';\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Apply ARIA role to the host element for reliable screen reader support across\n    // Shadow DOM boundaries. Placing role on a shadow-internal element has inconsistent\n    // AT support in JAWS+Chrome and VoiceOver+Safari combinations (particularly pre-2024).\n    this.setAttribute('role', this._role);\n    if (!this.open) {\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('variant')) {\n      // Keep host ARIA role in sync with variant (assertive vs. polite).\n      this.setAttribute('role', this._role);\n    }\n    if (changedProperties.has('open')) {\n      // Manage aria-hidden in addition to display:none for reliable AT exclusion.\n      // When open transitions from false→true, removing aria-hidden signals to AT\n      // that the live region content should be announced.\n      if (this.open) {\n        this.removeAttribute('aria-hidden');\n      } else {\n        this.setAttribute('aria-hidden', 'true');\n      }\n    }\n  }\n\n  // ─── Default Icons ───\n\n  /** @internal */\n  private _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM9.25 9a.75.75 0 011.5 0v4a.75.75 0 01-1.5 0V9z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderSuccessIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm3.03 6.28a.75.75 0 00-1.06-1.06L9 10.19 7.78 8.97a.75.75 0 00-1.06 1.06l1.75 1.75a.75.75 0 001.06 0l3.5-3.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderWarningIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M8.49 2.92a1.75 1.75 0 013.02 0l6.25 10.83A1.75 1.75 0 0116.25 16H3.75a1.75 1.75 0 01-1.51-2.25L8.49 2.92zM10 7a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 0110 7zm0 7.5a.75.75 0 100-1.5.75.75 0 000 1.5z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderErrorIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M10 2a8 8 0 100 16 8 8 0 000-16zm-1.72 5.22a.75.75 0 011.06 0L10 7.94l.66-.72a.75.75 0 111.06 1.06L11.06 9l.66.72a.75.75 0 11-1.06 1.06L10 10.06l-.66.72a.75.75 0 01-1.06-1.06L8.94 9l-.66-.72a.75.75 0 010-1.06z\"\n      />\n    </svg>`;\n  }\n\n  /** @internal */\n  private _renderDefaultIcon() {\n    switch (this.variant) {\n      case 'success':\n        return this._renderSuccessIcon();\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'error':\n        return this._renderErrorIcon();\n      case 'info':\n      default:\n        return this._renderInfoIcon();\n    }\n  }\n\n  /** @internal */\n  private _renderCloseIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\">\n      <path\n        d=\"M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z\"\n      />\n    </svg>`;\n  }\n\n  // ─── Public Methods ───\n\n  /**\n   * Programmatically dismisses the banner. Sets open=false and dispatches hx-dismiss.\n   */\n  dismiss(): void {\n    this._handleDismiss();\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleDismiss(): void {\n    this.open = false;\n\n    /**\n     * Dispatched when the user (or caller) dismisses the banner.\n     * @event hx-dismiss\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ reason: string }>('hx-dismiss', {\n        bubbles: true,\n        composed: true,\n        detail: { reason: 'user' },\n      }),\n    );\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      banner: true,\n      [`banner--${this.variant}`]: true,\n    };\n\n    const hasAction = this.actionLabel.length > 0 && this.actionHref.length > 0;\n\n    // WCAG 1.4.1: Always render a visually-hidden severity label so the variant\n    // is never conveyed by color alone.\n    const severityLabel = this._effectiveSeverityLabel;\n\n    return html`\n      <div part=\"banner\" class=${classMap(classes)}>\n        <span class=\"banner__severity-label\">${severityLabel}</span>\n        <div part=\"icon\" class=\"banner__icon\">${this._renderDefaultIcon()}</div>\n\n        <div part=\"message\" class=\"banner__message\">\n          <slot></slot>\n        </div>\n\n        ${hasAction\n          ? html`\n              <a\n                part=\"action\"\n                class=\"banner__action\"\n                href=${ifDefined(this.actionHref || undefined)}\n                aria-label=${this.heading\n                  ? `${this.actionLabel}: ${this.heading}`\n                  : this.actionLabel}\n              >\n                <slot name=\"action\">${this.actionLabel}</slot>\n              </a>\n            `\n          : nothing}\n        ${this.dismissible\n          ? html`\n              <button\n                part=\"close-button\"\n                class=\"banner__close-button\"\n                aria-label=${this.labelClose}\n                @click=${this._handleDismiss}\n              >\n                ${this._renderCloseIcon()}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-banner': HelixBanner;\n  }\n}\n\nexport type { HelixBanner as HxBanner };\n"],"names":["helixBannerStyles","css","HelixBanner","HelixElement","changedProperties","html","classes","hasAction","severityLabel","classMap","ifDefined","nothing","forcedColorsSurface","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-checkbox-BdgoUeWi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-checkbox-BdgoUeWi.js","sources":["../../src/components/hx-checkbox/hx-checkbox.styles.ts","../../src/components/hx-checkbox/hx-checkbox.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCheckboxStyles = 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  .checkbox {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-checkbox-font-family, var(--hx-font-family-sans, sans-serif));\n  }\n\n  /* ─── Control (checkbox + label row) ─── */\n\n  .checkbox__control {\n    display: inline-flex;\n    align-items: flex-start;\n    gap: var(--hx-space-2, 0.5rem);\n    /* WCAG 2.5.5 (healthcare mandate): minimum 44px touch target height */\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    cursor: pointer;\n  }\n\n  :host([disabled]) .checkbox__control {\n    cursor: not-allowed;\n  }\n\n  /* ─── Hidden Native Input ─── */\n\n  .checkbox__input {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── Visual Checkbox ─── */\n\n  .checkbox__box {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    height: var(--hx-checkbox-size, var(--hx-size-5, 1.25rem));\n    border: var(--hx-border-width-medium, 2px) solid\n      var(--hx-checkbox-border-color, var(--hx-color-border-strong, #66787b));\n    border-radius: var(--hx-checkbox-border-radius, var(--hx-border-radius-sm, 0.25rem));\n    background-color: var(--hx-checkbox-bg, var(--hx-color-surface-default, #ffffff));\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease),\n      box-shadow var(--hx-transition-fast, 150ms ease);\n    margin-top: var(--hx-space-px, 1px);\n  }\n\n  /* ─── Focus Ring ─── */\n\n  /*\n   * Host-focus path: on the modern (IDL element-references) render branch the\n   * host is the tabbable surface (tabindex=0) and the inner input is demoted\n   * to tabindex=-1. Drive the focus ring from ':host(:focus-visible)' so\n   * keyboard users still get a visible affordance. Codex round-11 P1.\n   */\n  :host(:focus-visible) .checkbox__box {\n    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid\n      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));\n  }\n\n  /*\n   * Fallback (no-IDL-ref) path: the host carries tabindex=-1 and the inner\n   * input is the tab target. The native :focus-visible on the input drives\n   * the same visual ring, scoped via the inner-state class.\n   */\n  .checkbox__input:focus-visible ~ .checkbox__box {\n    outline: var(--hx-checkbox-focus-ring-width, var(--hx-focus-ring-width, 2px)) solid\n      var(--hx-checkbox-focus-ring-color, var(--hx-focus-ring-color, #0f7078));\n    outline-offset: var(--hx-checkbox-focus-ring-offset, var(--hx-focus-ring-offset, 2px));\n  }\n\n  /* ─── Checked State ─── */\n\n  .checkbox--checked .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));\n  }\n\n  /* ─── Indeterminate State ─── */\n\n  .checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-checked-bg, var(--hx-color-primary-500, #429797));\n    border-color: var(--hx-checkbox-checked-border-color, var(--hx-color-primary-500, #429797));\n  }\n\n  /* ─── Error State ─── */\n\n  .checkbox--error .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  .checkbox--error.checkbox--checked .checkbox__box,\n  .checkbox--error.checkbox--indeterminate .checkbox__box {\n    background-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  /* ─── Hover ─── */\n\n  /* P1-03: use component token so consumer overrides of --hx-checkbox-border-color work on hover */\n  .checkbox__control:hover .checkbox__box {\n    border-color: var(\n      --hx-checkbox-hover-border-color,\n      var(--hx-checkbox-border-color, var(--hx-color-primary-500, #429797))\n    );\n  }\n\n  .checkbox--checked .checkbox__control:hover .checkbox__box {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .checkbox--error .checkbox__control:hover .checkbox__box {\n    border-color: var(--hx-checkbox-error-color, var(--hx-color-error-500, #e5493e));\n  }\n\n  /* ─── Checkmark Icon ─── */\n\n  .checkbox__icon {\n    display: none;\n    width: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    height: calc(var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) * 0.65);\n    fill: none;\n    stroke: var(--hx-checkbox-checkmark-color, var(--hx-color-text-on-primary, #ffffff));\n    stroke-width: 2.5;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .checkbox--checked .checkbox__icon--check {\n    display: block;\n  }\n\n  .checkbox--indeterminate .checkbox__icon--indeterminate {\n    display: block;\n  }\n\n  /* ─── Label ─── */\n\n  .checkbox__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-checkbox-label-color, var(--hx-color-text-strong, #202b39));\n    line-height: var(--hx-line-height-normal, 1.5);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .checkbox__required-marker {\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* ─── Help Text & Error Messages ─── */\n\n  .checkbox__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-help-text-color, var(--hx-color-text-muted, #4a5362));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-inline-start: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-checkbox-error-color, var(--hx-color-error-text, #c92a2a));\n    line-height: var(--hx-line-height-normal, 1.5);\n    padding-inline-start: calc(\n      var(--hx-checkbox-size, var(--hx-size-5, 1.25rem)) + var(--hx-space-2, 0.5rem)\n    );\n  }\n\n  /* ─── Size Variants ─── */\n\n  :host([hx-size='sm']) {\n    --hx-checkbox-size: var(--hx-size-4, 1rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__label {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n  }\n\n  :host([hx-size='sm']) .checkbox__help-text,\n  :host([hx-size='sm']) .checkbox__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    padding-inline-start: calc(var(--hx-size-4, 1rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  :host([hx-size='lg']) {\n    --hx-checkbox-size: var(--hx-size-6, 1.5rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__label {\n    font-size: var(--hx-font-size-md, 1rem);\n  }\n\n  :host([hx-size='lg']) .checkbox__help-text,\n  :host([hx-size='lg']) .checkbox__error {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    padding-inline-start: calc(var(--hx-size-6, 1.5rem) + var(--hx-space-2, 0.5rem));\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .checkbox__box {\n      transition: none;\n    }\n  }\n\n  /* ─── High Contrast Mode (forced-colors) ─── */\n\n  @media (forced-colors: active) {\n    .checkbox__box {\n      forced-color-adjust: none;\n      background-color: ButtonFace;\n      border: 2px solid ButtonText;\n    }\n\n    :host(:focus-visible) .checkbox__box,\n    .checkbox__input:focus-visible ~ .checkbox__box {\n      outline: 3px solid Highlight;\n      outline-offset: 2px;\n    }\n\n    .checkbox--checked .checkbox__box,\n    .checkbox--indeterminate .checkbox__box {\n      background-color: Highlight;\n      border-color: Highlight;\n    }\n\n    .checkbox__icon {\n      stroke: HighlightText;\n    }\n\n    .checkbox--error .checkbox__box {\n      border-color: LinkText;\n    }\n\n    .checkbox--error.checkbox--checked .checkbox__box,\n    .checkbox--error.checkbox--indeterminate .checkbox__box {\n      background-color: LinkText;\n      border-color: LinkText;\n    }\n\n    :host([disabled]) {\n      opacity: 1;\n    }\n\n    :host([disabled]) .checkbox__box {\n      border-color: GrayText;\n      background-color: ButtonFace;\n    }\n\n    :host([disabled]) .checkbox--checked .checkbox__box,\n    :host([disabled]) .checkbox--indeterminate .checkbox__box {\n      background-color: GrayText;\n      border-color: GrayText;\n    }\n\n    :host([disabled]) .checkbox__label {\n      color: GrayText;\n    }\n\n    .checkbox__label {\n      color: CanvasText;\n    }\n\n    .checkbox__help-text {\n      color: GrayText;\n    }\n\n    .checkbox__error {\n      color: LinkText;\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 { live } from 'lit/directives/live.js';\nimport { HelixElement, createIdCounter } from '../../base/index.js';\nimport { mixinDelegatesAria } from '../../mixins/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { helixCheckboxStyles } from './hx-checkbox.styles.js';\nimport { forcedColorsField } from '../../styles/forced-colors.js';\nimport { devWarn } from '../../utils/dev-warn.js';\nimport {\n  installAriaIdrefMirror,\n  resolveIdrefTokens,\n  supportsIdrefElementReferences,\n  type AriaIdrefMirrorHandle,\n} from '../../utils/aria-idref.js';\n\n// P2-05: monotonic counter — collision-free, deterministic, SSR-safe\nconst _nextCheckboxId = createIdCounter('hx-checkbox');\n\n/** Detail for the hx-change event dispatched by hx-checkbox. */\nexport interface HxCheckboxChangeDetail {\n  checked: boolean;\n  value: string;\n}\n\n/**\n * A checkbox component with label, validation, and form association.\n *\n * @summary Form-associated checkbox with built-in label, error, and help text.\n *\n * @tag hx-checkbox\n *\n * @slot - Custom label content (overrides the label property). Rich HTML allowed — Drupal can include links in consent labels.\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the checkbox is toggled. Boolean-selection controls (`hx-switch`, `hx-checkbox`) include both `checked` (boolean state) and `value` (form value) in the detail; text-value controls (`hx-text-input`, `hx-combobox`, `hx-select`) emit only `{value}`.\n *\n * @csspart checkbox - The visual checkbox element.\n * @csspart checkmark - The SVG checkmark icon inside the checkbox.\n * @csspart label - The label element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n * @csspart control - The wrapper around checkbox and label.\n *\n * @cssprop [--hx-checkbox-size=var(--hx-size-5, 1.25rem)] - Checkbox dimensions.\n * @cssprop [--hx-checkbox-bg=var(--hx-color-neutral-0, #ffffff)] - Unchecked background color.\n * @cssprop [--hx-checkbox-border-color=var(--hx-color-neutral-300, #B6BFB9)] - Checkbox border color.\n * @cssprop [--hx-checkbox-border-radius=var(--hx-border-radius-sm, 0.25rem)] - Checkbox border radius.\n * @cssprop [--hx-checkbox-checked-bg=var(--hx-color-primary-500, #429797)] - Checked background color.\n * @cssprop [--hx-checkbox-checked-border-color=var(--hx-color-primary-500, #429797)] - Checked border color.\n * @cssprop [--hx-checkbox-checkmark-color=var(--hx-color-neutral-0, #ffffff)] - Checkmark color.\n * @cssprop [--hx-checkbox-focus-ring-color=var(--hx-focus-ring-color, #6AB1B1)] - Focus ring color.\n * @cssprop [--hx-checkbox-label-color=var(--hx-color-neutral-700, #313E4B)] - Label text color.\n * @cssprop [--hx-checkbox-help-text-color=var(--hx-color-neutral-500, #66787B)] - Help text color.\n * @cssprop [--hx-checkbox-hover-border-color=var(--hx-checkbox-border-color)] - Border color on hover.\n * @cssprop [--hx-checkbox-error-color=var(--hx-color-error-500, #E5493E)] - Error state color.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-checkbox-font-family=var(--hx-font-family-sans)] - Font family for checkbox label and help text.\n * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-touch-target-min] - Minimum touch target size.\n * @cssprop [--hx-size-5] - Size token.\n * @cssprop [--hx-border-width-medium] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-space-px] - Spacing token.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-color-primary-400] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-filter-brightness-hover] - CSS filter.\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-color-neutral-500] - Color.\n * @cssprop [--hx-size-4] - Size token.\n * @cssprop [--hx-size-6] - Size token.\n * @cssprop [--hx-font-size-md] - Font size.\n * @cssprop [--hx-color-error-500] - Color.\n */\n@customElement('hx-checkbox')\nexport class HelixCheckbox extends mixinDelegatesAria(FormMixin(HelixElement)) {\n  static override styles = [helixCheckboxStyles, forcedColorsField];\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static override formAssociated = true;\n\n  // ─── Properties ───\n\n  /**\n   * Whether the checkbox is checked.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the checkbox is in an indeterminate state (e.g., for \"select all\" patterns).\n   * @attr indeterminate\n   */\n  @property({ type: Boolean, reflect: true })\n  indeterminate = false;\n\n  /**\n   * Whether the checkbox is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the checkbox is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the checkbox, used for form submission.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * The value submitted when the checkbox is checked.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = 'on';\n\n  /**\n   * The visible label text for the checkbox.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Error message to display. When set, the checkbox enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the checkbox for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  /**\n   * The size of the checkbox.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Accessible label for the checkbox when no visible label text is provided.\n   * Use when embedding a checkbox in a context where a label element is not practical.\n   *\n   * Accepts both `accessible-label` and the standard `aria-label` HTML attribute.\n   * `accessible-label` takes precedence when both are set.\n   * When set, replaces the visible label as the input's accessible name. Cannot be combined\n   * with a visible label — set either `accessible-label` or the `label` slot, not both.\n   *\n   * @attr accessible-label\n   */\n  @property({ type: String, attribute: 'accessible-label' })\n  accessibleLabel: string = '';\n\n  /**\n   * Returns the effective label for the checkbox, checking accessible-label first,\n   * then the aria-label attribute, falling back to empty string.\n   * @internal\n   */\n  private get _effectiveLabel(): string {\n    return this.accessibleLabel?.trim() || this.ariaLabel?.trim() || '';\n  }\n\n  /** @internal */\n  @query('.checkbox__input')\n  private _inputEl: HTMLInputElement | undefined;\n\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n\n  /** @internal */\n  @state() private _hasHelpTextSlot = false;\n\n  /** @internal */\n  @state() private _hasLabelSlot = false;\n\n  /**\n   * Set by `hx-checkbox-group` to mark this child as group-managed. While\n   * truthy, `_updateFormValue()` short-circuits to `setFormValue(null)`\n   * regardless of `name`, so the child does NOT participate in form submission\n   * — only the group does. This is durable against post-attach mutations to\n   * `cb.name` by consumers/frameworks (which would otherwise re-arm\n   * `_updateFormValue()` via the `name` setter and cause double-submission).\n   * Codex round-3 finding #1.\n   *\n   * Public via accessor for the group's exclusive use; the underscore prefix\n   * marks it as group-internal (not consumer API). The group sets it during\n   * `slotchange` and clears it (via the same setter) when a child is removed.\n   * @internal\n   */\n  set _groupedSuppress(value: boolean) {\n    if (this.__groupedSuppress === value) return;\n    this.__groupedSuppress = value;\n    // Re-run form-value sync so the suppression takes effect immediately.\n    this._updateFormValue();\n  }\n  get _groupedSuppress(): boolean {\n    return this.__groupedSuppress;\n  }\n  /** @internal */\n  private __groupedSuppress = false;\n\n  /**\n   * Deferred copy of this.error used inside the live region. Injected after\n   * the region is visible (via requestAnimationFrame) so screen readers\n   * re-announce the message even if it was set before the region became\n   * visible — see WCAG 4.1.3.\n   * @internal\n   */\n  @state() private _announcedError = '';\n\n  /** @internal */\n  private _hasWarnedLabelConflict = false;\n\n  /**\n   * Handle for the shared IDREF observer. Installed in `connectedCallback()`\n   * so late-mutated `aria-labelledby`/`aria-describedby` and late-inserted\n   * IDREF targets are picked up. See `installAriaIdrefMirror()`.\n   * @internal\n   */\n  private _ariaMirror: AriaIdrefMirrorHandle | null = null;\n\n  // ─── Slot Handlers ───\n\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleHelpTextSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasHelpTextSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** @internal */\n  private _handleLabelSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    // Default slot may include the fallback `${this.label}` text node — count\n    // assigned (not flattened) nodes so the slot fallback is not mistaken for\n    // user-supplied content. The visible label is independently tracked via\n    // the `label` property below.\n    this._hasLabelSlot = slot.assignedNodes().length > 0;\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Detect platform support for IDL element references. Cached as reactive\n    // state so the render-time branch is consistent across update cycles and\n    // tests can stub it deterministically. Codex round-2 finding #2.\n    this._supportsIdrefRefs = supportsIdrefElementReferences(this._internals);\n    // Seed root-independent semantics so the host carries the checkbox role\n    // and reactive ARIA state from the moment of connection — before the\n    // first paint. This closes the gap where AT scanning between connect\n    // and `firstUpdated()` would see an unannounced surface.\n    this._syncHostAriaSemantics();\n    // Codex round-1 finding #1: host is the canonical announced surface on\n    // modern browsers, so the inner `<input>` is demoted via\n    // `aria-hidden + tabindex=-1` and the host owns tab order.\n    //\n    // Codex round-2 finding #2: on no-IDL-ref browsers the inner `<input>`\n    // is the only surface AT can reach, so the host is demoted to\n    // `tabindex=-1` and the inner input owns tab order. Without this,\n    // `aria-labelledby`/`aria-describedby` on the inner input were inert\n    // (the input was `aria-hidden`), leaving the control unnamed.\n    // Codex round-14 P2: only claim ownership of `tabindex` when no consumer\n    // value is present. Consumers using roving-tabindex toolbar patterns\n    // must be able to set `tabindex=\"-1\"` on the host without it being\n    // clobbered on every disabled flip. Note we still claim ownership when\n    // disabled — the initial value is `-1` to keep the host out of tab order\n    // and `updated()` re-asserts the appropriate value when disabled flips.\n    if (!this.hasAttribute('tabindex')) {\n      this._internalTabindexManaged = true;\n      const enabledTabIndex = this._supportsIdrefRefs ? '0' : '-1';\n      this.setAttribute('tabindex', this.disabled ? '-1' : enabledTabIndex);\n    }\n    this.addEventListener('keydown', this._handleHostKeyDown);\n    this.addEventListener('click', this._handleHostClick);\n    // Install the shared IDREF observer once the host is in a tree. The\n    // observer covers consumer mutations to `aria-labelledby`/`-describedby`\n    // (or their `data-aria-*` mirrors), late-inserted IDREF targets, and\n    // `id` renames in the host's resolved root.\n    this._ariaMirror = installAriaIdrefMirror(this, () => {\n      this._syncHostAriaSemantics();\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleHostKeyDown);\n    this.removeEventListener('click', this._handleHostClick);\n    this._ariaMirror?.disconnect();\n    this._ariaMirror = null;\n  }\n\n  /**\n   * Host-level keydown handler. Space toggles per ARIA APG checkbox pattern\n   * — but only on the modern path where the host is the announced focus\n   * surface. On the no-IDL-ref fallback (round-2 finding #2), the inner\n   * `<input>` owns focus + native Space activation, so the host stays out\n   * of the activation pipeline to avoid double-toggle.\n   * @internal\n   */\n  private _handleHostKeyDown = (e: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (!this._supportsIdrefRefs) return;\n    // Only handle when the host itself is the focus target — events from\n    // slotted/nested controls bubble through here too.\n    if (e.target !== this) return;\n    if (e.key === ' ') {\n      e.preventDefault();\n      this._handleChange();\n    }\n  };\n\n  /**\n   * Host-level click handler. Routes clicks on the host (e.g. via assistive\n   * tech activation) to the change handler — only on the modern path. On the\n   * fallback path the inner input is the announced surface and natively\n   * receives clicks/AT activation.\n   * @internal\n   */\n  private _handleHostClick = (e: MouseEvent): void => {\n    if (this.disabled) return;\n    if (!this._supportsIdrefRefs) return;\n    // Only respond to clicks that originated on the host itself. Bubbled\n    // events from inner shadow elements (which toggle through the existing\n    // label/input change handler) are skipped to avoid double-activation.\n    const path = e.composedPath();\n    if (path[0] !== this) return;\n    this._handleChange();\n  };\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (\n      changedProperties.has('checked') ||\n      changedProperties.has('value') ||\n      changedProperties.has('name')\n    ) {\n      this._updateFormValue();\n    }\n\n    // Codex round-1 finding #1: keep host focusability in sync with disabled\n    // state. Disabled custom elements should not be in tab order.\n    // Codex round-2 finding #2: on no-IDL-ref browsers the host is demoted\n    // to `tabindex=-1` so the inner input remains the announced surface.\n    // Codex round-14 P2: only re-assert when the component owns tabindex.\n    // Consumer-managed values (e.g. roving-tabindex toolbar with `-1`) must\n    // not be overwritten on disabled flips or supports-flag transitions.\n    if (\n      changedProperties.has('disabled') ||\n      (changedProperties as Map<PropertyKey, unknown>).has('_supportsIdrefRefs')\n    ) {\n      if (this._internalTabindexManaged) {\n        if (this.disabled) {\n          this.setAttribute('tabindex', '-1');\n        } else {\n          this.setAttribute('tabindex', this._supportsIdrefRefs ? '0' : '-1');\n        }\n      }\n    }\n\n    // Re-resolve element references against the (possibly mutated) shadow\n    // tree. `_syncHostAriaSemantics()` is also invoked from `_updateValidity()`\n    // and by the IDREF mirror observer, so this keeps property-driven changes\n    // current without depending on observer scheduling.\n    this._syncHostAriaSemantics();\n    // Warn when accessible-label is set alongside a visible label — they are mutually exclusive.\n    // Checked unconditionally (not gated on changedProperties) because ariaLabel is provided by\n    // mixinDelegatesAria via Object.defineProperty and never appears in changedProperties.\n    {\n      const hasAccessibleLabel = !!(this.accessibleLabel?.trim() || this.ariaLabel?.trim());\n      const hasVisibleLabel =\n        !!this.label ||\n        (this.shadowRoot\n          ?.querySelector<HTMLSlotElement>('.checkbox__label slot')\n          ?.assignedNodes({ flatten: true }).length ?? 0) > 0;\n      if (hasAccessibleLabel && hasVisibleLabel && !this._hasWarnedLabelConflict) {\n        this._hasWarnedLabelConflict = true;\n        devWarn(\n          'hx-checkbox',\n          'accessible-label is set alongside a visible label. Use either accessible-label or the label slot, not both.',\n        );\n      } else if (!hasAccessibleLabel || !hasVisibleLabel) {\n        this._hasWarnedLabelConflict = false;\n      }\n    }\n    // WCAG 4.1.3: Keep _announcedError in sync with the error property.\n    // When error changes from one non-empty value to another, clear the live region\n    // first then re-inject after a rAF tick so screen readers re-announce the updated\n    // message (clearing content before the region is re-populated triggers a new event).\n    // When transitioning from empty to non-empty (initial display), set directly so\n    // the text is immediately available for synchronous DOM assertions.\n    if (changedProperties.has('error')) {\n      const previousError = changedProperties.get('error') as string;\n      if (previousError && this.error) {\n        // Changing from one error message to another: defer to trigger re-announcement.\n        this._announcedError = '';\n        requestAnimationFrame(() => {\n          this._announcedError = this.error;\n        });\n      } else {\n        // Transitioning from empty→error or error→empty: set directly.\n        this._announcedError = this.error;\n      }\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  override get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  override get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  override get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** @internal */\n  _updateValidity(): void {\n    if (this.required && !this.checked) {\n      // Codex round-17 P2: anchor validity UI to the announced surface. On\n      // the modern path the host is the canonical announced/focus surface\n      // (the inner input is `aria-hidden + tabindex=-1`), so reportValidity()\n      // would otherwise focus a hidden node. On the fallback path the inner\n      // input is the announced surface.\n      const anchor: HTMLElement | undefined = this._supportsIdrefRefs\n        ? this\n        : (this._inputEl ?? undefined);\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        anchor,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n    // Sync host ARIA semantics immediately after every setValidity() call so\n    // `internals.ariaInvalid` reflects the current `ValidityState` rather than\n    // the previous render cycle's snapshot. Codex round-1 finding #6.\n    this._syncHostAriaSemantics();\n  }\n\n  // ─── Form Lifecycle Hooks ───\n\n  protected override _onFormReset(): void {\n    this.checked = false;\n    this.indeterminate = false;\n    this._internals.setFormValue(null);\n    this._resetInteractionState();\n  }\n\n  protected override _onFormStateRestore(\n    state: File | string | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    this.checked = typeof state === 'string' && state === this.value;\n  }\n\n  protected override _onFormDisabled(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Event Handling ───\n\n  /**\n   * Writes the checkbox value to ElementInternals' form value. Suppressed when\n   * the checkbox is grouped — `hx-checkbox-group` flips `_groupedSuppress` on\n   * children so the group is the sole form participant.\n   *\n   * Codex round-3 finding #1: round-2 used `cb.name = ''` as the suppression\n   * signal, but a consumer (or framework binding) that re-set `cb.name = 'foo'`\n   * after attach regained form participation through the `name` setter. The\n   * `_groupedSuppress` flag is a durable, name-independent kill switch.\n   * Stand-alone checkboxes (no parent group) are unaffected.\n   * @internal\n   */\n  private _updateFormValue(): void {\n    if (this.__groupedSuppress || !this.name) {\n      this._internals.setFormValue(null);\n      return;\n    }\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  /** @internal */\n  private _handleChange(): void {\n    if (this.disabled) return;\n\n    this.indeterminate = false;\n    this.checked = !this.checked;\n\n    this._updateFormValue();\n    this._handleInteractionInput();\n\n    /**\n     * Dispatched when the checkbox is toggled.\n     * @event hx-change\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n\n    // Codex round-12 P2 (parity with hx-switch / hx-toggle-button): on the\n    // modern path the host owns role=\"checkbox\" and tabindex=0; the inner\n    // `<input>` is aria-hidden and tabindex=-1. Clicking the surrounding\n    // `<label>` still routes activation to the input via native label-forward,\n    // which focuses the input. Move focus to the host so the announced\n    // surface is also the focus target.\n    if (this._supportsIdrefRefs) {\n      this.focus();\n    }\n  }\n\n  /**\n   * Handles native `change` events from the inner `<input type=checkbox>` on\n   * the no-IDL-ref fallback path. On that path the inner input is the\n   * announced surface (no `aria-hidden`, `tabindex=0`) and AT activates it\n   * directly — pointer/keyboard activation flips `input.checked` natively.\n   * We mirror the input's state onto the host, dispatch `hx-change`, and\n   * update form participation.\n   *\n   * Codex round-3 finding #2: round-2 left the inner input click suppressed\n   * on both paths, so on no-IDL-ref browsers AT activation could not toggle\n   * the control. The fix is to NOT suppress click on the fallback path and\n   * to honor the resulting `change` event here.\n   * @internal\n   */\n  private _handleInternalChange = (e: Event): void => {\n    e.stopPropagation();\n    if (this.disabled) return;\n    const input = e.currentTarget as HTMLInputElement;\n    // The native input flipped its own state; mirror onto the host. Avoid\n    // re-toggling — `_handleChange()` toggles `this.checked = !this.checked`,\n    // which would invert the user's actual choice.\n    this.indeterminate = false;\n    this.checked = input.checked;\n\n    this._updateFormValue();\n    this._handleInteractionInput();\n\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  };\n\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      e.stopPropagation();\n      this._handleChange();\n    }\n  }\n\n  /**\n   * Stable inner-input click suppressor for the modern (announced-host) path.\n   * Hoisted to a class field so Lit sees a stable listener identity across\n   * renders; previously inline arrows were re-allocated each render and\n   * caused listener detach/re-attach churn (codex round-4 F3 — performance).\n   * @internal\n   */\n  private _suppressInnerClick = (e: Event): void => {\n    e.preventDefault();\n    e.stopPropagation();\n  };\n\n  /**\n   * Stable inner-input change suppressor for the modern (announced-host) path.\n   * Mirrors the click suppressor above — stable identity across renders so\n   * Lit's event-listener cache keeps a single registration (codex round-4 F3).\n   * @internal\n   */\n  private _suppressInnerChange = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  // ─── Public Methods ───\n\n  /**\n   * Moves focus to the announced checkbox surface. Codex round-1 finding #1\n   * relocated the focus target from the inner `<input>` to the host on\n   * modern engines so AT only sees one announced widget. Round-7 finding #3\n   * extends that contract to the no-IDL-ref fallback: when the host is\n   * demoted (`tabindex=-1`, role/state cleared on `internals`) the inner\n   * `<input>` owns the announced semantics and tab order, so programmatic\n   * `focus()` must redirect there — otherwise scripted focus and error\n   * recovery land on the demoted host on unsupported engines.\n   */\n  override focus(options?: FocusOptions): void {\n    if (this._supportsIdrefRefs) {\n      super.focus(options);\n      return;\n    }\n    this._inputEl?.focus(options);\n  }\n\n  // ─── Host ARIA Semantics (ElementInternals) ───\n\n  /**\n   * Mirrors checkbox semantics onto the host via ElementInternals so that\n   * consumer-supplied `aria-label`, `aria-labelledby`, and `aria-describedby`\n   * on `<hx-checkbox>` reach the announced control. Without this, those\n   * attributes — intercepted by `mixinDelegatesAria` and stored on the host —\n   * would not propagate through to the inner shadow `<input>`.\n   *\n   * Codex finding (aria-delegation, severity high): the announced semantic\n   * node was the inner `<input>` and the host's labelled-by tokens could not\n   * cross the shadow boundary.\n   * @internal\n   */\n  private _syncHostAriaSemantics(): void {\n    const internals = this._internals;\n    const hostLabel = this._effectiveLabel;\n\n    // Codex round-2 finding #2: branch on platform support for IDL element\n    // references. On modern browsers the host is the canonical announced\n    // surface and carries all checkbox semantics via ElementInternals. On\n    // older browsers the inner `<input>` is the announced surface, so the\n    // host's role/state are cleared and the consumer-supplied IDREFs are\n    // mirrored to the inner input via render-time fallback state.\n    if (this._supportsIdrefRefs) {\n      // ─── Modern path: host is the announced surface ───\n      internals.role = 'checkbox';\n      internals.ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n      internals.ariaRequired = this.required ? 'true' : 'false';\n      // Drive aria-invalid from validity state, not from visible error content.\n      // A required-but-unchecked checkbox sets `valueMissing` via setValidity()\n      // but may render no visible error yet — assistive tech still needs to hear\n      // the invalid state.\n      internals.ariaInvalid = !internals.validity.valid ? 'true' : 'false';\n      internals.ariaDisabled = this.disabled ? 'true' : 'false';\n      internals.ariaLabel = hostLabel || null;\n\n      type InternalsWithRefs = ElementInternals & {\n        ariaLabelledByElements: Element[] | null;\n        ariaDescribedByElements: Element[] | null;\n      };\n      const refsInternals = internals as InternalsWithRefs;\n\n      const externalLabelTokens = this.getAttribute('data-aria-labelledby');\n      const externalDescTokens = this.getAttribute('data-aria-describedby');\n\n      const labelEls = resolveIdrefTokens(this, externalLabelTokens);\n      // Append the internal label element when the visible label has content\n      // and no external labelling source already names the host.\n      const internalLabel = this.shadowRoot?.getElementById(this._labelId);\n      const hasVisibleLabel = !!this.label || this._hasLabelSlot;\n      if (labelEls.length === 0 && !hostLabel && hasVisibleLabel && internalLabel) {\n        labelEls.push(internalLabel);\n      }\n      refsInternals.ariaLabelledByElements = labelEls.length > 0 ? labelEls : null;\n\n      const descEls = resolveIdrefTokens(this, externalDescTokens);\n      // Codex round-13 P2: while an error is active, drop help text from the\n      // described-by chain. The visible help node is suppressed in the render\n      // tree, but referenced descriptions are announced even when their nodes\n      // are hidden — leaving help in the chain would have AT read stale\n      // guidance before the validation error. Otherwise help precedes error so\n      // guidance reads before validation feedback when only one is shown.\n      const helpEl = this.shadowRoot?.getElementById(this._helpTextId);\n      const errorEl = this.shadowRoot?.getElementById(this._errorId);\n      const hasError = !!(this.error || this._hasErrorSlot);\n      if (helpEl && (this.helpText || this._hasHelpTextSlot) && !hasError) {\n        descEls.push(helpEl);\n      }\n      if (errorEl && hasError) {\n        descEls.push(errorEl);\n      }\n      refsInternals.ariaDescribedByElements = descEls.length > 0 ? descEls : null;\n      // Clear fallbacks — IDL refs path is the canonical surface.\n      this._fallbackAriaLabelledBy = null;\n      this._fallbackAriaDescribedBy = null;\n    } else {\n      // ─── Fallback path: inner <input> is the announced surface ───\n      // Codex round-2 finding #2: in round-1 we set host role/state via\n      // ElementInternals AND mirrored aria-labelledby/describedby onto the\n      // inner input. But the inner input was kept `aria-hidden`, making the\n      // mirrored attributes inert — the control had no accessible name on\n      // older browsers. The fix is to demote the host (clear its role/state\n      // on internals so AT does not double-announce) and let the inner native\n      // `<input type=checkbox>` be the announced surface, with consumer\n      // IDREFs mirrored as real `aria-*` attributes that resolve through the\n      // shadow root for shadow-internal IDs (cross-boundary IDREFs remain\n      // unreachable on these engines — same baseline as the pre-fix code).\n      internals.role = null;\n      internals.ariaChecked = null;\n      internals.ariaRequired = null;\n      internals.ariaInvalid = null;\n      internals.ariaDisabled = null;\n      internals.ariaLabel = null;\n\n      const externalLabelTokens = this.getAttribute('data-aria-labelledby');\n      const externalDescTokens = this.getAttribute('data-aria-describedby');\n      this._fallbackAriaLabelledBy = externalLabelTokens || null;\n      this._fallbackAriaDescribedBy = externalDescTokens || null;\n    }\n  }\n\n  /**\n   * Fallback `aria-labelledby` token list applied to the inner input on\n   * browsers that lack IDL element references. Tracked as a reactive state\n   * so the value flows through the next `render()` call.\n   * @internal\n   */\n  @state() private _fallbackAriaLabelledBy: string | null = null;\n\n  /**\n   * Fallback `aria-describedby` token list applied to the inner input on\n   * browsers that lack IDL element references.\n   * @internal\n   */\n  @state() private _fallbackAriaDescribedBy: string | null = null;\n\n  /**\n   * Whether the platform supports IDL element references on `ElementInternals`.\n   * Drives the render-time branch between the modern path (host is the\n   * announced surface, inner input is `aria-hidden + tabindex=-1`) and the\n   * fallback path (inner input is the announced surface, host is demoted).\n   *\n   * Round-2 finding #2: the previous fallback mirrored `aria-labelledby` /\n   * `aria-describedby` onto an `aria-hidden` inner input, leaving older\n   * browsers with no accessible name. The fallback now keeps the inner input\n   * in the a11y tree so AT can name and activate it natively.\n   * @internal\n   */\n  @state() private _supportsIdrefRefs = true;\n\n  /**\n   * Tracks whether the host's `tabindex` is managed by the component itself\n   * (vs. set explicitly by a consumer). Codex round-14 P2: a consumer-supplied\n   * `tabindex` (e.g. roving-tabindex toolbar pattern with `tabindex=\"-1\"`)\n   * must survive disabled flips and re-renders. Only re-assert tabindex in\n   * `updated()` when the component originally claimed it.\n   * @internal\n   */\n  private _internalTabindexManaged = false;\n\n  // ─── Render ───\n\n  // P2-05: monotonic counter — collision-free and deterministic\n  /** @internal */\n  private _id = _nextCheckboxId();\n  /** @internal */\n  private _helpTextId = `${this._id}-help`;\n  /** @internal */\n  private _errorId = `${this._id}-error`;\n  /** @internal */\n  private _labelId = `${this._id}-label`;\n\n  override render() {\n    const hasError = !!this.error || this._hasErrorSlot;\n    const hasHelpText = !!this.helpText || this._hasHelpTextSlot;\n    const hasVisibleLabel = !!this.label || this._hasLabelSlot;\n    // Drive aria-invalid from the same validity source used by setValidity()\n    // so a required-unchecked checkbox is announced as invalid even before any\n    // visible error content has rendered.\n    const isInvalid = hasError || (this.required && !this.checked);\n\n    const containerClasses = {\n      checkbox: true,\n      'checkbox--checked': this.checked,\n      'checkbox--indeterminate': this.indeterminate,\n      'checkbox--error': hasError,\n      'checkbox--disabled': this.disabled,\n      'checkbox--required': this.required,\n      'checkbox--sm': this.size === 'sm',\n      'checkbox--md': this.size === 'md',\n      'checkbox--lg': this.size === 'lg',\n    };\n\n    // describedBy chain: while an error is active, the visible help text is\n    // suppressed in the rendered tree, so we must also drop it from the\n    // described-by chain — referenced descriptions are announced even when\n    // their nodes are hidden, and announcing stale guidance before the\n    // validation error confuses screen-reader users (codex round-13 P2).\n    // Otherwise help-text precedes error in the chain so guidance is read\n    // before validation feedback when only one is shown.\n    const describedBy =\n      [hasError ? null : hasHelpText ? this._helpTextId : null, hasError ? this._errorId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    const hostAriaLabel = this._effectiveLabel || undefined;\n    // Only point the inner input at `_labelId` when there is actual visible\n    // label content; otherwise the input would reference an empty container.\n    const useInternalLabelId = !hostAriaLabel && hasVisibleLabel;\n\n    // Codex round-1 finding #7: on no-IDL-ref browsers, mirror consumer\n    // tokens (stored as `data-aria-*`) onto the inner input so cross-shadow\n    // labelling still resolves for shadow-internal IDs. The render fallbacks\n    // are tracked as reactive state from `_syncHostAriaSemantics()`.\n    const fallbackLabelledBy = this._fallbackAriaLabelledBy;\n    const fallbackDescribedBy = this._fallbackAriaDescribedBy;\n\n    // Merge internal describedBy chain with consumer fallback tokens.\n    const innerDescribedBy =\n      [describedBy ?? null, fallbackDescribedBy].filter(Boolean).join(' ') || undefined;\n    // For labelledby, prefer consumer fallback tokens; otherwise keep the\n    // internal label association.\n    const innerLabelledBy = fallbackLabelledBy ?? (useInternalLabelId ? this._labelId : undefined);\n\n    // Codex round-2 finding #2: branch the inner input on platform support.\n    // Modern path — host is announced, inner input is `aria-hidden + tabindex=-1`.\n    // Fallback path — inner input is announced (NO aria-hidden, tabindex=0)\n    // so consumer-mirrored aria-labelledby/describedby actually resolve to a\n    // visible accessibility-tree node. The inner input keeps its own click\n    // suppressor because the visible activation surface is the surrounding\n    // `<label>`; the input's native click activation is wired through that.\n    const innerIsAnnounced = !this._supportsIdrefRefs;\n    const innerTabIndex = innerIsAnnounced && !this.disabled ? '0' : '-1';\n\n    // Codex round-3 finding #2: branch the inner input event model on\n    // platform support.\n    //\n    // Modern path (`innerIsAnnounced === false`): the inner input is\n    // `aria-hidden + tabindex=-1` — AT cannot reach it. Pointer clicks on the\n    // inner input bubble through the surrounding `<label>` whose `@click`\n    // handler runs `_handleChange()`. The inner click handler suppresses the\n    // native click so the label's click is the sole activation pipeline,\n    // avoiding double-toggle. Native `change` is also swallowed.\n    //\n    // Fallback path (`innerIsAnnounced === true`): the inner input IS the\n    // announced surface (no `aria-hidden`, `tabindex=0`). AT activation lands\n    // directly on the input and must produce a real toggle. We do NOT\n    // suppress click; instead we wire `@change=${_handleInternalChange}` so\n    // the host mirrors the input's state, fires `hx-change`, and updates\n    // form participation. The label's `@click` is a no-op on this path —\n    // pointer clicks on the label bubble to the input which toggles natively.\n    // Codex round-4 F3 (performance): handlers are class-field arrows with\n    // stable identity, so Lit's event-listener cache keeps a single\n    // registration across re-renders instead of detach/re-attach churn.\n    const innerClickHandler = innerIsAnnounced ? undefined : this._suppressInnerClick;\n    const innerChangeHandler = innerIsAnnounced\n      ? this._handleInternalChange\n      : this._suppressInnerChange;\n    const labelClickHandler = innerIsAnnounced ? undefined : this._handleChange;\n    // On the fallback path the native input owns Space/Enter activation; its\n    // native `change` event flows through `_handleInternalChange`. Wiring the\n    // host-side `_handleKeyDown` here would double-toggle (native flips +\n    // _handleChange flips again). On the modern path the input is `aria-hidden\n    // + tabindex=-1` so this handler is defensive only.\n    const innerKeyDownHandler = innerIsAnnounced ? undefined : this._handleKeyDown;\n\n    return html`\n      <div class=${classMap(containerClasses)}>\n        <label part=\"control\" class=\"checkbox__control\" @click=${ifDefined(labelClickHandler)}>\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            id=${this._id}\n            tabindex=${innerTabIndex}\n            .checked=${live(this.checked)}\n            .indeterminate=${live(this.indeterminate)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${ifDefined(this.name || undefined)}\n            .value=${this.value}\n            aria-checked=${this.indeterminate ? 'mixed' : nothing}\n            aria-invalid=${isInvalid ? 'true' : nothing}\n            aria-describedby=${ifDefined(innerDescribedBy)}\n            aria-label=${ifDefined(hostAriaLabel)}\n            aria-labelledby=${ifDefined(innerLabelledBy)}\n            aria-hidden=${innerIsAnnounced ? nothing : 'true'}\n            @keydown=${ifDefined(innerKeyDownHandler)}\n            @click=${ifDefined(innerClickHandler)}\n            @change=${innerChangeHandler}\n          />\n\n          <span part=\"checkbox\" class=\"checkbox__box\">\n            <svg\n              part=\"checkmark\"\n              class=\"checkbox__icon checkbox__icon--check\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <polyline points=\"3.5 8 6.5 11 12.5 5\"></polyline>\n            </svg>\n            <svg\n              class=\"checkbox__icon checkbox__icon--indeterminate\"\n              viewBox=\"0 0 16 16\"\n              aria-hidden=\"true\"\n            >\n              <line x1=\"4\" y1=\"8\" x2=\"12\" y2=\"8\"></line>\n            </svg>\n          </span>\n\n          <span part=\"label\" class=\"checkbox__label\" id=${this._labelId}>\n            <slot @slotchange=${this._handleLabelSlotChange}>${this.label}</slot>\n            ${this.required\n              ? html`<span class=\"checkbox__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </span>\n        </label>\n\n        <!--\n          P0-01: wrapper div always owns _errorId so aria-describedby works\n          regardless of whether error content comes from the .error property\n          or the named slot. role=\"status\" replaces aria-live=\"polite\" to\n          avoid conflicting live-region semantics.\n        -->\n        <div\n          part=\"error\"\n          class=\"checkbox__error\"\n          id=${this._errorId}\n          role=\"status\"\n          ?hidden=${!hasError}\n        >\n          <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n            ${this._announcedError}\n          </slot>\n        </div>\n\n        <!--\n          Persistent help-text container. Rendered whenever the property OR\n          the slot has content, hidden when an error is present so guidance\n          does not compete with validation feedback. Always present in the\n          shadow tree so the host's aria-describedby chain remains stable.\n        -->\n        <div\n          part=\"help-text\"\n          class=\"checkbox__help-text\"\n          id=${this._helpTextId}\n          ?hidden=${!hasHelpText || hasError}\n        >\n          <slot name=\"help-text\" @slotchange=${this._handleHelpTextSlotChange}\n            >${this.helpText}</slot\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-checkbox component. */\nexport type HxCheckbox = HelixCheckbox;\n\n/**\n * Per-component event map for type-safe addEventListener on hx-checkbox.\n * The `hx-change` detail always includes both `checked` and `value` for this component.\n */\nexport interface HxCheckboxEventMap {\n  'hx-change': CustomEvent<{ checked: boolean; value: string }>;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-checkbox': HelixCheckbox;\n  }\n  /**\n   * Global hx-change event type. The detail shape is a union because hx-change is dispatched\n   * by multiple components: form-field components (value only) and toggle components\n   * (checked + value). Use per-component EventMap types (e.g. HxCheckboxEventMap) for\n   * narrowed addEventListener calls.\n   */\n  interface HTMLElementEventMap {\n    'hx-change': CustomEvent<{ value: string } | { checked: boolean; value: string }>;\n  }\n}\n"],"names":["helixCheckboxStyles","css","_nextCheckboxId","createIdCounter","HelixCheckbox","mixinDelegatesAria","FormMixin","HelixElement","input","_a","_b","value","slot","supportsIdrefElementReferences","enabledTabIndex","installAriaIdrefMirror","changedProperties","hasAccessibleLabel","hasVisibleLabel","_d","_c","anchor","state","_mode","disabled","options","internals","hostLabel","refsInternals","externalLabelTokens","externalDescTokens","labelEls","resolveIdrefTokens","internalLabel","descEls","helpEl","errorEl","hasError","hasHelpText","isInvalid","containerClasses","describedBy","hostAriaLabel","useInternalLabelId","fallbackLabelledBy","fallbackDescribedBy","innerDescribedBy","innerLabelledBy","innerIsAnnounced","innerTabIndex","innerClickHandler","innerChangeHandler","labelClickHandler","innerKeyDownHandler","html","classMap","ifDefined","live","nothing","forcedColorsField","__decorateClass","property","query","customElement"],"mappings":";;;;;;;;;;;AAEO,MAAMA,IAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;A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"}

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

@@ -1 +0,0 @@
-{"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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"}