npm - @helixui/library - Versions diffs - 0.1.3 → 0.3.0 - Mend

@helixui/library 0.1.3 → 0.3.0

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 (183) hide show

package/dist/shared/hx-color-picker-K2x_dyeG.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-color-picker-K2x_dyeG.js","sources":["../../src/components/hx-color-picker/hx-color-picker.styles.ts","../../src/components/hx-color-picker/hx-color-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixColorPickerStyles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--hx-font-family-base, sans-serif);\n font-size: var(--hx-font-size-sm, 0.875rem);\n }\n\n :host([disabled]) {\n pointer-events: none;\n opacity: var(--hx-opacity-disabled, 0.4);\n }\n\n /* ─── Trigger ─── */\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, #d1d5db);\n border-radius: var(--hx-border-radius-md, 0.375rem);\n background: var(--hx-color-neutral-0, #fff);\n cursor: pointer;\n transition: border-color var(--hx-transition-fast, 0.15s ease);\n }\n\n .trigger:hover:not([disabled]) {\n border-color: var(--hx-color-primary-500, #3b82f6);\n }\n\n .trigger:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .trigger-swatch {\n width: 1.5rem;\n height: 1.5rem;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n /* P1-6: was hardcoded rgba(0,0,0,0.1) */\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\n .trigger-label {\n font-size: var(--hx-font-size-sm, 0.875rem);\n color: var(--hx-color-neutral-700, #374151);\n font-family: var(--hx-font-family-mono, monospace);\n white-space: nowrap;\n }\n\n /* ─── Panel ─── */\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, #fff);\n /* P1-6: border width now uses token */\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-200, #e5e7eb);\n border-radius: var(--hx-border-radius-lg, 0.5rem);\n /* P1-6: panel shadow uses component token */\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 /* P2-8: panel width is now a CSS custom property */\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\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, #e5e7eb);\n border-radius: var(--hx-border-radius-lg, 0.5rem);\n }\n\n /* ─── Gradient Grid ─── */\n\n .gradient-grid {\n position: relative;\n width: 100%;\n /* P2-8: grid height is now a CSS custom property */\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\n /* P0-1: focus ring for keyboard-operable gradient grid */\n .gradient-grid:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .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\n .gradient-thumb {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n /* P1-6: was hardcoded #fff */\n border: 2px solid var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff));\n /* P1-6: was hardcoded rgba(0,0,0,0.3) */\n box-shadow: 0 0 0 1px\n 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\n /* ─── Sliders ─── */\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\n .slider-track:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .hue-track {\n background: linear-gradient(\n to right,\n hsl(0, 100%, 50%),\n hsl(30, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(90, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(150, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(210, 100%, 50%),\n hsl(240, 100%, 50%),\n hsl(270, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(330, 100%, 50%),\n hsl(360, 100%, 50%)\n );\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\n .slider-thumb {\n position: absolute;\n top: 50%;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n /* P1-6: was hardcoded #fff */\n border: 2px solid var(--hx-color-picker-thumb-border, var(--hx-color-neutral-0, #fff));\n /* P1-6: was hardcoded rgba(0,0,0,0.3) */\n box-shadow: 0 0 0 1px\n 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\n /* ─── Swatches ─── */\n\n .swatches {\n display: flex;\n flex-wrap: wrap;\n gap: var(--hx-space-1, 0.25rem);\n }\n\n .swatch-btn {\n width: 20px;\n height: 20px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n /* P1-6: was hardcoded rgba(0,0,0,0.1) */\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, 0.15s ease);\n }\n\n .swatch-btn:hover {\n transform: scale(1.15);\n /* P1-6: was hardcoded rgba(0,0,0,0.3) */\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\n .swatch-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n /* ─── Input ─── */\n\n .input-area {\n display: flex;\n align-items: center;\n gap: var(--hx-space-2, 0.5rem);\n }\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, #f3f4f6);\n border: var(--hx-border-width-thin, 1px) solid var(--hx-color-neutral-300, #d1d5db);\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, #4b5563);\n text-transform: uppercase;\n font-weight: var(--hx-font-weight-semibold, 600);\n letter-spacing: 0.05em;\n }\n\n .format-btn:focus-visible {\n outline: var(--hx-focus-ring-width, 2px) solid var(--hx-focus-ring-color, #2563eb);\n outline-offset: var(--hx-focus-ring-offset, 2px);\n }\n\n .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, #d1d5db);\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, #111827);\n background: var(--hx-color-neutral-0, #fff);\n outline: none;\n }\n\n .color-input:focus {\n border-color: var(--hx-focus-ring-color, #2563eb);\n /* P1-5: was invalid \"box-shadow: ... / 0.2\" syntax; replaced with valid box-shadow */\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--hx-focus-ring-color, #2563eb) 20%, transparent);\n }\n\n /* ─── Color preview strip in input area ─── */\n\n .input-preview {\n width: 24px;\n height: 24px;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n /* P1-6: was hardcoded rgba(0,0,0,0.1) */\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\n /* ─── Reduced Motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .trigger,\n .swatch-btn {\n transition: none;\n }\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixColorPickerStyles } from './hx-color-picker.styles.js';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsv';\n\ninterface HSV {\n h: number; // 0-360\n s: number; // 0-100\n v: number; // 0-100\n a: number; // 0-1\n}\n\ninterface RGB {\n r: number; // 0-255\n g: number; // 0-255\n b: number; // 0-255\n a: number; // 0-1\n}\n\n// ─── Color utilities ──────────────────────────────────────────────────────────\n\nfunction clamp(n: number, min: number, max: number): number {\n return Math.max(min, Math.min(max, n));\n}\n\nfunction hexToRgb(hex: string): RGB | null {\n let h = hex.trim().replace(/^#/, '');\n if (h.length === 3) h = h.replace(/(.)/g, '$1$1');\n if (h.length === 4) h = h.replace(/(.)/g, '$1$1');\n if (h.length === 6) h += 'ff';\n if (h.length !== 8) return null;\n const n = parseInt(h, 16);\n if (isNaN(n)) return null;\n return {\n r: (n >>> 24) & 0xff,\n g: (n >>> 16) & 0xff,\n b: (n >>> 8) & 0xff,\n a: (n & 0xff) / 255,\n };\n}\n\nfunction toHex2(n: number): string {\n return Math.round(clamp(n, 0, 255))\n .toString(16)\n .padStart(2, '0');\n}\n\nfunction rgbToHex(rgb: RGB, includeAlpha: boolean): string {\n const base = `#${toHex2(rgb.r)}${toHex2(rgb.g)}${toHex2(rgb.b)}`;\n if (includeAlpha && rgb.a < 1) return base + toHex2(rgb.a * 255);\n return base;\n}\n\nfunction rgbToHsv(rgb: RGB): HSV {\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const d = max - min;\n const s = max === 0 ? 0 : d / max;\n const v = max;\n let h = 0;\n if (d !== 0) {\n if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n else if (max === g) h = ((b - r) / d + 2) / 6;\n else h = ((r - g) / d + 4) / 6;\n }\n return { h: h * 360, s: s * 100, v: v * 100, a: rgb.a };\n}\n\nfunction hsvToRgb(hsv: HSV): RGB {\n const h = hsv.h / 360;\n const s = hsv.s / 100;\n const v = hsv.v / 100;\n const i = Math.floor(h * 6);\n const f = h * 6 - i;\n const p = v * (1 - s);\n const q = v * (1 - f * s);\n const t = v * (1 - (1 - f) * s);\n let r = 0;\n let g = 0;\n let b = 0;\n switch (i % 6) {\n case 0:\n r = v;\n g = t;\n b = p;\n break;\n case 1:\n r = q;\n g = v;\n b = p;\n break;\n case 2:\n r = p;\n g = v;\n b = t;\n break;\n case 3:\n r = p;\n g = q;\n b = v;\n break;\n case 4:\n r = t;\n g = p;\n b = v;\n break;\n case 5:\n r = v;\n g = p;\n b = q;\n break;\n }\n return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255), a: hsv.a };\n}\n\nfunction rgbToHsl(rgb: RGB): { h: number; s: number; l: number; a: number } {\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const l = (max + min) / 2;\n let h = 0;\n let s = 0;\n if (max !== min) {\n const d = max - min;\n s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;\n else if (max === g) h = ((b - r) / d + 2) / 6;\n else h = ((r - g) / d + 4) / 6;\n }\n return { h: h * 360, s: s * 100, l: l * 100, a: rgb.a };\n}\n\n// P2-1: parseColor now handles HSV/HSVA input strings for round-trip correctness\nfunction parseColor(value: string): HSV | null {\n if (!value) return null;\n\n if (value.startsWith('#')) {\n const rgb = hexToRgb(value);\n return rgb ? rgbToHsv(rgb) : null;\n }\n\n const rgbMatch = value.match(/rgba?\$\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)(?:\\s*,\\s*([\\d.]+))?\\s*\$/);\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*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\$/,\n );\n if (hslMatch) {\n const [, hm1, hm2, hm3, hm4] = hslMatch;\n const h = parseFloat(hm1 ?? '0');\n const s = parseFloat(hm2 ?? '0') / 100;\n const l = parseFloat(hm3 ?? '0') / 100;\n const a = hm4 !== undefined ? parseFloat(hm4) : 1;\n const c = (1 - Math.abs(2 * l - 1)) * s;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = l - c / 2;\n let r = 0;\n let g = 0;\n let b = 0;\n if (h < 60) {\n r = c;\n g = x;\n } else if (h < 120) {\n r = x;\n g = c;\n } else if (h < 180) {\n g = c;\n b = x;\n } else if (h < 240) {\n g = x;\n b = c;\n } else if (h < 300) {\n r = x;\n b = c;\n } else {\n r = c;\n b = x;\n }\n return rgbToHsv({\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n a,\n });\n }\n\n // P2-1: Support HSV/HSVA input strings (component's own output format)\n const hsvMatch = value.match(\n /hsva?\$\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\$/,\n );\n if (hsvMatch) {\n const [, hm1, hm2, hm3, hm4] = hsvMatch;\n return {\n h: parseFloat(hm1 ?? '0'),\n s: parseFloat(hm2 ?? '0'),\n v: parseFloat(hm3 ?? '0'),\n a: hm4 !== undefined ? parseFloat(hm4) : 1,\n };\n }\n\n return null;\n}\n\nfunction formatColor(hsv: HSV, format: ColorFormat, includeAlpha: boolean): string {\n const rgb = hsvToRgb(hsv);\n switch (format) {\n case 'hex':\n return rgbToHex(rgb, includeAlpha);\n case 'rgb': {\n if (includeAlpha && hsv.a < 1) {\n return `rgba(${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 `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${Math.round(hsv.a * 100) / 100})`;\n }\n return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;\n }\n case 'hsv': {\n if (includeAlpha && hsv.a < 1) {\n return `hsva(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%, ${Math.round(hsv.a * 100) / 100})`;\n }\n return `hsv(${Math.round(hsv.h)}, ${Math.round(hsv.s)}%, ${Math.round(hsv.v)}%)`;\n }\n }\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * A color picker control with gradient picker, hue/opacity sliders, swatches,\n * and formatted text input. Supports hex, rgb, hsl, and hsv output formats.\n *\n * @summary Color selection control with swatches, gradient picker, and formatted input.\n *\n * @tag hx-color-picker\n *\n * @slot trigger - Custom trigger element. Default: a color swatch button.\n *\n * @fires {CustomEvent<{value: string}>} hx-input - Dispatched while dragging sliders or grid.\n * @fires {CustomEvent<{value: string}>} hx-change - Dispatched when a color is committed.\n *\n * @csspart trigger - The trigger button element.\n * @csspart swatches - The swatch color buttons container.\n * @csspart grid - The 2D saturation/value gradient picker area.\n * @csspart slider - Shared slider container (also on hue-slider and opacity-slider).\n * @csspart hue-slider - The hue slider track.\n * @csspart opacity-slider - The alpha/opacity slider track.\n * @csspart input - The text input area.\n *\n * @cssprop [--hx-color-picker-z-index=1000] - z-index of the popover panel.\n * @cssprop [--hx-color-picker-width=260px] - Width of the picker panel.\n * @cssprop [--hx-color-picker-grid-height=160px] - Height of the gradient grid.\n * @cssprop [--hx-color-picker-thumb-border=#fff] - Border color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-thumb-shadow=rgba(0,0,0,0.3)] - Shadow color of slider/grid thumbs.\n * @cssprop [--hx-color-picker-panel-shadow=rgba(0,0,0,0.15)] - Panel drop-shadow color.\n * @cssprop [--hx-color-picker-swatch-border=rgba(0,0,0,0.1)] - Swatch button border color.\n * @cssprop [--hx-color-picker-swatch-border-hover=rgba(0,0,0,0.3)] - Swatch button border on hover.\n *\n * @example\n * ```html\n * <hx-color-picker value=\"#3b82f6\" format=\"hex\"></hx-color-picker>\n * ```\n *\n * @example Drupal / Twig usage\n * The `swatches` property must be set via JavaScript (Drupal behavior) because arrays\n * cannot be serialized as HTML attributes:\n * ```js\n * // my-theme/js/color-picker-behavior.js\n * Drupal.behaviors.helixColorPicker = {\n * attach(context) {\n * context.querySelectorAll('hx-color-picker[data-swatches]').forEach((el) => {\n * el.swatches = JSON.parse(el.dataset.swatches);\n * });\n * },\n * };\n * ```\n * ```twig\n * <hx-color-picker\n * value=\"{{ color }}\"\n * data-swatches='{{ swatches | json_encode }}'\n * ></hx-color-picker>\n * ```\n */\n@customElement('hx-color-picker')\nexport class HelixColorPicker extends LitElement {\n static override styles = [tokenStyles, helixColorPickerStyles];\n\n static formAssociated = true;\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n // P1-1: Store bound references so connectedCallback/disconnectedCallback use the same object\n this._boundPointerMove = this._handlePointerMove.bind(this);\n this._boundPointerUp = this._handlePointerUp.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 // ─── Internal State ──────────────────────────────────────────────────────\n\n @state() private _hsv: HSV = { h: 0, s: 0, v: 0, a: 1 };\n @state() private _open = false;\n @state() private _inputValue = '#000000';\n\n // ─── Dragging state (not reactive, managed manually) ─────────────────────\n\n private _draggingGrid = false;\n private _draggingHue = false;\n private _draggingOpacity = false;\n\n // P1-1: Stored bound references to prevent memory leaks\n private _boundPointerMove: (e: PointerEvent) => void;\n private _boundPointerUp: () => void;\n\n // ─── Lifecycle ───────────────────────────────────────────────────────────\n\n override connectedCallback(): void {\n super.connectedCallback();\n this._syncFromValue();\n this._handleDocumentClick = this._handleDocumentClick.bind(this);\n document.addEventListener('click', this._handleDocumentClick, true);\n // P1-1: Use stored bound references (not inline .bind() which creates new objects)\n document.addEventListener('pointermove', this._boundPointerMove);\n document.addEventListener('pointerup', this._boundPointerUp);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('click', this._handleDocumentClick, true);\n // P1-1: Remove using the same stored references added in connectedCallback\n document.removeEventListener('pointermove', this._boundPointerMove);\n document.removeEventListener('pointerup', this._boundPointerUp);\n }\n\n override willUpdate(changedProperties: Map<string, unknown>): void {\n if (changedProperties.has('value')) {\n this._syncFromValue();\n }\n }\n\n // ─── Sync ────────────────────────────────────────────────────────────────\n\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 private _commit(source: 'drag' | 'change'): void {\n const formatted = formatColor(this._hsv, this.format, this.opacity);\n this.value = formatted;\n this._inputValue = formatted;\n this._internals.setFormValue(formatted);\n const detail = { value: formatted };\n const opts: CustomEventInit<{ value: string }> = {\n bubbles: true,\n composed: true,\n detail,\n };\n if (source === 'drag') {\n this.dispatchEvent(new CustomEvent('hx-input', opts));\n } else {\n this.dispatchEvent(new CustomEvent('hx-change', opts));\n }\n }\n\n // ─── Panel open/close ────────────────────────────────────────────────────\n\n private _show(): void {\n if (this._open || this.inline) return;\n this._open = true;\n }\n\n private _hide(): void {\n if (!this._open) return;\n this._open = false;\n }\n\n private _handleDocumentClick(e: MouseEvent): void {\n if (!this._open) return;\n if (!e.composedPath().includes(this)) {\n this._hide();\n }\n }\n\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 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 private _handleGridPointerDown(e: PointerEvent): void {\n if (this.disabled) return;\n e.preventDefault();\n this._draggingGrid = true;\n (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n this._updateGridFromPointer(e);\n }\n\n private _updateGridFromPointer(e: PointerEvent): void {\n const grid = this.shadowRoot?.querySelector<HTMLElement>('[part=\"grid\"]');\n if (!grid) return;\n const rect = grid.getBoundingClientRect();\n const x = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n const y = clamp((e.clientY - rect.top) / rect.height, 0, 1);\n this._hsv = { ...this._hsv, s: x * 100, v: (1 - y) * 100 };\n this._commit('drag');\n this.requestUpdate();\n }\n\n // P0-1: Keyboard support for gradient grid — fixes WCAG 2.1 SC 2.1.1 failure\n 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 private _handleHuePointerDown(e: PointerEvent): void {\n if (this.disabled) return;\n e.preventDefault();\n this._draggingHue = true;\n (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n this._updateHueFromPointer(e);\n }\n\n private _updateHueFromPointer(e: PointerEvent): void {\n const track = this.shadowRoot?.querySelector<HTMLElement>('[part=\"hue-slider\"]');\n if (!track) return;\n const rect = track.getBoundingClientRect();\n const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n this._hsv = { ...this._hsv, h: pct * 360 };\n this._commit('drag');\n this.requestUpdate();\n }\n\n // ─── Opacity slider dragging ──────────────────────────────────────────────\n\n private _handleOpacityPointerDown(e: PointerEvent): void {\n if (this.disabled) return;\n e.preventDefault();\n this._draggingOpacity = true;\n (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n this._updateOpacityFromPointer(e);\n }\n\n private _updateOpacityFromPointer(e: PointerEvent): void {\n const track = this.shadowRoot?.querySelector<HTMLElement>('[part=\"opacity-slider\"]');\n if (!track) return;\n const rect = track.getBoundingClientRect();\n const pct = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n this._hsv = { ...this._hsv, a: pct };\n this._commit('drag');\n this.requestUpdate();\n }\n\n // ─── Document-level pointer handlers ─────────────────────────────────────\n\n 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 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._commit('change');\n }\n }\n\n // ─── Keyboard handling for sliders ───────────────────────────────────────\n\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 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 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 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 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 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 private _hueColor(): string {\n return `hsl(${Math.round(this._hsv.h)}, 100%, 50%)`;\n }\n\n private _previewColor(): string {\n const rgb = hsvToRgb(this._hsv);\n if (this.opacity && this._hsv.a < 1) {\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this._hsv.a})`;\n }\n return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n }\n\n // ─── Render helpers ───────────────────────────────────────────────────────\n\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 return html`\n <div\n part=\"grid\"\n class=\"gradient-grid\"\n role=\"slider\"\n tabindex=\"0\"\n aria-label=\"Color gradient\"\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 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=\"Hue\"\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 private _renderOpacitySlider() {\n if (!this.opacity) return nothing;\n const pct = `${this._hsv.a * 100}%`;\n const rgb = hsvToRgb(this._hsv);\n const thumbColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this._hsv.a})`;\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=\"Opacity\"\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 private _renderSwatches() {\n if (!this.swatches?.length) return nothing;\n return html`\n <div part=\"swatches\" class=\"swatches\" role=\"group\" aria-label=\"Preset colors\">\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 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=\"Switch color format\"\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=\"Color value\"\n autocomplete=\"off\"\n spellcheck=\"false\"\n @input=${this._handleInputChange}\n @blur=${this._handleInputBlur}\n />\n </div>\n `;\n }\n\n private _renderPanel() {\n return html`\n <div\n class=\"panel\"\n role=\"dialog\"\n aria-label=\"Color picker\"\n aria-modal=\"true\"\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=\"Choose color: ${this._inputValue}\"\n aria-haspopup=\"dialog\"\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","LitElement","changedProperties","parsed","source","formatted","opts","e","_b","_a","grid","rect","y","sDelta","vDelta","track","pct","delta","input","formats","idx","next","color","thumbX","thumbY","hueColor","html","styleMap","nothing","thumbColor","previewColor","tokenStyles","__decorateClass","property","state","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;AAA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"}

