@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/toast-factory-f184Gi70.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-factory-f184Gi70.js","sources":["../../src/components/hx-toast/hx-toast.styles.ts","../../src/components/hx-toast/hx-toast.ts","../../src/components/hx-toast/hx-toast-stack.ts","../../src/components/hx-toast/toast-factory.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixToastStyles = css`\n  /* ─── hx-toast host ─── */\n\n  :host {\n    display: block;\n    pointer-events: none;\n  }\n\n  :host([open]) {\n    pointer-events: auto;\n  }\n\n  /* ─── Toast base ─── */\n\n  .toast {\n    display: flex;\n    align-items: flex-start;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);\n    border-radius: var(--hx-toast-border-radius, var(--hx-border-radius-md, 0.375rem));\n    background-color: var(--hx-toast-bg, var(--hx-color-neutral-900, #0f172a));\n    color: var(--hx-toast-color, var(--hx-color-neutral-0, #ffffff));\n    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    box-shadow: var(\n      --hx-toast-shadow,\n      0 4px 6px -1px rgb(0 0 0 / 0.1),\n      0 2px 4px -2px rgb(0 0 0 / 0.1)\n    );\n    opacity: 0;\n    transform: translateY(var(--hx-toast-enter-translate, var(--hx-space-2, 0.5rem)));\n    transition:\n      opacity var(--hx-transition-normal, 250ms ease),\n      transform var(--hx-transition-normal, 250ms ease);\n    width: var(--hx-toast-width, 20rem);\n    max-width: 100%;\n    pointer-events: auto;\n  }\n\n  :host([open]) .toast {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  /* ─── Variant overrides ─── */\n\n  .toast--success {\n    --hx-toast-bg: var(--hx-color-success-600, #16a34a);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .toast--warning {\n    --hx-toast-bg: var(--hx-color-warning-500, #f59e0b);\n    --hx-toast-color: var(--hx-color-neutral-900, #0f172a);\n  }\n\n  .toast--danger {\n    --hx-toast-bg: var(--hx-color-error-600, #dc2626);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  .toast--info {\n    --hx-toast-bg: var(--hx-color-primary-600, #2563eb);\n    --hx-toast-color: var(--hx-color-neutral-0, #ffffff);\n  }\n\n  /* ─── Severity Label (WCAG 1.4.1) ─── */\n  /* Visually hidden — non-color cue for severity variants (success/warning/danger/info). */\n  /* Ensures variant is not conveyed by color alone for color-blind users.                */\n\n  .toast__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  /* ─── Icon ─── */\n\n  .toast__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    line-height: 1;\n  }\n\n  .toast__icon:empty {\n    display: none;\n  }\n\n  /* ─── Message ─── */\n\n  .toast__message {\n    flex: 1 1 auto;\n    min-width: 0;\n  }\n\n  /* ─── Action slot ─── */\n\n  .toast__action {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .toast__action:empty {\n    display: none;\n  }\n\n  /* ─── Close button ─── */\n\n  .toast__close {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* WCAG 2.5.5: minimum 44×44px touch target */\n    min-width: var(--hx-touch-target-min, 2.75rem);\n    min-height: var(--hx-touch-target-min, 2.75rem);\n    padding: var(--hx-space-1, 0.25rem);\n    background: transparent;\n    border: none;\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    color: inherit;\n    cursor: pointer;\n    opacity: var(--hx-opacity-75, 0.75);\n    transition: opacity var(--hx-transition-fast, 150ms ease);\n  }\n\n  .toast__close:hover {\n    opacity: 1;\n  }\n\n  .toast__close:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid currentColor;\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .toast {\n      transition: none;\n    }\n\n    .toast__close {\n      transition: none;\n    }\n  }\n`;\n\nexport const helixToastStackStyles = css`\n  :host {\n    display: block;\n    position: fixed;\n    z-index: var(--hx-z-index-toast, 1700);\n    pointer-events: none;\n  }\n\n  .toast-stack {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-3, 0.75rem);\n    padding: var(--hx-space-4, 1rem);\n    pointer-events: none;\n  }\n\n  /* ─── Placements ─── */\n\n  :host([placement='top-start']) {\n    top: 0;\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n  }\n\n  :host([placement='top-center']) {\n    top: 0;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    inset-inline-end: auto;\n    bottom: auto;\n  }\n\n  :host([placement='top-end']) {\n    top: 0;\n    inset-inline-end: 0;\n    inset-inline-start: auto;\n    bottom: auto;\n  }\n\n  :host([placement='bottom-start']) {\n    bottom: 0;\n    inset-inline-start: 0;\n    inset-inline-end: auto;\n    top: auto;\n  }\n\n  :host([placement='bottom-center']) {\n    bottom: 0;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n    inset-inline-end: auto;\n    top: auto;\n  }\n\n  :host([placement='bottom-end']) {\n    bottom: 0;\n    inset-inline-end: 0;\n    inset-inline-start: auto;\n    top: auto;\n  }\n\n  /* ─── Bottom placements: reverse order so newest is on top ─── */\n\n  :host([placement^='bottom']) .toast-stack {\n    flex-direction: column-reverse;\n  }\n\n  /* ─── Slide direction by placement ─── */\n\n  :host([placement^='top']) ::slotted(hx-toast) {\n    --hx-toast-enter-translate: calc(var(--hx-space-2, 0.5rem) * -1);\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToastStyles } from './hx-toast.styles.js';\n\nexport type ToastVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * A transient notification message that auto-dismisses after a configurable duration.\n * Supports multiple visual variants, a closable button, icon/action slots, and full\n * ARIA live region semantics for screen readers.\n *\n * @summary Transient notification toast component.\n *\n * @tag hx-toast\n *\n * @slot - Default slot for the notification message.\n * @slot icon - Optional icon rendered before the message.\n * @slot action - Optional action button rendered after the message.\n *\n * @fires {CustomEvent} hx-show - Dispatched when the toast becomes visible.\n * @fires {CustomEvent} hx-hide - Dispatched when the toast begins hiding.\n * @fires {CustomEvent} hx-after-hide - Dispatched after the hide animation completes.\n *\n * @csspart base - The inner toast container div.\n * @csspart icon - The icon slot wrapper.\n * @csspart message - The message slot wrapper.\n * @csspart close-button - The dismiss button (only when closable).\n * @csspart action - The action slot wrapper.\n *\n * @cssprop [--hx-toast-bg=var(--hx-color-neutral-900)] - Toast background color.\n * @cssprop [--hx-toast-color=var(--hx-color-neutral-0)] - Toast text color.\n * @cssprop [--hx-toast-border-radius=var(--hx-border-radius-md)] - Toast border radius.\n * @cssprop [--hx-toast-shadow] - Toast box shadow.\n * @cssprop [--hx-toast-width=20rem] - Toast width.\n */\n@customElement('hx-toast')\nexport class HelixToast extends LitElement {\n  static override styles = [tokenStyles, helixToastStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Visual style variant.\n   * @attr variant\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'success' | 'warning' | 'danger' | 'info' = 'default';\n\n  /**\n   * Auto-dismiss duration in milliseconds. Set to 0 for persistent toasts.\n   * @attr duration\n   */\n  @property({ type: Number })\n  duration = 5000;\n\n  /**\n   * Whether to show a close button.\n   * @attr closable\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Whether the toast is currently visible.\n   * @attr open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Accessible label for the close button. Override for localization.\n   * @attr label-close\n   */\n  @property({ attribute: 'label-close' })\n  labelClose = 'Dismiss notification';\n\n  // ─── Private State ───\n\n  /** @internal */\n  @query('.toast') private _toastEl!: HTMLElement | null;\n\n  /** @internal Tracks whether the action slot has slotted content. */\n  @state() private _hasActionContent = false;\n\n  /** @internal */\n  private _timer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Reduced Motion ───\n\n  /** @internal Returns true when the user has opted into reduced motion. */\n  private get _reducedMotion(): boolean {\n    // Guard for SSR — window.matchMedia is unavailable server-side\n    if (typeof window === 'undefined') return false;\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  /** @internal */\n  private _timerStartedAt: number | null = null;\n\n  /** @internal */\n  private _timerRemaining: number | null = null;\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.removeAttribute('aria-hidden');\n        this._emitShow();\n        if (this.duration > 0 && !this._reducedMotion && !this._hasActionContent) {\n          this._startTimer();\n        }\n      } else {\n        this.setAttribute('aria-hidden', 'true');\n        this._clearTimer();\n        this._emitHide();\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearTimer();\n  }\n\n  // ─── Public API ───\n\n  /** Show the toast. */\n  show(): void {\n    if (!this.open) {\n      this.open = true;\n    }\n  }\n\n  /** Hide the toast. */\n  hide(): void {\n    if (this.open) {\n      this.open = false;\n    }\n  }\n\n  // ─── Private Helpers ───\n\n  /** @internal */\n  private _startTimer(remaining?: number): void {\n    this._clearTimerHandle();\n    const delay = remaining ?? this.duration;\n    this._timerStartedAt = Date.now();\n    this._timerRemaining = delay;\n    this._timer = setTimeout(() => {\n      this.open = false;\n    }, delay);\n  }\n\n  /** @internal */\n  private _pauseTimer(): void {\n    if (this._timer === null || this._timerStartedAt === null || this._timerRemaining === null) {\n      return;\n    }\n    const elapsed = Date.now() - this._timerStartedAt;\n    this._timerRemaining = Math.max(0, this._timerRemaining - elapsed);\n    this._clearTimerHandle();\n  }\n\n  /** @internal */\n  private _clearTimerHandle(): void {\n    if (this._timer !== null) {\n      clearTimeout(this._timer);\n      this._timer = null;\n    }\n  }\n\n  /** @internal */\n  private _clearTimer(): void {\n    this._clearTimerHandle();\n    this._timerStartedAt = null;\n    this._timerRemaining = null;\n  }\n\n  /** @internal */\n  private _emitShow(): void {\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _emitHide(): void {\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n\n    let fired = false;\n    const fireAfterHide = () => {\n      if (fired) return;\n      fired = true;\n      this.dispatchEvent(new CustomEvent<void>('hx-after-hide', { bubbles: true, composed: true }));\n    };\n\n    // Fire on transitionend if available; fallback ensures it fires in test environments\n    // and when transitions are disabled (prefers-reduced-motion, no CSS transitions).\n    const base = this._toastEl;\n    if (base) {\n      base.addEventListener('transitionend', fireAfterHide, { once: true });\n    }\n    // Fallback fires after the CSS transition duration (250ms) plus a small buffer.\n    setTimeout(fireAfterHide, 300);\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleMouseEnter(): void {\n    this._pauseTimer();\n  }\n\n  /** @internal */\n  private _handleMouseLeave(): void {\n    if (this.open && this.duration > 0) {\n      this._startTimer(this._timerRemaining ?? undefined);\n    }\n  }\n\n  /** @internal */\n  private _handleFocusIn(): void {\n    this._pauseTimer();\n  }\n\n  /** @internal */\n  private _handleFocusOut(): void {\n    if (this.open && this.duration > 0) {\n      this._startTimer(this._timerRemaining ?? undefined);\n    }\n  }\n\n  /** @internal */\n  private _handleClose(): void {\n    this.hide();\n  }\n\n  /** @internal */\n  private _handleActionSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasActionContent = slot.assignedNodes({ flatten: true }).length > 0;\n    if (this._hasActionContent && this.open) {\n      this._pauseTimer();\n    }\n  }\n\n  // ─── ARIA Helpers ───\n\n  /** @internal */\n  private get _role(): 'alert' | 'status' {\n    return this.variant === 'danger' ? 'alert' : 'status';\n  }\n\n  /** @internal */\n  private get _ariaLive(): 'assertive' | 'polite' {\n    return this.variant === 'danger' ? 'assertive' : 'polite';\n  }\n\n  // ─── WCAG 1.4.1: Default Icons ───\n  // Each semantic variant renders a default icon when no icon is slotted,\n  // ensuring the severity is not conveyed by color alone.\n\n  /** @internal */\n  private _renderSuccessIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\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\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\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 _renderDangerIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\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 _renderInfoIcon() {\n    return html`<svg viewBox=\"0 0 20 20\" aria-hidden=\"true\" width=\"16\" height=\"16\">\n      <path\n        fill=\"currentColor\"\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 Returns the default icon for the current variant, or nothing for 'default'. */\n  private get _defaultIcon() {\n    switch (this.variant) {\n      case 'success':\n        return this._renderSuccessIcon();\n      case 'warning':\n        return this._renderWarningIcon();\n      case 'danger':\n        return this._renderDangerIcon();\n      case 'info':\n        return this._renderInfoIcon();\n      default:\n        return nothing;\n    }\n  }\n\n  // ─── WCAG 1.4.1: Severity label map ───\n\n  /** @internal */\n  private static readonly _SEVERITY_LABELS: Partial<Record<ToastVariant, string>> = {\n    success: 'Success',\n    warning: 'Warning',\n    danger: 'Error',\n    info: 'Info',\n  };\n\n  /** @internal */\n  private get _severityLabel(): string {\n    return HelixToast._SEVERITY_LABELS[this.variant] ?? '';\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const severityLabel = this._severityLabel;\n\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          toast: true,\n          [`toast--${this.variant}`]: true,\n        })}\n        role=${this._role}\n        aria-live=${this._ariaLive}\n        aria-atomic=\"true\"\n        @mouseenter=${this._handleMouseEnter}\n        @mouseleave=${this._handleMouseLeave}\n        @focusin=${this._handleFocusIn}\n        @focusout=${this._handleFocusOut}\n      >\n        ${this.open\n          ? html`\n              ${severityLabel\n                ? html`<span class=\"toast__severity-label\">${severityLabel}: </span>`\n                : nothing}\n              <span part=\"icon\" class=\"toast__icon\">\n                <slot name=\"icon\">${this._defaultIcon}</slot>\n              </span>\n              <span part=\"message\" class=\"toast__message\">\n                <slot></slot>\n              </span>\n              <span part=\"action\" class=\"toast__action\">\n                <slot name=\"action\" @slotchange=${this._handleActionSlotChange}></slot>\n              </span>\n              ${this.closable\n                ? html`\n                    <button\n                      part=\"close-button\"\n                      class=\"toast__close\"\n                      aria-label=${this.labelClose}\n                      @click=${this._handleClose}\n                    >\n                      <svg\n                        aria-hidden=\"true\"\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                      >\n                        <path d=\"M18 6L6 18M6 6l12 12\" />\n                      </svg>\n                    </button>\n                  `\n                : nothing}\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toast': HelixToast;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixToastStackStyles } from './hx-toast.styles.js';\n\nexport type ToastStackPlacement =\n  | 'top-start'\n  | 'top-center'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom-center'\n  | 'bottom-end';\n\n/**\n * A fixed-position container that stacks `hx-toast` elements at the specified\n * corner of the viewport. Enforces a maximum visible toast count via `stack-limit`.\n *\n * @summary Toast stack container managing position and count limits.\n *\n * @tag hx-toast-stack\n *\n * @slot - Accepts `hx-toast` elements.\n *\n * @csspart base - The inner stack container div.\n *\n * @cssprop [--hx-z-index-toast=9000] - Z-index for the fixed stack.\n */\n@customElement('hx-toast-stack')\nexport class HelixToastStack extends LitElement {\n  static override styles = [tokenStyles, helixToastStackStyles];\n\n  /**\n   * Corner of the viewport where toasts appear.\n   * @attr placement\n   */\n  @property({ type: String, reflect: true })\n  placement:\n    | 'top-start'\n    | 'top-center'\n    | 'top-end'\n    | 'bottom-start'\n    | 'bottom-center'\n    | 'bottom-end' = 'bottom-end';\n\n  /**\n   * Maximum number of simultaneously visible toasts. 0 = unlimited.\n   * @attr stack-limit\n   */\n  @property({ type: Number, attribute: 'stack-limit' })\n  stackLimit = 3;\n\n  override render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          'toast-stack': true,\n          [`toast-stack--${this.placement}`]: true,\n        })}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n// ─── Declarative Global Types ───\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-toast-stack': HelixToastStack;\n  }\n}\n","import { HelixToast } from './hx-toast.js';\nimport { HelixToastStack } from './hx-toast-stack.js';\nimport type { ToastVariant } from './hx-toast.js';\nimport type { ToastStackPlacement } from './hx-toast-stack.js';\n\nexport interface ToastOptions {\n  /** The notification message text. */\n  message: string;\n  /** Visual variant. Defaults to 'default'. */\n  variant?: ToastVariant;\n  /** Auto-dismiss duration in ms. 0 = persistent. Defaults to 3000. */\n  duration?: number;\n  /** Placement of the shared stack. Defaults to 'bottom-end'. */\n  placement?: ToastStackPlacement;\n}\n\n/**\n * Imperatively create and display a toast notification.\n *\n * Creates a shared `hx-toast-stack` on `document.body` if one does not exist,\n * then appends a new `hx-toast` with the given options. Respects the stack's\n * `stackLimit` by hiding the oldest visible toast when the limit is exceeded.\n *\n * @example\n * import { toast } from '@helixui/library/components/hx-toast/index.js';\n * toast({ message: 'Patient record saved.', variant: 'success' });\n */\nexport function toast(options: ToastOptions): HelixToast {\n  if (typeof document === 'undefined') throw new Error('toast() requires a browser environment');\n  const placement = options.placement ?? 'bottom-end';\n\n  // Find or create a dedicated stack for this placement\n  const stackSelector = `hx-toast-stack[placement=\"${placement}\"]`;\n  let stack = document.querySelector<HelixToastStack>(stackSelector);\n  if (!stack) {\n    stack = document.createElement('hx-toast-stack');\n    stack.placement = placement;\n    // Intentional design decision: the toast stack is appended to document.body rather\n    // than inserted near the caller. This is required so that the fixed-position overlay\n    // is not clipped by an ancestor with `overflow: hidden`, `transform`, or `filter`\n    // (all of which create a new stacking context and break fixed positioning).\n    // Drupal compatibility note: Drupal's BigPipe / AJAX behaviors can re-attach the\n    // document body without removing these stacks. The selector check above\n    // (`document.querySelector`) ensures only one stack per placement is ever created,\n    // preventing duplicates on re-attach cycles.\n    document.body.appendChild(stack);\n  }\n\n  // Enforce stack limit: hide oldest open toast if at capacity\n  if (stack.stackLimit > 0) {\n    const openToasts = [...stack.querySelectorAll<HelixToast>('hx-toast')].filter((t) => t.open);\n    if (openToasts.length >= stack.stackLimit) {\n      openToasts[0]?.hide();\n    }\n  }\n\n  // Create toast element\n  const toastEl = document.createElement('hx-toast');\n  toastEl.variant = options.variant ?? 'default';\n  toastEl.duration = options.duration ?? 3000;\n  toastEl.closable = true;\n  toastEl.textContent = options.message;\n\n  // Remove from DOM after hiding\n  toastEl.addEventListener('hx-after-hide', () => {\n    toastEl.remove();\n  });\n\n  stack.appendChild(toastEl);\n  toastEl.show();\n\n  return toastEl;\n}\n"],"names":["helixToastStyles","css","helixToastStackStyles","HelixToast","LitElement","changedProperties","remaining","delay","elapsed","fired","fireAfterHide","base","e","slot","html","nothing","severityLabel","classMap","tokenStyles","__decorateClass","property","query","state","customElement","HelixToastStack","toast","options","placement","stackSelector","stack","openToasts","t","_a","toastEl"],"mappings":";;;;AAEO,MAAMA,IAAmBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6JnBC,IAAwBD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACzH9B,IAAME,IAAN,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"}

