@helixui/library 1.1.2 → 2.0.0

package/dist/shared/hx-code-snippet-DqzPkH4K.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-code-snippet-DqzPkH4K.js","sources":["../../src/components/hx-code-snippet/hx-code-snippet.styles.ts","../../src/components/hx-code-snippet/hx-code-snippet.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCodeSnippetStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([inline]) {\n    display: inline;\n  }\n\n  /* ─── Inline Mode ─── */\n\n  .code-snippet--inline {\n    display: inline;\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875em));\n    background-color: var(--hx-code-snippet-inline-bg, var(--hx-color-neutral-100, #f1f5f9));\n    color: var(--hx-code-snippet-inline-color, var(--hx-color-neutral-900, #0f172a));\n    padding: var(--hx-code-snippet-inline-padding-y, 0.125em)\n      var(--hx-code-snippet-inline-padding-x, 0.375em);\n    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-sm, 0.25rem));\n  }\n\n  /* ─── Block Mode Container ─── */\n\n  .code-snippet {\n    position: relative;\n    background-color: var(--hx-code-snippet-bg, var(--hx-color-neutral-900, #0f172a));\n    border-radius: var(--hx-code-snippet-border-radius, var(--hx-border-radius-md, 0.375rem));\n    overflow: hidden;\n  }\n\n  /* ─── Hidden Slot ─── */\n\n  .code-snippet__slot {\n    display: none;\n  }\n\n  /* ─── Header ─── */\n\n  .code-snippet__header {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-2, 0.5rem) 0;\n    min-height: var(--hx-space-8, 2rem);\n  }\n\n  /* ─── Pre / Code ─── */\n\n  .code-snippet__pre {\n    margin: 0;\n    padding: var(--hx-code-snippet-padding, var(--hx-space-4, 1rem));\n    overflow-x: auto;\n    white-space: pre;\n  }\n\n  .code-snippet__pre--wrap {\n    white-space: pre-wrap;\n    word-break: break-word;\n  }\n\n  .code-snippet__code {\n    display: block;\n    font-family: var(--hx-code-snippet-font-family, var(--hx-font-family-mono, monospace));\n    font-size: var(--hx-code-snippet-font-size, var(--hx-font-size-sm, 0.875rem));\n    line-height: var(--hx-line-height-relaxed, 1.625);\n    color: var(--hx-code-snippet-color, var(--hx-color-neutral-100, #f1f5f9));\n    tab-size: var(--hx-code-snippet-tab-size, 2);\n  }\n\n  /* ─── Copy Button ─── */\n\n  .code-snippet__copy-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--hx-space-1, 0.25rem);\n    padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n    border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-600, #475569);\n    border-radius: var(--hx-border-radius-sm, 0.25rem);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-200, #e2e8f0);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    line-height: var(--hx-line-height-none, 1);\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast, 150ms ease),\n      color var(--hx-transition-fast, 150ms ease),\n      border-color var(--hx-transition-fast, 150ms ease);\n    white-space: nowrap;\n    z-index: var(--hx-z-index-raised, 1);\n  }\n\n  .code-snippet__copy-button:hover {\n    background-color: var(--hx-color-neutral-700, #334155);\n    border-color: var(--hx-color-neutral-500, #64748b);\n  }\n\n  .code-snippet__copy-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .code-snippet__copy-button:active {\n    /* Non-standard token — fallback 0.8 applies if token is absent */\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Expand Button ─── */\n\n  .code-snippet__expand-button {\n    display: block;\n    width: 100%;\n    padding: var(--hx-space-2, 0.5rem) var(--hx-space-4, 1rem);\n    border: none;\n    border-top: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-700, #334155);\n    background-color: var(--hx-color-neutral-800, #1e293b);\n    color: var(--hx-color-neutral-300, #cbd5e1);\n    font-family: var(--hx-font-family-sans, sans-serif);\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    text-align: center;\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n  }\n\n  .code-snippet__expand-button:hover {\n    background-color: var(--hx-color-neutral-700, #334155);\n    color: var(--hx-color-neutral-100, #f1f5f9);\n  }\n\n  .code-snippet__expand-button:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  /* ─── Line Numbers ─── */\n\n  .code-snippet__line-number {\n    display: inline-block;\n    min-width: var(--hx-space-8, 2rem);\n    padding-right: var(--hx-space-3, 0.75rem);\n    color: var(--hx-code-snippet-line-number-color, var(--hx-color-neutral-500, #64748b));\n    user-select: none;\n    text-align: right;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .code-snippet__copy-button {\n      transition: none;\n    }\n\n    .code-snippet__expand-button {\n      transition: none;\n    }\n  }\n\n  /* ─── Screen-reader only ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n`;\n","import { LitElement, html, nothing, TemplateResult } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCodeSnippetStyles } from './hx-code-snippet.styles.js';\n\n/**\n * A styled code block with optional copy button and max-lines truncation.\n * Supports block (`<pre><code>`) and inline (`<code>`) rendering modes.\n * No external syntax highlighting dependency — use the `language` attribute\n * as a hint for consumers integrating their own highlighter via slotted content.\n *\n * @summary Styled code display component with copy-to-clipboard and expand/collapse.\n *\n * @tag hx-code-snippet\n *\n * @slot - Code content as plain text. Note: HTML markup in slot content will be\n *   stripped — only text content is extracted. Pre-highlighted HTML is not supported.\n *\n * @fires {CustomEvent<{text: string}>} hx-copy - Dispatched when the copy button is clicked.\n *\n * @csspart base - The outermost container (block: `<div>`, inline: `<code>`).\n * @csspart header - The header bar containing the copy button (block mode only).\n * @csspart code - The `<code>` element containing the content.\n * @csspart copy-button - The copy-to-clipboard button.\n * @csspart expand-button - The \"Show more / Show less\" button.\n *\n * @cssprop [--hx-code-snippet-bg=var(--hx-color-neutral-900,#0f172a)] - Background color.\n * @cssprop [--hx-code-snippet-color=var(--hx-color-neutral-100,#f1f5f9)] - Text color.\n * @cssprop [--hx-code-snippet-font-family=var(--hx-font-family-mono,monospace)] - Font family.\n * @cssprop [--hx-code-snippet-font-size=var(--hx-font-size-sm,0.875rem)] - Font size.\n * @cssprop [--hx-code-snippet-border-radius=var(--hx-border-radius-md,0.375rem)] - Border radius.\n * @cssprop [--hx-code-snippet-padding=var(--hx-space-4,1rem)] - Inner padding (block mode).\n */\n@customElement('hx-code-snippet')\nexport class HelixCodeSnippet extends LitElement {\n  static override styles = [tokenStyles, helixCodeSnippetStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * Language hint for consumers to apply syntax highlighting.\n   * Does not affect rendering directly; it is applied as a `language-*` class\n   * on the `<code>` element so external highlighters can target it.\n   * @attr language\n   */\n  @property({ type: String, reflect: true })\n  language: string = '';\n\n  /**\n   * When true, renders as an inline `<code>` element instead of a `<pre><code>` block.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline: boolean = false;\n\n  /**\n   * When true, enables word-wrap in block mode.\n   * @attr wrap\n   */\n  @property({ type: Boolean, reflect: true })\n  wrap: boolean = false;\n\n  /**\n   * When true, shows a copy-to-clipboard button. Add the `copyable` attribute to enable it.\n   * @attr copyable\n   */\n  @property({ type: Boolean, reflect: true })\n  copyable: boolean = false;\n\n  /**\n   * Maximum number of lines to display before showing a \"Show more\" button.\n   * Set to 0 (default) to disable truncation.\n   * @attr max-lines\n   */\n  @property({ type: Number, attribute: 'max-lines', reflect: true })\n  maxLines: number = 0;\n\n  /**\n   * When true, prepends line numbers to each displayed line in block mode.\n   * Line numbers are rendered as `aria-hidden` spans so screen readers skip them.\n   * @attr line-numbers\n   */\n  @property({ type: Boolean, attribute: 'line-numbers', reflect: true })\n  lineNumbers: boolean = false;\n\n  /**\n   * Label for the copy button in idle state.\n   * @attr label-copy\n   */\n  @property({ type: String, attribute: 'label-copy' })\n  labelCopy = 'Copy code';\n\n  /**\n   * Label for the copy button after successful copy.\n   * @attr label-copied\n   */\n  @property({ type: String, attribute: 'label-copied' })\n  labelCopied = 'Copied!';\n\n  /**\n   * Label for the expand button when content is collapsed.\n   * @attr label-show-more\n   */\n  @property({ type: String, attribute: 'label-show-more' })\n  labelShowMore = 'Show more';\n\n  /**\n   * Label for the expand button when content is expanded.\n   * @attr label-show-less\n   */\n  @property({ type: String, attribute: 'label-show-less' })\n  labelShowLess = 'Show less';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _copied: boolean = false;\n  /** @internal */\n  @state() private _expanded: boolean = false;\n  /** @internal */\n  @state() private _codeText: string = '';\n\n  /** @internal */\n  private _copyTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override firstUpdated(): void {\n    // Prevent flash of empty <code> before slotchange fires by eagerly reading\n    // text content from host children that are already present on first render.\n    if (!this._codeText) {\n      const text = this.textContent?.trim() ?? '';\n      if (text) {\n        this._codeText = text;\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._copyTimer !== null) {\n      clearTimeout(this._copyTimer);\n      this._copyTimer = null;\n    }\n  }\n\n  // ─── Event Handlers ───\n\n  /** @internal */\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement | null;\n    if (!slot) return;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this._codeText = nodes.map((n) => n.textContent ?? '').join('');\n  }\n\n  /** @internal */\n  private _handleCopy(): void {\n    const text = this._codeText;\n\n    navigator.clipboard.writeText(text).catch(() => {\n      // Clipboard API unavailable (non-HTTPS environments such as Drupal staging) — emit event only.\n      // Note: navigator.clipboard requires a secure context (HTTPS or localhost).\n      // On HTTP, the copy event still fires but the clipboard is not populated.\n    });\n\n    this.dispatchEvent(\n      new CustomEvent<{ text: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { text },\n      }),\n    );\n\n    this._copied = true;\n    if (this._copyTimer !== null) clearTimeout(this._copyTimer);\n    this._copyTimer = setTimeout(() => {\n      this._copied = false;\n    }, 2000);\n  }\n\n  /** @internal */\n  private _handleExpand(): void {\n    this._expanded = !this._expanded;\n  }\n\n  // ─── Helpers ───\n\n  /** @internal */\n  private _getDisplayLines(): string[] {\n    const lines = this._codeText.split('\\n');\n    if (!this.maxLines || this.maxLines <= 0 || this._expanded) {\n      return lines;\n    }\n    if (lines.length <= this.maxLines) {\n      return lines;\n    }\n    return lines.slice(0, this.maxLines);\n  }\n\n  /** @internal */\n  private _isTruncated(): boolean {\n    if (!this.maxLines || this.maxLines <= 0) return false;\n    const lines = this._codeText.split('\\n');\n    return lines.length > this.maxLines;\n  }\n\n  /** @internal */\n  private _renderLines(lines: string[]): TemplateResult {\n    if (!this.lineNumbers) {\n      return html`${lines.join('\\n')}`;\n    }\n    return html`${lines.map(\n      (line, i) =>\n        html`<span aria-hidden=\"true\" class=\"code-snippet__line-number\">${i + 1}</span>${line +\n          '\\n'}`,\n    )}`;\n  }\n\n  // ─── Render ───\n\n  override render(): TemplateResult | typeof nothing {\n    if (this.inline) {\n      return html`\n        <code part=\"base code\" class=\"code-snippet code-snippet--inline\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </code>\n      `;\n    }\n\n    const displayLines = this._getDisplayLines();\n    const truncated = this._isTruncated();\n    const preLabel = this.language ? `Code snippet: ${this.language}` : 'Code snippet';\n    const codeClasses = classMap({\n      'code-snippet__code': true,\n      [`language-${this.language}`]: Boolean(this.language),\n    });\n\n    return html`\n      <div part=\"base\" class=\"code-snippet\">\n        <div part=\"header\" class=\"code-snippet__header\">\n          ${this.copyable\n            ? html`\n                <button\n                  part=\"copy-button\"\n                  class=\"code-snippet__copy-button\"\n                  type=\"button\"\n                  aria-label=${this._copied ? this.labelCopied : this.labelCopy}\n                  @click=${this._handleCopy}\n                >\n                  ${this._copied ? this.labelCopied : this.labelCopy}\n                </button>\n              `\n            : nothing}\n        </div>\n\n        <!-- Visually-hidden live region announces copy confirmation to assistive technology -->\n        <span\n          aria-live=\"polite\"\n          style=\"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;\"\n          >${this._copied ? this.labelCopied : ''}</span\n        >\n\n        <pre\n          role=\"region\"\n          aria-label=${preLabel}\n          class=${classMap({\n            'code-snippet__pre': true,\n            'code-snippet__pre--wrap': this.wrap,\n          })}\n        ><code part=\"code\" class=${codeClasses}>${this._renderLines(displayLines)}</code></pre>\n\n        <!-- Hidden slot to capture text content for display and copy -->\n        <slot class=\"code-snippet__slot\" @slotchange=${this._handleSlotChange}></slot>\n\n        ${truncated\n          ? html`\n              <button\n                part=\"expand-button\"\n                class=\"code-snippet__expand-button\"\n                type=\"button\"\n                aria-expanded=${this._expanded ? 'true' : nothing}\n                @click=${this._handleExpand}\n              >\n                ${this._expanded ? this.labelShowLess : this.labelShowMore}\n              </button>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-code-snippet': HelixCodeSnippet;\n  }\n}\n"],"names":["helixCodeSnippetStyles","css","HelixCodeSnippet","LitElement","text","_a","slot","nodes","n","lines","html","line","i","displayLines","truncated","preLabel","codeClasses","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-color-picker-Da8z6AlQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-color-picker-Da8z6AlQ.js","sources":["../../src/components/hx-color-picker/hx-color-picker.styles.ts","../../src/components/hx-color-picker/hx-color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\n// prettier-ignore\nexport const helixColorPickerStyles = css`:host{display:inline-block;position:relative;font-family:var(--hx-font-family-sans, sans-serif);font-size:var(--hx-font-size-sm, .875rem)}:host([disabled]){pointer-events:none;opacity:var(--hx-opacity-disabled, .4)}.trigger{display:inline-flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-1, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-md, .375rem);background:var(--hx-color-neutral-0, #fff);cursor:pointer;transition:border-color var(--hx-transition-fast, .15s ease)}.trigger:hover:not([disabled]){border-color:var(--hx-color-primary-500, #3b82f6)}:is(.trigger,.gradient-grid,.slider-track,.swatch-btn,.format-btn):focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, var(--hx-color-primary-500));outline-offset:var(--hx-focus-ring-offset, 2px)}.trigger-swatch{width:1.5rem;height:1.5rem;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);display:block;flex-shrink:0}.trigger-label{font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-700, #374151);font-family:var(--hx-font-family-mono, monospace);white-space:nowrap}.panel{position:absolute;z-index:var(--hx-color-picker-z-index, 1000);top:calc(100% + 4px);left:0;background:var(--hx-color-neutral-0, #fff);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem);box-shadow:0 8px 24px var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, .15)));padding:var(--hx-space-4, 1rem);width:var(--hx-color-picker-width, 260px);display:flex;flex-direction:column;gap:var(--hx-space-3, .75rem);outline:none}:host([inline]) .panel{position:static;box-shadow:none;border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);border-radius:var(--hx-border-radius-lg, .5rem)}.gradient-grid{position:relative;width:100%;height:var(--hx-color-picker-grid-height, 160px);border-radius:var(--hx-border-radius-sm, .25rem);cursor:crosshair;overflow:hidden;touch-action:none;flex-shrink:0}.gradient-grid-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--_hue-color, hsl(0, 100%, 50%)));pointer-events:none}.gradient-thumb{position:absolute;width:12px;height:12px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;top:var(--_thumb-y, 0%);left:var(--_thumb-x, 100%)}.slider-track{position:relative;width:100%;height:12px;border-radius:6px;cursor:pointer;touch-action:none;flex-shrink:0}.hue-track{background:linear-gradient(to right,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#7f00ff,#f0f,#ff0080,red)}.opacity-track{background-image:linear-gradient(to right,transparent,var(--_hue-color, hsl(0, 100%, 50%))),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0 0 / 12px 12px}.slider-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:none;box-shadow:0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff)),0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)));transform:translate(-50%,-50%);pointer-events:none;left:var(--_slider-pct, 0%);background:var(--_thumb-color, hsl(0, 100%, 50%))}.swatches{display:flex;flex-wrap:wrap;gap:var(--hx-space-1, .25rem)}.swatch-btn{width:20px;height:20px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));cursor:pointer;padding:0;flex-shrink:0;transition:transform var(--hx-transition-fast, .15s ease)}.swatch-btn:hover{transform:scale(1.15);border-color:var( --hx-color-picker-swatch-border-hover, var(--hx-overlay-black-30, rgba(0, 0, 0, .3)) )}.input-area{display:flex;align-items:center;gap:var(--hx-space-2, .5rem)}.format-btn{flex-shrink:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);background:var(--hx-color-neutral-100, #f3f4f6);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);cursor:pointer;font-size:var(--hx-font-size-xs, .75rem);color:var(--hx-color-neutral-600, #4b5563);text-transform:uppercase;font-weight:var(--hx-font-weight-semibold, 600);letter-spacing:.05em}.color-input{flex:1;min-width:0;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);border-radius:var(--hx-border-radius-sm, .25rem);font-family:var(--hx-font-family-mono, monospace);font-size:var(--hx-font-size-sm, .875rem);color:var(--hx-color-neutral-900, #111827);background:var(--hx-color-neutral-0, #fff);outline:none}.color-input:focus{border-color:var(--hx-focus-ring-color, var(--hx-color-primary-500));box-shadow:0 0 0 2px color-mix(in srgb,var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%,transparent)}.input-preview{width:24px;height:24px;border-radius:var(--hx-border-radius-sm, .25rem);border:var(--hx-border-width-thin, 1px) solid var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, .1)));background:var(--_preview-color, #000);flex-shrink:0}@media(prefers-reduced-motion:reduce){.trigger,.swatch-btn{transition:none}}`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixColorPickerStyles } from './hx-color-picker.styles.js';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';\n\ninterface HSV {\n  h: number; // 0-360\n  s: number; // 0-100\n  v: number; // 0-100\n  a: number; // 0-1\n}\n\ninterface RGB {\n  r: number; // 0-255\n  g: number; // 0-255\n  b: number; // 0-255\n  a: number; // 0-1\n}\n\n// ─── Color utilities ──────────────────────────────────────────────────────────\n\nfunction clamp(n: number, min: number, max: number): number {\n  return Math.max(min, Math.min(max, n));\n}\n\nfunction hexToRgb(hex: string): RGB | null {\n  let h = hex.trim().replace(/^#/, '');\n  if (h.length === 3) h = h.replace(/(.)/g, '$1$1');\n  if (h.length === 4) h = h.replace(/(.)/g, '$1$1');\n  if (h.length === 6) h += 'ff';\n  if (h.length !== 8) return null;\n  const n = parseInt(h, 16);\n  if (isNaN(n)) return null;\n  return {\n    r: (n >>> 24) & 0xff,\n    g: (n >>> 16) & 0xff,\n    b: (n >>> 8) & 0xff,\n    a: (n & 0xff) / 255,\n  };\n}\n\nfunction toHex2(n: number): string {\n  return Math.round(clamp(n, 0, 255))\n    .toString(16)\n    .padStart(2, '0');\n}\n\nfunction rgbToHex(rgb: RGB, includeAlpha: boolean): string {\n  const base = `#${toHex2(rgb.r)}${toHex2(rgb.g)}${toHex2(rgb.b)}`;\n  if (includeAlpha && rgb.a < 1) return base + toHex2(rgb.a * 255);\n  return base;\n}\n\nfunction rgbToHsv(rgb: RGB): HSV {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const d = max - min;\n  const s = max === 0 ? 0 : d / max;\n  const v = max;\n  let h = 0;\n  if (d !== 0) {\n    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n    else if (max === g) h = ((b - r) / d + 2) / 6;\n    else h = ((r - g) / d + 4) / 6;\n  }\n  return { h: h * 360, s: s * 100, v: v * 100, a: rgb.a };\n}\n\nfunction hsvToRgb(hsv: HSV): RGB {\n  const h = hsv.h / 360;\n  const s = hsv.s / 100;\n  const v = hsv.v / 100;\n  const i = Math.floor(h * 6);\n  const f = h * 6 - i;\n  const p = v * (1 - s);\n  const q = v * (1 - f * s);\n  const t = v * (1 - (1 - f) * s);\n  let r = 0;\n  let g = 0;\n  let b = 0;\n  switch (i % 6) {\n    case 0:\n      r = v;\n      g = t;\n      b = p;\n      break;\n    case 1:\n      r = q;\n      g = v;\n      b = p;\n      break;\n    case 2:\n      r = p;\n      g = v;\n      b = t;\n      break;\n    case 3:\n      r = p;\n      g = q;\n      b = v;\n      break;\n    case 4:\n      r = t;\n      g = p;\n      b = v;\n      break;\n    case 5:\n      r = v;\n      g = p;\n      b = q;\n      break;\n  }\n  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: hsv.a };\n}\n\nfunction rgbToHsl(rgb: RGB): { h: number; s: number; l: number; a: number } {\n  const r = rgb.r / 255;\n  const g = rgb.g / 255;\n  const b = rgb.b / 255;\n  const max = Math.max(r, g, b);\n  const min = Math.min(r, g, b);\n  const l = (max + min) / 2;\n  let h = 0;\n  let s = 0;\n  if (max !== min) {\n    const d = max - min;\n    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n    else if (max === g) h = ((b - r) / d + 2) / 6;\n    else h = ((r - g) / d + 4) / 6;\n  }\n  return { h: h * 360, s: s * 100, l: l * 100, a: rgb.a };\n}\n\n// P2-1: parseColor now handles HSV/HSVA input strings for round-trip correctness\nfunction parseColor(value: string): HSV | null {\n  if (!value) return null;\n\n  if (value.startsWith('#')) {\n    const rgb = hexToRgb(value);\n    return rgb ? rgbToHsv(rgb) : null;\n  }\n\n  const rgbMatch = value.match(\n    /rgba?\\(\\s*(\\d+)(?:\\s*,\\s*|\\s+)(\\d+)(?:\\s*,\\s*|\\s+)(\\d+)(?:\\s*(?:\\/|,)\\s*([\\d.]+))?\\s*\\)/,\n  );\n  if (rgbMatch) {\n    const [, rm1, rm2, rm3, rm4] = rgbMatch;\n    return rgbToHsv({\n      r: parseInt(rm1 ?? '0', 10),\n      g: parseInt(rm2 ?? '0', 10),\n      b: parseInt(rm3 ?? '0', 10),\n      a: rm4 !== undefined ? parseFloat(rm4) : 1,\n    });\n  }\n\n  const hslMatch = value.match(\n    /hsla?\\(\\s*([\\d.]+)(?:\\s*,\\s*|\\s+)([\\d.]+)%(?:\\s*,\\s*|\\s+)([\\d.]+)%(?:\\s*(?:\\/|,)\\s*([\\d.]+))?\\s*\\)/,\n  );\n  if (hslMatch) {\n    const [, hm1, hm2, hm3, hm4] = hslMatch;\n    const h = parseFloat(hm1 ?? '0');\n    const s = parseFloat(hm2 ?? '0') / 100;\n    const l = parseFloat(hm3 ?? '0') / 100;\n    const a = hm4 !== undefined ? parseFloat(hm4) : 1;\n    const c = (1 - Math.abs(2 * l - 1)) * s;\n    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n    const m = l - c / 2;\n    let r = 0;\n    let g = 0;\n    let b = 0;\n    if (h < 60) {\n      r = c;\n      g = x;\n    } else if (h < 120) {\n      r = x;\n      g = c;\n    } else if (h < 180) {\n      g = c;\n      b = x;\n    } else if (h < 240) {\n      g = x;\n      b = c;\n    } else if (h < 300) {\n      r = x;\n      b = c;\n    } else {\n      r = c;\n      b = x;\n    }\n    return rgbToHsv({\n      r: Math.round((r + m) * 255),\n      g: Math.round((g + m) * 255),\n      b: Math.round((b + m) * 255),\n      a,\n    });\n  }\n\n  // P2-1: Support HSV/HSVA input strings (component's own output format)\n  const hsvMatch = value.match(\n    /hsva?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\\)/,\n  );\n  if (hsvMatch) {\n    const [, hm1, hm2, hm3, hm4] = hsvMatch;\n    return {\n      h: parseFloat(hm1 ?? '0'),\n      s: parseFloat(hm2 ?? '0'),\n      v: parseFloat(hm3 ?? '0'),\n      a: hm4 !== undefined ? parseFloat(hm4) : 1,\n    };\n  }\n\n  return null;\n}\n\nfunction formatColor(hsv: HSV, format: ColorFormat, includeAlpha: boolean): string {\n  const rgb = hsvToRgb(hsv);\n  switch (format) {\n    case 'hex':\n      return rgbToHex(rgb, includeAlpha);\n    case 'rgb': {\n      if (includeAlpha && hsv.a < 1) {\n        return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(hsv.a * 100) / 100})`;\n      }\n      return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;\n    }\n    case 'hsl': {\n      const hsl = rgbToHsl(rgb);\n      if (includeAlpha && hsv.a < 1) {\n        return `hsl(${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}% / ${Math.round(hsv.a * 100) / 100})`;\n      }\n      return `hsl(${Math.round(hsl.h)} ${Math.round(hsl.s)}% ${Math.round(hsl.l)}%)`;\n    }\n    case 'hsv': {\n      if (includeAlpha && hsv.a < 1) {\n        return `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${Math.round(hsv.a * 100) / 100})`;\n      }\n      return `hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`;\n    }\n  }\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * A color picker control with gradient picker, hue/opacity sliders, swatches,\n * and formatted text input. Supports hex, rgb, hsl, and hsv output formats.\n *\n * @summary Color selection control with swatches, gradient picker, and formatted input.\n *\n * @tag hx-color-picker\n *\n * @slot trigger - Custom trigger element. Default: a color swatch button.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched while dragging sliders or grid.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when a color is committed.\n *\n * @csspart trigger - The trigger button element.\n * @csspart swatches - The swatch color buttons container.\n * @csspart grid - The 2D saturation/value gradient picker area.\n * @csspart slider - Shared slider container (also on hue-slider and opacity-slider).\n * @csspart hue-slider - The hue slider track.\n * @csspart opacity-slider - The alpha/opacity slider track.\n * @csspart input - The text input area.\n *\n * @cssprop [--hx-color-picker-z-index=1000] - z-index of the popover panel.\n * @cssprop [--hx-color-picker-width=260px] - Width of the picker panel.\n * @cssprop [--hx-color-picker-grid-height=160px] - Height of the gradient grid.\n * @cssprop [--hx-color-picker-thumb-border=#fff] - Border color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-thumb-shadow=rgba(0,0,0,0.3)] - Shadow color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-panel-shadow=rgba(0,0,0,0.15)] - Panel drop-shadow color.\n * @cssprop [--hx-color-picker-swatch-border=rgba(0,0,0,0.1)] - Swatch button border color.\n * @cssprop [--hx-color-picker-swatch-border-hover=rgba(0,0,0,0.3)] - Swatch button border on hover.\n *\n * @example\n * ```html\n * <hx-color-picker value=\"#3b82f6\" format=\"hex\"></hx-color-picker>\n * ```\n *\n * @example Drupal / Twig usage\n * The `swatches` property must be set via JavaScript (Drupal behavior) because arrays\n * cannot be serialized as HTML attributes:\n * ```js\n * // my-theme/js/color-picker-behavior.js\n * Drupal.behaviors.helixColorPicker = {\n *   attach(context) {\n *     context.querySelectorAll('hx-color-picker[data-swatches]').forEach((el) => {\n *       el.swatches = JSON.parse(el.dataset.swatches);\n *     });\n *   },\n * };\n * ```\n * ```twig\n * <hx-color-picker\n *   value=\"{{ color }}\"\n *   data-swatches='{{ swatches | json_encode }}'\n * ></hx-color-picker>\n * ```\n */\n@customElement('hx-color-picker')\nexport class HelixColorPicker extends LitElement {\n  static override styles = [tokenStyles, helixColorPickerStyles];\n\n  /**\n   * Declares this element as form-associated so it participates in native form submission.\n   * @internal\n   */\n  static formAssociated = true;\n\n  /**\n   * ElementInternals instance used for form participation and constraint validation.\n   * @internal\n   */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n    // P1-1: Store bound references so connectedCallback/disconnectedCallback use the same object\n    /** @internal */\n    this._boundPointerMove = this._handlePointerMove.bind(this);\n    /** @internal */\n    this._boundPointerUp = this._handlePointerUp.bind(this);\n    /** @internal */\n    this._boundDocumentClick = this._handleDocumentClick.bind(this);\n  }\n\n  // ─── Public Properties ───────────────────────────────────────────────────\n\n  /**\n   * Current color value as a CSS color string.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '#000000';\n\n  /**\n   * Output format for the color value.\n   * @attr format\n   */\n  @property({ type: String, reflect: true })\n  format: ColorFormat = 'hex';\n\n  /**\n   * Whether to show the alpha/opacity channel slider and include alpha in the output.\n   * @attr opacity\n   */\n  @property({ type: Boolean, reflect: true })\n  opacity = false;\n\n  /**\n   * Array of preset swatch color strings.\n   * Set via JS property only — arrays cannot be serialized as HTML attributes.\n   * In Drupal/Twig, use a behavior to read `data-swatches` and set this property.\n   * See JSDoc example above.\n   */\n  @property({ attribute: false })\n  swatches: string[] = [];\n\n  /**\n   * When true, hides the gradient grid and sliders, showing only swatches and the input.\n   * Useful for compact preset-only color selection UIs.\n   * @attr swatches-only\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'swatches-only' })\n  swatchesOnly = false;\n\n  /**\n   * Whether the control is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Form field name for form participation.\n   * @attr name\n   */\n  @property({ type: String, reflect: true })\n  name = '';\n\n  /**\n   * When true the picker is shown inline instead of in a popover.\n   * @attr inline\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * When true, the picker requires a non-empty value for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Accessible label for the color gradient canvas. */\n  @property({ type: String, attribute: 'label-gradient' })\n  labelGradient = 'Color gradient';\n\n  /** Accessible label for the hue slider. */\n  @property({ type: String, attribute: 'label-hue' })\n  labelHue = 'Hue';\n\n  /** Accessible label for the opacity slider. */\n  @property({ type: String, attribute: 'label-opacity' })\n  labelOpacity = 'Opacity';\n\n  /** Accessible label for the preset color swatches section. */\n  @property({ type: String, attribute: 'label-swatches' })\n  labelSwatches = 'Preset colors';\n\n  /** Accessible label for the format-switch button. */\n  @property({ type: String, attribute: 'label-switch-format' })\n  labelSwitchFormat = 'Switch color format';\n\n  /** Accessible label for the color value input. */\n  @property({ type: String, attribute: 'label-color-value' })\n  labelColorValue = 'Color value';\n\n  /** Accessible label for the color picker dialog/panel. */\n  @property({ type: String, attribute: 'label-picker' })\n  labelPicker = 'Color picker';\n\n  /**\n   * Generates the accessible label for the trigger button.\n   * @param color - current color value string\n   */\n  @property({ attribute: false })\n  labelTrigger: (color: string) => string = (color) => `Choose color: ${color}`;\n\n  // ─── Internal State ──────────────────────────────────────────────────────\n\n  /**\n   * Internal HSV representation of the current color, used to drive all picker UI elements.\n   * @internal\n   */\n  @state() private _hsv: HSV = { h: 0, s: 0, v: 0, a: 1 };\n  /**\n   * Whether the color picker popover panel is currently open.\n   * @internal\n   */\n  @state() private _open = false;\n  /**\n   * The formatted color string displayed in the text input, kept in sync with `_hsv` and `format`.\n   * @internal\n   */\n  @state() private _inputValue = '#000000';\n\n  // ─── Dragging state (not reactive, managed manually) ─────────────────────\n\n  /**\n   * Whether the user is actively dragging within the gradient grid.\n   * @internal\n   */\n  private _draggingGrid = false;\n  /**\n   * Whether the user is actively dragging the hue slider thumb.\n   * @internal\n   */\n  private _draggingHue = false;\n  /**\n   * Whether the user is actively dragging the opacity slider thumb.\n   * @internal\n   */\n  private _draggingOpacity = false;\n\n  // P1-1: Stored bound references to prevent memory leaks\n  /**\n   * Stable bound reference to the pointermove handler, stored to allow correct listener removal.\n   * @internal\n   */\n  private _boundPointerMove: (e: PointerEvent) => void;\n  /**\n   * Stable bound reference to the pointerup handler, stored to allow correct listener removal.\n   * @internal\n   */\n  private _boundPointerUp: () => void;\n  /**\n   * Stable bound reference to the document click handler, stored to allow correct listener removal.\n   * @internal\n   */\n  private _boundDocumentClick: (e: MouseEvent) => void;\n\n  // ─── Lifecycle ───────────────────────────────────────────────────────────\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._syncFromValue();\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    // P1-1: Remove using the same stored references added in connectedCallback\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('click', this._boundDocumentClick, true);\n      document.removeEventListener('pointermove', this._boundPointerMove);\n      document.removeEventListener('pointerup', this._boundPointerUp);\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('value')) {\n      this._syncFromValue();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Sync ────────────────────────────────────────────────────────────────\n\n  /** @internal */\n  private _syncFromValue(): void {\n    const parsed = parseColor(this.value);\n    if (parsed) {\n      this._hsv = parsed;\n    }\n    this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n    this._internals.setFormValue(this.value);\n    this._updateValidity();\n  }\n\n  /** Called when a parent fieldset is disabled/enabled. */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** Called by the browser when the form is reset. */\n  formResetCallback(): void {\n    this.value = '#000000';\n    this._internals.setFormValue(null);\n  }\n\n  /** Called by the browser to restore form state on navigation. */\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Returns the current validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Checks whether the picker satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        'Please select a color.',\n        this.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]') ??\n          this.shadowRoot?.querySelector<HTMLElement>('[part=\"grid\"]') ??\n          undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** @internal */\n  private _commit(source: 'drag' | 'change'): void {\n    const formatted = formatColor(this._hsv, this.format, this.opacity);\n    this.value = formatted;\n    this._inputValue = formatted;\n    this._internals.setFormValue(formatted);\n    const detail = { value: formatted };\n    const opts: CustomEventInit<{ value: string }> = {\n      bubbles: true,\n      composed: true,\n      detail,\n    };\n    if (source === 'drag') {\n      this.dispatchEvent(new CustomEvent<{ value: string }>('hx-input', opts));\n    } else {\n      this.dispatchEvent(new CustomEvent<{ value: string }>('hx-change', opts));\n    }\n  }\n\n  // ─── Panel open/close ────────────────────────────────────────────────────\n\n  /** @internal */\n  private _show(): void {\n    if (this._open || this.inline) return;\n    this._open = true;\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('click', this._boundDocumentClick, true);\n    }\n  }\n\n  /** @internal */\n  private _hide(): void {\n    if (!this._open) return;\n    this._open = false;\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.removeEventListener('click', this._boundDocumentClick, true);\n    }\n  }\n\n  /** @internal */\n  private _handleDocumentClick(e: MouseEvent): void {\n    if (!this._open) return;\n    if (!e.composedPath().includes(this)) {\n      this._hide();\n    }\n  }\n\n  /** @internal */\n  private _handleTriggerClick(e: MouseEvent): void {\n    e.stopPropagation();\n    if (this._open) {\n      this._hide();\n    } else {\n      this._show();\n    }\n  }\n\n  /** @internal */\n  private _handlePanelKeydown(e: KeyboardEvent): void {\n    if (e.key === 'Escape') {\n      e.stopPropagation();\n      this._hide();\n      this.shadowRoot?.querySelector<HTMLElement>('[part=\"trigger\"]')?.focus();\n    }\n  }\n\n  // ─── Gradient grid dragging ───────────────────────────────────────────────\n\n  /** @internal */\n  private _handleGridPointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._draggingGrid = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('pointermove', this._boundPointerMove);\n      document.addEventListener('pointerup', this._boundPointerUp);\n    }\n    this._updateGridFromPointer(e);\n  }\n\n  /** @internal */\n  private _updateGridFromPointer(e: PointerEvent): void {\n    const grid = this.shadowRoot?.querySelector<HTMLElement>('[part=\"grid\"]');\n    if (!grid) return;\n    const rect = grid.getBoundingClientRect();\n    const x = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    const y = clamp((e.clientY - rect.top) / rect.height, 0, 1);\n    this._hsv = { ...this._hsv, s: x * 100, v: (1 - y) * 100 };\n    this._commit('drag');\n    this.requestUpdate();\n  }\n\n  // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure\n  /** @internal */\n  private _handleGridKeydown(e: KeyboardEvent): void {\n    let sDelta = 0;\n    let vDelta = 0;\n    if (e.key === 'ArrowLeft') sDelta = -1;\n    else if (e.key === 'ArrowRight') sDelta = 1;\n    else if (e.key === 'ArrowUp') vDelta = 1;\n    else if (e.key === 'ArrowDown') vDelta = -1;\n    else if (e.key === 'PageUp') vDelta = 10;\n    else if (e.key === 'PageDown') vDelta = -10;\n    else if (e.key === 'Home') {\n      this._hsv = { ...this._hsv, s: 0, v: 100 };\n      this._commit('change');\n      return;\n    } else if (e.key === 'End') {\n      this._hsv = { ...this._hsv, s: 100, v: 0 };\n      this._commit('change');\n      return;\n    }\n    if (sDelta !== 0 || vDelta !== 0) {\n      e.preventDefault();\n      this._hsv = {\n        ...this._hsv,\n        s: clamp(this._hsv.s + sDelta, 0, 100),\n        v: clamp(this._hsv.v + vDelta, 0, 100),\n      };\n      this._commit('change');\n    }\n  }\n\n  // ─── Hue slider dragging ─────────────────────────────────────────────────\n\n  /** @internal */\n  private _handleHuePointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._draggingHue = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('pointermove', this._boundPointerMove);\n      document.addEventListener('pointerup', this._boundPointerUp);\n    }\n    this._updateHueFromPointer(e);\n  }\n\n  /** @internal */\n  private _updateHueFromPointer(e: PointerEvent): void {\n    const track = this.shadowRoot?.querySelector<HTMLElement>('[part=\"hue-slider\"]');\n    if (!track) return;\n    const rect = track.getBoundingClientRect();\n    const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    this._hsv = { ...this._hsv, h: pct * 360 };\n    this._commit('drag');\n    this.requestUpdate();\n  }\n\n  // ─── Opacity slider dragging ──────────────────────────────────────────────\n\n  /** @internal */\n  private _handleOpacityPointerDown(e: PointerEvent): void {\n    if (this.disabled) return;\n    e.preventDefault();\n    this._draggingOpacity = true;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n    // Guard for SSR — document is unavailable server-side\n    if (typeof document !== 'undefined') {\n      document.addEventListener('pointermove', this._boundPointerMove);\n      document.addEventListener('pointerup', this._boundPointerUp);\n    }\n    this._updateOpacityFromPointer(e);\n  }\n\n  /** @internal */\n  private _updateOpacityFromPointer(e: PointerEvent): void {\n    const track = this.shadowRoot?.querySelector<HTMLElement>('[part=\"opacity-slider\"]');\n    if (!track) return;\n    const rect = track.getBoundingClientRect();\n    const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    this._hsv = { ...this._hsv, a: pct };\n    this._commit('drag');\n    this.requestUpdate();\n  }\n\n  // ─── Document-level pointer handlers ─────────────────────────────────────\n\n  /** @internal */\n  private _handlePointerMove(e: PointerEvent): void {\n    if (this._draggingGrid) this._updateGridFromPointer(e);\n    else if (this._draggingHue) this._updateHueFromPointer(e);\n    else if (this._draggingOpacity) this._updateOpacityFromPointer(e);\n  }\n\n  /** @internal */\n  private _handlePointerUp(): void {\n    if (this._draggingGrid || this._draggingHue || this._draggingOpacity) {\n      this._draggingGrid = false;\n      this._draggingHue = false;\n      this._draggingOpacity = false;\n      // Guard for SSR — document is unavailable server-side\n      if (typeof document !== 'undefined') {\n        document.removeEventListener('pointermove', this._boundPointerMove);\n        document.removeEventListener('pointerup', this._boundPointerUp);\n      }\n      this._commit('change');\n    }\n  }\n\n  // ─── Keyboard handling for sliders ───────────────────────────────────────\n\n  /** @internal */\n  private _handleHueKeydown(e: KeyboardEvent): void {\n    let delta = 0;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -1;\n    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 1;\n    else if (e.key === 'PageDown') delta = -10;\n    else if (e.key === 'PageUp') delta = 10;\n    else if (e.key === 'Home') {\n      this._hsv = { ...this._hsv, h: 0 };\n      this._commit('change');\n      return;\n    } else if (e.key === 'End') {\n      this._hsv = { ...this._hsv, h: 360 };\n      this._commit('change');\n      return;\n    }\n    if (delta !== 0) {\n      e.preventDefault();\n      this._hsv = { ...this._hsv, h: clamp(this._hsv.h + delta, 0, 360) };\n      this._commit('change');\n    }\n  }\n\n  /** @internal */\n  private _handleOpacityKeydown(e: KeyboardEvent): void {\n    let delta = 0;\n    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = -0.01;\n    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = 0.01;\n    else if (e.key === 'PageDown') delta = -0.1;\n    else if (e.key === 'PageUp') delta = 0.1;\n    else if (e.key === 'Home') {\n      this._hsv = { ...this._hsv, a: 0 };\n      this._commit('change');\n      return;\n    } else if (e.key === 'End') {\n      this._hsv = { ...this._hsv, a: 1 };\n      this._commit('change');\n      return;\n    }\n    if (delta !== 0) {\n      e.preventDefault();\n      this._hsv = { ...this._hsv, a: clamp(this._hsv.a + delta, 0, 1) };\n      this._commit('change');\n    }\n  }\n\n  // ─── Input ───────────────────────────────────────────────────────────────\n\n  // P1-7: Bound to @input (was @change) for real-time color preview while typing\n  /** @internal */\n  private _handleInputChange(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    const parsed = parseColor(input.value.trim());\n    if (parsed) {\n      this._hsv = parsed;\n      this._commit('change');\n    }\n    this._inputValue = input.value;\n  }\n\n  /** @internal */\n  private _handleInputBlur(e: FocusEvent): void {\n    const input = e.target as HTMLInputElement;\n    const parsed = parseColor(input.value.trim());\n    if (parsed) {\n      this._hsv = parsed;\n      this._commit('change');\n    } else {\n      // Revert to current valid value\n      this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n    }\n  }\n\n  /** @internal */\n  private _handleFormatCycle(): void {\n    const formats: ColorFormat[] = ['hex', 'rgb', 'hsl', 'hsv'];\n    const idx = formats.indexOf(this.format);\n    const next = formats[(idx + 1) % formats.length];\n    if (next !== undefined) this.format = next;\n    this._inputValue = formatColor(this._hsv, this.format, this.opacity);\n  }\n\n  // ─── Swatches ────────────────────────────────────────────────────────────\n\n  /** @internal */\n  private _handleSwatchClick(color: string): void {\n    const parsed = parseColor(color);\n    if (parsed) {\n      this._hsv = parsed;\n      this._commit('change');\n    }\n  }\n\n  // ─── Computed values ──────────────────────────────────────────────────────\n\n  /** @internal */\n  private _hueColor(): string {\n    return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;\n  }\n\n  /** @internal */\n  private _previewColor(): string {\n    const rgb = hsvToRgb(this._hsv);\n    if (this.opacity && this._hsv.a < 1) {\n      return `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(this._hsv.a * 100) / 100})`;\n    }\n    return `rgb(${rgb.r} ${rgb.g} ${rgb.b})`;\n  }\n\n  // ─── Render helpers ───────────────────────────────────────────────────────\n\n  /** @internal */\n  private _renderGrid() {\n    const thumbX = `${this._hsv.s}%`;\n    const thumbY = `${100 - this._hsv.v}%`;\n    const hueColor = this._hueColor();\n\n    // P0-1: Grid is now keyboard-operable — WCAG 2.1 SC 2.1.1 compliance\n    // Arrow keys adjust saturation (left/right) and value (up/down)\n    //\n    // A11y note (WCAG 4.1.2 — 2D slider aria-valuenow limitation): The ARIA slider role\n    // requires a single numeric aria-valuenow. This 2D control has two axes (saturation and\n    // value), so aria-valuenow reports only saturation (the primary/horizontal axis) per\n    // the ARIA 1.2 \"slider\" pattern. aria-valuetext compensates by announcing both axes\n    // (\"Saturation X%, Value Y%\") for all assistive technologies that support it.\n    return html`\n      <div\n        part=\"grid\"\n        class=\"gradient-grid\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-label=${this.labelGradient}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${Math.round(this._hsv.s)}\n        aria-valuetext=\"Saturation ${Math.round(this._hsv.s)}%, Value ${Math.round(this._hsv.v)}%\"\n        @pointerdown=${this._handleGridPointerDown}\n        @keydown=${this._handleGridKeydown}\n      >\n        <div class=\"gradient-grid-bg\" style=${styleMap({ '--_hue-color': hueColor })}></div>\n        <div\n          class=\"gradient-thumb\"\n          style=${styleMap({ '--_thumb-x': thumbX, '--_thumb-y': thumbY })}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderHueSlider() {\n    const pct = `${(this._hsv.h / 360) * 100}%`;\n    const hueColor = this._hueColor();\n\n    // P1-8: part=\"slider hue-slider\" — exposes the documented shared \"slider\" CSS part\n    // P1-4: aria-valuetext announces the hue angle with degree symbol\n    return html`\n      <div\n        part=\"slider hue-slider\"\n        class=\"slider-track hue-track\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-label=${this.labelHue}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"360\"\n        aria-valuenow=${Math.round(this._hsv.h)}\n        aria-valuetext=\"${Math.round(this._hsv.h)}°\"\n        @pointerdown=${this._handleHuePointerDown}\n        @keydown=${this._handleHueKeydown}\n      >\n        <div\n          class=\"slider-thumb\"\n          style=${styleMap({ '--_slider-pct': pct, '--_thumb-color': hueColor })}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderOpacitySlider() {\n    if (!this.opacity) return nothing;\n    const pct = `${this._hsv.a * 100}%`;\n    const rgb = hsvToRgb(this._hsv);\n    const thumbColor = `rgb(${rgb.r} ${rgb.g} ${rgb.b} / ${Math.round(this._hsv.a * 100) / 100})`;\n    const hueColor = this._hueColor();\n\n    // P1-8: part=\"slider opacity-slider\" — exposes the documented shared \"slider\" CSS part\n    // P1-4: aria-valuetext announces the opacity as a percentage\n    return html`\n      <div\n        part=\"slider opacity-slider\"\n        class=\"slider-track opacity-track\"\n        role=\"slider\"\n        tabindex=\"0\"\n        aria-label=${this.labelOpacity}\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=${Math.round(this._hsv.a * 100)}\n        aria-valuetext=\"${Math.round(this._hsv.a * 100)}%\"\n        style=${styleMap({ '--_hue-color': hueColor })}\n        @pointerdown=${this._handleOpacityPointerDown}\n        @keydown=${this._handleOpacityKeydown}\n      >\n        <div\n          class=\"slider-thumb\"\n          style=${styleMap({ '--_slider-pct': pct, '--_thumb-color': thumbColor })}\n          aria-hidden=\"true\"\n        ></div>\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderSwatches() {\n    if (!this.swatches?.length) return nothing;\n    return html`\n      <div part=\"swatches\" class=\"swatches\" role=\"group\" aria-label=${this.labelSwatches}>\n        ${this.swatches.map(\n          (color) => html`\n            <button\n              type=\"button\"\n              class=\"swatch-btn\"\n              style=${styleMap({ background: color })}\n              aria-label=${color}\n              title=${color}\n              @click=${() => this._handleSwatchClick(color)}\n            ></button>\n          `,\n        )}\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderInput() {\n    return html`\n      <div part=\"input\" class=\"input-area\">\n        <div\n          class=\"input-preview\"\n          style=${styleMap({ '--_preview-color': this._previewColor() })}\n          aria-hidden=\"true\"\n        ></div>\n        <button\n          type=\"button\"\n          class=\"format-btn\"\n          aria-label=${this.labelSwitchFormat}\n          title=\"Switch format\"\n          @click=${this._handleFormatCycle}\n        >\n          ${this.format}\n        </button>\n        <input\n          type=\"text\"\n          class=\"color-input\"\n          .value=${this._inputValue}\n          aria-label=${this.labelColorValue}\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          @input=${this._handleInputChange}\n          @blur=${this._handleInputBlur}\n        />\n      </div>\n    `;\n  }\n\n  /** @internal */\n  private _renderPanel() {\n    // A11y fix (WCAG 4.1.2): use role=\"group\" instead of role=\"dialog\" + aria-modal=\"true\".\n    // aria-modal=\"true\" requires a programmatic focus trap so screen readers restrict virtual\n    // cursor navigation to the dialog. Without Tab-key trapping, aria-modal causes JAWS/NVDA\n    // to hide all content outside the panel, stranding keyboard users who Tab out. role=\"group\"\n    // with aria-label provides the same grouping semantics without the false modal contract.\n    return html`\n      <div\n        class=\"panel\"\n        role=\"group\"\n        aria-label=${this.labelPicker}\n        tabindex=\"-1\"\n        @keydown=${this._handlePanelKeydown}\n      >\n        ${this.swatchesOnly\n          ? nothing\n          : html`${this._renderGrid()} ${this._renderHueSlider()} ${this._renderOpacitySlider()}`}\n        ${this._renderSwatches()} ${this._renderInput()}\n      </div>\n    `;\n  }\n\n  // ─── Main render ─────────────────────────────────────────────────────────\n\n  override render() {\n    const previewColor = this._previewColor();\n\n    if (this.inline) {\n      return html`\n        <div style=${styleMap({ '--_preview-color': previewColor })}>${this._renderPanel()}</div>\n      `;\n    }\n\n    // P1-3: aria-label includes the current color value so AT users know the selected color\n    return html`\n      <button\n        part=\"trigger\"\n        type=\"button\"\n        class=\"trigger\"\n        aria-label=${this.labelTrigger(this._inputValue)}\n        aria-expanded=${this._open ? 'true' : nothing}\n        ?disabled=${this.disabled}\n        style=${styleMap({ '--_preview-color': previewColor })}\n        @click=${this._handleTriggerClick}\n      >\n        <slot name=\"trigger\">\n          <span class=\"trigger-swatch\" aria-hidden=\"true\"></span>\n          <span class=\"trigger-label\">${this._inputValue}</span>\n        </slot>\n      </button>\n      ${this._open ? this._renderPanel() : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-color-picker': HelixColorPicker;\n  }\n}\n"],"names":["helixColorPickerStyles","css","clamp","n","min","max","hexToRgb","hex","h","toHex2","rgbToHex","rgb","includeAlpha","base","rgbToHsv","r","g","b","d","s","v","hsvToRgb","hsv","i","f","p","q","t","rgbToHsl","l","parseColor","value","rgbMatch","rm1","rm2","rm3","rm4","hslMatch","hm1","hm2","hm3","hm4","a","c","x","m","hsvMatch","formatColor","format","hsl","HelixColorPicker","LitElement","color","changedProperties","parsed","disabled","state","_mode","_a","_b","source","formatted","opts","e","grid","rect","y","sDelta","vDelta","track","pct","delta","input","formats","idx","next","thumbX","thumbY","hueColor","html","styleMap","nothing","thumbColor","previewColor","tokenStyles","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/hx-combobox-CivfelTS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-combobox-CivfelTS.js","sources":["../../src/components/hx-combobox/hx-combobox.styles.ts","../../src/components/hx-combobox/hx-combobox.ts"],"sourcesContent":["import { css } from 'lit';\n\n// prettier-ignore\nexport const helixComboboxStyles = css`:host{display:block}:host([disabled]){opacity:var(--hx-opacity-disabled, .5);pointer-events:none}*{box-sizing:border-box}.field{display:flex;flex-direction:column;gap:var(--hx-space-1, .25rem);font-family:var(--hx-combobox-font-family, var(--hx-font-family-sans, sans-serif));position:relative}.field__label{display:flex;align-items:baseline;gap:var(--hx-space-1, .25rem);font-size:var(--hx-font-size-sm, .875rem);font-weight:var(--hx-font-weight-medium, 500);color:var(--hx-combobox-label-color, var(--hx-color-neutral-700, #343a40));line-height:var(--hx-line-height-normal, 1.5)}.field__required-marker{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));font-weight:var(--hx-font-weight-bold, 700)}.field__input-wrapper{position:relative;display:flex;align-items:center;border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));background-color:var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));transition:border-color var(--hx-transition-fast, .15s ease),box-shadow var(--hx-transition-fast, .15s ease)}.field__input-wrapper:focus-within{border-color:var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, #2563eb)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field--error .field__input-wrapper{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545))}.field--error .field__input-wrapper:focus-within{border-color:var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545));box-shadow:0 0 0 var(--hx-focus-ring-width, 2px) color-mix(in srgb,var(--hx-combobox-error-color, var(--hx-color-error-500, #dc3545)) calc(var(--hx-focus-ring-opacity, .25) * 100%),transparent)}.field__prefix,.field__suffix{display:flex;align-items:center;padding:0 var(--hx-space-2, .5rem);color:var(--hx-color-neutral-500, #6c757d);flex-shrink:0}.field__input{flex:1;min-width:0;min-height:var(--hx-input-height-md, var(--hx-size-10, 2.5rem));border:none;background:transparent;outline:none;font-family:inherit;font-size:var(--hx-font-size-md, 1rem);line-height:var(--hx-line-height-normal, 1.5);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem)}.field__input::placeholder{color:var(--hx-color-neutral-400, #adb5bd)}.field__input--sm{min-height:var(--hx-input-height-sm, var(--hx-size-8, 2rem));font-size:var(--hx-font-size-sm, .875rem);padding:var(--hx-space-1, .25rem) var(--hx-space-3, .75rem)}.field__input--lg{min-height:var(--hx-input-height-lg, var(--hx-size-12, 3rem));font-size:var(--hx-font-size-lg, 1.125rem);padding:var(--hx-space-3, .75rem) var(--hx-space-4, 1rem)}.field__clear-button,.field__loading-indicator{display:flex;align-items:center;justify-content:center;margin-inline-end:var(--hx-space-2, .5rem);flex-shrink:0;color:var(--hx-color-neutral-400, #adb5bd)}.field__clear-button{width:1.25rem;height:1.25rem;border:none;background:transparent;cursor:pointer;padding:0;border-radius:var(--hx-border-radius-full, 9999px);transition:color var(--hx-transition-fast, .15s ease)}.field__clear-button:hover{color:var(--hx-color-neutral-700, #343a40)}.field__clear-button:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px)}.field__loading-indicator{width:1rem;height:1rem}.field__loading-spinner{width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:hx-spin .7s linear infinite}@keyframes hx-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.field__loading-spinner{animation:none}}.field__listbox{position:absolute;top:calc(100% + var(--hx-space-1, .25rem));left:0;right:0;z-index:var(--hx-z-index-dropdown, 100);background-color:var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));border:var(--hx-border-width-thin, 1px) solid var(--hx-combobox-border-color, var(--hx-color-neutral-300, #ced4da));border-radius:var(--hx-combobox-border-radius, var(--hx-border-radius-md, .375rem));box-shadow:var( --hx-combobox-listbox-shadow, 0 4px 16px color-mix(in srgb, var(--hx-color-neutral-900, #0d1117) 12%, transparent) );max-height:var(--hx-combobox-listbox-max-height, 16rem);overflow:hidden;display:flex;flex-direction:column}.field__listbox[hidden]{display:none}.field__options{overflow-y:auto;flex:1;padding:var(--hx-space-1, .25rem) 0}.field__option{display:flex;align-items:center;gap:var(--hx-space-2, .5rem);padding:var(--hx-space-2, .5rem) var(--hx-space-3, .75rem);font-size:var(--hx-font-size-md, 1rem);color:var(--hx-combobox-color, var(--hx-color-neutral-800, #212529));cursor:pointer;user-select:none;-webkit-user-select:none;transition:background-color var(--hx-transition-fast, .15s ease)}.field__option:hover{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff))}.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe));font-weight:var(--hx-font-weight-medium, 500)}.field__option--focused{background-color:var(--hx-combobox-option-hover-bg, var(--hx-color-primary-50, #eff6ff));outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-combobox-option-focus-ring-offset, -2px)}.field__option--focused.field__option--selected{background-color:var(--hx-combobox-option-selected-bg, var(--hx-color-primary-100, #dbeafe))}.field__option--disabled{opacity:var(--hx-opacity-disabled, .5);cursor:not-allowed;pointer-events:none}.field__option-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.field__no-options{padding:var(--hx-space-3, .75rem);text-align:center;color:var(--hx-color-neutral-400, #adb5bd);font-size:var(--hx-font-size-sm, .875rem)}.field__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.field__help-text,.field__error{font-size:var(--hx-font-size-xs, .75rem);line-height:var(--hx-line-height-normal, 1.5)}.field__help-text{color:var(--hx-color-neutral-500, #6c757d)}.field__error{color:var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c))}@media(prefers-reduced-motion:reduce){.field__input-wrapper,.field__option,.field__clear-button,.field__chip-remove{transition:none}}:host([multiple]) .field__input-wrapper{flex-wrap:wrap;padding:var(--hx-space-1, .25rem);gap:var(--hx-space-1, .25rem);align-items:center}:host([multiple]) .field__input{min-width:8rem;padding:var(--hx-space-1, .25rem) var(--hx-space-2, .5rem);flex-shrink:1}.field__chip{display:inline-flex;align-items:center;gap:var(--hx-space-1, .25rem);padding:0 var(--hx-space-1, .25rem) 0 var(--hx-space-2, .5rem);height:1.5rem;background-color:var(--hx-combobox-chip-bg, var(--hx-color-primary-100, #dbeafe));color:var(--hx-combobox-chip-color, var(--hx-color-primary-800, #1e40af));border-radius:var(--hx-border-radius-full, 9999px);font-size:var(--hx-font-size-sm, .875rem);white-space:nowrap;max-width:12rem;flex-shrink:0}.field__chip-label{overflow:hidden;text-overflow:ellipsis;max-width:8rem}.field__chip-remove{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1rem;height:1rem;border:none;background:none;cursor:pointer;padding:0;color:inherit;opacity:.7;border-radius:50%;line-height:1;transition:opacity var(--hx-transition-fast, .15s ease)}.field__chip-remove:hover{opacity:1;background-color:var(--hx-combobox-chip-remove-hover-bg, var(--hx-color-primary-200, #bfdbfe))}.field__chip-remove:focus-visible{outline:var(--hx-focus-ring-width, 2px) solid var(--hx-combobox-focus-ring-color, var(--hx-focus-ring-color, var(--hx-color-primary-500)));outline-offset:var(--hx-focus-ring-offset, 2px);opacity:1}`;\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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixComboboxStyles } from './hx-combobox.styles.js';\n\n// ─── Internal option model ───\n\n// P1-7: Exported so TypeScript consumers can type option arrays programmatically\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  disabled: boolean;\n}\n\n// P2-13: Exported size type for TypeScript consumers\nexport type HxComboboxSize = 'sm' | 'md' | 'lg';\n\n// P2-6: Module-level counter for deterministic, collision-free IDs\nlet _comboboxIdCounter = 0;\n\n/**\n * A form-associated combobox component combining a text input with a listbox\n * for autocomplete and typeahead. Supports filtering, free-text entry,\n * keyboard navigation, and async option loading.\n *\n * @summary Form-associated combobox with autocomplete, filtering, and keyboard navigation.\n *\n * @tag hx-combobox\n *\n * @slot option - Slot for `<option>` elements that populate the listbox.\n * @slot prefix - Content to display before the text input.\n * @slot suffix - Content to display after the text input.\n * @slot empty-label - Content shown when no options match the filter.\n * @slot label - Custom label content (overrides the label property).\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<{value: string}>} hx-input - Dispatched on each keystroke as the user types.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when an option is selected.\n * @fires {CustomEvent<void>} hx-clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent<void>} hx-show - Dispatched when the listbox opens.\n * @fires {CustomEvent<void>} hx-hide - Dispatched when the listbox closes.\n *\n * @csspart input - The native text input element.\n * @csspart listbox - The dropdown panel containing options.\n * @csspart trigger - The input wrapper element acting as the combobox trigger.\n * @csspart clear-button - The button that clears the current value.\n * @csspart loading-indicator - The loading spinner shown during async operations.\n *\n * @cssprop [--hx-combobox-bg=var(--hx-color-neutral-0)] - Input background color.\n * @cssprop [--hx-combobox-color=var(--hx-color-neutral-800)] - Input text color.\n * @cssprop [--hx-combobox-border-color=var(--hx-color-neutral-300)] - Border color.\n * @cssprop [--hx-combobox-border-radius=var(--hx-border-radius-md)] - Border radius.\n * @cssprop [--hx-combobox-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-combobox-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-combobox-error-color=var(--hx-color-error-500)] - Error state color.\n * @cssprop [--hx-combobox-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-combobox-listbox-bg=var(--hx-color-neutral-0)] - Listbox background color.\n * @cssprop [--hx-combobox-option-hover-bg=var(--hx-color-primary-50)] - Option hover background.\n * @cssprop [--hx-combobox-option-selected-bg=var(--hx-color-primary-100)] - Selected option background.\n */\n@customElement('hx-combobox')\nexport class HelixCombobox extends LitElement {\n  static override styles = [tokenStyles, helixComboboxStyles];\n\n  // ─── Form Association ───\n\n  /** Marks this element as form-associated for ElementInternals support. @internal */\n  static formAssociated = true;\n\n  /** Holds the ElementInternals instance used for form value and validity management. @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Stable IDs ───\n\n  // P2-6: Use module-level counter instead of Math.random() to guarantee uniqueness\n  /** @internal */\n  private _id = `hx-combobox-${++_comboboxIdCounter}`;\n  /** @internal */\n  private _listboxId = `${this._id}-listbox`;\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  /** @internal */\n  private _liveRegionId = `${this._id}-live`;\n\n  // ─── Public Properties ───\n\n  /**\n   * The visible label text for the combobox.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Placeholder text shown in the input when no value is entered.\n   * @attr placeholder\n   */\n  @property({ type: String })\n  placeholder = '';\n\n  /**\n   * The current value of the combobox.\n   * @attr value\n   */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /**\n   * Whether the combobox is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Whether the combobox is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The name used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * Error message to display. When set, the field enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the combobox for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Size variant of the combobox.\n   * @attr hx-size\n   */\n  @property({ type: String, attribute: 'hx-size', reflect: true })\n  size: HxComboboxSize = 'md';\n\n  /**\n   * Whether multiple options can be selected.\n   * @attr multiple\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Whether the combobox shows a clear button when a value is set.\n   * @attr clearable\n   */\n  @property({ type: Boolean, reflect: true })\n  clearable = false;\n\n  /**\n   * Whether the combobox is in a loading state (shows spinner).\n   * @attr loading\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * Debounce delay in milliseconds for the filter input event.\n   * @attr filter-debounce\n   */\n  @property({ type: Number, attribute: 'filter-debounce' })\n  filterDebounce = 0;\n\n  /**\n   * Accessible name for screen readers, if different from the visible label.\n   * @attr aria-label\n   */\n  @property({ type: String, attribute: 'aria-label' })\n  override ariaLabel: string | null = null;\n\n  /**\n   * Text shown when no options match the current filter.\n   * @attr label-no-options\n   */\n  @property({ type: String, attribute: 'label-no-options' })\n  labelNoOptions = 'No options found';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr label-required\n   */\n  @property({ type: String, attribute: 'label-required' })\n  labelRequired = 'Please select an option.';\n\n  /**\n   * Generates the accessible label for multi-select chip remove buttons.\n   * @param label - the option label text\n   */\n  @property({ attribute: false })\n  labelRemoveOption: (label: string) => string = (label) => `Remove ${label}`;\n\n  // ─── Internal State ───\n\n  /** Parsed option models derived from slotted `<option>` and `<optgroup>` elements. @internal */\n  @state() private _options: ComboboxOption[] = [];\n  /** Current text typed in the input, used to filter the option list. @internal */\n  @state() private _filterText = '';\n  /** Whether the listbox dropdown is currently visible. @internal */\n  @state() private _open = false;\n  /** Zero-based index of the keyboard-focused option within the filtered list; -1 means none. @internal */\n  @state() private _focusedOptionIndex = -1;\n  /** Whether the named error slot contains projected content. @internal */\n  @state() private _hasErrorSlot = false;\n  /** Live-region announcement text describing the current number of filtered options. @internal */\n  @state() private _filterAnnouncement = '';\n\n  // ─── Queries ───\n\n  /** Reference to the native text input element inside the shadow DOM. @internal */\n  @query('.field__input')\n  private _input: HTMLInputElement | undefined;\n\n  // ─── Debounce timer ───\n\n  /** @internal */\n  private _debounceTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Multiple Selection ───\n\n  // P0-1: Derive selected values Set from the comma-separated value property\n  /** @internal */\n  private get _selectedValuesSet(): Set<string> {\n    if (!this.multiple || !this.value) return new Set();\n    return new Set(this.value.split(',').filter(Boolean));\n  }\n\n  // ─── Filtered options ───\n\n  /** @internal */\n  private get _filteredOptions(): ComboboxOption[] {\n    if (!this._filterText) return this._options;\n    const lower = this._filterText.toLowerCase();\n    return this._options.filter((o) => o.label.toLowerCase().includes(lower));\n  }\n\n  // ─── Lifecycle ───\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this._handleOutsideClick);\n    if (this._debounceTimer !== null) {\n      clearTimeout(this._debounceTimer);\n    }\n  }\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('value')) {\n      this._updateFormValue();\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the combobox satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** @internal */\n  private _updateFormValue(): void {\n    this._internals.setFormValue(this.value || null);\n  }\n\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.value) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.labelRequired,\n        this._input,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** Called by the browser when the owning form resets. */\n  formResetCallback(): void {\n    this.value = '';\n    this._filterText = '';\n    this._internals.setFormValue(null);\n  }\n\n  /** Called when the browser restores form state (e.g., bfcache navigation). */\n  // P1-6: Correct signature per WHATWG spec — includes mode param and all state types\n  formStateRestoreCallback(\n    state: string | File | FormData | null,\n    _mode?: 'restore' | 'autocomplete',\n  ): void {\n    if (typeof state === 'string') {\n      this.value = state;\n    }\n  }\n\n  /** Called when a parent fieldset is disabled/enabled. */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  // ─── Option Syncing from Slot ───\n\n  /** @internal */\n  private _handleSlotChange(): void {\n    this._readOptions();\n  }\n\n  /** @internal */\n  private _parseOption(el: HTMLOptionElement): ComboboxOption {\n    return { value: el.value, label: el.textContent?.trim() ?? el.value, disabled: el.disabled };\n  }\n\n  /** @internal */\n  private _readOptions(): void {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"option\"]');\n    if (!slot) return;\n\n    const parsed: ComboboxOption[] = [];\n\n    for (const el of slot.assignedElements({ flatten: true })) {\n      if (el instanceof HTMLOptionElement) {\n        parsed.push(this._parseOption(el));\n      } else if (el instanceof HTMLOptGroupElement) {\n        for (const child of Array.from(el.children)) {\n          if (child instanceof HTMLOptionElement) parsed.push(this._parseOption(child));\n        }\n      }\n    }\n\n    this._options = parsed;\n  }\n\n  // ─── Slot Change 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  // ─── Dropdown Control ───\n\n  /** @internal */\n  private _openDropdown(): void {\n    if (this.disabled || this._open) return;\n    this._open = true;\n    this._focusedOptionIndex = -1;\n    this.dispatchEvent(new CustomEvent<void>('hx-show', { bubbles: true, composed: true }));\n  }\n\n  /** @internal */\n  private _closeDropdown(): void {\n    if (!this._open) return;\n    this._open = false;\n    this._focusedOptionIndex = -1;\n    this.dispatchEvent(new CustomEvent<void>('hx-hide', { bubbles: true, composed: true }));\n  }\n\n  // ─── Input Handling ───\n\n  /** @internal */\n  private _handleInput(e: Event): void {\n    const input = e.target as HTMLInputElement;\n    this._filterText = input.value;\n\n    if (!this._open) {\n      this._openDropdown();\n    }\n\n    this._focusedOptionIndex = -1;\n\n    if (this.filterDebounce > 0) {\n      if (this._debounceTimer !== null) {\n        clearTimeout(this._debounceTimer);\n      }\n      this._debounceTimer = setTimeout(() => {\n        this._emitInput();\n        this._announceFilterResults();\n      }, this.filterDebounce);\n    } else {\n      this._emitInput();\n      this._announceFilterResults();\n    }\n  }\n\n  /** @internal */\n  private _announceFilterResults(): void {\n    const count = this._filteredOptions.length;\n    this._filterAnnouncement =\n      count === 0\n        ? 'No matching options'\n        : `${count} ${count === 1 ? 'option' : 'options'} available`;\n  }\n\n  /** @internal */\n  private _emitInput(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this._filterText },\n      }),\n    );\n  }\n\n  /** @internal */\n  private _handleFocus(): void {\n    this._openDropdown();\n  }\n\n  // ─── Keyboard Navigation ───\n\n  /** @internal */\n  private _handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled) return;\n\n    const filtered = this._filteredOptions;\n    const enabledIndices = filtered\n      .map((o, i) => ({ o, i }))\n      .filter(({ o }) => !o.disabled)\n      .map(({ i }) => i);\n\n    switch (e.key) {\n      case 'ArrowDown': {\n        e.preventDefault();\n        if (!this._open) {\n          this._openDropdown();\n          this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? 0) : -1;\n          break;\n        }\n        const nextDown = enabledIndices.find((i) => i > this._focusedOptionIndex);\n        this._focusedOptionIndex =\n          nextDown !== undefined ? nextDown : (enabledIndices[0] ?? this._focusedOptionIndex);\n        break;\n      }\n      case 'ArrowUp': {\n        e.preventDefault();\n        if (!this._open) {\n          this._openDropdown();\n          const lastEnabled = enabledIndices[enabledIndices.length - 1];\n          this._focusedOptionIndex = lastEnabled !== undefined ? lastEnabled : -1;\n          break;\n        }\n        const prevUp = [...enabledIndices].reverse().find((i) => i < this._focusedOptionIndex);\n        const lastEnabledUp = enabledIndices[enabledIndices.length - 1];\n        this._focusedOptionIndex =\n          prevUp !== undefined ? prevUp : (lastEnabledUp ?? this._focusedOptionIndex);\n        break;\n      }\n      case 'Enter': {\n        e.preventDefault();\n        if (!this._open) {\n          this._openDropdown();\n          break;\n        }\n        if (this._focusedOptionIndex >= 0 && this._focusedOptionIndex < filtered.length) {\n          const opt = filtered[this._focusedOptionIndex];\n          if (opt) this._selectOption(opt);\n        }\n        break;\n      }\n      case 'Escape': {\n        e.preventDefault();\n        this._closeDropdown();\n        this._filterText = '';\n        if (this._input) this._input.value = '';\n        break;\n      }\n      case 'Tab': {\n        this._closeDropdown();\n        break;\n      }\n      // P1-1: Home/End keyboard navigation for option list\n      case 'Home': {\n        e.preventDefault();\n        if (!this._open) this._openDropdown();\n        this._focusedOptionIndex = enabledIndices.length > 0 ? (enabledIndices[0] ?? -1) : -1;\n        break;\n      }\n      case 'End': {\n        e.preventDefault();\n        if (!this._open) this._openDropdown();\n        this._focusedOptionIndex =\n          enabledIndices.length > 0 ? (enabledIndices[enabledIndices.length - 1] ?? -1) : -1;\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  // ─── Selection ───\n\n  // P0-1: Handle both single and multiple selection modes\n  /** @internal */\n  private _selectOption(option: ComboboxOption): void {\n    if (option.disabled) return;\n    if (this.multiple) {\n      const current = this._selectedValuesSet;\n      const next = new Set(current);\n      if (next.has(option.value)) {\n        next.delete(option.value);\n      } else {\n        next.add(option.value);\n      }\n      this.value = [...next].join(',');\n      // Keep dropdown open for multiple selection so user can pick more\n    } else {\n      this.value = option.value;\n      this._closeDropdown();\n    }\n    this._filterText = '';\n    if (this._input) this._input.value = '';\n    this._dispatchChange();\n  }\n\n  // P0-1: Remove a single value from multi-selection\n  /** @internal */\n  private _removeValue(val: string): void {\n    const next = this._selectedValuesSet;\n    next.delete(val);\n    this.value = [...next].join(',');\n    this._dispatchChange();\n  }\n\n  // ─── Clear ───\n\n  /** @internal */\n  private _handleClear(e: Event): void {\n    e.stopPropagation();\n    this.value = '';\n    this._filterText = '';\n    if (this._input) {\n      this._input.value = '';\n      this._input.focus();\n    }\n    this._internals.setFormValue(null);\n    this._updateValidity();\n    this.dispatchEvent(new CustomEvent<void>('hx-clear', { bubbles: true, composed: true }));\n  }\n\n  // ─── Event Dispatchers ───\n\n  /** @internal */\n  private _dispatchChange(): void {\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  }\n\n  // ─── Outside Click Handler ───\n\n  /** @internal */\n  private _handleOutsideClick = (e: MouseEvent): void => {\n    if (this._open && !e.composedPath().includes(this)) {\n      this._closeDropdown();\n    }\n  };\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the text input. */\n  override focus(options?: FocusOptions): void {\n    this._input?.focus(options);\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _optionId(index: number): string {\n    return `${this._id}-option-${index}`;\n  }\n\n  /** @internal */\n  private get _displayValue(): string {\n    // P0-1: In multiple mode, chips render selected values — input shows only filter text\n    if (this.multiple) return '';\n    if (!this.value) return '';\n    const opt = this._options.find((o) => o.value === this.value);\n    return opt ? opt.label : this.value;\n  }\n\n  /** @internal */\n  private _renderOptions() {\n    const filtered = this._filteredOptions;\n\n    if (filtered.length === 0) {\n      return html`\n        <slot name=\"empty-label\">\n          <div class=\"field__no-options\">${this.labelNoOptions}</div>\n        </slot>\n      `;\n    }\n\n    return repeat(\n      filtered,\n      (opt) => opt.value,\n      (opt, index) => {\n        // P0-1: Use Set membership for multiple mode, direct equality for single mode\n        const isSelected = this.multiple\n          ? this._selectedValuesSet.has(opt.value)\n          : opt.value === this.value;\n        const isFocused = index === this._focusedOptionIndex;\n\n        return html`\n          <div\n            id=${this._optionId(index)}\n            part=\"option\"\n            role=\"option\"\n            class=${classMap({\n              field__option: true,\n              'field__option--selected': isSelected,\n              'field__option--focused': isFocused,\n              'field__option--disabled': opt.disabled,\n            })}\n            aria-selected=${isSelected ? 'true' : nothing}\n            aria-disabled=${opt.disabled ? 'true' : nothing}\n            @click=${() => this._selectOption(opt)}\n          >\n            <span class=\"field__option-label\">${opt.label}</span>\n          </div>\n        `;\n      },\n    );\n  }\n\n  // ─── Main Render ───\n\n  override render() {\n    const hasError = !!this.error;\n    const showClear = this.clearable && !!this.value && !this.disabled;\n\n    const fieldClasses = {\n      field: true,\n      'field--error': hasError,\n      'field--disabled': this.disabled,\n      'field--required': this.required,\n      'field--open': this._open,\n    };\n\n    const inputClasses = {\n      field__input: true,\n      [`field__input--${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError || this._hasErrorSlot ? this._errorId : null,\n        this.helpText ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    const activedescendant =\n      this._open && this._focusedOptionIndex >= 0\n        ? this._optionId(this._focusedOptionIndex)\n        : undefined;\n\n    return html`\n      <div part=\"field\" class=${classMap(fieldClasses)}>\n        <!-- Label -->\n        <slot name=\"label\">\n          ${this.label\n            ? html`<label id=${this._labelId} for=${this._id} part=\"label\" class=\"field__label\">\n                ${this.label}\n                ${this.required\n                  ? html`<span class=\"field__required-marker\" aria-hidden=\"true\">*</span>`\n                  : nothing}\n              </label>`\n            : nothing}\n        </slot>\n\n        <!-- Input Wrapper -->\n        <div part=\"trigger\" class=\"field__input-wrapper\">\n          <!-- Prefix Slot -->\n          <slot name=\"prefix\" class=\"field__prefix\"></slot>\n\n          <!-- P0-1: Selected value chips for multiple mode -->\n          ${this.multiple && this._selectedValuesSet.size > 0\n            ? [...this._selectedValuesSet].map((val) => {\n                const opt = this._options.find((o) => o.value === val);\n                const label = opt ? opt.label : val;\n                return html`\n                  <span class=\"field__chip\">\n                    <span class=\"field__chip-label\">${label}</span>\n                    <button\n                      type=\"button\"\n                      class=\"field__chip-remove\"\n                      aria-label=${this.labelRemoveOption(label)}\n                      @click=${(e: Event) => {\n                        e.stopPropagation();\n                        this._removeValue(val);\n                      }}\n                    >\n                      <svg\n                        width=\"8\"\n                        height=\"8\"\n                        viewBox=\"0 0 8 8\"\n                        fill=\"none\"\n                        aria-hidden=\"true\"\n                        focusable=\"false\"\n                      >\n                        <path\n                          d=\"M1 1L7 7M7 1L1 7\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.5\"\n                          stroke-linecap=\"round\"\n                        />\n                      </svg>\n                    </button>\n                  </span>\n                `;\n              })\n            : nothing}\n\n          <!-- Text Input (combobox role) -->\n          <input\n            part=\"input\"\n            type=\"text\"\n            id=${this._id}\n            class=${classMap(inputClasses)}\n            role=\"combobox\"\n            aria-expanded=${this._open ? 'true' : 'false'}\n            aria-autocomplete=\"list\"\n            aria-controls=${this._listboxId}\n            aria-activedescendant=${ifDefined(activedescendant)}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-required=${this.required ? 'true' : nothing}\n            aria-label=${ifDefined(this.ariaLabel || undefined)}\n            aria-labelledby=${ifDefined(this.label && !this.ariaLabel ? this._labelId : undefined)}\n            aria-busy=${this.loading ? 'true' : nothing}\n            .value=${this._filterText || (this._open ? '' : this._displayValue)}\n            placeholder=${ifDefined(this.placeholder || undefined)}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${ifDefined(this.name || undefined)}\n            autocomplete=\"off\"\n            @input=${this._handleInput}\n            @focus=${this._handleFocus}\n            @keydown=${this._handleKeydown}\n          />\n\n          <!-- Loading Indicator -->\n          ${this.loading\n            ? html`\n                <div part=\"loading-indicator\" class=\"field__loading-indicator\" aria-hidden=\"true\">\n                  <div class=\"field__loading-spinner\"></div>\n                </div>\n              `\n            : nothing}\n\n          <!-- Clear Button -->\n          ${showClear\n            ? html`\n                <button\n                  part=\"clear-button\"\n                  type=\"button\"\n                  class=\"field__clear-button\"\n                  aria-label=${`Clear ${this.label || this.ariaLabel || 'selection'}`}\n                  tabindex=\"0\"\n                  @click=${this._handleClear}\n                >\n                  <svg\n                    width=\"12\"\n                    height=\"12\"\n                    viewBox=\"0 0 12 12\"\n                    fill=\"none\"\n                    aria-hidden=\"true\"\n                    focusable=\"false\"\n                  >\n                    <path\n                      d=\"M1 1L11 11M11 1L1 11\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                </button>\n              `\n            : nothing}\n\n          <!-- Suffix Slot -->\n          <slot name=\"suffix\" class=\"field__suffix\"></slot>\n        </div>\n\n        <!-- Listbox -->\n        <div\n          part=\"listbox\"\n          role=\"listbox\"\n          id=${this._listboxId}\n          class=\"field__listbox\"\n          aria-label=${ifDefined(this.label || this.ariaLabel || undefined)}\n          aria-multiselectable=${this.multiple ? 'true' : nothing}\n          ?hidden=${!this._open}\n        >\n          <div class=\"field__options\">${this._renderOptions()}</div>\n        </div>\n\n        <!-- Hidden slot (options read from here) -->\n        <slot name=\"option\" @slotchange=${this._handleSlotChange} style=\"display:none;\"></slot>\n\n        <!-- Error -->\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${hasError\n            ? html`<div part=\"error\" class=\"field__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>`\n            : nothing}\n        </slot>\n\n        <!-- Help Text -->\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"field__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n\n        <!-- Filter results live region -->\n        <div id=${this._liveRegionId} aria-live=\"polite\" aria-atomic=\"true\" class=\"field__sr-only\">\n          ${this._filterAnnouncement}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-combobox': HelixCombobox;\n  }\n}\n\nexport type { HelixCombobox as HxCombobox };\n"],"names":["helixComboboxStyles","css","_comboboxIdCounter","HelixCombobox","LitElement","label","lower","o","changedProperties","state","_mode","disabled","el","_a","slot","parsed","child","input","count","filtered","enabledIndices","i","nextDown","lastEnabled","prevUp","lastEnabledUp","opt","option","current","next","val","options","index","html","repeat","isSelected","isFocused","classMap","nothing","hasError","showClear","fieldClasses","inputClasses","describedBy","activedescendant","e","ifDefined","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/hx-container-DLUKnTi9.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-container-DLUKnTi9.js","sources":["../../src/components/hx-container/hx-container.styles.ts","../../src/components/hx-container/hx-container.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixContainerStyles = css`\n  :host {\n    display: block;\n    contain: layout style;\n    width: 100%;\n    background-color: var(--hx-container-bg, transparent);\n    box-sizing: border-box;\n  }\n\n  /* ─── Vertical Padding Variants ─── */\n\n  /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */\n  :host([padding='none']) {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n\n  :host([padding='sm']) {\n    padding-top: var(--hx-space-6, 1.5rem);\n    padding-bottom: var(--hx-space-6, 1.5rem);\n  }\n\n  :host([padding='md']) {\n    padding-top: var(--hx-space-12, 3rem);\n    padding-bottom: var(--hx-space-12, 3rem);\n  }\n\n  :host([padding='lg']) {\n    padding-top: var(--hx-space-16, 4rem);\n    padding-bottom: var(--hx-space-16, 4rem);\n  }\n\n  :host([padding='xl']) {\n    padding-top: var(--hx-space-24, 6rem);\n    padding-bottom: var(--hx-space-24, 6rem);\n  }\n\n  :host([padding='2xl']) {\n    padding-top: var(--hx-space-32, 8rem);\n    padding-bottom: var(--hx-space-32, 8rem);\n  }\n\n  /* ─── Inner Container ─── */\n\n  .container__inner {\n    margin-left: auto;\n    margin-right: auto;\n    padding-left: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n    padding-right: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n    box-sizing: border-box;\n    width: 100%;\n  }\n\n  /* ─── Width Variants ─── */\n\n  .container__inner--full {\n    max-width: none;\n  }\n\n  .container__inner--content {\n    max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));\n  }\n\n  .container__inner--narrow {\n    max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));\n  }\n\n  .container__inner--sm {\n    max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));\n  }\n\n  .container__inner--md {\n    max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));\n  }\n\n  .container__inner--lg {\n    max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));\n  }\n\n  .container__inner--xl {\n    max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));\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 { helixContainerStyles } from './hx-container.styles.js';\n\n/**\n * A layout container that constrains content width and provides\n * consistent vertical spacing and horizontal gutters.\n *\n * Uses a two-layer model: the outer host spans full width (background,\n * vertical padding), while the inner wrapper constrains max-width,\n * centers content, and applies horizontal gutters.\n *\n * ## Accessibility\n *\n * `hx-container` is a purely visual layout primitive with no semantic meaning.\n * It carries no ARIA role and is intentionally transparent to assistive\n * technologies. Screen readers announce the container's children directly,\n * not the container itself.\n *\n * The inner wrapper always centers content horizontally (via `margin: auto`).\n * This is by design for page-layout use cases. If you need non-centered\n * alignment at a specific breakpoint, override `margin-left` and\n * `margin-right` on `::part(inner)` from your stylesheet.\n *\n * @summary Layout primitive for constraining content width with consistent spacing.\n *\n * @tag hx-container\n *\n * @slot - Default slot for container content.\n *\n * @csspart inner - The inner wrapper that constrains max-width and applies gutters.\n *\n * @cssprop [--hx-container-bg=transparent] - Background color on the outer wrapper.\n * @cssprop [--hx-container-gutter=var(--hx-space-6)] - Horizontal padding on the inner box.\n * @cssprop [--hx-container-max-width] - Override the max-width set by the width property.\n * @cssprop [--hx-container-content=72rem] - Max-width for the content width preset.\n * @cssprop [--hx-container-narrow=48rem] - Max-width for the narrow width preset.\n * @cssprop [--hx-container-sm=640px] - Max-width for the sm width preset.\n * @cssprop [--hx-container-md=768px] - Max-width for the md width preset.\n * @cssprop [--hx-container-lg=1024px] - Max-width for the lg width preset.\n * @cssprop [--hx-container-xl=1280px] - Max-width for the xl width preset.\n */\n@customElement('hx-container')\nexport class HelixContainer extends LitElement {\n  static override styles = [tokenStyles, helixContainerStyles];\n\n  /**\n   * Controls the max-width of the inner content wrapper.\n   * @attr width\n   * @example\n   * // Width presets and their default max-width values:\n   * // full    → no max-width constraint\n   * // content → 72rem (1152px)\n   * // narrow  → 48rem (768px) — override with --hx-container-narrow\n   * // sm      → 640px — override with --hx-container-sm\n   * // md      → 768px — override with --hx-container-md\n   * // lg      → 1024px — override with --hx-container-lg\n   * // xl      → 1280px — override with --hx-container-xl\n   */\n  @property({ type: String, reflect: true })\n  width: 'full' | 'content' | 'narrow' | 'sm' | 'md' | 'lg' | 'xl' = 'content';\n\n  /**\n   * Vertical padding applied to the outer wrapper.\n   * @attr padding\n   */\n  @property({ type: String, reflect: true })\n  padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'none';\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      container__inner: true,\n      [`container__inner--${this.width}`]: true,\n    };\n\n    return html`\n      <div part=\"inner\" class=${classMap(classes)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\n/** Canonical type alias for the hx-container component. */\nexport type HxContainer = HelixContainer;\n\n/** @deprecated Use {@link HxContainer} instead. The `Wc` prefix was a legacy naming convention. */\nexport type WcContainer = HelixContainer;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-container': HelixContainer;\n  }\n}\n"],"names":["helixContainerStyles","css","HelixContainer","LitElement","classes","html","classMap","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC2C7B,IAAMC,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,QAAmE,WAOnE,KAAA,UAAsD;AAAA,EAAA;AAAA;AAAA,EAI7C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,kBAAkB;AAAA,MAClB,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG;AAAA,IAAA;AAGvC,WAAOC;AAAA,gCACqBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/C;AACF;AAxCaF,EACK,SAAS,CAACK,GAAaP,CAAoB;AAgB3DQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BP,EAiBX,WAAA,SAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BP,EAwBX,WAAA,WAAA,CAAA;AAxBWA,IAANM,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBR,CAAA;"}

package/dist/shared/hx-copy-button--0dymSvw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-copy-button--0dymSvw.js","sources":["../../src/components/hx-copy-button/hx-copy-button.styles.ts","../../src/components/hx-copy-button/hx-copy-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCopyButtonStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--hx-space-2);\n    border: var(--hx-border-width-thin) solid var(--hx-copy-button-border-color, transparent);\n    border-radius: var(--hx-copy-button-border-radius, var(--hx-border-radius-md));\n    background-color: var(--hx-copy-button-bg, transparent);\n    color: var(--hx-copy-button-color, var(--hx-color-primary-500));\n    cursor: pointer;\n    transition:\n      background-color var(--hx-transition-fast),\n      color var(--hx-transition-fast),\n      border-color var(--hx-transition-fast),\n      box-shadow var(--hx-transition-fast);\n    text-decoration: none;\n    user-select: none;\n    -webkit-user-select: none;\n    flex-shrink: 0;\n    font-family: var(--hx-font-family-sans);\n    font-weight: var(--hx-font-weight-medium);\n    white-space: nowrap;\n  }\n\n  .button:focus-visible {\n    outline: var(--hx-focus-ring-width) solid\n      var(--hx-copy-button-focus-ring-color, var(--hx-focus-ring-color));\n    outline-offset: var(--hx-focus-ring-offset);\n  }\n\n  .button:hover {\n    filter: brightness(var(--hx-filter-brightness-hover, 0.9));\n  }\n\n  .button:active {\n    filter: brightness(var(--hx-filter-brightness-active, 0.8));\n  }\n\n  /* ─── Size Variants ─── */\n\n  .button--sm {\n    padding: var(--hx-space-1);\n    min-width: var(--hx-size-8);\n    height: var(--hx-size-8);\n    font-size: var(--hx-font-size-sm);\n  }\n\n  .button--md {\n    padding: var(--hx-space-2);\n    min-width: var(--hx-size-10);\n    height: var(--hx-size-10);\n    font-size: var(--hx-font-size-md);\n  }\n\n  .button--lg {\n    padding: var(--hx-space-3);\n    min-width: var(--hx-size-12);\n    height: var(--hx-size-12);\n    font-size: var(--hx-font-size-lg);\n  }\n\n  /* ─── Copied / Success State ─── */\n\n  .button--copied {\n    color: var(--hx-color-success-text, var(--hx-color-primary-500));\n    /* Secondary non-color indicator required per WCAG 1.4.1 (use of color).\n       A border provides visual differentiation for users with color blindness. */\n    border-color: var(--hx-color-success-500, var(--hx-color-primary-500));\n  }\n\n  /* ─── Icon Container ─── */\n\n  .icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 1em;\n    height: 1em;\n    line-height: 1;\n    pointer-events: none;\n    flex-shrink: 0;\n  }\n\n  /* ─── Disabled ─── */\n\n  .button[disabled] {\n    cursor: not-allowed;\n    opacity: var(--hx-opacity-disabled);\n  }\n\n  /* ─── Screen Reader Only ─── */\n\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .button {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCopyButtonStyles } from './hx-copy-button.styles.js';\n\n/** Minimum allowed value for feedbackDuration (ms). */\nconst MIN_FEEDBACK_DURATION = 300;\n\n/** Allowed size values for runtime validation. */\nconst VALID_SIZES = new Set(['sm', 'md', 'lg']);\n\n/**\n * A clipboard copy button component that writes a given value to the system\n * clipboard. Provides idle and success states with configurable feedback\n * duration, slot-based icon overrides, and an accessible live region that\n * announces copy completion to screen reader users.\n *\n * The `aria-label` reflects the current copy state: idle shows `label`,\n * copied state appends \" — Copied\" so screen reader users who re-focus the\n * button after copy receive an accurate accessible name.\n *\n * Note: `aria-pressed` is intentionally NOT used. This is not a toggle button;\n * copied is a transient feedback state, not a persistent on/off toggle.\n *\n * @summary One-click clipboard copy with accessible success feedback.\n *\n * @tag hx-copy-button\n *\n * @slot - Optional label text rendered inside the button alongside the icon.\n * @slot copy-icon - Icon shown in the idle (pre-copy) state.\n * @slot success-icon - Icon shown after a successful clipboard write.\n *\n * @fires {CustomEvent<{value: string}>} hx-copy - Dispatched after the value\n *   has been successfully written to the clipboard.\n * @fires {CustomEvent<{value: string; error: unknown}>} hx-copy-error - Dispatched\n *   when the clipboard write fails (permission denied, iframe restriction, etc.).\n *   The `error` detail contains the caught error for diagnostic use.\n *\n * @csspart button - The native button element.\n * @csspart icon - The icon container span wrapping the active icon slot.\n *\n * @cssprop [--hx-copy-button-bg=transparent] - Button background color.\n * @cssprop [--hx-copy-button-color=var(--hx-color-primary-500)] - Icon and text color.\n * @cssprop [--hx-copy-button-border-color=transparent] - Button border color.\n * @cssprop [--hx-copy-button-border-radius=var(--hx-border-radius-md)] - Button border radius.\n * @cssprop [--hx-copy-button-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n */\n@customElement('hx-copy-button')\nexport class HelixCopyButton extends LitElement {\n  static override styles = [tokenStyles, helixCopyButtonStyles];\n\n  // ─── Public Properties ───\n\n  /**\n   * The text value to write to the clipboard on click. Required for the\n   * component to perform a copy operation.\n   * @attr value\n   */\n  @property({ type: String })\n  value = '';\n\n  /**\n   * Accessible label applied as `aria-label` and `title` on the button.\n   * @attr label\n   */\n  @property({ type: String })\n  label = 'Copy to clipboard';\n\n  /**\n   * Duration in milliseconds to display the success (copied) state before\n   * reverting to the idle state. Values below 300 ms are clamped to 300 ms\n   * to ensure the success announcement remains visible long enough for\n   * assistive technology and human perception.\n   * @attr feedback-duration\n   */\n  @property({ type: Number, attribute: 'feedback-duration' })\n  feedbackDuration = 2000;\n\n  /**\n   * Visual size of the button. Maps to fixed height and padding tokens.\n   * Accepts: 'sm' | 'md' | 'lg'. Invalid values are silently coerced to 'md'.\n   *\n   * **Accessibility (WCAG 2.5.8):** The `sm` variant uses `--hx-size-8` for\n   * its minimum width and height. Ensure this token resolves to at least 24×24 px\n   * (WCAG 2.5.8 AA minimum target size). For touch-primary interfaces such as\n   * mobile clinical apps, prefer `md` or `lg` to meet the 44×44 px recommended\n   * target size (WCAG 2.5.5 AAA / Apple HIG / Android guidelines).\n   *\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Whether the button is disabled. When true, click events are suppressed\n   * and clipboard writes do not occur.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Text announced to screen readers and appended to aria-label after a\n   * successful copy. Also used as the content of the aria-live announcement.\n   * @attr label-copied\n   */\n  @property({ type: String, attribute: 'label-copied' })\n  labelCopied = 'Copied';\n\n  // ─── Private State ───\n\n  /** True while the success feedback window is active. */\n  /** @internal */\n  @state() private _copied = false;\n\n  /** Non-empty string shown in the aria-live region; cleared when not active. */\n  /** @internal */\n  @state() private _announcement = '';\n\n  /** Timeout handle used to revert the copied state. */\n  /** @internal */\n  private _feedbackTimer: ReturnType<typeof setTimeout> | null = null;\n\n  // ─── Lifecycle ───\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearFeedbackTimer();\n  }\n\n  // ─── Private Helpers ───\n\n  /**\n   * Returns the effective feedback duration, clamped to the minimum allowed\n   * value. Prevents zero/negative timeouts that would cause the success state\n   * to immediately revert with no visible or audible feedback.\n   */\n  /** @internal */\n  private _effectiveDuration(): number {\n    return Math.max(this.feedbackDuration, MIN_FEEDBACK_DURATION);\n  }\n\n  /**\n   * Returns the effective size, falling back to 'md' if the runtime value is\n   * not in the set of valid sizes. Prevents `button--xl` and similar class\n   * names that have no matching CSS rule.\n   */\n  /** @internal */\n  private _effectiveSize(): 'sm' | 'md' | 'lg' {\n    return VALID_SIZES.has(this.size) ? this.size : 'md';\n  }\n\n  /** @internal */\n  private _clearFeedbackTimer(): void {\n    if (this._feedbackTimer !== null) {\n      clearTimeout(this._feedbackTimer);\n      this._feedbackTimer = null;\n    }\n  }\n\n  /** @internal */\n  private async _copyToClipboard(): Promise<void> {\n    await navigator.clipboard.writeText(this.value);\n  }\n\n  // ─── Event Handling ───\n\n  /** @internal */\n  private _handleClick(): void {\n    if (this.disabled) {\n      return;\n    }\n\n    void this._performCopy();\n  }\n\n  /** @internal */\n  private async _performCopy(): Promise<void> {\n    try {\n      await this._copyToClipboard();\n    } catch (error: unknown) {\n      // Clipboard write failed — notify consumers and announce failure.\n      this._announcement = 'Copy failed';\n\n      /**\n       * Dispatched when the clipboard write fails (permission denied, iframe\n       * restriction, browser security policy, etc.).\n       * @event hx-copy-error\n       */\n      this.dispatchEvent(\n        new CustomEvent<{ value: string; error: unknown }>('hx-copy-error', {\n          bubbles: true,\n          composed: true,\n          detail: { value: this.value, error },\n        }),\n      );\n      return;\n    }\n\n    this._clearFeedbackTimer();\n    this._copied = true;\n    this._announcement = this.labelCopied;\n\n    /**\n     * Dispatched after the value has been successfully written to the\n     * clipboard.\n     * @event hx-copy\n     */\n    this.dispatchEvent(\n      new CustomEvent<{ value: string }>('hx-copy', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n\n    this._feedbackTimer = setTimeout(() => {\n      this._copied = false;\n      this._announcement = '';\n      this._feedbackTimer = null;\n    }, this._effectiveDuration());\n  }\n\n  // ─── Render Helpers ───\n\n  /** @internal */\n  private _buttonClasses() {\n    const size = this._effectiveSize();\n    return {\n      button: true,\n      [`button--${size}`]: true,\n      'button--copied': this._copied,\n    };\n  }\n\n  /** @internal */\n  private _renderIcon() {\n    // Show success-icon slot when copied, copy-icon slot otherwise.\n    return html`\n      <span part=\"icon\" class=\"icon\">\n        ${this._copied\n          ? html`<slot name=\"success-icon\"></slot>`\n          : html`<slot name=\"copy-icon\"></slot>`}\n      </span>\n    `;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    // Reflect copied state in aria-label so re-focused button has an accurate\n    // accessible name (WCAG 1.3.1). The live region handles the initial\n    // announcement; this covers re-focus scenarios.\n    const ariaLabel = this._copied ? `${this.label} — ${this.labelCopied}` : this.label;\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(this._buttonClasses())}\n        type=\"button\"\n        ?disabled=${this.disabled}\n        aria-label=${ariaLabel}\n        title=${this.label}\n        @click=${this._handleClick}\n      >\n        ${this._renderIcon()}\n        <slot></slot>\n      </button>\n\n      <span aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\n        ${this._announcement || nothing}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-copy-button': HelixCopyButton;\n  }\n}\n"],"names":["helixCopyButtonStyles","css","MIN_FEEDBACK_DURATION","VALID_SIZES","HelixCopyButton","LitElement","error","html","ariaLabel","classMap","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/shared/hx-counter-Duf00H7p.js

@@ -1,147 +0,0 @@
-import { css as h, LitElement as c, html as p } from "lit";
-import { property as r, state as m, customElement as d } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { tokenStyles as _ } from "@helixui/tokens/lit";
-const y = h`
-  :host {
-    display: inline-block;
-  }
-
-  .counter {
-    display: inline-flex;
-    align-items: baseline;
-    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));
-    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));
-    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));
-    line-height: var(--hx-line-height-tight, 1.25);
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* ─── Size Variants ─── */
-
-  .counter--sm {
-    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));
-  }
-
-  .counter--md {
-    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));
-  }
-
-  .counter--lg {
-    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));
-  }
-
-  /* ─── Reduced Motion ─── */
-
-  @media (prefers-reduced-motion: reduce) {
-    .counter {
-      /* Animation is handled in JS — reduced-motion consumers
-         will see the final value immediately via the component logic */
-    }
-  }
-`;
-var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, i, o, n) => {
-  for (var s = n > 1 ? void 0 : n ? x(i, o) : i, l = t.length - 1, u; l >= 0; l--)
-    (u = t[l]) && (s = (n ? u(i, o, s) : u(s)) || s);
-  return n && s && v(i, o, s), s;
-};
-let e = class extends c {
-  constructor() {
-    super(...arguments), this.value = 0, this.duration = 1e3, this.easing = "ease-out", this.format = "integer", this.prefix = "", this.suffix = "", this.size = "md", this._displayValue = 0, this._animationId = null, this._startTime = null, this._startValue = 0, this._prefersReducedMotion = !1;
-  }
-  // ─── Lifecycle ───
-  connectedCallback() {
-    super.connectedCallback();
-    const t = this.getAttribute("size");
-    if (t !== null && !this.hasAttribute("hx-size") && (this.size = t), typeof window > "u") {
-      this._displayValue = this.value;
-      return;
-    }
-    const i = window.matchMedia("(prefers-reduced-motion: reduce)");
-    this._prefersReducedMotion = i.matches, this._prefersReducedMotion ? this._displayValue = this.value : this._startAnimation();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._cancelAnimation();
-  }
-  updated(t) {
-    super.updated(t), t.has("value") && t.get("value") !== void 0 && (this._prefersReducedMotion ? this._displayValue = this.value : (this._startValue = this._displayValue, this._startTime = null, this._startAnimation()));
-  }
-  // ─── Animation ───
-  /** @internal */
-  _cancelAnimation() {
-    this._animationId !== null && (cancelAnimationFrame(this._animationId), this._animationId = null);
-  }
-  /** @internal */
-  _applyEasing(t) {
-    switch (this.easing) {
-      case "linear":
-        return t;
-      case "ease-in":
-        return t * t;
-      case "ease-out":
-        return t * (2 - t);
-      case "ease-in-out":
-        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-    }
-  }
-  /** @internal */
-  _startAnimation() {
-    this._cancelAnimation();
-    const t = (i) => {
-      this._startTime === null && (this._startTime = i);
-      const o = i - this._startTime, n = Math.min(o / this.duration, 1), s = this._applyEasing(n);
-      this._displayValue = this._startValue + (this.value - this._startValue) * s, n < 1 ? this._animationId = requestAnimationFrame(t) : (this._displayValue = this.value, this._animationId = null);
-    };
-    this._animationId = requestAnimationFrame(t);
-  }
-  // ─── Formatting ───
-  /** @internal */
-  _formatValue() {
-    const t = this.format === "integer" ? Math.round(this._displayValue) : parseFloat(this._displayValue.toFixed(2));
-    return `${this.prefix}${t.toLocaleString()}${this.suffix}`;
-  }
-  // ─── Render ───
-  render() {
-    const t = {
-      counter: !0,
-      [`counter--${this.size}`]: !0
-    };
-    return p`
-      <span part="counter" class=${f(t)} aria-live="polite" aria-atomic="true">
-        ${this._formatValue()}
-      </span>
-    `;
-  }
-};
-e.styles = [_, y];
-a([
-  r({ type: Number })
-], e.prototype, "value", 2);
-a([
-  r({ type: Number })
-], e.prototype, "duration", 2);
-a([
-  r({ type: String })
-], e.prototype, "easing", 2);
-a([
-  r({ type: String })
-], e.prototype, "format", 2);
-a([
-  r({ type: String })
-], e.prototype, "prefix", 2);
-a([
-  r({ type: String })
-], e.prototype, "suffix", 2);
-a([
-  r({ type: String, reflect: !0, attribute: "hx-size" })
-], e.prototype, "size", 2);
-a([
-  m()
-], e.prototype, "_displayValue", 2);
-e = a([
-  d("hx-counter")
-], e);
-export {
-  e as H
-};
-//# sourceMappingURL=hx-counter-Duf00H7p.js.map