package/dist/shared/{hx-container-COinHjxn.js → hx-container-BXZBaOGG.js} RENAMED Viewed

@@ -1,8 +1,8 @@
-import { css as s, LitElement as c, html as x } from "lit";
-import { property as h, customElement as m } from "lit/decorators.js";
+import { css as h, LitElement as c, html as x } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
 import { classMap as g } from "lit/directives/class-map.js";
-import { tokenStyles as l } from "@helixui/tokens/lit";
-const v = s`
+import { tokenStyles as v } from "@helixui/tokens/lit";
+const l = h`
   :host {
     display: block;
     width: 100%;
@@ -12,6 +12,7 @@ const v = s`
   /* ─── Vertical Padding Variants ─── */
+  /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */
   :host([padding='none']) {
     padding-top: 0;
     padding-bottom: 0;
@@ -83,10 +84,10 @@ const v = s`
     max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));
   }
 `;
-var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (t, a, i, e) => {
-  for (var n = e > 1 ? void 0 : e ? w(a, i) : a, o = t.length - 1, d; o >= 0; o--)
-    (d = t[o]) && (n = (e ? d(a, i, n) : d(n)) || n);
-  return e && n && _(a, i, n), n;
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, p = (t, e, i, a) => {
+  for (var n = a > 1 ? void 0 : a ? w(e, i) : e, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (n = (a ? d(e, i, n) : d(n)) || n);
+  return a && n && _(e, i, n), n;
 };
 let r = class extends c {
   constructor() {
@@ -105,12 +106,12 @@ let r = class extends c {
     `;
   }
 };