package/dist/styles/shared-field.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const sharedFieldStyles: import('lit').CSSResult;
+/**
+ * Shared listbox + option styles — used by combobox and select.
+ */
+export declare const sharedListboxStyles: import('lit').CSSResult;
+//# sourceMappingURL=shared-field.styles.d.ts.map

package/dist/styles/shared-field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-field.styles.d.ts","sourceRoot":"","sources":["../../src/styles/shared-field.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,iBAAiB,yBAoD7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,yBA6D/B,CAAC"}

package/dist/utilities/adoptedStylesheetRegistry.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @module adoptedStylesheetRegistry
+ *
+ * A registry that integrates with the `@helixui/adopted-stylesheets` package
+ * when available, falling back to the `lightStyleRegistry` pattern for
+ * environments that do not support the Constructable Stylesheets API or where
+ * the adopted-stylesheets package is not installed.
+ *
+ * This module provides a unified `register` API so call sites do not need to
+ * branch on capability detection.
+ *
+ * @example
+ * ```ts
+ * import { adoptedStylesheetRegistry } from '../../utilities/adoptedStylesheetRegistry.js';
+ *
+ * // Registers via adopted stylesheets when available, falls back to <style> injection.
+ * adoptedStylesheetRegistry.register('hx-card', 'p { font-size: var(--hx-font-size-md); }');
+ * ```
+ */
+/**
+ * Registers a stylesheet for the given component, using the most capable
+ * available mechanism:
+ *
+ * 1. **Constructable Stylesheets** (`document.adoptedStyleSheets`) — preferred;
+ *    zero-duplication via `CSSStyleSheet` identity.
+ * 2. **`<style>` injection** — fallback for older browsers or SSR-hydrated pages
+ *    that do not support Constructable Stylesheets. Delegates to `injectLightStyles`
+ *    which scopes selectors via `[data-hx-styled="componentName"]`.
+ *
+ * Calling `register` multiple times with the same `componentName` is safe —
+ * the implementation deduplicates at the sheet level.
+ *
+ * @param componentName - The component tag name (e.g. `'hx-card'`).
+ * @param css - The CSS string to register. For fallback mode, selectors will be
+ *   scoped under `[data-hx-styled="componentName"]`.
+ */
+declare function register(componentName: string, css: string): void;
+/**
+ * The unified registry object for light DOM stylesheet management.
+ * Consumers should use this rather than calling `injectLightStyles` directly
+ * when they want automatic capability detection.
+ */
+export declare const adoptedStylesheetRegistry: {
+    register: typeof register;
+};
+export {};
+//# sourceMappingURL=adoptedStylesheetRegistry.d.ts.map