package/dist/shared/hx-counter-Duf00H7p.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hx-counter-Duf00H7p.js","sources":["../../src/components/hx-counter/hx-counter.styles.ts","../../src/components/hx-counter/hx-counter.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixCounterStyles = css`\n  :host {\n    display: inline-block;\n  }\n\n  .counter {\n    display: inline-flex;\n    align-items: baseline;\n    font-family: var(--hx-counter-font-family, var(--hx-font-family-sans, sans-serif));\n    font-weight: var(--hx-counter-font-weight, var(--hx-font-weight-bold, 700));\n    color: var(--hx-counter-color, var(--hx-color-neutral-900, #111827));\n    line-height: var(--hx-line-height-tight, 1.25);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Size Variants ─── */\n\n  .counter--sm {\n    font-size: var(--hx-counter-font-size-sm, var(--hx-font-size-xl, 1.25rem));\n  }\n\n  .counter--md {\n    font-size: var(--hx-counter-font-size-md, var(--hx-font-size-3xl, 1.875rem));\n  }\n\n  .counter--lg {\n    font-size: var(--hx-counter-font-size-lg, var(--hx-font-size-5xl, 3rem));\n  }\n\n  /* ─── Reduced Motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .counter {\n      /* Animation is handled in JS — reduced-motion consumers\n         will see the final value immediately via the component logic */\n    }\n  }\n`;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixCounterStyles } from './hx-counter.styles.js';\nimport { devWarn } from '../../utils/dev-warn.js';\n\nexport type CounterSize = 'sm' | 'md' | 'lg';\nexport type CounterEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';\nexport type CounterFormat = 'integer' | 'decimal';\n\n/**\n * Animated number counter that counts from 0 (or the previous value) to the\n * target value using requestAnimationFrame. Respects prefers-reduced-motion.\n *\n * @summary Displays an animated numeric counter that transitions to a target value.\n *\n * @tag hx-counter\n *\n * @csspart counter - The outer counter element.\n *\n * @cssprop [--hx-counter-font-family=var(--hx-font-family-sans)] - Font family.\n * @cssprop [--hx-counter-font-weight=var(--hx-font-weight-bold)] - Font weight.\n * @cssprop [--hx-counter-color=var(--hx-color-neutral-900)] - Counter text color.\n * @cssprop [--hx-counter-font-size-sm=var(--hx-font-size-xl)] - Font size at sm.\n * @cssprop [--hx-counter-font-size-md=var(--hx-font-size-3xl)] - Font size at md.\n * @cssprop [--hx-counter-font-size-lg=var(--hx-font-size-5xl)] - Font size at lg.\n */\n@customElement('hx-counter')\nexport class HelixCounter extends LitElement {\n  static override styles = [tokenStyles, helixCounterStyles];\n\n  /**\n   * The target numeric value to count to.\n   * @attr value\n   */\n  @property({ type: Number })\n  value = 0;\n\n  /**\n   * Animation duration in milliseconds.\n   * @attr duration\n   */\n  @property({ type: Number })\n  duration = 1000;\n\n  /**\n   * Easing function applied to the animation progress.\n   * @attr easing\n   */\n  @property({ type: String })\n  easing: CounterEasing = 'ease-out';\n\n  /**\n   * Number format. 'integer' rounds to the nearest whole number;\n   * 'decimal' shows two decimal places.\n   * @attr format\n   */\n  @property({ type: String })\n  format: CounterFormat = 'integer';\n\n  /**\n   * String prepended to the formatted value (e.g., '$').\n   * @attr prefix\n   */\n  @property({ type: String })\n  prefix = '';\n\n  /**\n   * String appended to the formatted value (e.g., '%').\n   * @attr suffix\n   */\n  @property({ type: String })\n  suffix = '';\n\n  /**\n   * Size variant controlling font size.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: CounterSize = 'md';\n\n  // ─── Internal State ───\n\n  /** @internal */\n  @state() private _displayValue = 0;\n\n  /** @internal */\n  private _animationId: number | null = null;\n  /** @internal */\n  private _startTime: number | null = null;\n  /** @internal */\n  private _startValue = 0;\n  /** @internal */\n  private _prefersReducedMotion = false;\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-counter', 'The \"size\" attribute is deprecated. Use \"hx-size\" instead.');\n      this.size = legacySize as CounterSize;\n    }\n\n    // Guard for SSR — window.matchMedia and requestAnimationFrame are unavailable server-side\n    if (typeof window === 'undefined') {\n      this._displayValue = this.value;\n      return;\n    }\n\n    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');\n    this._prefersReducedMotion = mq.matches;\n\n    if (this._prefersReducedMotion) {\n      this._displayValue = this.value;\n    } else {\n      this._startAnimation();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cancelAnimation();\n  }\n\n  override updated(changedProps: PropertyValues<this>): void {\n    super.updated(changedProps);\n    if (changedProps.has('value') && changedProps.get('value') !== undefined) {\n      if (this._prefersReducedMotion) {\n        this._displayValue = this.value;\n      } else {\n        this._startValue = this._displayValue;\n        this._startTime = null;\n        this._startAnimation();\n      }\n    }\n  }\n\n  // ─── Animation ───\n\n  /** @internal */\n  private _cancelAnimation(): void {\n    if (this._animationId !== null) {\n      cancelAnimationFrame(this._animationId);\n      this._animationId = null;\n    }\n  }\n\n  /** @internal */\n  private _applyEasing(t: number): number {\n    switch (this.easing) {\n      case 'linear':\n        return t;\n      case 'ease-in':\n        return t * t;\n      case 'ease-out':\n        return t * (2 - t);\n      case 'ease-in-out':\n        return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n    }\n  }\n\n  /** @internal */\n  private _startAnimation(): void {\n    this._cancelAnimation();\n\n    const step = (timestamp: number): void => {\n      if (this._startTime === null) {\n        this._startTime = timestamp;\n      }\n\n      const elapsed = timestamp - this._startTime;\n      const rawProgress = Math.min(elapsed / this.duration, 1);\n      const easedProgress = this._applyEasing(rawProgress);\n\n      this._displayValue = this._startValue + (this.value - this._startValue) * easedProgress;\n\n      if (rawProgress < 1) {\n        this._animationId = requestAnimationFrame(step);\n      } else {\n        this._displayValue = this.value;\n        this._animationId = null;\n      }\n    };\n\n    this._animationId = requestAnimationFrame(step);\n  }\n\n  // ─── Formatting ───\n\n  /** @internal */\n  private _formatValue(): string {\n    const num =\n      this.format === 'integer'\n        ? Math.round(this._displayValue)\n        : parseFloat(this._displayValue.toFixed(2));\n\n    return `${this.prefix}${num.toLocaleString()}${this.suffix}`;\n  }\n\n  // ─── Render ───\n\n  override render() {\n    const classes = {\n      counter: true,\n      [`counter--${this.size}`]: true,\n    };\n\n    return html`\n      <span part=\"counter\" class=${classMap(classes)} aria-live=\"polite\" aria-atomic=\"true\">\n        ${this._formatValue()}\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-counter': HelixCounter;\n  }\n}\n"],"names":["helixCounterStyles","css","HelixCounter","LitElement","legacySize","mq","changedProps","step","timestamp","elapsed","rawProgress","easedProgress","num","classes","html","classMap","tokenStyles","__decorateClass","property","state","customElement"],"mappings":"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"}