@krollins/blueprint 0.1.12 → 0.1.13

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 (95) hide show
  1. package/dist/components/accordion.js +393 -0
  2. package/dist/components/accordion.js.map +1 -0
  3. package/dist/components/alert.js +213 -0
  4. package/dist/components/alert.js.map +1 -0
  5. package/dist/components/avatar.js +237 -0
  6. package/dist/components/avatar.js.map +1 -0
  7. package/dist/components/badge.js +144 -0
  8. package/dist/components/badge.js.map +1 -0
  9. package/dist/components/breadcrumb.js +481 -0
  10. package/dist/components/breadcrumb.js.map +1 -0
  11. package/dist/components/button.js +192 -0
  12. package/dist/components/button.js.map +1 -0
  13. package/dist/components/card.js +223 -0
  14. package/dist/components/card.js.map +1 -0
  15. package/dist/components/checkbox.js +337 -0
  16. package/dist/components/checkbox.js.map +1 -0
  17. package/dist/components/color-picker.js +1660 -0
  18. package/dist/components/color-picker.js.map +1 -0
  19. package/dist/components/combobox.js +595 -0
  20. package/dist/components/combobox.js.map +1 -0
  21. package/dist/components/date-picker.js +726 -0
  22. package/dist/components/date-picker.js.map +1 -0
  23. package/dist/components/divider.js +214 -0
  24. package/dist/components/divider.js.map +1 -0
  25. package/dist/components/drawer.js +568 -0
  26. package/dist/components/drawer.js.map +1 -0
  27. package/dist/components/dropdown.js +377 -0
  28. package/dist/components/dropdown.js.map +1 -0
  29. package/dist/components/file-upload.js +669 -0
  30. package/dist/components/file-upload.js.map +1 -0
  31. package/dist/components/heading.js +161 -0
  32. package/dist/components/heading.js.map +1 -0
  33. package/dist/components/icon.js +599 -0
  34. package/dist/components/icon.js.map +1 -0
  35. package/dist/components/input.js +363 -0
  36. package/dist/components/input.js.map +1 -0
  37. package/dist/components/link.js +178 -0
  38. package/dist/components/link.js.map +1 -0
  39. package/dist/components/menu.js +331 -0
  40. package/dist/components/menu.js.map +1 -0
  41. package/dist/components/modal.js +317 -0
  42. package/dist/components/modal.js.map +1 -0
  43. package/dist/components/multi-select.js +642 -0
  44. package/dist/components/multi-select.js.map +1 -0
  45. package/dist/components/notification.js +429 -0
  46. package/dist/components/notification.js.map +1 -0
  47. package/dist/components/number-input.js +556 -0
  48. package/dist/components/number-input.js.map +1 -0
  49. package/dist/components/pagination.js +320 -0
  50. package/dist/components/pagination.js.map +1 -0
  51. package/dist/components/popover.js +597 -0
  52. package/dist/components/popover.js.map +1 -0
  53. package/dist/components/progress.js +219 -0
  54. package/dist/components/progress.js.map +1 -0
  55. package/dist/components/radio.js +321 -0
  56. package/dist/components/radio.js.map +1 -0
  57. package/dist/components/select.js +498 -0
  58. package/dist/components/select.js.map +1 -0
  59. package/dist/components/skeleton.js +240 -0
  60. package/dist/components/skeleton.js.map +1 -0
  61. package/dist/components/slider.js +9 -0
  62. package/dist/components/slider.js.map +1 -0
  63. package/dist/components/spinner.js +133 -0
  64. package/dist/components/spinner.js.map +1 -0
  65. package/dist/components/stepper.js +812 -0
  66. package/dist/components/stepper.js.map +1 -0
  67. package/dist/components/switch.js +380 -0
  68. package/dist/components/switch.js.map +1 -0
  69. package/dist/components/table.js +642 -0
  70. package/dist/components/table.js.map +1 -0
  71. package/dist/components/tabs.js +547 -0
  72. package/dist/components/tabs.js.map +1 -0
  73. package/dist/components/tag.js +291 -0
  74. package/dist/components/tag.js.map +1 -0
  75. package/dist/components/text.js +278 -0
  76. package/dist/components/text.js.map +1 -0
  77. package/dist/components/textarea.js +380 -0
  78. package/dist/components/textarea.js.map +1 -0
  79. package/dist/components/time-picker.js +457 -0
  80. package/dist/components/time-picker.js.map +1 -0
  81. package/dist/components/tooltip.js +239 -0
  82. package/dist/components/tooltip.js.map +1 -0
  83. package/dist/components/tree.js +582 -0
  84. package/dist/components/tree.js.map +1 -0
  85. package/dist/index.js +93 -17799
  86. package/dist/index.js.map +1 -1
  87. package/dist/shared/boolean-converter-XDGfS9LC.js +12 -0
  88. package/dist/shared/boolean-converter-XDGfS9LC.js.map +1 -0
  89. package/dist/shared/debounce-BckY30Sf.js +23 -0
  90. package/dist/shared/debounce-BckY30Sf.js.map +1 -0
  91. package/dist/shared/memoize-DlOFy-92.js +16 -0
  92. package/dist/shared/memoize-DlOFy-92.js.map +1 -0
  93. package/dist/shared/slider-BNt5TITl.js +484 -0
  94. package/dist/shared/slider-BNt5TITl.js.map +1 -0
  95. package/package.json +44 -2