package/dist/utilities/adoptedStylesheetRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adoptedStylesheetRegistry.d.ts","sourceRoot":"","sources":["../../src/utilities/adoptedStylesheetRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAgBH;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,QAAQ,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAiB1D;AAED;;;;GAIG;AACH,eAAO,MAAM,yBAAyB;;CAAe,CAAC"}

package/dist/utilities/generateScopedSelectors.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @module generateScopedSelectors
+ *
+ * Generates CSS with all selectors scoped under a `[data-hx-styled="componentName"]`
+ * attribute selector. This ensures injected light DOM styles only apply to content
+ * wrapped in `<hx-style-scope component="...">` and do not leak to the rest of the page.
+ *
+ * @example
+ * ```ts
+ * import { generateScopedSelectors } from './generateScopedSelectors.js';
+ *
+ * const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');
+ * // '[data-hx-styled="hx-card"] p { color: red; }'
+ * ```
+ */
+/**
+ * Wraps all CSS selectors to be scoped under `[data-hx-styled="componentName"]`.
+ *
+ * Handles:
+ * - Standard selectors: `p { ... }` → `[data-hx-styled="hx-card"] p { ... }`
+ * - `::slotted(*)` patterns: `::slotted(p) { ... }` → `[data-hx-styled="hx-card"] p { ... }`
+ * - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped
+ * - `:host` selectors are replaced with the scope attribute selector
+ *
+ * @param componentName - The component tag name used as the scope identifier.
+ * @param css - The CSS string to transform.
+ * @returns The transformed CSS with all selectors scoped.
+ */
+export declare function generateScopedSelectors(componentName: string, css: string): string;
+//# sourceMappingURL=generateScopedSelectors.d.ts.map