-r.styles = [l, v];
+r.styles = [v, l];
 p([
-  h({ type: String, reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], r.prototype, "width", 2);
 p([
-  h({ type: String, reflect: !0 })
+  s({ type: String, reflect: !0 })
 ], r.prototype, "padding", 2);
 r = p([
   m("hx-container")
@@ -118,4 +119,4 @@ r = p([
 export {
   r as H
 };
-//# sourceMappingURL=hx-container-COinHjxn.js.map
+//# sourceMappingURL=hx-container-BXZBaOGG.js.map

package/dist/shared/hx-container-BXZBaOGG.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-container-BXZBaOGG.js","sources":["../../src/components/hx-container/hx-container.styles.ts","../../src/components/hx-container/hx-container.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixContainerStyles = css`\n :host {\n display: block;\n width: 100%;\n background-color: var(--hx-container-bg, transparent);\n box-sizing: border-box;\n }\n\n /* ─── Vertical Padding Variants ─── */\n\n /* Defensive reset: ensures zero vertical padding even if a future base rule adds it */\n :host([padding='none']) {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n :host([padding='sm']) {\n padding-top: var(--hx-space-6, 1.5rem);\n padding-bottom: var(--hx-space-6, 1.5rem);\n }\n\n :host([padding='md']) {\n padding-top: var(--hx-space-12, 3rem);\n padding-bottom: var(--hx-space-12, 3rem);\n }\n\n :host([padding='lg']) {\n padding-top: var(--hx-space-16, 4rem);\n padding-bottom: var(--hx-space-16, 4rem);\n }\n\n :host([padding='xl']) {\n padding-top: var(--hx-space-24, 6rem);\n padding-bottom: var(--hx-space-24, 6rem);\n }\n\n :host([padding='2xl']) {\n padding-top: var(--hx-space-32, 8rem);\n padding-bottom: var(--hx-space-32, 8rem);\n }\n\n /* ─── Inner Container ─── */\n\n .container__inner {\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n padding-right: var(--hx-container-gutter, var(--hx-space-6, 1.5rem));\n box-sizing: border-box;\n width: 100%;\n }\n\n /* ─── Width Variants ─── */\n\n .container__inner--full {\n max-width: none;\n }\n\n .container__inner--content {\n max-width: var(--hx-container-max-width, var(--hx-container-content, 1152px));\n }\n\n .container__inner--narrow {\n max-width: var(--hx-container-max-width, var(--hx-container-narrow, 768px));\n }\n\n .container__inner--sm {\n max-width: var(--hx-container-max-width, var(--hx-container-sm, 640px));\n }\n\n .container__inner--md {\n max-width: var(--hx-container-max-width, var(--hx-container-md, 768px));\n }\n\n .container__inner--lg {\n max-width: var(--hx-container-max-width, var(--hx-container-lg, 1024px));\n }\n\n .container__inner--xl {\n max-width: var(--hx-container-max-width, var(--hx-container-xl, 1280px));\n }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixContainerStyles } from './hx-container.styles.js';\n\n/**\n * A layout container that constrains content width and provides\n * consistent vertical spacing and horizontal gutters.\n *\n * Uses a two-layer model: the outer host spans full width (background,\n * vertical padding), while the inner wrapper constrains max-width,\n * centers content, and applies horizontal gutters.\n *\n * @summary Layout primitive for constraining content width with consistent spacing.\n *\n * @tag hx-container\n *\n * @slot - Default slot for container content.\n *\n * @csspart inner - The inner wrapper that constrains max-width and applies gutters.\n *\n * @cssprop [--hx-container-bg=transparent] - Background color on the outer wrapper.\n * @cssprop [--hx-container-gutter=var(--hx-space-6)] - Horizontal padding on the inner box.\n * @cssprop [--hx-container-max-width] - Override the max-width set by the width property.\n * @cssprop [--hx-container-content=72rem] - Max-width for the content width preset.\n * @cssprop [--hx-container-narrow=48rem] - Max-width for the narrow width preset.\n * @cssprop [--hx-container-sm=640px] - Max-width for the sm width preset.\n * @cssprop [--hx-container-md=768px] - Max-width for the md width preset.\n * @cssprop [--hx-container-lg=1024px] - Max-width for the lg width preset.\n * @cssprop [--hx-container-xl=1280px] - Max-width for the xl width preset.\n */\n@customElement('hx-container')\nexport class HelixContainer extends LitElement {\n static override styles = [tokenStyles, helixContainerStyles];\n\n /**\n * Controls the max-width of the inner content wrapper.\n * @attr width\n * @example\n * // Width presets and their default max-width values:\n * // full → no max-width constraint\n * // content → 72rem (1152px)\n * // narrow → 48rem (768px) — override with --hx-container-narrow\n * // sm → 640px — override with --hx-container-sm\n * // md → 768px — override with --hx-container-md\n * // lg → 1024px — override with --hx-container-lg\n * // xl → 1280px — override with --hx-container-xl\n */\n @property({ type: String, reflect: true })\n width: 'full' | 'content' | 'narrow' | 'sm' | 'md' | 'lg' | 'xl' = 'content';\n\n /**\n * Vertical padding applied to the outer wrapper.\n * @attr padding\n */\n @property({ type: String, reflect: true })\n padding: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = 'none';\n\n // ─── Render ───\n\n override render() {\n const classes = {\n container__inner: true,\n [`container__inner--${this.width}`]: true,\n };\n\n return html`\n <div part=\"inner\" class=${classMap(classes)}>\n <slot></slot>\n </div>\n `;\n }\n}\n\n/** @deprecated Use `HelixContainer` directly. Alias kept for backward compatibility. */\nexport type WcContainer = HelixContainer;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-container': HelixContainer;\n }\n}\n"],"names":["helixContainerStyles","css","HelixContainer","LitElement","classes","html","classMap","tokenStyles","__decorateClass","property","customElement"],"mappings":";;;;AAEO,MAAMA,IAAuBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;AC+B7B,IAAMC,IAAN,cAA6BC,EAAW;AAAA,EAAxC,cAAA;AAAA,UAAA,GAAA,SAAA,GAiBL,KAAA,QAAmE,WAOnE,KAAA,UAAsD;AAAA,EAAA;AAAA;AAAA,EAI7C,SAAS;AAChB,UAAMC,IAAU;AAAA,MACd,kBAAkB;AAAA,MAClB,CAAC,qBAAqB,KAAK,KAAK,EAAE,GAAG;AAAA,IAAA;AAGvC,WAAOC;AAAA,gCACqBC,EAASF,CAAO,CAAC;AAAA;AAAA;AAAA;AAAA,EAI/C;AACF;AAxCaF,EACK,SAAS,CAACK,GAAaP,CAAoB;AAgB3DQ,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAhB9BP,EAiBX,WAAA,SAAA,CAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvB9BP,EAwBX,WAAA,WAAA,CAAA;AAxBWA,IAANM,EAAA;AAAA,EADNE,EAAc,cAAc;AAAA,GAChBR,CAAA;"}

package/dist/shared/{hx-dialog-1VegS0l1.js → hx-dialog-e4CSD8xX.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { css as b, LitElement as f, nothing as n, html as h } from "lit";
+import { css as b, LitElement as f, nothing as s, html as h } from "lit";
 import { query as _, state as v, property as c, customElement as m } from "lit/decorators.js";
 import { tokenStyles as x } from "@helixui/tokens/lit";
 const y = b`
@@ -124,8 +124,8 @@ const y = b`
     border-radius: var(--hx-border-radius-sm, 0.25rem);
     cursor: pointer;
     color: var(--hx-color-neutral-500, #6b7280);
-    font-size: 1.25rem;
-    line-height: 1;
+    font-size: var(--hx-font-size-xl, 1.25rem);
+    line-height: var(--hx-line-height-none, 1);
     transition:
       color var(--hx-duration-100, 100ms) ease,
       background-color var(--hx-duration-100, 100ms) ease;
@@ -181,7 +181,7 @@ const y = b`
     border: 0;
   }
 `;
-var E = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (e, t, o, r) => {
+var E = Object.defineProperty, k = Object.getOwnPropertyDescriptor, n = (e, t, o, r) => {
   for (var a = r > 1 ? void 0 : r ? k(t, o) : t, l = e.length - 1, d; l >= 0; l--)
     (d = e[l]) && (a = (r ? d(t, o, a) : d(a)) || a);
   return r && a && E(t, o, a), a;
@@ -337,7 +337,7 @@ let u = 0, i = class extends f {
     const e = this.heading.trim().length > 0;
     return h`
       <div part="header" class="dialog__header">
-        ${e ? h`<h2 id=${this._headingId} class="dialog__heading">${this.heading}</h2>` : n}
+        ${e ? h`<h2 id=${this._headingId} class="dialog__heading">${this.heading}</h2>` : s}
         <slot name="header" @slotchange=${this._handleHeaderSlotChange}></slot>
         <button
           part="close-button"
@@ -357,7 +357,7 @@ let u = 0, i = class extends f {
     `;
   }
   _renderNonModalBackdrop() {
-    return this.modal || !this.open ? n : h`
+    return this.modal || !this.open ? s : h`
       <div
         part="backdrop"
         class="dialog-backdrop"
@@ -370,7 +370,7 @@ let u = 0, i = class extends f {
   _renderDescription() {
     return this.description ? h`<span id=${this._descriptionId} class="dialog__description"
       >${this.description}</span
-    >` : n;
+    >` : s;
   }
   // ─── Render ───
   render() {
@@ -378,11 +378,11 @@ let u = 0, i = class extends f {
     return h`
       ${this._renderNonModalBackdrop()}
       <dialog
-        role=${this.variant !== "dialog" ? this.variant : n}
-        aria-labelledby=${e ? this._headingId : n}
-        aria-label=${!e && t ? t : n}
-        aria-describedby=${this.description ? this._descriptionId : n}
-        aria-modal=${this.modal ? "true" : n}
+        role=${this.variant !== "dialog" ? this.variant : s}
+        aria-labelledby=${e ? this._headingId : s}
+        aria-label=${!e && t ? t : s}
+        aria-describedby=${this.description ? this._descriptionId : s}
+        aria-modal=${this.modal ? "true" : s}
       >
         <div part="dialog" class="dialog">
           ${this._renderHeader()} ${this._renderDescription()}
@@ -396,22 +396,22 @@ let u = 0, i = class extends f {
   }
 };
 i.styles = [x, y];
-s([
+n([
   _("dialog")
 ], i.prototype, "_dialogEl", 2);
-s([
+n([
   v()
 ], i.prototype, "_hasHeaderSlot", 2);
-s([
+n([
   v()
 ], i.prototype, "_hasFooterSlot", 2);
-s([
+n([
   c({ type: Boolean, reflect: !0 })
 ], i.prototype, "open", 2);
-s([
+n([
   c({ type: Boolean, reflect: !0 })
 ], i.prototype, "modal", 2);
-s([
+n([
   c({
     attribute: "close-on-backdrop",
     reflect: !0,
@@ -421,19 +421,19 @@ s([
     }
   })
 ], i.prototype, "closeOnBackdrop", 2);
-s([
+n([
   c({ type: String })
 ], i.prototype, "heading", 2);
-s([
+n([
   c({ type: String, reflect: !0 })
 ], i.prototype, "variant", 2);
-s([
+n([
   c({ type: String })
 ], i.prototype, "description", 2);
-i = s([
+i = n([
   m("hx-dialog")
 ], i);
 export {
   i as H
 };
-//# sourceMappingURL=hx-dialog-1VegS0l1.js.map
+//# sourceMappingURL=hx-dialog-e4CSD8xX.js.map

package/dist/shared/hx-dialog-e4CSD8xX.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"hx-dialog-e4CSD8xX.js","sources":["../../src/components/hx-dialog/hx-dialog.styles.ts","../../src/components/hx-dialog/hx-dialog.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDialogStyles = css`\n :host {\n display: contents;\n }\n\n /* ─── Native dialog reset ─── */\n\n dialog {\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n max-width: 100%;\n max-height: 100%;\n overflow: visible;\n /* D5 — ensure native dialog element renders above the non-modal backdrop sibling */\n position: relative;\n z-index: calc(var(--hx-z-index-modal, 100) + 1);\n }\n\n /* ─── Dialog container ─── */\n\n .dialog {\n display: flex;\n flex-direction: column;\n position: relative;\n background-color: var(--hx-dialog-bg, var(--hx-color-neutral-0));\n color: var(--hx-dialog-color, var(--hx-color-neutral-900));\n border-radius: var(--hx-dialog-border-radius, var(--hx-border-radius-lg));\n box-shadow: var(--hx-dialog-shadow, var(--hx-shadow-xl));\n width: var(--hx-dialog-width, var(--hx-size-128, 32rem));\n max-width: calc(100vw - var(--hx-spacing-8, 2rem));\n max-height: calc(100vh - var(--hx-spacing-8, 2rem));\n overflow: hidden;\n outline: none;\n\n /* Open/close animation */\n opacity: 0;\n transform: translateY(var(--hx-spacing-4, 1rem)) scale(0.97);\n transition:\n opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out),\n transform var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n }\n\n dialog[open] .dialog {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .dialog {\n transition: none;\n }\n }\n\n /* ─── Native backdrop (modal mode) ─── */\n\n dialog::backdrop {\n background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n opacity: 0;\n transition: opacity var(--hx-duration-200, 200ms) var(--hx-ease-out, ease-out);\n }\n\n dialog[open]::backdrop {\n opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n }\n\n @media (prefers-reduced-motion: reduce) {\n dialog::backdrop {\n transition: none;\n }\n }\n\n /* ─── Non-modal backdrop overlay ─── */\n\n .dialog-backdrop {\n position: fixed;\n inset: 0;\n background-color: var(--hx-dialog-backdrop-color, var(--hx-color-neutral-900));\n opacity: var(--hx-dialog-backdrop-opacity, 0.5);\n /* D5 — backdrop z-index must be lower than the dialog element's z-index */\n z-index: var(--hx-z-index-modal, 100);\n }\n\n /* ─── Header ─── */\n\n .dialog__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--hx-dialog-header-padding, var(--hx-spacing-5) var(--hx-spacing-6));\n border-bottom: var(--hx-border-width-1) solid\n var(--hx-dialog-header-border-color, var(--hx-color-neutral-200));\n gap: var(--hx-spacing-4);\n flex-shrink: 0;\n }\n\n .dialog__heading {\n margin: 0;\n font-family: var(--hx-font-family-sans);\n font-size: var(--hx-font-size-lg);\n font-weight: var(--hx-font-weight-semibold);\n line-height: var(--hx-line-height-snug);\n color: var(--hx-dialog-heading-color, var(--hx-color-neutral-900));\n flex: 1 1 auto;\n }\n\n /* ─── Built-in close button (D17) ─── */\n\n .dialog__close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--hx-spacing-8, 2rem);\n height: var(--hx-spacing-8, 2rem);\n padding: 0;\n margin-left: auto;\n background: transparent;\n border: none;\n border-radius: var(--hx-border-radius-sm, 0.25rem);\n cursor: pointer;\n color: var(--hx-color-neutral-500, #6b7280);\n font-size: var(--hx-font-size-xl, 1.25rem);\n line-height: var(--hx-line-height-none, 1);\n transition:\n color var(--hx-duration-100, 100ms) ease,\n background-color var(--hx-duration-100, 100ms) ease;\n }\n\n .dialog__close-btn::before {\n content: '×';\n }\n\n .dialog__close-btn:hover {\n color: var(--hx-color-neutral-900, #111827);\n background-color: var(--hx-color-neutral-100, #f3f4f6);\n }\n\n .dialog__close-btn:focus-visible {\n outline: 2px solid var(--hx-color-primary-500, #3b82f6);\n outline-offset: 2px;\n }\n\n /* ─── Body ─── */\n\n .dialog__body {\n flex: 1 1 auto;\n padding: var(--hx-dialog-body-padding, var(--hx-spacing-6));\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n /* ─── Footer ─── */\n\n .dialog__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--hx-spacing-3);\n padding: var(--hx-dialog-footer-padding, var(--hx-spacing-4) var(--hx-spacing-6));\n border-top: var(--hx-border-width-1) solid\n var(--hx-dialog-footer-border-color, var(--hx-color-neutral-200));\n flex-shrink: 0;\n }\n\n /* ─── Visually-hidden description (D8) ─── */\n\n .dialog__description {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDialogStyles } from './hx-dialog.styles.js';\n\n// D21 — deterministic monotonic counter instead of Math.random()\nlet _dialogCounter = 0;\n\n/**\n * A modal and non-modal dialog component built on the native HTML `<dialog>` element.\n * Provides focus trapping, backdrop interaction, keyboard navigation, and full\n * ARIA labelling for enterprise healthcare accessibility requirements.\n *\n * @summary Accessible dialog overlay for confirmations, forms, and detailed content.\n *\n * @tag hx-dialog\n *\n * @slot - Default slot for the dialog body content.\n * @slot header - Slot for custom header content. When provided, replaces the built-in heading.\n * @slot footer - Slot for action buttons or footer content.\n *\n * @fires {CustomEvent<void>} hx-open - Fired when the dialog opens.\n * @fires {CustomEvent<void>} hx-close - Fired when the dialog closes for any reason.\n * @fires {CustomEvent<void>} hx-cancel - Fired when the dialog is dismissed via Escape key or cancel action.\n *\n * @csspart dialog - The inner container div that holds the dialog content.\n * @csspart backdrop - The non-modal backdrop overlay element.\n * @csspart header - The header region containing the heading and header slot.\n * @csspart close-button - The built-in close button in the dialog header.\n * @csspart body - The scrollable body region containing the default slot.\n * @csspart footer - The footer region containing the footer slot.\n *\n * @cssprop [--hx-dialog-bg=var(--hx-color-neutral-0)] - Dialog background color.\n * @cssprop [--hx-dialog-color=var(--hx-color-neutral-900)] - Dialog text color.\n * @cssprop [--hx-dialog-border-radius=var(--hx-border-radius-lg)] - Dialog corner radius.\n * @cssprop [--hx-dialog-shadow=var(--hx-shadow-xl)] - Dialog box shadow.\n * @cssprop [--hx-dialog-width=32rem] - Dialog width.\n * @cssprop [--hx-dialog-backdrop-color=var(--hx-color-neutral-900)] - Backdrop overlay color.\n * @cssprop [--hx-dialog-backdrop-opacity=0.5] - Backdrop overlay opacity (set to 0 to hide; note\n * that opacity:0 makes the backdrop invisible but still present in the layout — use pointer-events\n * carefully if you need a fully non-blocking backdrop).\n * @cssprop [--hx-dialog-header-padding] - Padding inside the dialog header.\n * @cssprop [--hx-dialog-header-border-color=var(--hx-color-neutral-200)] - Header bottom border color.\n * @cssprop [--hx-dialog-heading-color=var(--hx-color-neutral-900)] - Heading text color.\n * @cssprop [--hx-dialog-body-padding] - Padding inside the dialog body.\n * @cssprop [--hx-dialog-footer-padding] - Padding inside the dialog footer.\n * @cssprop [--hx-dialog-footer-border-color=var(--hx-color-neutral-200)] - Footer top border color.\n *\n * @remarks\n * **Browser support for `::backdrop`:** The `dialog::backdrop` pseudo-element inside Shadow DOM\n * is well-supported in Chrome/Chromium and Firefox 122+. For Firefox < 122, modal backdrop\n * animation will silently fall back to no animation. A non-modal backdrop fallback is rendered\n * for non-modal dialogs.\n *\n * **Drupal integration:** This component is Twig-renderable via attributes (`heading`, `open`,\n * `modal`, `close-on-backdrop`). For trigger-button wiring in Drupal behaviors:\n * ```js\n * Drupal.behaviors.hxDialog = {\n * attach(context) {\n * context.querySelectorAll('[data-hx-dialog-trigger]').forEach((btn) => {\n * btn.addEventListener('click', () => {\n * const id = btn.getAttribute('data-hx-dialog-trigger');\n * document.getElementById(id)?.showModal();\n * });\n * });\n * },\n * };\n * ```\n * Focus restoration to the trigger element is handled automatically by the component.\n */\n@customElement('hx-dialog')\nexport class HelixDialog extends LitElement {\n static override styles = [tokenStyles, helixDialogStyles];\n\n // D10 — observe aria-label attribute without shadowing ARIAMixin.ariaLabel\n static override get observedAttributes(): string[] {\n return [...super.observedAttributes, 'aria-label'];\n }\n\n // ─── Queries ───\n\n @query('dialog')\n private _dialogEl!: HTMLDialogElement | null;\n\n // ─── Internal state ───\n\n /** Tracks whether a header slot has been assigned content. */\n @state()\n private _hasHeaderSlot = false;\n\n /** Tracks whether a footer slot has been assigned content. */\n @state()\n private _hasFooterSlot = false;\n\n /** Cached focusable elements — populated on open, cleared on close. */\n private _cachedFocusableElements: HTMLElement[] = [];\n\n /** The element that had focus when the dialog opened — restored on close (D1). */\n private _triggerElement: HTMLElement | null = null;\n\n /** Pending returnValue to pass to native dialog.close() (D11). */\n private _pendingReturnValue: string | undefined = undefined;\n\n // ─── Unique IDs for aria-labelledby / aria-describedby ───\n\n private readonly _headingId = `hx-dialog-heading-${++_dialogCounter}`;\n private readonly _descriptionId = `hx-dialog-description-${_dialogCounter}`;\n\n // ─── Public Properties ───\n\n /**\n * Controls whether the dialog is open.\n * @attr open\n */\n @property({ type: Boolean, reflect: true })\n open = false;\n\n /**\n * When true, renders as a modal dialog with a backdrop and focus trap.\n * When false, renders as a non-modal dialog.\n * @attr modal\n */\n @property({ type: Boolean, reflect: true })\n modal = true;\n\n /**\n * When true, clicking the backdrop closes the dialog.\n * @attr close-on-backdrop\n */\n @property({\n attribute: 'close-on-backdrop',\n reflect: true,\n converter: {\n fromAttribute: (value: string | null) => value !== 'false',\n toAttribute: (value: boolean) => String(value),\n },\n })\n closeOnBackdrop = true;\n\n /**\n * Text content for the dialog heading. Used as the accessible label via aria-labelledby.\n * @attr heading\n */\n @property({ type: String })\n heading = '';\n\n /**\n * ARIA role variant. Use `'alertdialog'` for urgent dialogs requiring immediate attention\n * (e.g., drug interaction warnings, critical lab alerts). Defaults to `'dialog'`.\n * @attr variant\n */\n @property({ type: String, reflect: true })\n variant: 'dialog' | 'alertdialog' = 'dialog';\n\n /**\n * Optional description text linked to the dialog via `aria-describedby`.\n * When provided, screen readers will announce this text when the dialog receives focus.\n * Recommended for dialogs that surface critical clinical information.\n * @attr description\n */\n @property({ type: String })\n description = '';\n\n /**\n * Returns the dialog's return value — the string passed to `close(returnValue)`.\n * Mirrors `HTMLDialogElement.returnValue`.\n */\n get returnValue(): string {\n return this._dialogEl?.returnValue ?? '';\n }\n\n // ─── Lifecycle ───\n\n // D10 — re-render when aria-label attribute changes (without declaring a shadowing property)\n override attributeChangedCallback(\n name: string,\n oldVal: string | null,\n newVal: string | null,\n ): void {\n super.attributeChangedCallback(name, oldVal, newVal);\n if (name === 'aria-label' && oldVal !== newVal) {\n this.requestUpdate('aria-label', oldVal);\n }\n }\n\n override firstUpdated(): void {\n // Initialize header slot state without a querySelector in render()\n this._hasHeaderSlot = this.querySelector('[slot=\"header\"]') !== null;\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this._removeGlobalListeners();\n // Restore body scroll if disconnected while open\n if (this.modal && this.open) {\n document.body.style.overflow = '';\n }\n }\n\n override updated(changedProperties: Map<string, unknown>): void {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this._openDialog();\n } else {\n this._closeDialog();\n }\n }\n }\n\n // ─── Public Methods ───\n\n /** Opens the dialog in the mode determined by the `modal` property. */\n show(): void {\n this.open = true;\n }\n\n /** Opens the dialog as a modal regardless of the `modal` property setting. */\n showModal(): void {\n this.modal = true;\n this.open = true;\n }\n\n /**\n * Closes the dialog.\n * @param returnValue - Optional return value string stored as `dialog.returnValue`.\n */\n close(returnValue?: string): void {\n if (returnValue !== undefined) {\n this._pendingReturnValue = returnValue;\n }\n this.open = false;\n }\n\n // ─── Private: Open / Close ───\n\n private _openDialog(): void {\n const dialog = this._dialogEl;\n if (!dialog) return;\n\n // D1 — store the element that triggered the dialog open for focus restoration on close\n this._triggerElement = document.activeElement as HTMLElement | null;\n\n if (this.modal) {\n if (!dialog.open) {\n dialog.showModal();\n }\n // D4 — lock body scroll when modal dialog is open\n document.body.style.overflow = 'hidden';\n } else {\n if (!dialog.open) {\n dialog.show();\n }\n }\n\n this._addGlobalListeners();\n\n // Cache focusable elements after the dialog is open in the DOM\n void this.updateComplete.then(() => {\n this._cachedFocusableElements = this._getFocusableElements();\n // D3 — explicitly move initial focus to the first focusable element inside the dialog\n // (browser's built-in focus delegation cannot reach slotted light DOM through Shadow DOM)\n this._cachedFocusableElements[0]?.focus();\n });\n\n this.dispatchEvent(\n new CustomEvent('hx-open', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _closeDialog(): void {\n const dialog = this._dialogEl;\n if (!dialog) return;\n\n const wasOpen = dialog.open;\n if (dialog.open) {\n // D11 — forward returnValue to native dialog.close() if provided\n if (this._pendingReturnValue !== undefined) {\n dialog.close(this._pendingReturnValue);\n this._pendingReturnValue = undefined;\n } else {\n dialog.close();\n }\n }\n\n // D4 — restore body scroll when dialog closes\n document.body.style.overflow = '';\n\n this._removeGlobalListeners();\n this._cachedFocusableElements = [];\n\n // D1 — restore focus to the element that opened the dialog (WCAG 2.4.3)\n this._triggerElement?.focus();\n this._triggerElement = null;\n\n if (wasOpen) {\n this.dispatchEvent(\n new CustomEvent('hx-close', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n }\n\n // ─── Event Listeners ───\n\n private _addGlobalListeners(): void {\n this._dialogEl?.addEventListener('keydown', this._handleKeyDown);\n this._dialogEl?.addEventListener('click', this._handleDialogClick);\n this._dialogEl?.addEventListener('cancel', this._handleNativeCancel);\n }\n\n private _removeGlobalListeners(): void {\n this._dialogEl?.removeEventListener('keydown', this._handleKeyDown);\n this._dialogEl?.removeEventListener('click', this._handleDialogClick);\n this._dialogEl?.removeEventListener('cancel', this._handleNativeCancel);\n }\n\n // ─── Keyboard Handler ───\n\n private _handleKeyDown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') {\n // Native dialog fires a 'cancel' event before close when Escape is pressed.\n // We prevent default here and handle it ourselves so we fire hx-cancel\n // before setting open = false (which triggers hx-close).\n e.preventDefault();\n this._cancel();\n return;\n }\n\n if (e.key === 'Tab' && this.modal) {\n this._trapFocus(e);\n }\n };\n\n // ─── Focus Trap ───\n\n private _getFocusableElements(): HTMLElement[] {\n const focusableSelectors = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n 'details > summary',\n ].join(',');\n\n // Collect focusable elements from slotted light DOM content only.\n // Shadow DOM elements (e.g., the built-in close button) remain accessible via\n // the native <dialog> tab order — including them here would cause focus to land\n // on shadow DOM elements whose document.activeElement resolves to the host,\n // breaking the test assertions and D7 initial focus behavior.\n const slots = this.shadowRoot?.querySelectorAll<HTMLSlotElement>('slot') ?? [];\n const lightFocusable: HTMLElement[] = [];\n\n slots.forEach((slot) => {\n slot.assignedElements({ flatten: true }).forEach((el) => {\n if (el instanceof HTMLElement) {\n if (el.matches(focusableSelectors)) {\n lightFocusable.push(el);\n }\n el.querySelectorAll<HTMLElement>(focusableSelectors).forEach((child) => {\n lightFocusable.push(child);\n });\n }\n });\n });\n\n return lightFocusable.filter(\n (el) => !el.hasAttribute('disabled') && el.getAttribute('tabindex') !== '-1',\n );\n }\n\n private _trapFocus(e: KeyboardEvent): void {\n const focusable =\n this._cachedFocusableElements.length > 0\n ? this._cachedFocusableElements\n : this._getFocusableElements();\n if (focusable.length === 0) {\n e.preventDefault();\n return;\n }\n\n const [first, ...rest] = focusable;\n const last = rest.length > 0 ? rest[rest.length - 1] : first;\n\n if (!first || !last) return;\n\n const active = document.activeElement;\n // Also check shadow root active element\n const shadowActive = this.shadowRoot?.activeElement;\n const currentActive = (shadowActive ?? active) as HTMLElement | null;\n\n if (e.shiftKey) {\n // Shift+Tab: if focus is on first, wrap to last\n if (currentActive === first) {\n e.preventDefault();\n last.focus();\n }\n } else {\n // Tab: if focus is on last, wrap to first\n if (currentActive === last) {\n e.preventDefault();\n first.focus();\n }\n }\n }\n\n // ─── Backdrop Click ───\n\n private _handleDialogClick = (e: MouseEvent): void => {\n if (!this.closeOnBackdrop) return;\n\n // The native dialog element fills only the content area in showModal().\n // Clicks on the backdrop reach the <dialog> element itself.\n // We detect this by checking whether the click target is the dialog element.\n const target = e.target as HTMLElement;\n if (target === this._dialogEl) {\n this._cancel();\n }\n };\n\n // ─── Non-modal backdrop click ───\n\n private _handleBackdropClick = (): void => {\n if (!this.closeOnBackdrop) return;\n this._cancel();\n };\n\n // ─── Native cancel (Escape via browser, before our handler runs) ───\n\n private _handleNativeCancel = (e: Event): void => {\n // We always prevent the native cancel so we can manage close state ourselves.\n e.preventDefault();\n };\n\n // ─── Cancel logic ───\n\n private _cancel(): void {\n this.dispatchEvent(\n new CustomEvent('hx-cancel', {\n bubbles: true,\n composed: true,\n }),\n );\n\n this.open = false;\n // hx-close is dispatched by _closeDialog() which is called via the open property setter\n }\n\n // ─── Slot change handlers ───\n\n private _handleHeaderSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasHeaderSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n private _handleFooterSlotChange(e: Event): void {\n const slot = e.target as HTMLSlotElement;\n this._hasFooterSlot = slot.assignedNodes({ flatten: true }).length > 0;\n }\n\n // ─── Render Helpers ───\n\n private _renderHeader() {\n const hasHeading = this.heading.trim().length > 0;\n\n // Always render header to include the built-in close button (D17)\n return html`\n <div part=\"header\" class=\"dialog__header\">\n ${hasHeading\n ? html`<h2 id=${this._headingId} class=\"dialog__heading\">${this.heading}</h2>`\n : nothing}\n <slot name=\"header\" @slotchange=${this._handleHeaderSlotChange}></slot>\n <button\n part=\"close-button\"\n class=\"dialog__close-btn\"\n type=\"button\"\n aria-label=\"Close dialog\"\n @click=${() => this.close()}\n ></button>\n </div>\n `;\n }\n\n private _renderFooter() {\n return html`\n <div part=\"footer\" class=\"dialog__footer\" ?hidden=${!this._hasFooterSlot}>\n <slot name=\"footer\" @slotchange=${this._handleFooterSlotChange}></slot>\n </div>\n `;\n }\n\n private _renderNonModalBackdrop() {\n if (this.modal || !this.open) return nothing;\n return html`\n <div\n part=\"backdrop\"\n class=\"dialog-backdrop\"\n @click=${this._handleBackdropClick}\n aria-hidden=\"true\"\n ></div>\n `;\n }\n\n // D8 — render visually-hidden description for aria-describedby\n private _renderDescription() {\n if (!this.description) return nothing;\n return html`<span id=${this._descriptionId} class=\"dialog__description\"\n >${this.description}</span\n >`;\n }\n\n // ─── Render ───\n\n override render() {\n const hasHeading = this.heading.trim().length > 0;\n // D10 — read aria-label via getAttribute to avoid shadowing ARIAMixin.ariaLabel\n const ariaLabel = this.getAttribute('aria-label');\n\n return html`\n ${this._renderNonModalBackdrop()}\n <dialog\n role=${this.variant !== 'dialog' ? this.variant : nothing}\n aria-labelledby=${hasHeading ? this._headingId : nothing}\n aria-label=${!hasHeading && ariaLabel ? ariaLabel : nothing}\n aria-describedby=${this.description ? this._descriptionId : nothing}\n aria-modal=${this.modal ? 'true' : nothing}\n >\n <div part=\"dialog\" class=\"dialog\">\n ${this._renderHeader()} ${this._renderDescription()}\n <div part=\"body\" class=\"dialog__body\">\n <slot></slot>\n </div>\n ${this._renderFooter()}\n </div>\n </dialog>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-dialog': HelixDialog;\n }\n}\n"],"names":["helixDialogStyles","css","_dialogCounter","HelixDialog","LitElement","_a","name","oldVal","newVal","changedProperties","returnValue","dialog","wasOpen","_b","_c","focusableSelectors","slots","lightFocusable","slot","el","child","focusable","first","rest","last","active","currentActive","hasHeading","html","nothing","ariaLabel","tokenStyles","__decorateClass","query","state","property","value","customElement"],"mappings":"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"}

package/dist/shared/{hx-divider-UdSFzALX.js → hx-divider-XgWIz4Mr.js} RENAMED Viewed

@@ -117,7 +117,7 @@ let r = class extends v {
     return s`
       <div
         part="base"
-        class="divider"
+        class="divider${i ? " divider--labeled" : ""}"
         role="${e ? "presentation" : "separator"}"
         aria-orientation="${e ? c : this.orientation}"
         aria-label="${!e && this.label ? this.label : c}"
@@ -154,4 +154,4 @@ r = l([
 export {
   r as H
 };
-//# sourceMappingURL=hx-divider-UdSFzALX.js.map
+//# sourceMappingURL=hx-divider-XgWIz4Mr.js.map

package/dist/shared/{hx-divider-UdSFzALX.js.map → hx-divider-XgWIz4Mr.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hx-divider-~~UdSFzALX~~.js","sources":["../../src/components/hx-divider/hx-divider.styles.ts","../../src/components/hx-divider/hx-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDividerStyles = css`\n :host {\n display: block;\n --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));\n --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));\n --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));\n --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Spacing Variants ─── /\n\n :host([spacing='none']) {\n --_spacing: 0;\n }\n\n :host([spacing='sm']) {\n --_spacing: var(--hx-space-2, 0.5rem);\n }\n\n :host,\n :host([spacing='md']) {\n --_spacing: var(--hx-space-4, 1rem);\n }\n\n :host([spacing='lg']) {\n --_spacing: var(--hx-space-6, 1.5rem);\n }\n\n / ─── Horizontal (default) ─── /\n\n :host([orientation='horizontal']) {\n margin-block: var(--_spacing);\n }\n\n / ─── Vertical ─── /\n\n :host([orientation='vertical']) {\n display: inline-flex;\n align-self: stretch;\n margin-inline: var(--_spacing);\n }\n\n / ─── Base (hr) — horizontal ─── /\n\n .divider {\n display: flex;\n align-items: center;\n gap: var(--_divider-label-gap);\n border: none;\n margin: 0;\n padding: 0;\n }\n\n / ─── Base — vertical ─── /\n\n :host([orientation='vertical']) .divider {\n flex-direction: column;\n height: 100%;\n }\n\n / ─── Lines flanking label ─── /\n\n .divider__line {\n flex: 1;\n background-color: var(--_divider-color);\n }\n\n :host(:not([orientation='vertical'])) .divider__line {\n height: var(--_divider-width);\n }\n\n :host([orientation='vertical']) .divider__line {\n width: var(--_divider-width);\n height: auto;\n min-height: 0;\n }\n\n / ─── Label ─── /\n\n .divider__label {\n flex-shrink: 0;\n color: var(--_divider-label-color);\n font-size: var(--_divider-label-size);\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDividerStyles } from './hx-divider.styles.js';\n\n/\n A visual separator element for dividing content sections. Supports\n * horizontal and vertical orientations, configurable spacing, and an optional\n * centered label rendered between two lines.\n \n @summary Horizontal or vertical separator line with optional label.\n \n @tag hx-divider\n \n @slot - Optional label text rendered centered between two lines.\n \n @csspart base - The root divider element.\n * @csspart label - The optional centered label wrapper.\n \n @cssprop [--hx-divider-color=var(--hx-color-neutral-200)] - Line color.\n * @cssprop [--hx-divider-width=var(--hx-border-width-thin)] - Line thickness.\n * @cssprop [--hx-divider-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-divider-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-divider-label-gap=var(--hx-space-3)] - Gap between lines and label.\n /\n@customElement('hx-divider')\nexport class HelixDivider extends LitElement {\n static override styles = [tokenStyles, helixDividerStyles];\n\n /\n Orientation of the divider.\n * @attr orientation\n /\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Spacing applied to the block axis (horizontal) or inline axis (vertical).\n * @attr spacing\n /\n @property({ type: String, reflect: true })\n spacing: 'none' \| 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n When true, renders the divider as decorative only (role=\"presentation\").\n * Screen readers will not announce decorative dividers.\n * @attr decorative\n /\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /\n Optional text label rendered centered between the divider lines.\n * Also sets aria-label on the separator for assistive technologies.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label?: string;\n\n @state()\n private _hasLabel = false;\n\n private _checkSlot(slot: HTMLSlotElement): void {\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasLabel = nodes.some((node) =>\n node.nodeType === Node.TEXT_NODE\n ? (node.textContent ?? '').trim().length > 0\n : node.nodeType === Node.ELEMENT_NODE,\n );\n }\n\n private _slotChangeHandler = (e: Event): void => {\n this._checkSlot(e.target as HTMLSlotElement);\n };\n\n override firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) this._checkSlot(slot);\n }\n\n override render() {\n const isDecorative = this.decorative;\n const showLabel = this._hasLabel \|\| !!this.label;\n\n return html`\n <div\n part=\"base\"\n class=\"divider\"\n role=\"${isDecorative ? 'presentation' : 'separator'}\"\n aria-orientation=\"${isDecorative ? nothing : this.orientation}\"\n aria-label=\"${!isDecorative && this.label ? this.label : nothing}\"\n >\n <span class=\"divider__line\"></span>\n ${showLabel\n ? html`<span part=\"label\" class=\"divider__label\">\n ${this.label ? html`${this.label}` : nothing}\n <slot @slotchange=${this._slotChangeHandler}></slot>\n </span>`\n : html`<slot @slotchange=${this._slotChangeHandler}></slot>`}\n <span class=\"divider__line\"></span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-divider': HelixDivider;\n }\n}\n\nexport type WcDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","LitElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACwB3B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAWb,KAAQ,YAAY,IAWpB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA,EAXQ,WAAWC,GAA6B;AAC9C,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM;AAAA,MAAK,CAACC,MAC3BA,EAAK,aAAa,KAAK,aAClBA,EAAK,eAAe,IAAI,OAAO,SAAS,IACzCA,EAAK,aAAa,KAAK;AAAA,IAAA;AAAA,EAE/B;AAAA,EAMS,aAAaC,GAA0C;;AAC9D,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA;AAAA,~~gBAIKF~~,IAAe,iBAAiB,WAAW;AAAA,4BAC/BA,IAAeG,IAAU,KAAK,WAAW;AAAA,sBAC/C,CAACH,KAAgB,KAAK,QAAQ,KAAK,QAAQG,CAAO;AAAA;AAAA;AAAA,UAG9DF,IACEC;AAAA,gBACI,KAAK,QAAQA,IAAO,KAAK,KAAK,KAAKC,CAAO;AAAA,kCACxB,KAAK,kBAAkB;AAAA,uBAE7CD,sBAAyB,KAAK,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA9EaT,EACK,SAAS,CAACW,GAAab,CAAkB;AAOzDc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bb,EAQX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bb,EAeX,WAAA,WAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAuBX,WAAA,cAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9Bb,EA+BX,WAAA,SAAA,CAAA;AAGQY,EAAA;AAAA,EADPE,EAAA;AAAM,GAjCId,EAkCH,WAAA,aAAA,CAAA;AAlCGA,IAANY,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdf,CAAA;"}
1	+ {"version":3,"file":"hx-divider-XgWIz4Mr.js","sources":["../../src/components/hx-divider/hx-divider.styles.ts","../../src/components/hx-divider/hx-divider.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixDividerStyles = css`\n :host {\n display: block;\n --_divider-color: var(--hx-divider-color, var(--hx-color-neutral-200, #e2e8f0));\n --_divider-width: var(--hx-divider-width, var(--hx-border-width-thin, 1px));\n --_divider-label-color: var(--hx-divider-label-color, var(--hx-color-neutral-500, #64748b));\n --_divider-label-size: var(--hx-divider-label-font-size, var(--hx-font-size-sm, 0.875rem));\n --_divider-label-gap: var(--hx-divider-label-gap, var(--hx-space-3, 0.75rem));\n }\n\n /* ─── Spacing Variants ─── /\n\n :host([spacing='none']) {\n --_spacing: 0;\n }\n\n :host([spacing='sm']) {\n --_spacing: var(--hx-space-2, 0.5rem);\n }\n\n :host,\n :host([spacing='md']) {\n --_spacing: var(--hx-space-4, 1rem);\n }\n\n :host([spacing='lg']) {\n --_spacing: var(--hx-space-6, 1.5rem);\n }\n\n / ─── Horizontal (default) ─── /\n\n :host([orientation='horizontal']) {\n margin-block: var(--_spacing);\n }\n\n / ─── Vertical ─── /\n\n :host([orientation='vertical']) {\n display: inline-flex;\n align-self: stretch;\n margin-inline: var(--_spacing);\n }\n\n / ─── Base (hr) — horizontal ─── /\n\n .divider {\n display: flex;\n align-items: center;\n gap: var(--_divider-label-gap);\n border: none;\n margin: 0;\n padding: 0;\n }\n\n / ─── Base — vertical ─── /\n\n :host([orientation='vertical']) .divider {\n flex-direction: column;\n height: 100%;\n }\n\n / ─── Lines flanking label ─── /\n\n .divider__line {\n flex: 1;\n background-color: var(--_divider-color);\n }\n\n :host(:not([orientation='vertical'])) .divider__line {\n height: var(--_divider-width);\n }\n\n :host([orientation='vertical']) .divider__line {\n width: var(--_divider-width);\n height: auto;\n min-height: 0;\n }\n\n / ─── Label ─── /\n\n .divider__label {\n flex-shrink: 0;\n color: var(--_divider-label-color);\n font-size: var(--_divider-label-size);\n line-height: var(--hx-line-height-tight, 1.25);\n white-space: nowrap;\n }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixDividerStyles } from './hx-divider.styles.js';\n\n/\n A visual separator element for dividing content sections. Supports\n * horizontal and vertical orientations, configurable spacing, and an optional\n * centered label rendered between two lines.\n \n @summary Horizontal or vertical separator line with optional label.\n \n @tag hx-divider\n \n @slot - Optional label text rendered centered between two lines.\n \n @csspart base - The root divider element.\n * @csspart label - The optional centered label wrapper.\n \n @cssprop [--hx-divider-color=var(--hx-color-neutral-200)] - Line color.\n * @cssprop [--hx-divider-width=var(--hx-border-width-thin)] - Line thickness.\n * @cssprop [--hx-divider-label-color=var(--hx-color-neutral-500)] - Label text color.\n * @cssprop [--hx-divider-label-font-size=var(--hx-font-size-sm)] - Label font size.\n * @cssprop [--hx-divider-label-gap=var(--hx-space-3)] - Gap between lines and label.\n /\n@customElement('hx-divider')\nexport class HelixDivider extends LitElement {\n static override styles = [tokenStyles, helixDividerStyles];\n\n /\n Orientation of the divider.\n * @attr orientation\n /\n @property({ type: String, reflect: true })\n orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n /\n Spacing applied to the block axis (horizontal) or inline axis (vertical).\n * @attr spacing\n /\n @property({ type: String, reflect: true })\n spacing: 'none' \| 'sm' \| 'md' \| 'lg' = 'md';\n\n /\n When true, renders the divider as decorative only (role=\"presentation\").\n * Screen readers will not announce decorative dividers.\n * @attr decorative\n /\n @property({ type: Boolean, reflect: true })\n decorative = false;\n\n /\n Optional text label rendered centered between the divider lines.\n * Also sets aria-label on the separator for assistive technologies.\n * @attr label\n */\n @property({ type: String, reflect: true })\n label?: string;\n\n @state()\n private _hasLabel = false;\n\n private _checkSlot(slot: HTMLSlotElement): void {\n const nodes = slot.assignedNodes({ flatten: true });\n this._hasLabel = nodes.some((node) =>\n node.nodeType === Node.TEXT_NODE\n ? (node.textContent ?? '').trim().length > 0\n : node.nodeType === Node.ELEMENT_NODE,\n );\n }\n\n private _slotChangeHandler = (e: Event): void => {\n this._checkSlot(e.target as HTMLSlotElement);\n };\n\n override firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n if (slot) this._checkSlot(slot);\n }\n\n override render() {\n const isDecorative = this.decorative;\n const showLabel = this._hasLabel \|\| !!this.label;\n\n return html`\n <div\n part=\"base\"\n class=\"divider${showLabel ? ' divider--labeled' : ''}\"\n role=\"${isDecorative ? 'presentation' : 'separator'}\"\n aria-orientation=\"${isDecorative ? nothing : this.orientation}\"\n aria-label=\"${!isDecorative && this.label ? this.label : nothing}\"\n >\n <span class=\"divider__line\"></span>\n ${showLabel\n ? html`<span part=\"label\" class=\"divider__label\">\n ${this.label ? html`${this.label}` : nothing}\n <slot @slotchange=${this._slotChangeHandler}></slot>\n </span>`\n : html`<slot @slotchange=${this._slotChangeHandler}></slot>`}\n <span class=\"divider__line\"></span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'hx-divider': HelixDivider;\n }\n}\n\nexport type WcDivider = HelixDivider;\n"],"names":["helixDividerStyles","css","HelixDivider","LitElement","slot","nodes","node","_changedProperties","_a","isDecorative","showLabel","html","nothing","tokenStyles","__decorateClass","property","state","customElement"],"mappings":";;;AAEO,MAAMA,IAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACwB3B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GAQL,KAAA,cAAyC,cAOzC,KAAA,UAAuC,MAQvC,KAAA,aAAa,IAWb,KAAQ,YAAY,IAWpB,KAAQ,qBAAqB,CAAC,MAAmB;AAC/C,WAAK,WAAW,EAAE,MAAyB;AAAA,IAC7C;AAAA,EAAA;AAAA,EAXQ,WAAWC,GAA6B;AAC9C,UAAMC,IAAQD,EAAK,cAAc,EAAE,SAAS,IAAM;AAClD,SAAK,YAAYC,EAAM;AAAA,MAAK,CAACC,MAC3BA,EAAK,aAAa,KAAK,aAClBA,EAAK,eAAe,IAAI,OAAO,SAAS,IACzCA,EAAK,aAAa,KAAK;AAAA,IAAA;AAAA,EAE/B;AAAA,EAMS,aAAaC,GAA0C;;AAC9D,UAAM,aAAaA,CAAkB;AACrC,UAAMH,KAAOI,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAA+B;AAC7D,IAAIJ,KAAM,KAAK,WAAWA,CAAI;AAAA,EAChC;AAAA,EAES,SAAS;AAChB,UAAMK,IAAe,KAAK,YACpBC,IAAY,KAAK,aAAa,CAAC,CAAC,KAAK;AAE3C,WAAOC;AAAA;AAAA;AAAA,wBAGaD,IAAY,sBAAsB,EAAE;AAAA,gBAC5CD,IAAe,iBAAiB,WAAW;AAAA,4BAC/BA,IAAeG,IAAU,KAAK,WAAW;AAAA,sBAC/C,CAACH,KAAgB,KAAK,QAAQ,KAAK,QAAQG,CAAO;AAAA;AAAA;AAAA,UAG9DF,IACEC;AAAA,gBACI,KAAK,QAAQA,IAAO,KAAK,KAAK,KAAKC,CAAO;AAAA,kCACxB,KAAK,kBAAkB;AAAA,uBAE7CD,sBAAyB,KAAK,kBAAkB,UAAU;AAAA;AAAA;AAAA;AAAA,EAIpE;AACF;AA9EaT,EACK,SAAS,CAACW,GAAab,CAAkB;AAOzDc,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9Bb,EAQX,WAAA,eAAA,CAAA;AAOAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAd9Bb,EAeX,WAAA,WAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/Bb,EAuBX,WAAA,cAAA,CAAA;AAQAY,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA9B9Bb,EA+BX,WAAA,SAAA,CAAA;AAGQY,EAAA;AAAA,EADPE,EAAA;AAAM,GAjCId,EAkCH,WAAA,aAAA,CAAA;AAlCGA,IAANY,EAAA;AAAA,EADNG,EAAc,YAAY;AAAA,GACdf,CAAA;"}