npm - @helixui/library - Versions diffs - 3.0.0-next.65 → 3.1.0-next.66 - Mend

@helixui/library 3.0.0-next.65 → 3.1.0-next.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (408) hide show

package/dist/shared/hx-color-picker-DBaKTVLr.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-color-picker-DBaKTVLr.js","sources":["../../src/components/hx-color-picker/hx-color-picker.styles.ts","../../src/components/hx-color-picker/color-utils.ts","../../src/components/hx-color-picker/hx-color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixColorPickerStyles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n .trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-1, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: var(--hx-color-neutral-0, #ffffff);\n cursor: pointer;\n transition: border-color var(--hx-transition-fast, 150ms ease);\n }\n .trigger:hover:not([disabled]) {\n border-color: var(--hx-color-primary-500, #2563eb);\n }\n :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n .trigger-swatch {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));\n background: var(--_preview-color, #000);\n display: block;\n flex-shrink: 0;\n }\n .trigger-label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-700, #334155);\n font-family: var(--hx-font-family-mono, monospace);\n white-space: nowrap;\n }\n .panel {\n position: absolute;\n z-index: var(--hx-color-picker-z-index, 1000);\n top: calc(100% + 4px);\n left: 0;\n background: var(--hx-color-neutral-0, #ffffff);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);\n border-radius: var(--hx-border-radius-lg, 0.5rem);\n box-shadow: 0 8px 24px\n var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));\n padding: var(--hx-space-4, 1rem);\n width: var(--hx-color-picker-width, 260px);\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n outline: none;\n }\n :host([inline]) .panel {\n position: static;\n box-shadow: none;\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);\n border-radius: var(--hx-border-radius-lg, 0.5rem);\n }\n .gradient-grid {\n position: relative;\n width: 100%;\n height: var(--hx-color-picker-grid-height, 160px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: crosshair;\n overflow: hidden;\n touch-action: none;\n flex-shrink: 0;\n }\n .gradient-grid-bg {\n position: absolute;\n inset: 0;\n background:\n linear-gradient(to bottom, transparent, #000),\n linear-gradient(to right, #fff, var(--_hue-color, hsl(0, 100%, 50%)));\n pointer-events: none;\n }\n .gradient-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: none;\n box-shadow:\n 0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),\n 0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));\n transform: translate(-50%, -50%);\n pointer-events: none;\n top: var(--_thumb-y, 0%);\n left: var(--_thumb-x, 100%);\n }\n .slider-track {\n position: relative;\n width: 100%;\n height: 12px;\n border-radius: 6px;\n cursor: pointer;\n touch-action: none;\n flex-shrink: 0;\n }\n .hue-track {\n background: linear-gradient(\n to right,\n red,\n #ff8000,\n #ff0,\n #80ff00,\n #0f0,\n #00ff80,\n #0ff,\n #0080ff,\n #00f,\n #7f00ff,\n #f0f,\n #ff0080,\n red\n );\n }\n .opacity-track {\n background-image:\n linear-gradient(to right, transparent, var(--_hue-color, hsl(0, 100%, 50%))),\n repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;\n }\n .slider-thumb {\n position: absolute;\n top: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: none;\n box-shadow:\n 0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),\n 0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));\n transform: translate(-50%, -50%);\n pointer-events: none;\n left: var(--_slider-pct, 0%);\n background: var(--_thumb-color, hsl(0, 100%, 50%));\n }\n .swatches {\n display: flex;\n flex-wrap: wrap;\n gap: var(--hx-space-1, 0.25rem);\n }\n .swatch-btn {\n width: 20px;\n height: 20px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n .swatch-btn:hover {\n transform: scale(1.15);\n border-color: var(\n --hx-color-picker-swatch-border-hover,\n var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3))\n );\n }\n .input-area {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n .format-btn {\n flex-shrink: 0;\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n background: var(--hx-color-neutral-100, #f1f5f9);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-color-neutral-600, #475569);\n text-transform: uppercase;\n font-weight: var(--hx-font-weight-semibold, 600);\n letter-spacing: 0.05em;\n }\n .color-input {\n flex: 1;\n min-width: 0;\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-300, #cbd5e1);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n font-family: var(--hx-font-family-mono, monospace);\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-900, #0f172a);\n background: var(--hx-color-neutral-0, #ffffff);\n outline: none;\n }\n .color-input:focus-visible {\n border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));\n box-shadow: 0 0 0 2px\n color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);\n }\n .input-preview {\n width: 24px;\n height: 24px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));\n background: var(--_preview-color, #000);\n flex-shrink: 0;\n }\n @media (prefers-reduced-motion: reduce) {\n .trigger,\n .swatch-btn {\n transition: none;\n }\n }\n @media (forced-colors: active) {\n .trigger {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n .trigger:hover:not([disabled]) {\n border-color: Highlight;\n }\n :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {\n outline-color: Highlight;\n }\n .panel {\n forced-color-adjust: none;\n background-color: Canvas;\n border: 2px solid CanvasText;\n box-shadow: none;\n }\n .gradient-thumb,\n .slider-thumb {\n box-shadow: 0 0 0 2px CanvasText;\n }\n .swatch-btn {\n border: 2px solid ButtonText;\n }\n .swatch-btn:hover {\n border-color: Highlight;\n }\n .color-input {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n .color-input:focus-visible {\n border-color: Highlight;\n box-shadow: none;\n }\n .format-btn {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n .trigger-label {\n color: FieldText;\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .trigger {\n border-color: GrayText;\n color: GrayText;\n }\n }\n`;\n","// ─── Color utility types ──────────────────────────────────────────────────────\n\nexport interface HSV {\n h: number; // 0-360\n s: number; // 0-100\n v: number; // 0-100\n a: number; // 0-1\n}\n\nexport interface RGB {\n r: number; // 0-255\n g: number; // 0-255\n b: number; // 0-255\n a: number; // 0-1\n}\n\nexport type ColorFormat = 'hex' \| 'rgb' \| 'hsl' \| 'hsv';\n\n// ─── Color utilities ──────────────────────────────────────────────────────────\n\nexport function clamp(n: number, min: number, max: number): number {\n return Math.max(min, Math.min(max, n));\n}\n\nexport function 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\nexport function 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\nexport function 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\nexport function 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\nexport function 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 handles HSV/HSVA input strings for round-trip correctness\nexport function 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\nexport function 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","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { helixColorPickerStyles } from './hx-color-picker.styles.js';\nimport {\n type ColorFormat,\n type HSV,\n clamp,\n hsvToRgb,\n parseColor,\n formatColor,\n} from './color-utils.js';\n\n// Re-export ColorFormat so existing consumers using this module path still work\nexport type { ColorFormat };\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/** Detail for hx-input and hx-change events dispatched by hx-color-picker. /\nexport interface HxColorPickerDetail {\n value: string;\n}\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 FormMixin(HelixElement) {\n static override styles = [helixColorPickerStyles];\n\n /\n Declares this element as form-associated so it participates in native form submission.\n * @internal\n /\n static override formAssociated = true;\n\n constructor() {\n super();\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 // ─── Cached element references ───────────────────────────────────────────\n\n /* Cached reference to the gradient grid element. @internal /\n @query('[part=\"grid\"]') private _gridEl!: HTMLElement \| null;\n /* Cached reference to the hue slider element. @internal /\n @query('[part=\"hue-slider\"]') private _hueSliderEl!: HTMLElement \| null;\n /* Cached reference to the opacity slider element. @internal /\n @query('[part=\"opacity-slider\"]') private _opacitySliderEl!: HTMLElement \| null;\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 /\n Cached bounding rect from pointerdown; avoids repeated getBoundingClientRect on every pointermove.\n * @internal\n /\n private _dragRect: DOMRect \| null = null;\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 }\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 }\n\n /* @internal /\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n /* @internal /\n protected override _onFormReset(): void {\n this.value = '#000000';\n this._internals.setFormValue(null);\n this._resetInteractionState();\n }\n\n /* @internal /\n protected override _onFormStateRestore(\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 /* @internal /\n override _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 this._handleInteractionInput();\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 // WCAG 2.4.3: move focus into the panel after it renders so keyboard/AT\n // users land on the first interactive element rather than staying on the trigger.\n void this.updateComplete.then(() => {\n const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n // Prefer the color value input; fall back to the panel itself (tabindex=\"-1\").\n const firstFocusable = panel?.querySelector<HTMLElement>('input, button') ?? panel;\n firstFocusable?.focus();\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 // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._gridEl?.getBoundingClientRect() ?? null;\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 rect = this._dragRect ?? this._gridEl?.getBoundingClientRect();\n if (!rect) return;\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 // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._hueSliderEl?.getBoundingClientRect() ?? null;\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 rect = this._dragRect ?? this._hueSliderEl?.getBoundingClientRect();\n if (!rect) return;\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 // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._opacitySliderEl?.getBoundingClientRect() ?? null;\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 rect = this._dragRect ?? this._opacitySliderEl?.getBoundingClientRect();\n if (!rect) return;\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 this._dragRect = null;\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' : 'false'}\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","FormMixin","HelixElement","color","changedProperties","parsed","disabled","state","_mode","_a","_b","source","formatted","opts","panel","firstFocusable","e","rect","y","sDelta","vDelta","pct","delta","input","formats","idx","next","thumbX","thumbY","hueColor","html","styleMap","nothing","thumbColor","previewColor","__decorateClass","property","query","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}
1	+ {"version":3,"file":"hx-color-picker-DBaKTVLr.js","sources":["../../src/components/hx-color-picker/hx-color-picker.styles.ts","../../src/components/hx-color-picker/color-utils.ts","../../src/components/hx-color-picker/hx-color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixColorPickerStyles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--hx-font-family-sans, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.5);\n }\n .trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n padding: var(--hx-space-1, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: var(--hx-color-neutral-0, #ffffff);\n cursor: pointer;\n transition: border-color var(--hx-transition-fast, 150ms ease);\n }\n .trigger:hover:not([disabled]) {\n border-color: var(--hx-color-primary-500, #2563eb);\n }\n :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid\n var(--hx-focus-ring-color, var(--hx-color-primary-500));\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n .trigger-swatch {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));\n background: var(--_preview-color, #000);\n display: block;\n flex-shrink: 0;\n }\n .trigger-label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-700, #334155);\n font-family: var(--hx-font-family-mono, monospace);\n white-space: nowrap;\n }\n .panel {\n position: absolute;\n z-index: var(--hx-color-picker-z-index, 1000);\n top: calc(100% + 4px);\n left: 0;\n background: var(--hx-color-neutral-0, #ffffff);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);\n border-radius: var(--hx-border-radius-lg, 0.5rem);\n box-shadow: 0 8px 24px\n var(--hx-color-picker-panel-shadow, var(--hx-overlay-black-15, rgba(0, 0, 0, 0.15)));\n padding: var(--hx-space-4, 1rem);\n width: var(--hx-color-picker-width, 260px);\n display: flex;\n flex-direction: column;\n gap: var(--hx-space-3, 0.75rem);\n outline: none;\n }\n :host([inline]) .panel {\n position: static;\n box-shadow: none;\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e2e8f0);\n border-radius: var(--hx-border-radius-lg, 0.5rem);\n }\n .gradient-grid {\n position: relative;\n width: 100%;\n height: var(--hx-color-picker-grid-height, 160px);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: crosshair;\n overflow: hidden;\n touch-action: none;\n flex-shrink: 0;\n }\n .gradient-grid-bg {\n position: absolute;\n inset: 0;\n background:\n linear-gradient(to bottom, transparent, #000),\n linear-gradient(to right, #fff, var(--_hue-color, hsl(0, 100%, 50%)));\n pointer-events: none;\n }\n .gradient-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: none;\n box-shadow:\n 0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),\n 0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));\n transform: translate(-50%, -50%);\n pointer-events: none;\n top: var(--_thumb-y, 0%);\n left: var(--_thumb-x, 100%);\n }\n .slider-track {\n position: relative;\n width: 100%;\n height: 12px;\n border-radius: 6px;\n cursor: pointer;\n touch-action: none;\n flex-shrink: 0;\n }\n .hue-track {\n background: linear-gradient(\n to right,\n red,\n #ff8000,\n #ff0,\n #80ff00,\n #0f0,\n #00ff80,\n #0ff,\n #0080ff,\n #00f,\n #7f00ff,\n #f0f,\n #ff0080,\n red\n );\n }\n .opacity-track {\n background-image:\n linear-gradient(to right, transparent, var(--_hue-color, hsl(0, 100%, 50%))),\n repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 12px 12px;\n }\n .slider-thumb {\n position: absolute;\n top: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: none;\n box-shadow:\n 0 0 0 2px var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #ffffff)),\n 0 0 0 3px var(--hx-color-picker-thumb-shadow, var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3)));\n transform: translate(-50%, -50%);\n pointer-events: none;\n left: var(--_slider-pct, 0%);\n background: var(--_thumb-color, hsl(0, 100%, 50%));\n }\n .swatches {\n display: flex;\n flex-wrap: wrap;\n gap: var(--hx-space-1, 0.25rem);\n }\n .swatch-btn {\n width: 20px;\n height: 20px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));\n cursor: pointer;\n padding: 0;\n flex-shrink: 0;\n transition: transform var(--hx-transition-fast, 150ms ease);\n }\n .swatch-btn:hover {\n transform: scale(1.15);\n border-color: var(\n --hx-color-picker-swatch-border-hover,\n var(--hx-overlay-black-30, rgba(0, 0, 0, 0.3))\n );\n }\n .input-area {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\n .format-btn {\n flex-shrink: 0;\n padding: var(--hx-space-1, 0.25rem) var(--hx-space-2, 0.5rem);\n background: var(--hx-color-neutral-100, #f1f5f9);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #cbd5e1);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n font-size: var(--hx-font-size-xs, 0.75rem);\n color: var(--hx-color-neutral-600, #475569);\n text-transform: uppercase;\n font-weight: var(--hx-font-weight-semibold, 600);\n letter-spacing: 0.05em;\n }\n .color-input {\n flex: 1;\n min-width: 0;\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-300, #cbd5e1);\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n font-family: var(--hx-font-family-mono, monospace);\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-900, #0f172a);\n background: var(--hx-color-neutral-0, #ffffff);\n outline: none;\n }\n .color-input:focus-visible {\n border-color: var(--hx-focus-ring-color, var(--hx-color-primary-500));\n box-shadow: 0 0 0 2px\n color-mix(in srgb, var(--hx-focus-ring-color, var(--hx-color-primary-500)) 20%, transparent);\n }\n .input-preview {\n width: 24px;\n height: 24px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n border: var(--hx-border-width-thin, 1px) solid\n var(--hx-color-picker-swatch-border, var(--hx-overlay-black-10, rgba(0, 0, 0, 0.1)));\n background: var(--_preview-color, #000);\n flex-shrink: 0;\n }\n @media (prefers-reduced-motion: reduce) {\n .trigger,\n .swatch-btn {\n transition: none;\n }\n }\n @media (forced-colors: active) {\n .trigger {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n .trigger:hover:not([disabled]) {\n border-color: Highlight;\n }\n :is(.trigger, .gradient-grid, .slider-track, .swatch-btn, .format-btn):focus-visible {\n outline-color: Highlight;\n }\n .panel {\n forced-color-adjust: none;\n background-color: Canvas;\n border: 2px solid CanvasText;\n box-shadow: none;\n }\n .gradient-thumb,\n .slider-thumb {\n box-shadow: 0 0 0 2px CanvasText;\n }\n .swatch-btn {\n border: 2px solid ButtonText;\n }\n .swatch-btn:hover {\n border-color: Highlight;\n }\n .color-input {\n forced-color-adjust: none;\n background-color: Field;\n color: FieldText;\n border: 2px solid ButtonText;\n }\n .color-input:focus-visible {\n border-color: Highlight;\n box-shadow: none;\n }\n .format-btn {\n forced-color-adjust: none;\n background-color: ButtonFace;\n color: ButtonText;\n border: 2px solid ButtonText;\n }\n .trigger-label {\n color: FieldText;\n }\n :host([disabled]) {\n opacity: 1;\n }\n :host([disabled]) .trigger {\n border-color: GrayText;\n color: GrayText;\n }\n }\n`;\n","// ─── Color utility types ──────────────────────────────────────────────────────\n\nexport interface HSV {\n h: number; // 0-360\n s: number; // 0-100\n v: number; // 0-100\n a: number; // 0-1\n}\n\nexport interface RGB {\n r: number; // 0-255\n g: number; // 0-255\n b: number; // 0-255\n a: number; // 0-1\n}\n\nexport type ColorFormat = 'hex' \| 'rgb' \| 'hsl' \| 'hsv';\n\n// ─── Color utilities ──────────────────────────────────────────────────────────\n\nexport function clamp(n: number, min: number, max: number): number {\n return Math.max(min, Math.min(max, n));\n}\n\nexport function 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\nexport function 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\nexport function 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\nexport function 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\nexport function 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 handles HSV/HSVA input strings for round-trip correctness\nexport function 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\nexport function 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","import { html, nothing, type PropertyValues } from 'lit';\nimport '../../utilities/document-token-adoption.js';\nimport { HelixElement } from '../../base/index.js';\nimport { FormMixin } from '../../mixins/FormMixin.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { helixColorPickerStyles } from './hx-color-picker.styles.js';\nimport {\n type ColorFormat,\n type HSV,\n clamp,\n hsvToRgb,\n parseColor,\n formatColor,\n} from './color-utils.js';\n\n// Re-export ColorFormat so existing consumers using this module path still work\nexport type { ColorFormat };\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/** Detail for hx-input and hx-change events dispatched by hx-color-picker. /\nexport interface HxColorPickerDetail {\n value: string;\n}\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 * @cssprop [--hx-font-family-sans] - Font family.\n * @cssprop [--hx-font-size-sm] - Font size.\n * @cssprop [--hx-opacity-disabled] - Opacity.\n * @cssprop [--hx-space-2] - Spacing token.\n * @cssprop [--hx-space-1] - Spacing token.\n * @cssprop [--hx-border-width-thin] - Width.\n * @cssprop [--hx-color-neutral-300] - Color.\n * @cssprop [--hx-border-radius-md] - CSS custom property.\n * @cssprop [--hx-color-neutral-0] - Color.\n * @cssprop [--hx-transition-fast] - Transition timing.\n * @cssprop [--hx-color-primary-500] - Color.\n * @cssprop [--hx-focus-ring-width] - Width.\n * @cssprop [--hx-focus-ring-color] - Color.\n * @cssprop [--hx-focus-ring-offset] - CSS custom property.\n * @cssprop [--hx-border-radius-sm] - CSS custom property.\n * @cssprop [--hx-overlay-black-10] - Overlay color.\n * @cssprop [--hx-color-neutral-700] - Color.\n * @cssprop [--hx-font-family-mono] - Font family.\n * @cssprop [--hx-color-neutral-200] - Color.\n * @cssprop [--hx-border-radius-lg] - CSS custom property.\n * @cssprop [--hx-overlay-black-15] - Overlay color.\n * @cssprop [--hx-space-4] - Spacing token.\n * @cssprop [--hx-space-3] - Spacing token.\n * @cssprop [--hx-overlay-black-30] - Overlay color.\n * @cssprop [--hx-color-neutral-100] - Color.\n * @cssprop [--hx-font-size-xs] - Font size.\n * @cssprop [--hx-color-neutral-600] - Color.\n * @cssprop [--hx-font-weight-semibold] - Font weight.\n * @cssprop [--hx-color-neutral-900] - Color.\n /\n@customElement('hx-color-picker')\nexport class HelixColorPicker extends FormMixin(HelixElement) {\n static override styles = [helixColorPickerStyles];\n\n /\n Declares this element as form-associated so it participates in native form submission.\n * @internal\n /\n static override formAssociated = true;\n\n constructor() {\n super();\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 // ─── Cached element references ───────────────────────────────────────────\n\n /* Cached reference to the gradient grid element. @internal /\n @query('[part=\"grid\"]') private _gridEl!: HTMLElement \| null;\n /* Cached reference to the hue slider element. @internal /\n @query('[part=\"hue-slider\"]') private _hueSliderEl!: HTMLElement \| null;\n /* Cached reference to the opacity slider element. @internal /\n @query('[part=\"opacity-slider\"]') private _opacitySliderEl!: HTMLElement \| null;\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 /\n Cached bounding rect from pointerdown; avoids repeated getBoundingClientRect on every pointermove.\n * @internal\n /\n private _dragRect: DOMRect \| null = null;\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 }\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 }\n\n /* @internal /\n protected override _onFormDisabled(disabled: boolean): void {\n this.disabled = disabled;\n }\n\n /* @internal /\n protected override _onFormReset(): void {\n this.value = '#000000';\n this._internals.setFormValue(null);\n this._resetInteractionState();\n }\n\n /* @internal /\n protected override _onFormStateRestore(\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 /* @internal /\n override _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 this._handleInteractionInput();\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 // WCAG 2.4.3: move focus into the panel after it renders so keyboard/AT\n // users land on the first interactive element rather than staying on the trigger.\n void this.updateComplete.then(() => {\n const panel = this.shadowRoot?.querySelector<HTMLElement>('.panel');\n // Prefer the color value input; fall back to the panel itself (tabindex=\"-1\").\n const firstFocusable = panel?.querySelector<HTMLElement>('input, button') ?? panel;\n firstFocusable?.focus();\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 // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._gridEl?.getBoundingClientRect() ?? null;\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 rect = this._dragRect ?? this._gridEl?.getBoundingClientRect();\n if (!rect) return;\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 // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._hueSliderEl?.getBoundingClientRect() ?? null;\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 rect = this._dragRect ?? this._hueSliderEl?.getBoundingClientRect();\n if (!rect) return;\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 // Cache rect at pointerdown — element doesn't move during drag\n this._dragRect = this._opacitySliderEl?.getBoundingClientRect() ?? null;\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 rect = this._dragRect ?? this._opacitySliderEl?.getBoundingClientRect();\n if (!rect) return;\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 this._dragRect = null;\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' : 'false'}\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","FormMixin","HelixElement","color","changedProperties","parsed","disabled","state","_mode","_a","_b","source","formatted","opts","panel","firstFocusable","e","rect","y","sDelta","vDelta","pct","delta","input","formats","idx","next","thumbX","thumbY","hueColor","html","styleMap","nothing","thumbColor","previewColor","__decorateClass","property","query","customElement"],"mappings":";;;;;AAEO,MAAMA,IAAyBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA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"}

package/dist/shared/{hx-combobox-BmgYT7Ar.js → hx-combobox-DLwnvHVd.js} RENAMED Viewed

@@ -30,7 +30,7 @@ const I = m`
     gap: var(--hx-space-1, 0.25rem);
     font-size: var(--hx-font-size-sm, 0.875rem);
     font-weight: var(--hx-font-weight-medium, 500);
-    color: var(--hx-combobox-label-color, var(--hx-color-neutral-700, #334155));
+    color: var(--hx-combobox-label-color, var(--hx-color-text-strong, #334155));
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__required-marker {
@@ -42,9 +42,9 @@ const I = m`
     display: flex;
     align-items: center;
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
-    background-color: var(--hx-combobox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-combobox-bg, var(--hx-color-surface-default, #ffffff));
     transition:
       border-color var(--hx-transition-fast, 150ms ease),
       box-shadow var(--hx-transition-fast, 150ms ease);
@@ -83,7 +83,7 @@ const I = m`
     display: flex;
     align-items: center;
     padding: 0 var(--hx-space-2, 0.5rem);
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
     flex-shrink: 0;
   }
   .field__input {
@@ -96,11 +96,11 @@ const I = m`
     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, #1e293b));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
   }
   .field__input::placeholder {
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
   .field__input--sm {
     min-height: var(--hx-input-height-sm, var(--hx-size-8, 2rem));
@@ -119,7 +119,7 @@ const I = m`
     justify-content: center;
     margin-inline-end: var(--hx-space-2, 0.5rem);
     flex-shrink: 0;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
   }
   .field__clear-button {
     width: 1.25rem;
@@ -132,7 +132,7 @@ const I = m`
     transition: color var(--hx-transition-fast, 150ms ease);
   }
   .field__clear-button:hover {
-    color: var(--hx-color-neutral-700, #334155);
+    color: var(--hx-color-text-strong, #334155);
   }
   .field__clear-button:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
@@ -167,9 +167,9 @@ const I = m`
     left: 0;
     right: 0;
     z-index: var(--hx-z-index-dropdown, 1000);
-    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-neutral-0, #ffffff));
+    background-color: var(--hx-combobox-listbox-bg, var(--hx-color-surface-default, #ffffff));
     border: var(--hx-border-width-thin, 1px) solid
-      var(--hx-combobox-border-color, var(--hx-color-neutral-300, #cbd5e1));
+      var(--hx-combobox-border-color, var(--hx-color-border-strong, #cbd5e1));
     border-radius: var(--hx-combobox-border-radius, var(--hx-border-radius-md, 0.375rem));
     box-shadow: var(
       --hx-combobox-listbox-shadow,
@@ -194,7 +194,7 @@ const I = m`
     gap: var(--hx-space-2, 0.5rem);
     padding: var(--hx-space-2, 0.5rem) var(--hx-space-3, 0.75rem);
     font-size: var(--hx-font-size-md, 1rem);
-    color: var(--hx-combobox-color, var(--hx-color-neutral-800, #1e293b));
+    color: var(--hx-combobox-color, var(--hx-color-text-strong, #1e293b));
     cursor: pointer;
     user-select: none;
     -webkit-user-select: none;
@@ -230,7 +230,7 @@ const I = m`
   .field__no-options {
     padding: var(--hx-space-3, 0.75rem);
     text-align: center;
-    color: var(--hx-color-neutral-400, #94a3b8);
+    color: var(--hx-color-text-placeholder, #94a3b8);
     font-size: var(--hx-font-size-sm, 0.875rem);
   }
   .field__sr-only {
@@ -250,7 +250,7 @@ const I = m`
     line-height: var(--hx-line-height-normal, 1.5);
   }
   .field__help-text {
-    color: var(--hx-color-neutral-500, #64748b);
+    color: var(--hx-color-text-muted, #64748b);
   }
   .field__error {
     color: var(--hx-combobox-error-color, var(--hx-color-error-text, #b91c1c));
@@ -707,14 +707,14 @@ let r = class extends y($) {
           <!-- P0-1: Selected value chips for multiple mode -->
           ${this.multiple && this._selectedValuesSet.size > 0 ? [...this._selectedValuesSet].map((c) => {
-      const b = this._options.find((f) => f.value === c), x = b ? b.label : c;
+      const x = this._options.find((f) => f.value === c), b = x ? x.label : c;
       return h`
                   <span class="field__chip">
-                    <span class="field__chip-label">${x}</span>
+                    <span class="field__chip-label">${b}</span>
                     <button
                       type="button"
                       class="field__chip-remove"
-                      aria-label=${this.labelRemoveOption(x)}
+                      aria-label=${this.labelRemoveOption(b)}
                       @click=${(f) => {
         f.stopPropagation(), this._removeValue(c);
       }}
@@ -926,4 +926,4 @@ r = l([
 export {
   r as H
 };
-//# sourceMappingURL=hx-combobox-BmgYT7Ar.js.map
+//# sourceMappingURL=hx-combobox-DLwnvHVd.js.map