package/dist/utilities/generateScopedSelectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateScopedSelectors.d.ts","sourceRoot":"","sources":["../../src/utilities/generateScopedSelectors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;GAYG;AACH,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGlF"}

package/dist/utilities/injectLightStyles.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @module injectLightStyles
+ *
+ * Core utility for injecting scoped `<style>` elements into `document.head`
+ * to style light DOM slotted content in HELiX components. Uses the
+ * `lightStyleRegistry` to deduplicate — each component type is injected at
+ * most once per page lifetime.
+ *
+ * This is the primary mechanism for ensuring Drupal-slotted content inherits
+ * proper typography and spacing when rendered into HELiX components.
+ *
+ * @example
+ * ```ts
+ * import { injectLightStyles } from '../../utilities/injectLightStyles.js';
+ *
+ * // In connectedCallback:
+ * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');
+ * ```
+ */
+/**
+ * Injects a scoped `<style>` element into `document.head` for light DOM content
+ * belonging to `componentName`. The CSS is automatically scoped via
+ * `generateScopedSelectors` so styles only apply inside
+ * `[data-hx-styled="componentName"]` wrappers.
+ *
+ * Safe to call multiple times — subsequent calls for the same `componentName`
+ * are no-ops (deduplication via `lightStyleRegistry`).
+ *
+ * No-op in SSR environments where `document` is not defined.
+ *
+ * @param componentName - The component tag name used as the scope identifier
+ *   (e.g. `'hx-card'`). Must be unique per component type.
+ * @param css - The raw CSS to scope and inject. Selectors will be prefixed with
+ *   `[data-hx-styled="componentName"]`.
+ */
+export declare function injectLightStyles(componentName: string, css: string): void;
+//# sourceMappingURL=injectLightStyles.d.ts.map