package/dist/components/color-picker.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"color-picker.js","sources":["../../source/components/color-picker/color-picker.style.ts","../../source/components/color-picker/color-picker.utils.ts","../../source/components/color-picker/color-picker.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\n/**\r\n * Color Picker Styles\r\n *\r\n * INTENTIONAL HARDCODED VALUES (functional, not themed):\r\n * - Checkerboard pattern (#ccc) - standard transparency visualization\r\n * - Hue gradient (hsl spectrum) - must be actual hue colors\r\n * - White (#fff) handles - must contrast on any color background\r\n * - Black (#000) gradient - value gradient for color area\r\n * - Component dimensions (280px, 160px) - not semantic spacing\r\n *\r\n * All other values use design tokens.\r\n */\r\nexport const colorPickerStyles = css`\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Base Styles\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n :host {\r\n /* Component-specific custom properties */\r\n /* stylelint-disable blueprint/no-hardcoded-values */\r\n --color-picker-width: 350px;\r\n --color-picker-area-height: 160px;\r\n --color-picker-swatch-size: var(--bp-spacing-lg);\r\n --color-picker-handle-size: var(--bp-spacing-md);\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n\r\n display: inline-block;\r\n position: relative;\r\n font-family: var(--bp-font-family);\r\n }\r\n\r\n :host([disabled]) {\r\n opacity: var(--bp-opacity-disabled);\r\n pointer-events: none;\r\n }\r\n\r\n .color-picker {\r\n position: relative;\r\n }\r\n\r\n /* Screen reader only text */\r\n .sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border-width: 0;\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Trigger Button\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .trigger {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--bp-spacing-sm);\r\n padding: var(--bp-spacing-sm) var(--bp-spacing-md);\r\n background-color: var(--bp-color-surface);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-md);\r\n cursor: pointer;\r\n font-family: inherit;\r\n font-size: var(--bp-font-size-base);\r\n color: var(--bp-color-text);\r\n transition:\r\n border-color var(--bp-transition-fast),\r\n box-shadow var(--bp-transition-fast);\r\n }\r\n\r\n .trigger:hover:not(:disabled) {\r\n border-color: var(--bp-color-border-strong);\r\n }\r\n\r\n .trigger:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n .trigger:disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n .trigger-swatch {\r\n display: block;\r\n width: var(--color-picker-swatch-size);\r\n height: var(--color-picker-swatch-size);\r\n border-radius: var(--bp-border-radius-sm);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n /* Checkerboard pattern for transparency - functional, not themed */\r\n /* stylelint-disable blueprint/no-hardcoded-values */\r\n background-image:\r\n linear-gradient(45deg, #ccc 25%, transparent 25%),\r\n linear-gradient(-45deg, #ccc 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #ccc 75%),\r\n linear-gradient(-45deg, transparent 75%, #ccc 75%);\r\n background-size: var(--bp-spacing-sm) var(--bp-spacing-sm);\r\n background-position:\r\n 0 0,\r\n 0 calc(var(--bp-spacing-sm) / 2),\r\n calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),\r\n calc(var(--bp-spacing-sm) / -2) 0;\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n position: relative;\r\n }\r\n\r\n .trigger-swatch::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: inherit;\r\n border-radius: inherit;\r\n }\r\n\r\n .trigger-label {\r\n color: var(--bp-color-text);\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Picker Panel\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .picker {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n margin-top: var(--bp-spacing-xs);\r\n width: var(--color-picker-width);\r\n background-color: var(--bp-color-surface-elevated);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-lg);\r\n box-shadow: var(--bp-shadow-lg);\r\n z-index: var(--bp-z-popover);\r\n animation: fadeIn var(--bp-transition-fast) ease-out;\r\n }\r\n\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(calc(var(--bp-spacing-xs) * -1));\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n :host([inline]) .picker {\r\n position: static;\r\n margin-top: 0;\r\n box-shadow: none;\r\n }\r\n\r\n .picker-body {\r\n padding: var(--bp-spacing-md);\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--bp-spacing-md);\r\n }\r\n\r\n .picker-main {\r\n display: flex;\r\n gap: var(--bp-spacing-sm);\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Color Area (Saturation/Value)\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .color-area {\r\n flex: 1;\r\n height: var(--color-picker-area-height);\r\n position: relative;\r\n border-radius: var(--bp-border-radius-sm);\r\n background: var(--hue-color);\r\n cursor: crosshair;\r\n touch-action: none;\r\n user-select: none;\r\n }\r\n\r\n /* White-to-transparent and transparent-to-black gradients - functional for color picking */\r\n /* stylelint-disable blueprint/no-hardcoded-values */\r\n .color-area::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to right, #fff, transparent);\r\n border-radius: inherit;\r\n }\r\n\r\n .color-area::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, transparent, #000);\r\n border-radius: inherit;\r\n }\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n\r\n .color-area:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n /* Slider handles use white borders for visibility on any color */\r\n /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on any hue */\r\n .color-area-handle {\r\n position: absolute;\r\n width: var(--color-picker-handle-size);\r\n height: var(--color-picker-handle-size);\r\n border: var(--bp-border-width) solid #fff;\r\n border-radius: 50%;\r\n box-shadow: var(--bp-shadow-sm);\r\n transform: translate(-50%, -50%);\r\n z-index: 1;\r\n pointer-events: none;\r\n }\r\n\r\n /* Expand touch target to 44×44px minimum (WCAG 2.2) */\r\n .color-area-handle::after {\r\n content: '';\r\n position: absolute;\r\n /* 44px touch target with 12px visual handle = 16px padding each side */\r\n inset: calc(var(--bp-spacing-lg) * -1);\r\n }\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Hue Slider\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .hue-slider {\r\n width: var(--bp-spacing-lg);\r\n height: var(--color-picker-area-height);\r\n position: relative;\r\n border-radius: var(--bp-border-radius-sm);\r\n /* Full hue spectrum gradient - functional, not themed */\r\n /* stylelint-disable blueprint/no-hardcoded-values */\r\n background: linear-gradient(\r\n to bottom,\r\n hsl(0, 100%, 50%),\r\n hsl(60, 100%, 50%),\r\n hsl(120, 100%, 50%),\r\n hsl(180, 100%, 50%),\r\n hsl(240, 100%, 50%),\r\n hsl(300, 100%, 50%),\r\n hsl(360, 100%, 50%)\r\n );\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n cursor: pointer;\r\n touch-action: none;\r\n user-select: none;\r\n }\r\n\r\n .hue-slider:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on hue spectrum */\r\n .hue-slider-handle {\r\n position: absolute;\r\n left: calc(var(--bp-spacing-xs) * -0.5);\r\n right: calc(var(--bp-spacing-xs) * -0.5);\r\n height: var(--bp-spacing-sm);\r\n border: var(--bp-border-width) solid #fff;\r\n border-radius: var(--bp-border-radius-sm);\r\n box-shadow: var(--bp-shadow-sm);\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n }\r\n\r\n /* Expand touch target to 44×44px minimum (WCAG 2.2) */\r\n .hue-slider-handle::after {\r\n content: '';\r\n position: absolute;\r\n /* 44px touch target with 8px visual handle = 18px padding top/bottom */\r\n top: calc(var(--bp-spacing-lg) * -2.25);\r\n bottom: calc(var(--bp-spacing-lg) * -2.25);\r\n left: 0;\r\n right: 0;\r\n }\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Alpha Slider\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .alpha-slider {\r\n height: var(--bp-spacing-md);\r\n position: relative;\r\n border-radius: var(--bp-border-radius-sm);\r\n /* Checkerboard pattern for transparency - functional, not themed */\r\n /* stylelint-disable blueprint/no-hardcoded-values */\r\n background-image:\r\n linear-gradient(45deg, #ccc 25%, transparent 25%),\r\n linear-gradient(-45deg, #ccc 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #ccc 75%),\r\n linear-gradient(-45deg, transparent 75%, #ccc 75%);\r\n background-size: var(--bp-spacing-sm) var(--bp-spacing-sm);\r\n background-position:\r\n 0 0,\r\n 0 calc(var(--bp-spacing-sm) / 2),\r\n calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),\r\n calc(var(--bp-spacing-sm) / -2) 0;\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n cursor: pointer;\r\n touch-action: none;\r\n user-select: none;\r\n }\r\n\r\n .alpha-slider::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: var(--alpha-gradient);\r\n border-radius: inherit;\r\n }\r\n\r\n .alpha-slider:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n /* stylelint-disable blueprint/no-hardcoded-values -- white border for contrast on alpha gradient */\r\n .alpha-slider-handle {\r\n position: absolute;\r\n top: calc(var(--bp-spacing-xs) * -0.5);\r\n bottom: calc(var(--bp-spacing-xs) * -0.5);\r\n width: var(--bp-spacing-sm);\r\n border: var(--bp-border-width) solid #fff;\r\n border-radius: var(--bp-border-radius-sm);\r\n box-shadow: var(--bp-shadow-sm);\r\n transform: translateX(-50%);\r\n pointer-events: none;\r\n }\r\n\r\n /* Expand touch target to 44×44px minimum (WCAG 2.2) */\r\n .alpha-slider-handle::after {\r\n content: '';\r\n position: absolute;\r\n /* 44px touch target with 8px visual handle = 18px padding left/right */\r\n left: calc(var(--bp-spacing-lg) * -2.25);\r\n right: calc(var(--bp-spacing-lg) * -2.25);\r\n top: 0;\r\n bottom: 0;\r\n }\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Controls Row\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .picker-controls {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--bp-spacing-sm);\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Preview\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .preview {\r\n display: flex;\r\n flex-direction: column;\r\n width: var(--bp-spacing-2xl);\r\n height: var(--bp-spacing-2xl);\r\n border-radius: var(--bp-border-radius-sm);\r\n overflow: hidden;\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n /* Checkerboard pattern for transparency - functional, not themed */\r\n /* stylelint-disable blueprint/no-hardcoded-values */\r\n background-image:\r\n linear-gradient(45deg, #ccc 25%, transparent 25%),\r\n linear-gradient(-45deg, #ccc 25%, transparent 25%),\r\n linear-gradient(45deg, transparent 75%, #ccc 75%),\r\n linear-gradient(-45deg, transparent 75%, #ccc 75%);\r\n background-size: var(--bp-spacing-sm) var(--bp-spacing-sm);\r\n background-position:\r\n 0 0,\r\n 0 calc(var(--bp-spacing-sm) / 2),\r\n calc(var(--bp-spacing-sm) / 2) calc(var(--bp-spacing-sm) / -2),\r\n calc(var(--bp-spacing-sm) / -2) 0;\r\n /* stylelint-enable blueprint/no-hardcoded-values */\r\n }\r\n\r\n .preview-swatch {\r\n flex: 1;\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Inputs\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .inputs-container {\r\n flex: 1;\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--bp-spacing-xs);\r\n }\r\n\r\n .input-row {\r\n display: flex;\r\n gap: var(--bp-spacing-xs);\r\n flex: 1;\r\n }\r\n\r\n .input-group {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--bp-spacing-2xs);\r\n }\r\n\r\n .color-input {\r\n width: 100%;\r\n padding: var(--bp-spacing-xs);\r\n font-family: var(--bp-font-family-mono);\r\n font-size: var(--bp-font-size-sm);\r\n background-color: var(--bp-color-surface);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-sm);\r\n color: var(--bp-color-text);\r\n text-align: center;\r\n box-sizing: border-box;\r\n }\r\n\r\n .color-input:focus {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n border-color: var(--bp-color-primary);\r\n }\r\n\r\n .color-input::-webkit-inner-spin-button,\r\n .color-input::-webkit-outer-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n .color-input[type='number'] {\r\n -moz-appearance: textfield;\r\n }\r\n\r\n .hex-input {\r\n text-transform: uppercase;\r\n }\r\n\r\n .input-label {\r\n font-size: var(--bp-font-size-xs);\r\n color: var(--bp-color-text-muted);\r\n text-align: center;\r\n text-transform: uppercase;\r\n }\r\n\r\n .format-toggle {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--bp-spacing-xl);\r\n height: var(--bp-spacing-xl);\r\n padding: 0;\r\n margin-top: var(--bp-spacing-2xs);\r\n background-color: var(--bp-color-surface);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-sm);\r\n color: var(--bp-color-text-muted);\r\n cursor: pointer;\r\n transition:\r\n background-color var(--bp-transition-fast),\r\n color var(--bp-transition-fast);\r\n }\r\n\r\n .format-toggle:hover:not(:disabled) {\r\n background-color: var(--bp-color-surface-subdued);\r\n color: var(--bp-color-text);\r\n }\r\n\r\n .format-toggle:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n .format-toggle svg {\r\n width: var(--bp-spacing-md);\r\n height: var(--bp-spacing-md);\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Eyedropper\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .eyedropper-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: var(--bp-spacing-2xl);\r\n height: var(--bp-spacing-2xl);\r\n padding: 0;\r\n background-color: var(--bp-color-surface);\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-sm);\r\n color: var(--bp-color-text-muted);\r\n cursor: pointer;\r\n transition:\r\n background-color var(--bp-transition-fast),\r\n color var(--bp-transition-fast);\r\n }\r\n\r\n .eyedropper-button:hover:not(:disabled) {\r\n background-color: var(--bp-color-surface-subdued);\r\n color: var(--bp-color-text);\r\n }\r\n\r\n .eyedropper-button:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n .eyedropper-button:disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n .eyedropper-button svg {\r\n width: var(--bp-spacing-lg);\r\n height: var(--bp-spacing-lg);\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Swatches\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .swatches-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--bp-spacing-xs);\r\n padding-top: var(--bp-spacing-sm);\r\n border-top: var(--bp-border-width) solid var(--bp-color-border);\r\n }\r\n\r\n .swatch {\r\n width: var(--color-picker-swatch-size);\r\n height: var(--color-picker-swatch-size);\r\n padding: 0;\r\n border: var(--bp-border-width) solid var(--bp-color-border);\r\n border-radius: var(--bp-border-radius-sm);\r\n cursor: pointer;\r\n transition: transform var(--bp-transition-fast);\r\n }\r\n\r\n .swatch:hover:not(:disabled) {\r\n transform: scale(1.1);\r\n }\r\n\r\n .swatch:focus-visible {\r\n outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\r\n outline-offset: var(--bp-focus-offset);\r\n }\r\n\r\n .swatch:disabled {\r\n cursor: not-allowed;\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Sizes\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n .color-picker--sm .trigger {\r\n padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\r\n font-size: var(--bp-font-size-sm);\r\n }\r\n\r\n .color-picker--sm .trigger-swatch {\r\n width: var(--bp-spacing-lg);\r\n height: var(--bp-spacing-lg);\r\n }\r\n\r\n .color-picker--lg .trigger {\r\n padding: var(--bp-spacing-md) var(--bp-spacing-lg);\r\n font-size: var(--bp-font-size-lg);\r\n }\r\n\r\n .color-picker--lg .trigger-swatch {\r\n width: var(--bp-spacing-xl);\r\n height: var(--bp-spacing-xl);\r\n }\r\n\r\n /* ─────────────────────────────────────────────────────────────────────────────\r\n * Reduced Motion\r\n * ───────────────────────────────────────────────────────────────────────────── */\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n @keyframes fadeIn {\r\n from,\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .trigger,\r\n .format-toggle,\r\n .eyedropper-button,\r\n .swatch,\r\n .color-input {\r\n transition: none;\r\n }\r\n }\r\n`;\r\n","/**\n * Color Picker Utilities\n *\n * Pure functions for color parsing, conversion, and formatting.\n * Supports HEX, RGB, HSL formats with alpha channel.\n */\n\n/**\n * Internal HSV color representation\n */\nexport interface HSVColor {\n h: number; // 0-360\n s: number; // 0-100\n v: number; // 0-100\n a: number; // 0-1\n}\n\n/**\n * RGB color representation\n */\nexport interface RGBColor {\n r: number; // 0-255\n g: number; // 0-255\n b: number; // 0-255\n a: number; // 0-1\n}\n\n/**\n * HSL color representation\n */\nexport interface HSLColor {\n h: number; // 0-360\n s: number; // 0-100\n l: number; // 0-100\n a: number; // 0-1\n}\n\n/**\n * Color output format\n */\nexport type ColorFormat = 'hex' | 'rgb' | 'hsl';\n\n/**\n * Parses a color string and returns HSV representation\n * @param value Color string in hex, rgb, or hsl format\n * @returns HSV color object or null if parsing fails\n */\nexport function parseColor(value: string): HSVColor | null {\n if (!value) return null;\n\n value = value.trim().toLowerCase();\n\n // HEX format\n if (value.startsWith('#')) {\n return parseHex(value);\n }\n\n // RGB/RGBA format\n if (value.startsWith('rgb')) {\n return parseRgb(value);\n }\n\n // HSL/HSLA format\n if (value.startsWith('hsl')) {\n return parseHsl(value);\n }\n\n return null;\n}\n\n/**\n * Parses a hex color string to HSV\n * @param hex Hex color string (with or without #, 3/4/6/8 digits)\n * @returns HSV color object or null if invalid\n */\nexport function parseHex(hex: string): HSVColor | null {\n hex = hex.replace('#', '');\n\n let r: number,\n g: number,\n b: number,\n a = 1;\n\n if (hex.length === 3) {\n r = parseInt(hex[0] + hex[0], 16);\n g = parseInt(hex[1] + hex[1], 16);\n b = parseInt(hex[2] + hex[2], 16);\n } else if (hex.length === 4) {\n r = parseInt(hex[0] + hex[0], 16);\n g = parseInt(hex[1] + hex[1], 16);\n b = parseInt(hex[2] + hex[2], 16);\n a = parseInt(hex[3] + hex[3], 16) / 255;\n } else if (hex.length === 6) {\n r = parseInt(hex.substring(0, 2), 16);\n g = parseInt(hex.substring(2, 4), 16);\n b = parseInt(hex.substring(4, 6), 16);\n } else if (hex.length === 8) {\n r = parseInt(hex.substring(0, 2), 16);\n g = parseInt(hex.substring(2, 4), 16);\n b = parseInt(hex.substring(4, 6), 16);\n a = parseInt(hex.substring(6, 8), 16) / 255;\n } else {\n return null;\n }\n\n if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) {\n return null;\n }\n\n return rgbToHsv({ r, g, b, a });\n}\n\n/**\n * Parses an rgb/rgba color string to HSV\n * @param rgb RGB color string (e.g., 'rgb(255, 87, 51)' or 'rgba(255, 87, 51, 0.5)')\n * @returns HSV color object or null if invalid\n */\nexport function parseRgb(rgb: string): HSVColor | null {\n const match = rgb.match(\n /rgba?\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*(?:,\\s*([\\d.]+))?\\s*\\)/\n );\n if (!match) return null;\n\n const r = parseInt(match[1], 10);\n const g = parseInt(match[2], 10);\n const b = parseInt(match[3], 10);\n const a = match[4] !== undefined ? parseFloat(match[4]) : 1;\n\n return rgbToHsv({ r, g, b, a });\n}\n\n/**\n * Parses an hsl/hsla color string to HSV\n * @param hsl HSL color string (e.g., 'hsl(14, 100%, 60%)' or 'hsla(14, 100%, 60%, 0.5)')\n * @returns HSV color object or null if invalid\n */\nexport function parseHsl(hsl: string): HSVColor | null {\n const match = hsl.match(\n /hsla?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%?\\s*,\\s*([\\d.]+)%?\\s*(?:,\\s*([\\d.]+))?\\s*\\)/\n );\n if (!match) return null;\n\n const h = parseFloat(match[1]);\n const s = parseFloat(match[2]);\n const l = parseFloat(match[3]);\n const a = match[4] !== undefined ? parseFloat(match[4]) : 1;\n\n return hslToHsv({ h, s, l, a });\n}\n\n/**\n * Converts RGB color to HSV color space\n * @param rgb RGB color object with r, g, b (0-255) and a (0-1)\n * @returns HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n */\nexport function rgbToHsv(rgb: RGBColor): HSVColor {\n const r = rgb.r / 255;\n const g = rgb.g / 255;\n const b = rgb.b / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n const s = max === 0 ? 0 : (delta / max) * 100;\n const v = max * 100;\n\n if (delta !== 0) {\n if (max === r) {\n h = 60 * (((g - b) / delta) % 6);\n } else if (max === g) {\n h = 60 * ((b - r) / delta + 2);\n } else {\n h = 60 * ((r - g) / delta + 4);\n }\n }\n\n if (h < 0) h += 360;\n\n return { h, s, v, a: rgb.a };\n}\n\n/**\n * Converts HSV color to RGB color space\n * @param hsv HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n * @returns RGB color object with r, g, b (0-255) and a (0-1)\n */\nexport function hsvToRgb(hsv: HSVColor): RGBColor {\n const h = hsv.h;\n const s = hsv.s / 100;\n const v = hsv.v / 100;\n\n const c = v * s;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = v - c;\n\n let r = 0,\n g = 0,\n b = 0;\n\n if (h >= 0 && h < 60) {\n r = c;\n g = x;\n b = 0;\n } else if (h >= 60 && h < 120) {\n r = x;\n g = c;\n b = 0;\n } else if (h >= 120 && h < 180) {\n r = 0;\n g = c;\n b = x;\n } else if (h >= 180 && h < 240) {\n r = 0;\n g = x;\n b = c;\n } else if (h >= 240 && h < 300) {\n r = x;\n g = 0;\n b = c;\n } else {\n r = c;\n g = 0;\n b = x;\n }\n\n return {\n r: Math.round((r + m) * 255),\n g: Math.round((g + m) * 255),\n b: Math.round((b + m) * 255),\n a: hsv.a,\n };\n}\n\n/**\n * Converts HSL color to HSV color space\n * @param hsl HSL color object with h (0-360), s (0-100), l (0-100), a (0-1)\n * @returns HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n */\nexport function hslToHsv(hsl: HSLColor): HSVColor {\n const h = hsl.h;\n const s = hsl.s / 100;\n const l = hsl.l / 100;\n\n const v = l + s * Math.min(l, 1 - l);\n const sv = v === 0 ? 0 : 2 * (1 - l / v);\n\n return { h, s: sv * 100, v: v * 100, a: hsl.a };\n}\n\n/**\n * Converts HSV color to HSL color space\n * @param hsv HSV color object with h (0-360), s (0-100), v (0-100), a (0-1)\n * @returns HSL color object with h (0-360), s (0-100), l (0-100), a (0-1)\n */\nexport function hsvToHsl(hsv: HSVColor): HSLColor {\n const h = hsv.h;\n const s = hsv.s / 100;\n const v = hsv.v / 100;\n\n const l = v * (1 - s / 2);\n const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l);\n\n return { h, s: sl * 100, l: l * 100, a: hsv.a };\n}\n\n/**\n * Rounds alpha value to 2 decimal places\n * @param a Alpha value (0-1)\n * @returns Rounded alpha value\n */\nexport function roundAlpha(a: number): number {\n return Math.round(a * 100) / 100;\n}\n\n/**\n * Formats an HSV color to the specified output format\n * @param hsv HSV color object\n * @param format Output format (hex, rgb, or hsl)\n * @param includeAlpha Whether to include alpha channel in output\n * @returns Formatted color string\n */\nexport function formatColorOutput(\n hsv: HSVColor,\n format: ColorFormat,\n includeAlpha: boolean\n): string {\n const rgb = hsvToRgb(hsv);\n const hsl = hsvToHsl(hsv);\n\n switch (format) {\n case 'rgb':\n if (includeAlpha && hsv.a < 1) {\n return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${roundAlpha(hsv.a)})`;\n }\n return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;\n\n case 'hsl':\n if (includeAlpha && hsv.a < 1) {\n return `hsla(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%, ${roundAlpha(hsv.a)})`;\n }\n return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${Math.round(hsl.l)}%)`;\n\n case 'hex':\n default: {\n const hexR = rgb.r.toString(16).padStart(2, '0');\n const hexG = rgb.g.toString(16).padStart(2, '0');\n const hexB = rgb.b.toString(16).padStart(2, '0');\n if (includeAlpha && hsv.a < 1) {\n const hexA = Math.round(hsv.a * 255)\n .toString(16)\n .padStart(2, '0');\n return `#${hexR}${hexG}${hexB}${hexA}`;\n }\n return `#${hexR}${hexG}${hexB}`;\n }\n }\n}\n","import { LitElement, html, nothing, PropertyValues } from 'lit';\r\nimport { customElement, property, state, query } from 'lit/decorators.js';\r\nimport { colorPickerStyles } from './color-picker.style.js';\r\nimport { booleanConverter } from '../../utilities/boolean-converter.js';\r\nimport {\r\n type ColorFormat,\r\n type HSVColor,\r\n parseColor,\r\n hsvToRgb,\r\n hsvToHsl,\r\n formatColorOutput,\r\n} from './color-picker.utils.js';\r\n\r\n/* eslint-disable no-undef */\r\n// Browser globals: PointerEvent and EyeDropper are available in modern browsers\r\n\r\n/**\r\n * Color picker size\r\n */\r\nexport type ColorPickerSize = 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * A color picker component that provides a consistent, accessible, and feature-rich\r\n * color selection experience. Supports HEX, RGB, and HSL formats with optional alpha channel.\r\n *\r\n * @element bp-color-picker\r\n *\r\n * @slot trigger - Custom trigger button content\r\n * @slot swatches - Custom swatch elements\r\n * @slot footer - Additional content below picker\r\n *\r\n * @csspart trigger - The popover trigger button\r\n * @csspart popover - The popover container\r\n * @csspart color-area - The 2D saturation/value gradient\r\n * @csspart hue-slider - The hue selection slider\r\n * @csspart alpha-slider - The alpha selection slider\r\n * @csspart preview - The color preview swatch\r\n * @csspart input - Text input fields\r\n * @csspart swatches - Swatches container\r\n * @csspart swatch - Individual swatch items\r\n *\r\n * @fires bp-change - Fired when value changes (on blur/confirm)\r\n * @fires bp-input - Fired on every input (live updates)\r\n * @fires bp-open - Popover opened\r\n * @fires bp-close - Popover closed\r\n */\r\n@customElement('bp-color-picker')\r\nexport class BpColorPicker extends LitElement {\r\n static styles = [colorPickerStyles];\r\n\r\n /** Current color value */\r\n @property({ type: String }) declare value: string;\r\n\r\n /** Output format for value */\r\n @property({ type: String }) declare format: ColorFormat;\r\n\r\n /** Enable alpha channel */\r\n @property({ converter: booleanConverter, reflect: true })\r\n declare alpha: boolean;\r\n\r\n /** Predefined swatch colors */\r\n @property({ type: Array }) declare swatches: string[];\r\n\r\n /** Render inline instead of popover */\r\n @property({ type: Boolean }) declare inline: boolean;\r\n\r\n /** Disable all interactions */\r\n @property({ type: Boolean, reflect: true }) declare disabled: boolean;\r\n\r\n /** Show value but prevent editing */\r\n @property({ type: Boolean, reflect: true }) declare readonly: boolean;\r\n\r\n /** Component size */\r\n @property({ type: String, reflect: true }) declare size: ColorPickerSize;\r\n\r\n /** Accessible label */\r\n @property({ type: String }) declare label: string;\r\n\r\n /** Form field name */\r\n @property({ type: String }) declare name: string;\r\n\r\n /** Placeholder for trigger */\r\n @property({ type: String }) declare placeholder: string;\r\n\r\n /** Whether the popover is open */\r\n @state() private _open = false;\r\n\r\n /** Internal HSV color state */\r\n @state() private _hsv: HSVColor = { h: 0, s: 0, v: 0, a: 1 };\r\n\r\n /** Original color when popover opened */\r\n @state() private _originalValue = '';\r\n\r\n /** Whether eyedropper is supported */\r\n @state() private _eyedropperSupported = false;\r\n\r\n /** Current input mode for format toggle */\r\n @state() private _inputMode: ColorFormat = 'hex';\r\n\r\n /** HEX input value for controlled input */\r\n @state() private _hexInputValue = '';\r\n\r\n /** Whether eyedropper is currently active */\r\n @state() private _isPickingColor = false;\r\n\r\n @query('.color-area') private _colorArea!: HTMLElement;\r\n @query('.hue-slider') private _hueSlider!: HTMLElement;\r\n @query('.alpha-slider') private _alphaSlider!: HTMLElement;\r\n\r\n private _isDraggingArea = false;\r\n private _isDraggingHue = false;\r\n private _isDraggingAlpha = false;\r\n\r\n constructor() {\r\n super();\r\n this.value = '#000000';\r\n this.format = 'hex';\r\n this.alpha = true;\r\n this.swatches = [];\r\n this.inline = false;\r\n this.disabled = false;\r\n this.readonly = false;\r\n this.size = 'md';\r\n this.label = '';\r\n this.name = '';\r\n this.placeholder = '';\r\n }\r\n\r\n connectedCallback(): void {\r\n super.connectedCallback();\r\n // Check for EyeDropper API support\r\n this._eyedropperSupported = 'EyeDropper' in window;\r\n this._parseValue(this.value);\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._inputMode = this.format;\r\n }\r\n\r\n disconnectedCallback(): void {\r\n super.disconnectedCallback();\r\n this._removeGlobalListeners();\r\n }\r\n\r\n protected willUpdate(changedProperties: PropertyValues): void {\r\n if (changedProperties.has('value') && !this._isDragging()) {\r\n this._parseValue(this.value);\r\n this._hexInputValue = this._formatOutput('hex');\r\n }\r\n if (changedProperties.has('format')) {\r\n this._inputMode = this.format;\r\n }\r\n }\r\n\r\n private _isDragging(): boolean {\r\n return this._isDraggingArea || this._isDraggingHue || this._isDraggingAlpha;\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Color Parsing & Conversion\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Parses a color value string and updates internal HSV state\r\n * @param value Color string in hex, rgb, or hsl format\r\n */\r\n private _parseValue(value: string): void {\r\n const parsed = parseColor(value);\r\n if (parsed) {\r\n this._hsv = parsed;\r\n }\r\n }\r\n\r\n /**\r\n * Formats the current HSV color to the specified output format\r\n * @param format Output format (hex, rgb, or hsl), defaults to this.format\r\n * @returns Formatted color string\r\n */\r\n private _formatOutput(format: ColorFormat = this.format): string {\r\n return formatColorOutput(this._hsv, format, this.alpha);\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Event Handlers\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles click events on the trigger button\r\n * Toggles the picker popover open/closed state\r\n */\r\n private _handleTriggerClick(): void {\r\n if (this.disabled || this.readonly) return;\r\n this._toggleOpen();\r\n }\r\n\r\n /**\r\n * Handles keyboard events on the trigger button\r\n * Opens picker on Enter or Space key\r\n * @param event Keyboard event\r\n */\r\n private _handleTriggerKeydown(event: KeyboardEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this._toggleOpen();\r\n }\r\n }\r\n\r\n /**\r\n * Toggles the picker popover between open and closed states\r\n * Saves original value when opening and emits bp-open/bp-close events\r\n */\r\n private _toggleOpen(): void {\r\n if (this._open) {\r\n this._close();\r\n } else {\r\n this._open = true;\r\n this._originalValue = this.value;\r\n this.dispatchEvent(\r\n new CustomEvent('bp-open', { bubbles: true, composed: true })\r\n );\r\n this._addGlobalListeners();\r\n }\r\n }\r\n\r\n /**\r\n * Closes the picker popover\r\n * Removes global event listeners and emits bp-close event\r\n */\r\n private _close(): void {\r\n this._open = false;\r\n this._removeGlobalListeners();\r\n this.dispatchEvent(\r\n new CustomEvent('bp-close', { bubbles: true, composed: true })\r\n );\r\n }\r\n\r\n private _handleOutsideClick = (event: MouseEvent): void => {\r\n const path = event.composedPath();\r\n if (!path.includes(this)) {\r\n this._close();\r\n }\r\n };\r\n\r\n private _handleEscapeKey = (event: KeyboardEvent): void => {\r\n if (event.key === 'Escape') {\r\n // Restore original value\r\n this.value = this._originalValue;\r\n this._parseValue(this._originalValue);\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._close();\r\n }\r\n };\r\n\r\n /**\r\n * Adds global document event listeners for outside clicks and escape key\r\n * Used when picker popover is open\r\n */\r\n private _addGlobalListeners(): void {\r\n document.addEventListener('click', this._handleOutsideClick);\r\n document.addEventListener('keydown', this._handleEscapeKey);\r\n }\r\n\r\n /**\r\n * Removes global document event listeners\r\n * Called when picker popover is closed\r\n */\r\n private _removeGlobalListeners(): void {\r\n document.removeEventListener('click', this._handleOutsideClick);\r\n document.removeEventListener('keydown', this._handleEscapeKey);\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Color Area Handlers\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles pointer down events on the color area\r\n * Starts saturation/value drag interaction\r\n * @param event Pointer event\r\n */\r\n private _handleColorAreaPointerDown(event: PointerEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n event.preventDefault();\r\n this._isDraggingArea = true;\r\n this._colorArea.setPointerCapture(event.pointerId);\r\n this._updateColorFromPointer(event);\r\n }\r\n\r\n /**\r\n * Handles pointer move events on the color area during drag\r\n * Updates color based on pointer position\r\n * @param event Pointer event\r\n */\r\n private _handleColorAreaPointerMove(event: PointerEvent): void {\r\n if (!this._isDraggingArea) return;\r\n this._updateColorFromPointer(event);\r\n }\r\n\r\n /**\r\n * Handles pointer up events on the color area\r\n * Ends drag interaction and emits change event\r\n * @param event Pointer event\r\n */\r\n private _handleColorAreaPointerUp(event: PointerEvent): void {\r\n if (!this._isDraggingArea) return;\r\n this._isDraggingArea = false;\r\n this._colorArea.releasePointerCapture(event.pointerId);\r\n this._emitChange();\r\n }\r\n\r\n /**\r\n * Updates color saturation and value based on pointer position in color area\r\n * @param event Pointer event with clientX/clientY coordinates\r\n */\r\n private _updateColorFromPointer(event: PointerEvent): void {\r\n const rect = this._colorArea.getBoundingClientRect();\r\n const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));\r\n const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height));\r\n\r\n this._hsv = {\r\n ...this._hsv,\r\n s: (x / rect.width) * 100,\r\n v: 100 - (y / rect.height) * 100,\r\n };\r\n\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n }\r\n\r\n /**\r\n * Handles keyboard navigation on the color area\r\n * Arrow keys adjust saturation/value, Shift increases step size\r\n * @param event Keyboard event\r\n */\r\n private _handleColorAreaKeydown(event: KeyboardEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n\r\n const step = event.shiftKey ? 10 : 1;\r\n let handled = false;\r\n\r\n switch (event.key) {\r\n case 'ArrowRight':\r\n this._hsv = { ...this._hsv, s: Math.min(100, this._hsv.s + step) };\r\n handled = true;\r\n break;\r\n case 'ArrowLeft':\r\n this._hsv = { ...this._hsv, s: Math.max(0, this._hsv.s - step) };\r\n handled = true;\r\n break;\r\n case 'ArrowUp':\r\n this._hsv = { ...this._hsv, v: Math.min(100, this._hsv.v + step) };\r\n handled = true;\r\n break;\r\n case 'ArrowDown':\r\n this._hsv = { ...this._hsv, v: Math.max(0, this._hsv.v - step) };\r\n handled = true;\r\n break;\r\n case 'Home':\r\n this._hsv = { ...this._hsv, s: 0 };\r\n handled = true;\r\n break;\r\n case 'End':\r\n this._hsv = { ...this._hsv, s: 100 };\r\n handled = true;\r\n break;\r\n }\r\n\r\n if (handled) {\r\n event.preventDefault();\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n this._emitChange();\r\n }\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Hue Slider Handlers\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles pointer down events on the hue slider\r\n * Starts hue drag interaction\r\n * @param event Pointer event\r\n */\r\n private _handleHuePointerDown(event: PointerEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n event.preventDefault();\r\n this._isDraggingHue = true;\r\n this._hueSlider.setPointerCapture(event.pointerId);\r\n this._updateHueFromPointer(event);\r\n }\r\n\r\n /**\r\n * Handles pointer move events on the hue slider during drag\r\n * Updates hue based on pointer position\r\n * @param event Pointer event\r\n */\r\n private _handleHuePointerMove(event: PointerEvent): void {\r\n if (!this._isDraggingHue) return;\r\n this._updateHueFromPointer(event);\r\n }\r\n\r\n /**\r\n * Handles pointer up events on the hue slider\r\n * Ends drag interaction and emits change event\r\n * @param event Pointer event\r\n */\r\n private _handleHuePointerUp(event: PointerEvent): void {\r\n if (!this._isDraggingHue) return;\r\n this._isDraggingHue = false;\r\n this._hueSlider.releasePointerCapture(event.pointerId);\r\n this._emitChange();\r\n }\r\n\r\n /**\r\n * Updates hue based on pointer position in hue slider\r\n * @param event Pointer event with clientY coordinate\r\n */\r\n private _updateHueFromPointer(event: PointerEvent): void {\r\n const rect = this._hueSlider.getBoundingClientRect();\r\n const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height));\r\n const hue = (y / rect.height) * 360;\r\n\r\n this._hsv = { ...this._hsv, h: hue };\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n }\r\n\r\n /**\r\n * Handles keyboard navigation on the hue slider\r\n * Arrow keys adjust hue, Shift increases step size\r\n * @param event Keyboard event\r\n */\r\n private _handleHueKeydown(event: KeyboardEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n\r\n const step = event.shiftKey ? 10 : 1;\r\n let handled = false;\r\n\r\n switch (event.key) {\r\n case 'ArrowDown':\r\n case 'ArrowRight':\r\n this._hsv = { ...this._hsv, h: (this._hsv.h + step) % 360 };\r\n handled = true;\r\n break;\r\n case 'ArrowUp':\r\n case 'ArrowLeft':\r\n this._hsv = { ...this._hsv, h: (this._hsv.h - step + 360) % 360 };\r\n handled = true;\r\n break;\r\n case 'Home':\r\n this._hsv = { ...this._hsv, h: 0 };\r\n handled = true;\r\n break;\r\n case 'End':\r\n this._hsv = { ...this._hsv, h: 359 };\r\n handled = true;\r\n break;\r\n }\r\n\r\n if (handled) {\r\n event.preventDefault();\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n this._emitChange();\r\n }\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Alpha Slider Handlers\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles pointer down events on the alpha slider\r\n * Starts alpha drag interaction\r\n * @param event Pointer event\r\n */\r\n private _handleAlphaPointerDown(event: PointerEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n event.preventDefault();\r\n this._isDraggingAlpha = true;\r\n this._alphaSlider.setPointerCapture(event.pointerId);\r\n this._updateAlphaFromPointer(event);\r\n }\r\n\r\n /**\r\n * Handles pointer move events on the alpha slider during drag\r\n * Updates alpha based on pointer position\r\n * @param event Pointer event\r\n */\r\n private _handleAlphaPointerMove(event: PointerEvent): void {\r\n if (!this._isDraggingAlpha) return;\r\n this._updateAlphaFromPointer(event);\r\n }\r\n\r\n /**\r\n * Handles pointer up events on the alpha slider\r\n * Ends drag interaction and emits change event\r\n * @param event Pointer event\r\n */\r\n private _handleAlphaPointerUp(event: PointerEvent): void {\r\n if (!this._isDraggingAlpha) return;\r\n this._isDraggingAlpha = false;\r\n this._alphaSlider.releasePointerCapture(event.pointerId);\r\n this._emitChange();\r\n }\r\n\r\n /**\r\n * Updates alpha based on pointer position in alpha slider\r\n * @param event Pointer event with clientX coordinate\r\n */\r\n private _updateAlphaFromPointer(event: PointerEvent): void {\r\n const rect = this._alphaSlider.getBoundingClientRect();\r\n const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));\r\n const alpha = x / rect.width;\r\n\r\n this._hsv = { ...this._hsv, a: alpha };\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n }\r\n\r\n /**\r\n * Handles keyboard navigation on the alpha slider\r\n * Arrow keys adjust alpha, Shift increases step size\r\n * @param event Keyboard event\r\n */\r\n private _handleAlphaKeydown(event: KeyboardEvent): void {\r\n if (this.disabled || this.readonly) return;\r\n\r\n const step = event.shiftKey ? 0.1 : 0.01;\r\n let handled = false;\r\n\r\n switch (event.key) {\r\n case 'ArrowRight':\r\n case 'ArrowUp':\r\n this._hsv = { ...this._hsv, a: Math.min(1, this._hsv.a + step) };\r\n handled = true;\r\n break;\r\n case 'ArrowLeft':\r\n case 'ArrowDown':\r\n this._hsv = { ...this._hsv, a: Math.max(0, this._hsv.a - step) };\r\n handled = true;\r\n break;\r\n case 'Home':\r\n this._hsv = { ...this._hsv, a: 0 };\r\n handled = true;\r\n break;\r\n case 'End':\r\n this._hsv = { ...this._hsv, a: 1 };\r\n handled = true;\r\n break;\r\n }\r\n\r\n if (handled) {\r\n event.preventDefault();\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n this._emitChange();\r\n }\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Input Handlers\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles input events on the hex input field\r\n * Updates controlled input value\r\n * @param event Input event\r\n */\r\n private _handleHexInput(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n this._hexInputValue = input.value;\r\n }\r\n\r\n /**\r\n * Handles change events on the hex input field\r\n * Parses and applies hex color value, adds # prefix if missing\r\n * @param event Change event\r\n */\r\n private _handleHexChange(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n let value = input.value.trim();\r\n\r\n // Add # if missing\r\n if (value && !value.startsWith('#')) {\r\n value = '#' + value;\r\n }\r\n\r\n const parsed = parseColor(value);\r\n if (parsed) {\r\n this._hsv = parsed;\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n this._emitChange();\r\n } else {\r\n // Reset to current value if invalid\r\n this._hexInputValue = this._formatOutput('hex');\r\n }\r\n }\r\n\r\n /**\r\n * Handles input events on RGB channel inputs\r\n * Updates color based on red, green, or blue channel value\r\n * @param channel RGB channel to update ('r', 'g', or 'b')\r\n * @param event Input event\r\n */\r\n private _handleRgbInput(channel: 'r' | 'g' | 'b', event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n const value = Math.max(0, Math.min(255, parseInt(input.value, 10) || 0));\r\n\r\n const rgb = hsvToRgb(this._hsv);\r\n rgb[channel] = value;\r\n this._hsv = parseColor(`rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a})`)!;\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n }\r\n\r\n /**\r\n * Handles change events on RGB inputs\r\n * Emits bp-change event\r\n */\r\n private _handleRgbChange(): void {\r\n this._emitChange();\r\n }\r\n\r\n /**\r\n * Handles input events on HSL channel inputs\r\n * Updates color based on hue, saturation, or lightness value\r\n * @param channel HSL channel to update ('h', 's', or 'l')\r\n * @param event Input event\r\n */\r\n private _handleHslInput(channel: 'h' | 's' | 'l', event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n const hsl = hsvToHsl(this._hsv);\r\n\r\n if (channel === 'h') {\r\n hsl.h = Math.max(0, Math.min(360, parseInt(input.value, 10) || 0));\r\n } else {\r\n hsl[channel] = Math.max(0, Math.min(100, parseInt(input.value, 10) || 0));\r\n }\r\n\r\n this._hsv = parseColor(`hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${hsl.a})`)!;\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n }\r\n\r\n /**\r\n * Handles change events on HSL inputs\r\n * Emits bp-change event\r\n */\r\n private _handleHslChange(): void {\r\n this._emitChange();\r\n }\r\n\r\n /**\r\n * Handles input events on the alpha percentage input\r\n * Updates alpha channel (0-100%)\r\n * @param event Input event\r\n */\r\n private _handleAlphaInput(event: Event): void {\r\n const input = event.target as HTMLInputElement;\r\n const value = Math.max(0, Math.min(100, parseInt(input.value, 10) || 0));\r\n this._hsv = { ...this._hsv, a: value / 100 };\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n }\r\n\r\n /**\r\n * Handles change events on alpha input\r\n * Emits bp-change event\r\n */\r\n private _handleAlphaInputChange(): void {\r\n this._emitChange();\r\n }\r\n\r\n /**\r\n * Handles format toggle button click\r\n * Cycles through hex → rgb → hsl input modes\r\n */\r\n private _handleFormatToggle(): void {\r\n const formats: ColorFormat[] = ['hex', 'rgb', 'hsl'];\r\n const currentIndex = formats.indexOf(this._inputMode);\r\n this._inputMode = formats[(currentIndex + 1) % formats.length];\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Swatch Handlers\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles click events on predefined color swatches\r\n * Updates color to the swatch value\r\n * @param color Color string to apply\r\n */\r\n private _handleSwatchClick(color: string): void {\r\n if (this.disabled || this.readonly) return;\r\n\r\n const parsed = parseColor(color);\r\n if (parsed) {\r\n this._hsv = parsed;\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n this._emitChange();\r\n }\r\n }\r\n\r\n /**\r\n * Handles keyboard events on swatch elements\r\n * Activates swatch on Enter or Space key\r\n * @param color Color string to apply\r\n * @param event Keyboard event\r\n */\r\n private _handleSwatchKeydown(color: string, event: KeyboardEvent): void {\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n this._handleSwatchClick(color);\r\n }\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Eyedropper\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Handles eyedropper button click\r\n * Opens native EyeDropper API to pick color from screen\r\n * Only available in browsers that support the EyeDropper API\r\n */\r\n private async _handleEyedropper(): Promise<void> {\r\n if (!this._eyedropperSupported || this.disabled || this.readonly) return;\r\n\r\n this._isPickingColor = true;\r\n try {\r\n // @ts-expect-error EyeDropper API is not in TypeScript types yet\r\n const eyeDropper = new EyeDropper();\r\n const result = await eyeDropper.open();\r\n\r\n if (result.sRGBHex) {\r\n const parsed = parseColor(result.sRGBHex);\r\n if (parsed) {\r\n this._hsv = parsed;\r\n this._hexInputValue = this._formatOutput('hex');\r\n this._emitInput();\r\n this._emitChange();\r\n }\r\n }\r\n } catch {\r\n // User cancelled or error occurred\r\n } finally {\r\n this._isPickingColor = false;\r\n }\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Event Emission\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Emits bp-input event with current formatted color value\r\n * Fired during live color updates (dragging, typing)\r\n */\r\n private _emitInput(): void {\r\n const value = this._formatOutput();\r\n this.dispatchEvent(\r\n new CustomEvent('bp-input', {\r\n detail: { value },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n /**\r\n * Emits bp-change event and updates the value property\r\n * Fired on blur/confirm actions (drag end, input blur)\r\n */\r\n private _emitChange(): void {\r\n const value = this._formatOutput();\r\n this.value = value;\r\n this.dispatchEvent(\r\n new CustomEvent('bp-change', {\r\n detail: { value },\r\n bubbles: true,\r\n composed: true,\r\n })\r\n );\r\n }\r\n\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n // Rendering\r\n // ─────────────────────────────────────────────────────────────────────────────\r\n\r\n /**\r\n * Renders the 2D color area for saturation and value selection\r\n * @returns TemplateResult for color area with draggable handle\r\n */\r\n private _renderColorArea() {\r\n const hueColor = `hsl(${this._hsv.h}, 100%, 50%)`;\r\n const handleX = this._hsv.s;\r\n const handleY = 100 - this._hsv.v;\r\n\r\n return html`\r\n <div\r\n class=\"color-area\"\r\n part=\"color-area\"\r\n role=\"slider\"\r\n tabindex=\"${this.disabled ? -1 : 0}\"\r\n aria-label=\"Color selection\"\r\n aria-valuetext=\"Saturation ${Math.round(\r\n this._hsv.s\r\n )}%, Brightness ${Math.round(this._hsv.v)}%\"\r\n style=\"--hue-color: ${hueColor}\"\r\n @pointerdown=${this._handleColorAreaPointerDown}\r\n @pointermove=${this._handleColorAreaPointerMove}\r\n @pointerup=${this._handleColorAreaPointerUp}\r\n @keydown=${this._handleColorAreaKeydown}\r\n >\r\n <div\r\n class=\"color-area-handle\"\r\n style=\"left: ${handleX}%; top: ${handleY}%\"\r\n ></div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the vertical hue slider (0-360 degrees)\r\n * @returns TemplateResult for hue slider with draggable handle\r\n */\r\n private _renderHueSlider() {\r\n const handleY = (this._hsv.h / 360) * 100;\r\n\r\n return html`\r\n <div\r\n class=\"hue-slider\"\r\n part=\"hue-slider\"\r\n role=\"slider\"\r\n tabindex=\"${this.disabled ? -1 : 0}\"\r\n aria-label=\"Hue\"\r\n aria-valuenow=\"${Math.round(this._hsv.h)}\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"360\"\r\n @pointerdown=${this._handleHuePointerDown}\r\n @pointermove=${this._handleHuePointerMove}\r\n @pointerup=${this._handleHuePointerUp}\r\n @keydown=${this._handleHueKeydown}\r\n >\r\n <div class=\"hue-slider-handle\" style=\"top: ${handleY}%\"></div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the horizontal alpha slider (0-100%)\r\n * Only shown when alpha property is true\r\n * @returns TemplateResult for alpha slider or nothing\r\n */\r\n private _renderAlphaSlider() {\r\n if (!this.alpha) return nothing;\r\n\r\n const rgb = hsvToRgb(this._hsv);\r\n const colorStart = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0)`;\r\n const colorEnd = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1)`;\r\n const handleX = this._hsv.a * 100;\r\n\r\n return html`\r\n <div\r\n class=\"alpha-slider\"\r\n part=\"alpha-slider\"\r\n role=\"slider\"\r\n tabindex=\"${this.disabled ? -1 : 0}\"\r\n aria-label=\"Opacity\"\r\n aria-valuenow=\"${Math.round(this._hsv.a * 100)}\"\r\n aria-valuemin=\"0\"\r\n aria-valuemax=\"100\"\r\n style=\"--alpha-gradient: linear-gradient(to right, ${colorStart}, ${colorEnd})\"\r\n @pointerdown=${this._handleAlphaPointerDown}\r\n @pointermove=${this._handleAlphaPointerMove}\r\n @pointerup=${this._handleAlphaPointerUp}\r\n @keydown=${this._handleAlphaKeydown}\r\n >\r\n <div class=\"alpha-slider-handle\" style=\"left: ${handleX}%\"></div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the color preview showing original and current colors\r\n * Displays side-by-side comparison with checkerboard background for transparency\r\n * @returns TemplateResult for preview swatches\r\n */\r\n private _renderPreview() {\r\n const rgb = hsvToRgb(this._hsv);\r\n const currentColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this._hsv.a})`;\r\n const originalHsv = parseColor(this._originalValue);\r\n const originalColor = originalHsv\r\n ? (() => {\r\n const origRgb = hsvToRgb(originalHsv);\r\n return `rgba(${origRgb.r}, ${origRgb.g}, ${origRgb.b}, ${originalHsv.a})`;\r\n })()\r\n : currentColor;\r\n\r\n return html`\r\n <div class=\"preview\" part=\"preview\">\r\n <div\r\n class=\"preview-swatch preview-original\"\r\n style=\"background: ${originalColor}\"\r\n title=\"Original color\"\r\n aria-label=\"Original color\"\r\n ></div>\r\n <div\r\n class=\"preview-swatch preview-current\"\r\n style=\"background: ${currentColor}\"\r\n title=\"Current color\"\r\n aria-label=\"Current color\"\r\n ></div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the hex color input field\r\n * @returns TemplateResult for hex input group\r\n */\r\n private _renderHexInput() {\r\n return html`\r\n <div class=\"input-group\">\r\n <input\r\n type=\"text\"\r\n class=\"color-input hex-input\"\r\n part=\"input\"\r\n .value=${this._hexInputValue}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${this._handleHexInput}\r\n @change=${this._handleHexChange}\r\n aria-label=\"Hex color value\"\r\n />\r\n <span class=\"input-label\">HEX</span>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders RGB color input fields (R, G, B, and optionally A)\r\n * @returns TemplateResult for RGB input row\r\n */\r\n private _renderRgbInputs() {\r\n const rgb = hsvToRgb(this._hsv);\r\n\r\n return html`\r\n <div class=\"input-row\">\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"255\"\r\n .value=${String(rgb.r)}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${(e: Event) => this._handleRgbInput('r', e)}\r\n @change=${this._handleRgbChange}\r\n aria-label=\"Red\"\r\n />\r\n <span class=\"input-label\">R</span>\r\n </div>\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"255\"\r\n .value=${String(rgb.g)}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${(e: Event) => this._handleRgbInput('g', e)}\r\n @change=${this._handleRgbChange}\r\n aria-label=\"Green\"\r\n />\r\n <span class=\"input-label\">G</span>\r\n </div>\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"255\"\r\n .value=${String(rgb.b)}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${(e: Event) => this._handleRgbInput('b', e)}\r\n @change=${this._handleRgbChange}\r\n aria-label=\"Blue\"\r\n />\r\n <span class=\"input-label\">B</span>\r\n </div>\r\n ${this.alpha\r\n ? html`\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"100\"\r\n .value=${String(Math.round(this._hsv.a * 100))}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${this._handleAlphaInput}\r\n @change=${this._handleAlphaInputChange}\r\n aria-label=\"Alpha\"\r\n />\r\n <span class=\"input-label\">A</span>\r\n </div>\r\n `\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders HSL color input fields (H, S, L, and optionally A)\r\n * @returns TemplateResult for HSL input row\r\n */\r\n private _renderHslInputs() {\r\n const hsl = hsvToHsl(this._hsv);\r\n\r\n return html`\r\n <div class=\"input-row\">\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"360\"\r\n .value=${String(Math.round(hsl.h))}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${(e: Event) => this._handleHslInput('h', e)}\r\n @change=${this._handleHslChange}\r\n aria-label=\"Hue\"\r\n />\r\n <span class=\"input-label\">H</span>\r\n </div>\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"100\"\r\n .value=${String(Math.round(hsl.s))}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${(e: Event) => this._handleHslInput('s', e)}\r\n @change=${this._handleHslChange}\r\n aria-label=\"Saturation\"\r\n />\r\n <span class=\"input-label\">S</span>\r\n </div>\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"100\"\r\n .value=${String(Math.round(hsl.l))}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${(e: Event) => this._handleHslInput('l', e)}\r\n @change=${this._handleHslChange}\r\n aria-label=\"Lightness\"\r\n />\r\n <span class=\"input-label\">L</span>\r\n </div>\r\n ${this.alpha\r\n ? html`\r\n <div class=\"input-group\">\r\n <input\r\n type=\"number\"\r\n class=\"color-input\"\r\n part=\"input\"\r\n min=\"0\"\r\n max=\"100\"\r\n .value=${String(Math.round(this._hsv.a * 100))}\r\n ?disabled=${this.disabled}\r\n ?readonly=${this.readonly}\r\n @input=${this._handleAlphaInput}\r\n @change=${this._handleAlphaInputChange}\r\n aria-label=\"Alpha\"\r\n />\r\n <span class=\"input-label\">A</span>\r\n </div>\r\n `\r\n : nothing}\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the input controls container with format toggle button\r\n * Shows hex, rgb, or hsl inputs based on current input mode\r\n * @returns TemplateResult for inputs container\r\n */\r\n private _renderInputs() {\r\n return html`\r\n <div class=\"inputs-container\">\r\n ${this._inputMode === 'hex' ? this._renderHexInput() : nothing}\r\n ${this._inputMode === 'rgb' ? this._renderRgbInputs() : nothing}\r\n ${this._inputMode === 'hsl' ? this._renderHslInputs() : nothing}\r\n <button\r\n type=\"button\"\r\n class=\"format-toggle\"\r\n @click=${this._handleFormatToggle}\r\n ?disabled=${this.disabled}\r\n aria-label=\"Cycle color format (${this._inputMode.toUpperCase()})\"\r\n title=\"Cycle color format\"\r\n >\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n >\r\n <path\r\n d=\"M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2\"\r\n />\r\n </svg>\r\n </button>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders predefined color swatches\r\n * Shows swatches from the swatches property or slotted content\r\n * @returns TemplateResult for swatches container or nothing\r\n */\r\n private _renderSwatches() {\r\n const hasSwatches = this.swatches.length > 0;\r\n const hasSlottedSwatches = this.querySelector('[slot=\"swatches\"]') !== null;\r\n\r\n if (!hasSwatches && !hasSlottedSwatches) return nothing;\r\n\r\n return html`\r\n <div\r\n class=\"swatches-container\"\r\n part=\"swatches\"\r\n role=\"listbox\"\r\n aria-label=\"Color swatches\"\r\n >\r\n <slot name=\"swatches\">\r\n ${this.swatches.map(\r\n (color) => html`\r\n <button\r\n type=\"button\"\r\n class=\"swatch\"\r\n part=\"swatch\"\r\n role=\"option\"\r\n style=\"background: ${color}\"\r\n @click=${() => this._handleSwatchClick(color)}\r\n @keydown=${(e: KeyboardEvent) =>\r\n this._handleSwatchKeydown(color, e)}\r\n ?disabled=${this.disabled}\r\n aria-label=\"${color}\"\r\n ></button>\r\n `\r\n )}\r\n </slot>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the eyedropper button if API is supported\r\n * @returns TemplateResult for eyedropper button or nothing\r\n */\r\n private _renderEyedropper() {\r\n if (!this._eyedropperSupported) return nothing;\r\n\r\n return html`\r\n <button\r\n type=\"button\"\r\n class=\"eyedropper-button\"\r\n @click=${this._handleEyedropper}\r\n ?disabled=${this.disabled || this.readonly || this._isPickingColor}\r\n aria-label=\"Pick color from screen\"\r\n aria-busy=\"${this._isPickingColor}\"\r\n >\r\n <svg\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n >\r\n <path d=\"M2 22l1-1h3l9-9m-3-3l3-3 5 5-3 3m-5-5l5 5M12.5 6.5l5 5\" />\r\n </svg>\r\n </button>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the complete color picker panel\r\n * Includes color area, sliders, preview, inputs, and swatches\r\n * @returns TemplateResult for picker panel\r\n */\r\n private _renderPicker() {\r\n return html`\r\n <div\r\n class=\"picker\"\r\n part=\"popover\"\r\n role=\"dialog\"\r\n aria-label=\"${this.label || 'Color picker'}\"\r\n >\r\n <div class=\"picker-body\">\r\n <div class=\"picker-main\">\r\n ${this._renderColorArea()} ${this._renderHueSlider()}\r\n </div>\r\n ${this._renderAlphaSlider()}\r\n <div class=\"picker-controls\">\r\n ${this._renderPreview()} ${this._renderInputs()}\r\n ${this._renderEyedropper()}\r\n </div>\r\n ${this._renderSwatches()}\r\n <slot name=\"footer\"></slot>\r\n </div>\r\n </div>\r\n `;\r\n }\r\n\r\n /**\r\n * Renders the trigger button to open the picker popover\r\n * Shows current color swatch and optional label\r\n * @returns TemplateResult for trigger button\r\n */\r\n private _renderTrigger() {\r\n const rgb = hsvToRgb(this._hsv);\r\n const currentColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${this._hsv.a})`;\r\n const hasLabel = this.label || this.placeholder;\r\n\r\n return html`\r\n <button\r\n type=\"button\"\r\n class=\"trigger\"\r\n part=\"trigger\"\r\n role=\"button\"\r\n aria-haspopup=\"dialog\"\r\n aria-expanded=\"${this._open}\"\r\n aria-disabled=\"${this.disabled}\"\r\n tabindex=\"${this.disabled ? -1 : 0}\"\r\n ?disabled=${this.disabled}\r\n @click=${this._handleTriggerClick}\r\n @keydown=${this._handleTriggerKeydown}\r\n >\r\n <slot name=\"trigger\">\r\n <span\r\n class=\"trigger-swatch\"\r\n style=\"background: ${currentColor}\"\r\n ></span>\r\n ${hasLabel\r\n ? html`<span class=\"trigger-label\"\r\n >${this.label || this.placeholder}</span\r\n >`\r\n : nothing}\r\n </slot>\r\n </button>\r\n `;\r\n }\r\n\r\n render() {\r\n if (this.inline) {\r\n return this._renderPicker();\r\n }\r\n\r\n return html`\r\n <div class=\"color-picker color-picker--${this.size}\">\r\n ${this._renderTrigger()}\r\n ${this._open\r\n ? html`\r\n <div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">\r\n Current color: ${this._formatOutput()}\r\n </div>\r\n ${this._renderPicker()}\r\n `\r\n : nothing}\r\n </div>\r\n ${this.name\r\n ? html`<input\r\n type=\"hidden\"\r\n name=\"${this.name}\"\r\n .value=${this._formatOutput()}\r\n />`\r\n : nothing}\r\n `;\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n 'bp-color-picker': BpColorPicker;\r\n }\r\n}\r\n"],"names":["colorPickerStyles","css","parseColor","value","parseHex","parseRgb","parseHsl","hex","r","g","b","a","rgbToHsv","rgb","match","hsl","h","s","l","hslToHsv","max","min","delta","v","hsvToRgb","hsv","c","x","m","sv","hsvToHsl","sl","roundAlpha","formatColorOutput","format","includeAlpha","hexR","hexG","hexB","hexA","BpColorPicker","LitElement","event","changedProperties","parsed","rect","y","step","handled","hue","alpha","input","channel","formats","currentIndex","color","result","hueColor","handleX","handleY","html","nothing","colorStart","colorEnd","currentColor","originalHsv","originalColor","origRgb","hasSwatches","hasSlottedSwatches","e","hasLabel","__decorateClass","property","booleanConverter","state","query","customElement"],"mappings":";;;AAcO,MAAMA,IAAoBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}