package/dist/utilities/injectLightStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"injectLightStyles.d.ts","sourceRoot":"","sources":["../../src/utilities/injectLightStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAKH;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAa1E"}

package/dist/utilities/lightStyleRegistry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @module lightStyleRegistry
+ *
+ * A Map-based registry that tracks which component stylesheets have been
+ * injected into the document's light DOM. Used by injectLightStyles to
+ * deduplicate style injection — each component type is injected at most once
+ * per page load.
+ *
+ * @example
+ * ```ts
+ * import { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';
+ *
+ * if (!isStyleRegistered('hx-card')) {
+ *   const el = document.createElement('style');
+ *   el.textContent = css;
+ *   document.head.appendChild(el);
+ *   registerStyle('hx-card', el);
+ * }
+ * ```
+ */
+/**
+ * Primary registry mapping component names to their injected HTMLStyleElement.
+ * Keyed by component tag name (e.g. `'hx-card'`).
+ */
+export declare const lightStyleRegistry: Map<string, HTMLStyleElement>;
+/**
+ * Returns true if a stylesheet for the given component has already been
+ * injected into the document.
+ *
+ * @param componentName - The component tag name (e.g. `'hx-card'`).
+ */
+export declare function isStyleRegistered(componentName: string): boolean;
+/**
+ * Records a stylesheet element in the registry for the given component.
+ * Called after the element has been appended to the document.
+ *
+ * @param componentName - The component tag name (e.g. `'hx-card'`).
+ * @param el - The HTMLStyleElement that was injected.
+ */
+export declare function registerStyle(componentName: string, el: HTMLStyleElement): void;
+//# sourceMappingURL=lightStyleRegistry.d.ts.map

package/dist/utilities/lightStyleRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightStyleRegistry.d.ts","sourceRoot":"","sources":["../../src/utilities/lightStyleRegistry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAa,CAAC;AAE3E;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,aAAa,EAAE,MAAM,GAAG,OAAO,CAEhE;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE,gBAAgB,GAAG,IAAI,CAE/E"}

package/dist/utilities/sheetManager.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @module sheetManager
+ *
+ * Sheet Manager pattern for batched injection and coordinated cleanup of
+ * light DOM stylesheets. Wraps the `injectLightStyles` and `lightStyleRegistry`
+ * utilities to provide a class-based API suitable for framework integrations
+ * and test teardown.
+ *
+ * @example
+ * ```ts
+ * import { SheetManager } from '../../utilities/sheetManager.js';
+ *
+ * const manager = new SheetManager();
+ * manager.inject('hx-card', 'p { font-size: var(--hx-font-size-md); }');
+ * manager.inject('hx-card', 'p { color: red; }'); // no-op — already injected
+ *
+ * // In test teardown:
+ * manager.cleanupAll();
+ * ```
+ */
+/**
+ * Manages a set of injected light DOM stylesheets, providing inject and
+ * cleanup operations. Useful for testing, server-side hydration, and
+ * framework-level integration where deterministic cleanup is required.
+ *
+ * Each `SheetManager` instance tracks only the component names it has
+ * injected during its lifetime. Multiple instances can coexist.
+ */
+export declare class SheetManager {
+    /** Component names injected via this manager instance. */
+    private _injected;
+    /**
+     * Injects scoped light DOM styles for the given component, if not already
+     * registered in the global `lightStyleRegistry`. Records the injection in
+     * this manager's instance tracking set.
+     *
+     * @param componentName - The component tag name (e.g. `'hx-card'`).
+     * @param css - The raw CSS to scope and inject.
+     */
+    inject(componentName: string, css: string): void;
+    /**
+     * Removes the injected `<style>` element for the given component from the
+     * document and clears it from both this instance and the global registry.
+     * No-op if the component was never injected or `document` is unavailable.
+     *
+     * @param componentName - The component tag name to clean up.
+     */
+    cleanup(componentName: string): void;
+    /**
+     * Removes all stylesheets injected via this manager instance from the
+     * document and clears them from the global registry.
+     */
+    cleanupAll(): void;
+    /**
+     * Returns the number of component stylesheets currently tracked by this
+     * manager instance (injected and not yet cleaned up).
+     *
+     * @returns The count of tracked injected stylesheets.
+     */
+    getInjectedCount(): number;
+}
+//# sourceMappingURL=sheetManager.d.ts.map

package/dist/utilities/sheetManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheetManager.d.ts","sourceRoot":"","sources":["../../src/utilities/sheetManager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAKH;;;;;;;GAOG;AACH,qBAAa,YAAY;IACvB,0DAA0D;IAC1D,OAAO,CAAC,SAAS,CAA0B;IAE3C;;;;;;;OAOG;IACH,MAAM,CAAC,aAAa,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAKhD;;;;;;OAMG;IACH,OAAO,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI;IAWpC;;;OAGG;IACH,UAAU,IAAI,IAAI;IAMlB;;;;;OAKG;IACH,gBAAgB,IAAI,MAAM;CAG3B"}

package/dist/utils/contrast-checker.d.ts

@@ -0,0 +1,86 @@
+/**
+ * WCAG 2.1 contrast ratio calculation utilities.
+ *
+ * Pure functions with zero side effects. Tree-shakeable when imported
+ * individually. All calculations follow the W3C WCAG 2.1 specification:
+ * https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+ *
+ * Healthcare requirement: clinical staff and patients need high-contrast
+ * mode in varying lighting conditions. These utilities validate that
+ * token pairs meet WCAG AA (4.5:1) and AAA (7:1) contrast ratios.
+ */
+/** Result of validating a foreground/background token pair */
+export interface ContrastValidation {
+    /** The calculated contrast ratio (e.g. 4.5) */
+    ratio: number;
+    /** Whether the pair meets WCAG AA for normal text (4.5:1) */
+    meetsAA: boolean;
+    /** Whether the pair meets WCAG AA for large text (3:1) */
+    meetsAALargeText: boolean;
+    /** Whether the pair meets WCAG AAA for normal text (7:1) */
+    meetsAAA: boolean;
+    /** Whether the pair meets WCAG AAA for large text (4.5:1) */
+    meetsAAALargeText: boolean;
+}
+/**
+ * Parse a hex color string into its RGB components.
+ * Supports 3-digit (#RGB), 4-digit (#RGBA), 6-digit (#RRGGBB),
+ * and 8-digit (#RRGGBBAA) hex values.
+ *
+ * Returns null if the input is not a valid hex color.
+ */
+export declare function parseHexColor(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Calculate the relative luminance of a color per WCAG 2.1.
+ *
+ * The formula converts sRGB values to linear RGB, then computes
+ * luminance as: L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+ *
+ * @see https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+ */
+export declare function getRelativeLuminance(hex: string): number;
+/**
+ * Calculate the contrast ratio between two colors per WCAG 2.1.
+ *
+ * The contrast ratio is defined as (L1 + 0.05) / (L2 + 0.05) where
+ * L1 is the lighter of the two luminance values and L2 is the darker.
+ *
+ * Returns a value between 1 (no contrast) and 21 (maximum contrast).
+ *
+ * @see https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+ */
+export declare function getContrastRatio(color1: string, color2: string): number;
+/**
+ * Check if a contrast ratio meets WCAG AA requirements.
+ *
+ * WCAG AA requires:
+ * - 4.5:1 for normal text (< 18pt or < 14pt bold)
+ * - 3:1 for large text (>= 18pt or >= 14pt bold)
+ *
+ * @param ratio - The contrast ratio to check
+ * @param largeText - Whether to use the large text threshold (3:1 instead of 4.5:1)
+ */
+export declare function meetsAA(ratio: number, largeText?: boolean): boolean;
+/**
+ * Check if a contrast ratio meets WCAG AAA requirements.
+ *
+ * WCAG AAA requires:
+ * - 7:1 for normal text
+ * - 4.5:1 for large text
+ *
+ * @param ratio - The contrast ratio to check
+ * @param largeText - Whether to use the large text threshold (4.5:1 instead of 7:1)
+ */
+export declare function meetsAAA(ratio: number, largeText?: boolean): boolean;
+/**
+ * Validate a foreground/background color pair against all WCAG contrast levels.
+ *
+ * Returns a comprehensive result object with the calculated ratio and
+ * pass/fail status for AA and AAA at both normal and large text sizes.
+ */
+export declare function validateTokenPair(fg: string, bg: string): ContrastValidation;
+//# sourceMappingURL=contrast-checker.d.ts.map

package/dist/utils/contrast-checker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast-checker.d.ts","sourceRoot":"","sources":["../../src/utils/contrast-checker.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,8DAA8D;AAC9D,MAAM,WAAW,kBAAkB;IACjC,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAC;IACjB,0DAA0D;IAC1D,gBAAgB,EAAE,OAAO,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CA8BrF;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAcxD;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,CAQvE;AAED;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,UAAQ,GAAG,OAAO,CAEjE;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,UAAQ,GAAG,OAAO,CAElE;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,kBAAkB,CAU5E"}

package/dist/utils/token-merger.d.ts

@@ -0,0 +1,24 @@
+import { BrandTokenMap } from '@helixui/tokens';
+/**
+ * Merges brand token overrides on top of a base theme CSS string.
+ *
+ * Brand tokens are appended as a `:host` block after the base theme CSS,
+ * which gives them higher cascade precedence within the adopted stylesheet.
+ * This preserves all primitive and semantic tokens from the base theme while
+ * allowing brand-specific values to override selectively.
+ *
+ * @param baseCSS - The base theme CSS string (from `_buildThemeCss`).
+ * @param brandTokens - CSS custom property overrides for the active brand.
+ * @returns Combined CSS string with brand overrides applied after the base theme.
+ *
+ * @example
+ * ```ts
+ * const merged = mergeBrandTokens(lightCSS, {
+ *   '--hx-color-primary-500': '#003DA5',
+ *   '--hx-color-primary-600': '#002D8A',
+ * });
+ * // merged === lightCSS + "\n\n:host {\n  --hx-color-primary-500: #003DA5;\n  ...}\n"
+ * ```
+ */
+export declare function mergeBrandTokens(baseCSS: string, brandTokens: BrandTokenMap): string;
+//# sourceMappingURL=token-merger.d.ts.map

package/dist/utils/token-merger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-merger.d.ts","sourceRoot":"","sources":["../../src/utils/token-merger.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,aAAa,GAAG,MAAM,CAUpF"}

package/fouc.css

@@ -11,23 +11,38 @@
  * matches and the element becomes visible automatically.
  */
 
+/**
+ * PHI fields must be fully hidden (not just invisible) until defined,
+ * to prevent any chance of protected health information rendering as
+ * unstyled text before the component JS loads.
+ */
+hx-phi-field:not(:defined) {
+  display: none;
+}
+
 hx-accordion:not(:defined),
+hx-accordion-item:not(:defined),
 hx-action-bar:not(:defined),
 hx-alert:not(:defined),
 hx-avatar:not(:defined),
 hx-badge:not(:defined),
+hx-banner:not(:defined),
 hx-breadcrumb:not(:defined),
+hx-breadcrumb-item:not(:defined),
 hx-button:not(:defined),
 hx-button-group:not(:defined),
 hx-card:not(:defined),
 hx-carousel:not(:defined),
+hx-carousel-item:not(:defined),
 hx-checkbox:not(:defined),
 hx-checkbox-group:not(:defined),
+hx-clinical-status:not(:defined),
 hx-code-snippet:not(:defined),
 hx-color-picker:not(:defined),
 hx-combobox:not(:defined),
 hx-container:not(:defined),
 hx-copy-button:not(:defined),
+hx-counter:not(:defined),
 hx-data-table:not(:defined),
 hx-date-picker:not(:defined),
 hx-dialog:not(:defined),
@@ -40,23 +55,30 @@ hx-file-upload:not(:defined),
 hx-form:not(:defined),
 hx-format-date:not(:defined),
 hx-grid:not(:defined),
+hx-grid-item:not(:defined),
 hx-help-text:not(:defined),
 hx-icon:not(:defined),
 hx-icon-button:not(:defined),
 hx-image:not(:defined),
 hx-link:not(:defined),
 hx-list:not(:defined),
+hx-list-item:not(:defined),
 hx-menu:not(:defined),
+hx-menu-divider:not(:defined),
+hx-menu-item:not(:defined),
 hx-meter:not(:defined),
 hx-nav:not(:defined),
+hx-nav-item:not(:defined),
 hx-number-input:not(:defined),
 hx-overflow-menu:not(:defined),
 hx-pagination:not(:defined),
+hx-phi-field:not(:defined),
 hx-popover:not(:defined),
 hx-popup:not(:defined),
 hx-progress-bar:not(:defined),
 hx-progress-ring:not(:defined),
 hx-prose:not(:defined),
+hx-radio:not(:defined),
 hx-radio-group:not(:defined),
 hx-rating:not(:defined),
 hx-select:not(:defined),
@@ -67,21 +89,36 @@ hx-spinner:not(:defined),
 hx-split-button:not(:defined),
 hx-split-panel:not(:defined),
 hx-stack:not(:defined),
+hx-stat:not(:defined),
 hx-status-indicator:not(:defined),
+hx-step:not(:defined),
 hx-steps:not(:defined),
 hx-structured-list:not(:defined),
+hx-structured-list-row:not(:defined),
+hx-style-scope:not(:defined),
 hx-switch:not(:defined),
+hx-tab:not(:defined),
+hx-tab-panel:not(:defined),
+hx-table:not(:defined),
 hx-tabs:not(:defined),
 hx-tag:not(:defined),
+hx-tbody:not(:defined),
+hx-td:not(:defined),
 hx-text:not(:defined),
 hx-text-input:not(:defined),
 hx-textarea:not(:defined),
+hx-th:not(:defined),
+hx-thead:not(:defined),
+hx-tfoot:not(:defined),
 hx-theme:not(:defined),
 hx-time-picker:not(:defined),
 hx-toast:not(:defined),
+hx-toast-stack:not(:defined),
 hx-toggle-button:not(:defined),
 hx-tooltip:not(:defined),
 hx-top-nav:not(:defined),
+hx-tr:not(:defined),
+hx-tree-item:not(:defined),
 hx-tree-view:not(:defined),
 hx-visually-hidden:not(:defined) {
   visibility: hidden;

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@helixui/library",
-  "version": "1.0.1",
+  "version": "1.1.2-next.1",
   "description": "Enterprise Web Component Library built with Lit 3.x",
   "type": "module",
   "sideEffects": [
-    "**/*.css",
-    "src/components/**/*.ts",
-    "dist/components/**/*.js",
-    "dist/shared/**/*.js"
+    "./dist/components/*/index.js",
+    "./src/components/*/index.ts",
+    "**/*.css"
   ],
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -21,7 +20,20 @@
       "import": "./dist/components/*/index.js"
     },
     "./custom-elements.json": "./custom-elements.json",
-    "./fouc.css": "./fouc.css"
+    "./fouc.css": "./fouc.css",
+    "./dist/css/helix-all.css": "./dist/css/helix-all.css",
+    "./dist/css/helix-tokens.css": "./dist/css/helix-tokens.css",
+    "./dist/css/helix-core.css": "./dist/css/helix-core.css",
+    "./dist/css/helix-forms.css": "./dist/css/helix-forms.css",
+    "./dist/css/helix-navigation.css": "./dist/css/helix-navigation.css",
+    "./dist/css/helix-layout.css": "./dist/css/helix-layout.css",
+    "./dist/css/helix-feedback.css": "./dist/css/helix-feedback.css",
+    "./dist/css/helix-overlay.css": "./dist/css/helix-overlay.css",
+    "./dist/css/helix-data.css": "./dist/css/helix-data.css",
+    "./dist/css/helix-media.css": "./dist/css/helix-media.css",
+    "./dist/css/helix-utility.css": "./dist/css/helix-utility.css",
+    "./dist/css/manifest.json": "./dist/css/manifest.json",
+    "./dist/css/index.css": "./dist/css/index.css"
   },
   "files": [
     "dist",
@@ -31,7 +43,7 @@
   "customElements": "custom-elements.json",
   "dependencies": {
     "lit": "^3.3.2",
-    "@helixui/tokens": "0.3.4"
+    "@helixui/tokens": "0.3.4-next.1"
   },
   "peerDependencies": {
     "@floating-ui/dom": "^1.7.6"
@@ -60,7 +72,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@vitest/browser": "^3.0.0",
-    "@vitest/coverage-istanbul": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "axe-core": "^4.11.1",
     "playwright": "^1.50.0",
     "typescript": "^5.7.2",
@@ -72,11 +84,14 @@
     "dev": "vite build --watch",
     "generate:barrel": "node scripts/generate-barrel.js",
     "prebuild": "node scripts/generate-barrel.js",
-    "build": "vite build && pnpm run cem",
+    "build": "vite build && pnpm run cem && pnpm run css:build",
+    "css:build": "node scripts/generate-css-bundles.mjs",
+    "css:validate": "node scripts/validate-css.mjs",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
     "test:cross-browser": "vitest run --config vitest.config.cross-browser.ts",
     "test:coverage": "vitest run --coverage.enabled",
+    "test:coverage:ci": "vitest run --coverage.enabled && node ../../scripts/check-coverage.mjs",
     "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "test:batch:1": "vitest run \"hx-accordion/|hx-action-bar/|hx-alert/|hx-avatar/|hx-badge/|hx-breadcrumb/|hx-button/|hx-button-group/|hx-card/|hx-carousel/|hx-checkbox/|hx-checkbox-group/|hx-code-snippet/|hx-color-picker/|hx-combobox/\" --reporter=verbose",
@@ -87,6 +102,8 @@
     "test:component": "vitest run --reporter=verbose",
     "cem": "custom-elements-manifest analyze --litelement --globs \"src/components/**/*.ts\" --exclude \"**/*.stories.ts\" --exclude \"**/*.styles.ts\"",
     "cem:watch": "custom-elements-manifest analyze --litelement --globs \"src/components/**/*.ts\" --exclude \"**/*.stories.ts\" --exclude \"**/*.styles.ts\" --watch",
+    "build:cdn": "node scripts/build-cdn.mjs",
+    "generate:drupal-libraries": "node scripts/generate-drupal-libraries.js",
     "lint": "eslint src/",
     "clean": "rm -rf dist custom-elements.json"
   }