pickit-color 1.0.2 → 1.1.0

package/README.md

@@ -10,6 +10,7 @@ A modern, lightweight, and accessible color picker with HSL/RGBA support, preset
 - 🎯 **Multiple Color Formats**: HEX, HEX8, RGB, RGBA, HSL, HSLA
 - 🎚️ **Slider Mode**: Individual sliders for H, S, L, A values
 - 🎨 **2D Picker**: Traditional saturation/lightness picker
+- 🎯 **Live Theme Builder**: Target elements for live color updates
 - 📌 **Preset Colors**: With optional labels and list view
 - 👁️ **Screen Color Picker**: EyeDropper API + System ColorPicker fallback
 - 🔲 **Compact Mode**: Minimal button interface
@@ -108,10 +109,23 @@ const picker = colorpicker('#myInput', {
 <input data-colorpicker="format:hex,inputPreview:true">
 ```
 
+### Live Theme Builder
+
+```html
+<!-- Update background color of target element -->
+<div id="preview-box">Live Preview</div>
+<input data-colorpicker="format:hex,target:#preview-box,property:background-color">
+
+<!-- Update text color -->
+<input data-colorpicker="format:hex,target:#preview-box,property:color">
+```
+
 ## ⚙️ Options
 
 | Option | Type | Default | Description |
 |--------|------|---------|-------------|
+| `previewTarget` | `string` | `''` | CSS selector of element to update with color |
+| `previewProperty` | `string` | `'background-color'` | CSS property to update on target element |
 | `format` | `string` | `'hex'` | Color format: `hex`, `hex8`, `rgb`, `rgba`, `hsl`, `hsla` |
 | `showAlpha` | `boolean` | `false` | Show alpha/transparency slider |
 | `defaultColor` | `string` | `'#3b82f6'` | Initial color if input is empty |

package/dist/colorpicker.css

@@ -73,6 +73,8 @@
   border-radius: 6px;
   cursor: crosshair;
   overflow: hidden;
+  -ms-touch-action: none;
+      touch-action: none;
 }
 .colorpicker-saturation:focus {
   outline: 2px solid #3b82f6;
@@ -105,6 +107,13 @@
   transition: transform 0.1s ease;
   transition: transform 0.1s ease, -webkit-transform 0.1s ease;
 }
+@media (pointer: coarse) {
+  .colorpicker-saturation-pointer {
+    width: 28px;
+    height: 28px;
+    border-width: 4px;
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .colorpicker-saturation-pointer {
     -webkit-transition: none;
@@ -156,11 +165,13 @@
   -webkit-appearance: none;
   -moz-appearance: none;
        appearance: none;
-  width: 100%;
-  height: 8px;
-  border-radius: 4px;
-  outline: none;
-  cursor: pointer;
+  -ms-touch-action: none;
+      touch-action: none;
+}
+@media (pointer: coarse) {
+  .colorpicker-slider {
+    height: 12px;
+  }
 }
 .colorpicker-slider:focus {
   -webkit-box-shadow: 0 0 0 2px #3b82f6;
@@ -182,6 +193,13 @@
   transition: transform 0.1s ease;
   transition: transform 0.1s ease, -webkit-transform 0.1s ease;
 }
+@media (pointer: coarse) {
+  .colorpicker-slider::-webkit-slider-thumb {
+    width: 28px;
+    height: 28px;
+    border-width: 3px;
+  }
+}
 .colorpicker-slider::-webkit-slider-thumb:hover {
   -webkit-transform: scale(1.1);
           transform: scale(1.1);
@@ -202,6 +220,18 @@
   transition: -webkit-transform 0.1s ease;
   transition: transform 0.1s ease;
   transition: transform 0.1s ease, -webkit-transform 0.1s ease;
+  background: #fff;
+  border: 2px solid #3b82f6;
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  transition: transform 0.1s ease;
+}
+@media (pointer: coarse) {
+  .colorpicker-slider::-moz-range-thumb {
+    width: 28px;
+    height: 28px;
+    border-width: 3px;
+  }
 }
 .colorpicker-slider::-moz-range-thumb:hover {
   transform: scale(1.1);
@@ -373,6 +403,12 @@
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
+@media (pointer: coarse) {
+  .colorpicker-eyedropper-btn {
+    width: 44px;
+    height: 44px;
+  }
+}
 .colorpicker-eyedropper-btn:hover {
   background: #f3f4f6;
   border-color: #3b82f6;
@@ -456,6 +492,11 @@
   position: relative;
   overflow: hidden;
 }
+@media (pointer: coarse) {
+  .colorpicker-preset {
+    min-height: 44px;
+  }
+}
 .colorpicker-preset::before {
   content: '';
   position: absolute;
@@ -475,6 +516,12 @@
   -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.15);
           box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }
+@media (pointer: coarse) {
+  .colorpicker-preset:hover {
+    -webkit-transform: scale(1.05);
+            transform: scale(1.05);
+  }
+}
 .colorpicker-preset:focus {
   outline: none;
   border-color: #3b82f6;
@@ -497,6 +544,13 @@
   gap: 12px;
   padding: 8px 12px;
   background: #f9fafb;
+  min-height: 48px;
+}
+@media (pointer: coarse) {
+  .colorpicker-preset-list-item {
+    min-height: 56px;
+    padding: 12px;
+  }
 }
 .colorpicker-preset-list-item:hover {
   -webkit-transform: none;

package/dist/colorpicker.js

@@ -1,4 +1,4 @@
-/* Pickit Color v1.0.2, @license Donationware */
+/* Pickit Color v1.1.0, @license Donationware */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -117,6 +117,8 @@
                 inline: (_f = options.inline) !== null && _f !== void 0 ? _f : false,
                 compact: (_g = options.compact) !== null && _g !== void 0 ? _g : false,
                 inputPreview: (_h = options.inputPreview) !== null && _h !== void 0 ? _h : false,
+                previewTarget: options.previewTarget || "",
+                previewProperty: options.previewProperty || "background-color",
                 onChange: options.onChange || (function () { }),
                 onOpen: options.onOpen || (function () { }),
                 onClose: options.onClose || (function () { }),
@@ -152,9 +154,11 @@
             this.setupEventListeners();
             // Update display
             this.updateColorDisplay();
-            // Open if inline
-            if (this.options.inline) {
-                this.open();
+            // Open if inline (without scrolling)
+            if (this.options.inline && this.container) {
+                this.isOpen = true;
+                this.container.style.display = "block";
+                this.options.onOpen();
             }
         };
         ColorPicker.prototype.buildColorPicker = function () {
@@ -328,6 +332,9 @@
                     _this.updateColorDisplay();
                     _this.announceColorChange();
                 });
+                this.hueSlider.addEventListener("touchstart", function (e) {
+                    _this.handleSliderTouch(e, _this.hueSlider, 'h', 0, 360);
+                });
             }
             // Saturation slider (sliderMode only)
             if (this.saturationSlider) {
@@ -336,6 +343,9 @@
                     _this.updateColorDisplay();
                     _this.announceColorChange();
                 });
+                this.saturationSlider.addEventListener("touchstart", function (e) {
+                    _this.handleSliderTouch(e, _this.saturationSlider, 's', 0, 100);
+                });
             }
             // Lightness slider (sliderMode only)
             if (this.lightnessSlider) {
@@ -344,6 +354,9 @@
                     _this.updateColorDisplay();
                     _this.announceColorChange();
                 });
+                this.lightnessSlider.addEventListener("touchstart", function (e) {
+                    _this.handleSliderTouch(e, _this.lightnessSlider, 'l', 0, 100);
+                });
             }
             // Alpha slider
             if (this.alphaSlider) {
@@ -353,12 +366,18 @@
                     _this.updateColorDisplay();
                     _this.announceColorChange();
                 });
+                this.alphaSlider.addEventListener("touchstart", function (e) {
+                    _this.handleSliderTouch(e, _this.alphaSlider, 'a', 0, 100, true);
+                });
             }
             // Saturation box
             if (this.colorBox) {
                 this.colorBox.addEventListener("mousedown", function (e) {
                     return _this.onSaturationMouseDown(e);
                 });
+                this.colorBox.addEventListener("touchstart", function (e) {
+                    return _this.onSaturationTouchStart(e);
+                });
                 this.colorBox.addEventListener("keydown", function (e) {
                     return _this.onSaturationKeyDown(e);
                 });
@@ -503,6 +522,66 @@
             document.addEventListener("mousemove", onMouseMove);
             document.addEventListener("mouseup", onMouseUp);
         };
+        ColorPicker.prototype.onSaturationTouchStart = function (e) {
+            var _this = this;
+            e.preventDefault();
+            var touch = e.touches[0];
+            this.updateSaturationFromTouch(touch);
+            var onTouchMove = function (e) {
+                e.preventDefault();
+                var touch = e.touches[0];
+                _this.updateSaturationFromTouch(touch);
+            };
+            var onTouchEnd = function () {
+                document.removeEventListener("touchmove", onTouchMove);
+                document.removeEventListener("touchend", onTouchEnd);
+            };
+            document.addEventListener("touchmove", onTouchMove, { passive: false });
+            document.addEventListener("touchend", onTouchEnd);
+        };
+        ColorPicker.prototype.updateSaturationFromTouch = function (touch) {
+            if (!this.colorBox)
+                return;
+            var rect = this.colorBox.getBoundingClientRect();
+            var x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+            var y = Math.max(0, Math.min(touch.clientY - rect.top, rect.height));
+            this.currentColor.s = (x / rect.width) * 100;
+            this.currentColor.l = 100 - (y / rect.height) * 100;
+            this.updateColorDisplay();
+            this.announceColorChange();
+        };
+        ColorPicker.prototype.handleSliderTouch = function (e, slider, property, min, max, isAlpha) {
+            var _this = this;
+            if (isAlpha === void 0) { isAlpha = false; }
+            var updateFromTouch = function (touch) {
+                var rect = slider.getBoundingClientRect();
+                var x = Math.max(0, Math.min(touch.clientX - rect.left, rect.width));
+                var ratio = x / rect.width;
+                var value = min + ratio * (max - min);
+                if (isAlpha) {
+                    _this.currentColor[property] = value / 100;
+                }
+                else {
+                    _this.currentColor[property] = Math.round(value);
+                }
+                slider.value = String(Math.round(value));
+                _this.updateColorDisplay();
+                _this.announceColorChange();
+            };
+            var touch = e.touches[0];
+            updateFromTouch(touch);
+            var onTouchMove = function (e) {
+                e.preventDefault();
+                var touch = e.touches[0];
+                updateFromTouch(touch);
+            };
+            var onTouchEnd = function () {
+                document.removeEventListener("touchmove", onTouchMove);
+                document.removeEventListener("touchend", onTouchEnd);
+            };
+            document.addEventListener("touchmove", onTouchMove, { passive: false });
+            document.addEventListener("touchend", onTouchEnd);
+        };
         ColorPicker.prototype.updateSaturationFromMouse = function (e) {
             if (!this.colorBox)
                 return;
@@ -588,6 +667,14 @@
             if (updateInput) {
                 this.input.value = this.formatColor(this.currentColor);
                 this.options.onChange(this.input.value);
+                // Update preview target if configured
+                if (this.options.previewTarget) {
+                    var target = document.querySelector(this.options.previewTarget);
+                    if (target) {
+                        var property = this.options.previewProperty || 'background-color';
+                        target.style.setProperty(property, this.input.value);
+                    }
+                }
                 // Update compact button preview
                 if (this.compactButton) {
                     var preview_1 = this.compactButton.querySelector('.colorpicker-compact-preview');
@@ -791,26 +878,28 @@
                 this.positionPicker();
             }
             this.options.onOpen();
-            // Focus first interactive element based on mode
-            setTimeout(function () {
-                var _a;
-                var focusTarget = null;
-                if (_this.options.presetsOnly) {
-                    // In presets-only mode, focus first preset
-                    focusTarget = (_a = _this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.colorpicker-preset');
-                }
-                else if (_this.options.sliderMode) {
-                    // In slider mode, focus first slider (hue)
-                    focusTarget = _this.hueSlider;
-                }
-                else {
-                    // In standard mode, focus saturation box
-                    focusTarget = _this.colorBox;
-                }
-                if (focusTarget) {
-                    focusTarget.focus();
-                }
-            }, 0);
+            // Auto-focus only for popup mode, not inline
+            if (!this.options.inline) {
+                setTimeout(function () {
+                    var _a;
+                    var focusTarget = null;
+                    if (_this.options.presetsOnly) {
+                        // In presets-only mode, focus first preset
+                        focusTarget = (_a = _this.container) === null || _a === void 0 ? void 0 : _a.querySelector('.colorpicker-preset');
+                    }
+                    else if (_this.options.sliderMode) {
+                        // In slider mode, focus first slider (hue)
+                        focusTarget = _this.hueSlider;
+                    }
+                    else {
+                        // In standard mode, focus saturation box
+                        focusTarget = _this.colorBox;
+                    }
+                    if (focusTarget) {
+                        focusTarget.focus();
+                    }
+                }, 0);
+            }
         };
         ColorPicker.prototype.close = function () {
             if (!this.isOpen || !this.container)
@@ -942,6 +1031,14 @@
                         case 'inputPreview':
                             options.inputPreview = value === 'true' || value === '1';
                             break;
+                        case 'target':
+                        case 'previewTarget':
+                            options.previewTarget = value;
+                            break;
+                        case 'property':
+                        case 'previewProperty':
+                            options.previewProperty = value;
+                            break;
                     }
                 });
             }

package/dist/colorpicker.min.css

@@ -1 +1 @@
-.colorpicker-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.colorpicker-container{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#fff;border:1px solid #e5e7eb;border-radius:8px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:16px;width:280px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker-container:focus-within{outline:2px solid #3b82f6;outline-offset:2px}.colorpicker-container.colorpicker-inline{width:100%;max-width:100%;-webkit-box-shadow:none;box-shadow:none}.colorpicker-container.colorpicker-inline .colorpicker-saturation{height:200px}.colorpicker-container.colorpicker-presets-only{width:auto;min-width:200px;max-width:400px}.colorpicker-container.colorpicker-presets-only .colorpicker-presets{margin:0;padding:0}.colorpicker-container.colorpicker-presets-only.colorpicker-inline{max-width:100%}.colorpicker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}.colorpicker-saturation{position:relative;width:100%;height:180px;background:-webkit-gradient(linear,left bottom, left top,from(#000),to(transparent)),-webkit-gradient(linear,left top, right top,from(#fff),to(transparent));background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);border-radius:6px;cursor:crosshair;overflow:hidden}.colorpicker-saturation:focus{outline:2px solid #3b82f6;outline-offset:2px}.colorpicker-saturation:focus:not(:focus-visible){outline:none}.colorpicker-saturation-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.colorpicker-saturation-pointer{position:absolute;width:20px;height:20px;border:3px solid #fff;border-radius:50%;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(0,0,0,0.1);box-shadow:0 2px 4px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(0,0,0,0.1);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}@media (prefers-reduced-motion:reduce){.colorpicker-saturation-pointer{-webkit-transition:none;transition:none}}.colorpicker-controls{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.colorpicker-sliders{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.colorpicker-slider-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.colorpicker-label{font-size:12px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.colorpicker-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;outline:none;cursor:pointer}.colorpicker-slider:focus{-webkit-box-shadow:0 0 0 2px #3b82f6;box-shadow:0 0 0 2px #3b82f6}.colorpicker-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #3b82f6;cursor:pointer;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}.colorpicker-slider::-webkit-slider-thumb:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.colorpicker-slider::-webkit-slider-thumb:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #3b82f6;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}.colorpicker-slider::-moz-range-thumb:hover{transform:scale(1.1)}.colorpicker-slider::-moz-range-thumb:active{transform:scale(.95)}.colorpicker-hue-slider{background:-webkit-gradient(linear,left top, right top,from(#f00),color-stop(#ff0),color-stop(#0f0),color-stop(#0ff),color-stop(#00f),color-stop(#f0f),to(#f00));background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.colorpicker-alpha-slider{background:linear-gradient(to right,transparent,currentColor),linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:100%,10px 10px,10px 10px,10px 10px,10px 10px;background-position:0 0,0 0,0 5px,5px -5px,-5px 0}.colorpicker-sliders-only{gap:12px}.colorpicker-controls{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.colorpicker-controls:has(.colorpicker-sliders:not(.colorpicker-sliders-only)){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.colorpicker-controls:has(.colorpicker-sliders-only){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.colorpicker-controls:has(.colorpicker-sliders-only) .colorpicker-preview{width:100%;height:48px;min-height:48px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.colorpicker-controls:has(.colorpicker-sliders-only) .colorpicker-preview .colorpicker-preview-color{min-height:48px}.colorpicker-preview{width:40px;min-width:40px;height:40px;min-height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-negative:0;flex-shrink:0}.colorpicker-preview-color{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:6px;border:2px solid #e5e7eb;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.05);position:relative}.colorpicker-preview-color::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;border-radius:4px;z-index:-1}.colorpicker-input-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.colorpicker-input-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.colorpicker-input{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-family:'Monaco','Menlo',monospace;font-size:14px;color:#1f2937;background:#fff;-webkit-transition:border-color .2s ease,-webkit-box-shadow .2s ease;transition:border-color .2s ease,-webkit-box-shadow .2s ease;transition:border-color .2s ease,box-shadow .2s ease;transition:border-color .2s ease,box-shadow .2s ease,-webkit-box-shadow .2s ease}.colorpicker-input:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-input::-webkit-input-placeholder{color:#9ca3af}.colorpicker-input::-moz-placeholder{color:#9ca3af}.colorpicker-input:-ms-input-placeholder{color:#9ca3af}.colorpicker-input::-ms-input-placeholder{color:#9ca3af}.colorpicker-input::placeholder{color:#9ca3af}.colorpicker-eyedropper-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:36px;height:36px;padding:8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#1f2937;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;-ms-flex-negative:0;flex-shrink:0}.colorpicker-eyedropper-btn:hover{background:#f3f4f6;border-color:#3b82f6}.colorpicker-eyedropper-btn:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-eyedropper-btn:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-eyedropper-btn svg{width:20px;height:20px;display:block}.colorpicker-system-picker-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:36px;height:36px;padding:8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#1f2937;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;-ms-flex-negative:0;flex-shrink:0}.colorpicker-system-picker-btn:hover{background:#f3f4f6;border-color:#3b82f6}.colorpicker-system-picker-btn:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-system-picker-btn:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-system-picker-btn svg{width:20px;height:20px;display:block}.colorpicker-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding-top:4px}.colorpicker-presets.colorpicker-presets-list{grid-template-columns:1fr;gap:6px}.colorpicker-preset{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:4px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;position:relative;overflow:hidden}.colorpicker-preset::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;z-index:-1}.colorpicker-preset:hover{-webkit-transform:scale(1.15);transform:scale(1.15);border-color:#3b82f6;-webkit-box-shadow:0 2px 8px rgba(0,0,0,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.15)}.colorpicker-preset:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 2px rgba(59,130,246,0.3);box-shadow:0 0 0 2px rgba(59,130,246,0.3)}.colorpicker-preset:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-preset-list-item{aspect-ratio:unset;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;padding:8px 12px;background:#f9fafb}.colorpicker-preset-list-item:hover{-webkit-transform:none;transform:none;background:#f3f4f6}.colorpicker-preset-list-item:focus{background:#f3f4f6}.colorpicker-preset-color{width:32px;height:32px;border-radius:6px;-ms-flex-negative:0;flex-shrink:0;position:relative}.colorpicker-preset-color::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;border-radius:6px;z-index:-1}.colorpicker-preset-label{font-size:14px;font-weight:500;color:#1f2937;text-align:left;-webkit-box-flex:1;-ms-flex:1;flex:1}.colorpicker-input-group{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;max-width:400px;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff}.colorpicker-input-group:focus-within{border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-input-preview{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:48px;min-width:48px;border-right:2px solid #e5e7eb;position:relative;cursor:pointer;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.colorpicker-input-preview::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;z-index:-1}input.colorpicker-has-preview{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:10px 14px;font-size:15px;font-family:'Monaco','Menlo',monospace;background:transparent}input.colorpicker-has-preview:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}.colorpicker-compact-button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px;height:40px;padding:4px;border:2px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;vertical-align:middle}.colorpicker-compact-button:hover{border-color:#3b82f6;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.1);box-shadow:0 2px 4px rgba(0,0,0,0.1);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.colorpicker-compact-button:active{-webkit-transform:translateY(0) scale(.98);transform:translateY(0) scale(.98)}.colorpicker-compact-button:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-compact-button svg{width:20px;height:20px;display:block;color:#1f2937}.colorpicker-compact-button:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-compact-button:active{-webkit-transform:translateY(0);transform:translateY(0)}@media (prefers-reduced-motion:reduce){.colorpicker-compact-button{-webkit-transition:none;transition:none}.colorpicker-compact-button:hover{-webkit-transform:none;transform:none}.colorpicker-compact-button:active{-webkit-transform:none;transform:none}}.colorpicker-compact-preview{display:block;width:100%;height:100%;border-radius:4px;border:1px solid rgba(0,0,0,0.1);position:relative;overflow:hidden}.colorpicker-compact-preview::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;z-index:-1}@media (prefers-color-scheme:dark){.colorpicker-container{background:#1f2937;border-color:#374151;color:#e5e7eb}.colorpicker-compact-button{background:#1f2937;border-color:#374151}.colorpicker-compact-button:hover{border-color:#60a5fa;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3);box-shadow:0 2px 4px rgba(0,0,0,0.3)}.colorpicker-compact-button:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-label{color:#9ca3af}.colorpicker-input{background:#111827;border-color:#374151;color:#f9fafb}.colorpicker-input:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-preview-color{border-color:#374151}.colorpicker-eyedropper-btn{background:#1f2937;border-color:#374151;color:#e5e7eb}.colorpicker-eyedropper-btn:hover{background:#111827;border-color:#60a5fa}.colorpicker-eyedropper-btn:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-system-picker-btn{background:#1f2937;border-color:#374151;color:#e5e7eb}.colorpicker-system-picker-btn:hover{background:#111827;border-color:#60a5fa}.colorpicker-system-picker-btn:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-slider:focus{-webkit-box-shadow:0 0 0 2px #60a5fa;box-shadow:0 0 0 2px #60a5fa}.colorpicker-slider::-webkit-slider-thumb{border-color:#60a5fa}.colorpicker-slider::-moz-range-thumb{border-color:#60a5fa}.colorpicker-preset:hover{border-color:#60a5fa}.colorpicker-preset:focus{border-color:#60a5fa}.colorpicker-preset-list-item{background:#1f2937}.colorpicker-preset-list-item:hover{background:#111827;border-color:#374151}.colorpicker-preset-list-item:focus{background:#111827;border-color:#374151}.colorpicker-preset-label{color:#e5e7eb}.colorpicker-input-group{background:#1f2937;border-color:#374151}.colorpicker-input-group:focus-within{border-color:#60a5fa}.colorpicker-input-preview{border-right-color:#374151}input.colorpicker-has-preview{color:#f9fafb}input.colorpicker-has-preview:focus{-webkit-box-shadow:0 0 0 2px rgba(96,165,250,0.3);box-shadow:0 0 0 2px rgba(96,165,250,0.3)}}@media (prefers-contrast:high){.colorpicker-container{border-width:2px}.colorpicker-saturation{outline:2px solid currentColor}.colorpicker-saturation-pointer{border-width:4px}.colorpicker-preset{border-width:3px}}@media (prefers-reduced-motion:reduce){.colorpicker-slider::-webkit-slider-thumb{-webkit-transition:none;transition:none}.colorpicker-slider::-moz-range-thumb{-webkit-transition:none;transition:none}.colorpicker-preset{-webkit-transition:none;transition:none}.colorpicker-input{-webkit-transition:none;transition:none}.colorpicker-saturation-pointer{-webkit-transition:none;transition:none}}.colorpicker-container:not([style*="display: none"]){-webkit-animation:colorpicker-fadeIn .2s ease-out;animation:colorpicker-fadeIn .2s ease-out}@media (prefers-reduced-motion:reduce){.colorpicker-container:not([style*="display: none"]){-webkit-animation:none;animation:none}}@-webkit-keyframes colorpicker-fadeIn{from{opacity:0;-webkit-transform:translateY(-8px);transform:translateY(-8px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes colorpicker-fadeIn{from{opacity:0;-webkit-transform:translateY(-8px);transform:translateY(-8px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}
+.colorpicker-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.colorpicker-container{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#fff;border:1px solid #e5e7eb;border-radius:8px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,0.15);box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:16px;width:280px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.colorpicker-container:focus-within{outline:2px solid #3b82f6;outline-offset:2px}.colorpicker-container.colorpicker-inline{width:100%;max-width:100%;-webkit-box-shadow:none;box-shadow:none}.colorpicker-container.colorpicker-inline .colorpicker-saturation{height:200px}.colorpicker-container.colorpicker-presets-only{width:auto;min-width:200px;max-width:400px}.colorpicker-container.colorpicker-presets-only .colorpicker-presets{margin:0;padding:0}.colorpicker-container.colorpicker-presets-only.colorpicker-inline{max-width:100%}.colorpicker-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}.colorpicker-saturation{position:relative;width:100%;height:180px;background:-webkit-gradient(linear,left bottom, left top,from(#000),to(transparent)),-webkit-gradient(linear,left top, right top,from(#fff),to(transparent));background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);border-radius:6px;cursor:crosshair;overflow:hidden;-ms-touch-action:none;touch-action:none}.colorpicker-saturation:focus{outline:2px solid #3b82f6;outline-offset:2px}.colorpicker-saturation:focus:not(:focus-visible){outline:none}.colorpicker-saturation-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.colorpicker-saturation-pointer{position:absolute;width:20px;height:20px;border:3px solid #fff;border-radius:50%;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(0,0,0,0.1);box-shadow:0 2px 4px rgba(0,0,0,0.3),inset 0 0 0 1px rgba(0,0,0,0.1);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);pointer-events:none;-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}@media (pointer:coarse){.colorpicker-saturation-pointer{width:28px;height:28px;border-width:4px}}@media (prefers-reduced-motion:reduce){.colorpicker-saturation-pointer{-webkit-transition:none;transition:none}}.colorpicker-controls{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.colorpicker-sliders{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.colorpicker-slider-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.colorpicker-label{font-size:12px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.colorpicker-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-touch-action:none;touch-action:none}@media (pointer:coarse){.colorpicker-slider{height:12px}}.colorpicker-slider:focus{-webkit-box-shadow:0 0 0 2px #3b82f6;box-shadow:0 0 0 2px #3b82f6}.colorpicker-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #3b82f6;cursor:pointer;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease}@media (pointer:coarse){.colorpicker-slider::-webkit-slider-thumb{width:28px;height:28px;border-width:3px}}.colorpicker-slider::-webkit-slider-thumb:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.colorpicker-slider::-webkit-slider-thumb:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #3b82f6;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-transition:-webkit-transform .1s ease;transition:-webkit-transform .1s ease;transition:transform .1s ease;transition:transform .1s ease, -webkit-transform .1s ease;background:#fff;border:2px solid #3b82f6;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:transform .1s ease}@media (pointer:coarse){.colorpicker-slider::-moz-range-thumb{width:28px;height:28px;border-width:3px}}.colorpicker-slider::-moz-range-thumb:hover{transform:scale(1.1)}.colorpicker-slider::-moz-range-thumb:active{transform:scale(.95)}.colorpicker-hue-slider{background:-webkit-gradient(linear,left top, right top,from(#f00),color-stop(#ff0),color-stop(#0f0),color-stop(#0ff),color-stop(#00f),color-stop(#f0f),to(#f00));background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.colorpicker-alpha-slider{background:linear-gradient(to right,transparent,currentColor),linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:100%,10px 10px,10px 10px,10px 10px,10px 10px;background-position:0 0,0 0,0 5px,5px -5px,-5px 0}.colorpicker-sliders-only{gap:12px}.colorpicker-controls{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px}.colorpicker-controls:has(.colorpicker-sliders:not(.colorpicker-sliders-only)){-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.colorpicker-controls:has(.colorpicker-sliders-only){-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.colorpicker-controls:has(.colorpicker-sliders-only) .colorpicker-preview{width:100%;height:48px;min-height:48px;-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.colorpicker-controls:has(.colorpicker-sliders-only) .colorpicker-preview .colorpicker-preview-color{min-height:48px}.colorpicker-preview{width:40px;min-width:40px;height:40px;min-height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-negative:0;flex-shrink:0}.colorpicker-preview-color{-webkit-box-flex:1;-ms-flex:1;flex:1;border-radius:6px;border:2px solid #e5e7eb;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.05);position:relative}.colorpicker-preview-color::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0;border-radius:4px;z-index:-1}.colorpicker-input-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px}.colorpicker-input-row{display:-webkit-box;display:-ms-flexbox;display:flex;gap:8px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.colorpicker-input{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:8px 12px;border:1px solid #e5e7eb;border-radius:6px;font-family:'Monaco','Menlo',monospace;font-size:14px;color:#1f2937;background:#fff;-webkit-transition:border-color .2s ease,-webkit-box-shadow .2s ease;transition:border-color .2s ease,-webkit-box-shadow .2s ease;transition:border-color .2s ease,box-shadow .2s ease;transition:border-color .2s ease,box-shadow .2s ease,-webkit-box-shadow .2s ease}.colorpicker-input:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-input::-webkit-input-placeholder{color:#9ca3af}.colorpicker-input::-moz-placeholder{color:#9ca3af}.colorpicker-input:-ms-input-placeholder{color:#9ca3af}.colorpicker-input::-ms-input-placeholder{color:#9ca3af}.colorpicker-input::placeholder{color:#9ca3af}.colorpicker-eyedropper-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:36px;height:36px;padding:8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#1f2937;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;-ms-flex-negative:0;flex-shrink:0}@media (pointer:coarse){.colorpicker-eyedropper-btn{width:44px;height:44px}}.colorpicker-eyedropper-btn:hover{background:#f3f4f6;border-color:#3b82f6}.colorpicker-eyedropper-btn:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-eyedropper-btn:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-eyedropper-btn svg{width:20px;height:20px;display:block}.colorpicker-system-picker-btn{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:36px;height:36px;padding:8px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#1f2937;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;-ms-flex-negative:0;flex-shrink:0}.colorpicker-system-picker-btn:hover{background:#f3f4f6;border-color:#3b82f6}.colorpicker-system-picker-btn:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-system-picker-btn:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-system-picker-btn svg{width:20px;height:20px;display:block}.colorpicker-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding-top:4px}.colorpicker-presets.colorpicker-presets-list{grid-template-columns:1fr;gap:6px}.colorpicker-preset{width:100%;aspect-ratio:1;border:2px solid transparent;border-radius:4px;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;position:relative;overflow:hidden}@media (pointer:coarse){.colorpicker-preset{min-height:44px}}.colorpicker-preset::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;z-index:-1}.colorpicker-preset:hover{-webkit-transform:scale(1.15);transform:scale(1.15);border-color:#3b82f6;-webkit-box-shadow:0 2px 8px rgba(0,0,0,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.15)}@media (pointer:coarse){.colorpicker-preset:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}}.colorpicker-preset:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 2px rgba(59,130,246,0.3);box-shadow:0 0 0 2px rgba(59,130,246,0.3)}.colorpicker-preset:active{-webkit-transform:scale(.95);transform:scale(.95)}.colorpicker-preset-list-item{aspect-ratio:unset;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;padding:8px 12px;background:#f9fafb;min-height:48px}@media (pointer:coarse){.colorpicker-preset-list-item{min-height:56px;padding:12px}}.colorpicker-preset-list-item:hover{-webkit-transform:none;transform:none;background:#f3f4f6}.colorpicker-preset-list-item:focus{background:#f3f4f6}.colorpicker-preset-color{width:32px;height:32px;border-radius:6px;-ms-flex-negative:0;flex-shrink:0;position:relative}.colorpicker-preset-color::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;border-radius:6px;z-index:-1}.colorpicker-preset-label{font-size:14px;font-weight:500;color:#1f2937;text-align:left;-webkit-box-flex:1;-ms-flex:1;flex:1}.colorpicker-input-group{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;width:100%;max-width:400px;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff}.colorpicker-input-group:focus-within{border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-input-preview{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:48px;min-width:48px;border-right:2px solid #e5e7eb;position:relative;cursor:pointer;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.colorpicker-input-preview::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;z-index:-1}input.colorpicker-has-preview{border:none;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:10px 14px;font-size:15px;font-family:'Monaco','Menlo',monospace;background:transparent}input.colorpicker-has-preview:focus{outline:none;-webkit-box-shadow:none;box-shadow:none}.colorpicker-compact-button{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px;height:40px;padding:4px;border:2px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;-webkit-transition:all .2s ease;transition:all .2s ease;vertical-align:middle}.colorpicker-compact-button:hover{border-color:#3b82f6;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.1);box-shadow:0 2px 4px rgba(0,0,0,0.1);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.colorpicker-compact-button:active{-webkit-transform:translateY(0) scale(.98);transform:translateY(0) scale(.98)}.colorpicker-compact-button:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-compact-button svg{width:20px;height:20px;display:block;color:#1f2937}.colorpicker-compact-button:focus{outline:none;border-color:#3b82f6;-webkit-box-shadow:0 0 0 3px rgba(59,130,246,0.1);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.colorpicker-compact-button:active{-webkit-transform:translateY(0);transform:translateY(0)}@media (prefers-reduced-motion:reduce){.colorpicker-compact-button{-webkit-transition:none;transition:none}.colorpicker-compact-button:hover{-webkit-transform:none;transform:none}.colorpicker-compact-button:active{-webkit-transform:none;transform:none}}.colorpicker-compact-preview{display:block;width:100%;height:100%;border-radius:4px;border:1px solid rgba(0,0,0,0.1);position:relative;overflow:hidden}.colorpicker-compact-preview::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;z-index:-1}@media (prefers-color-scheme:dark){.colorpicker-container{background:#1f2937;border-color:#374151;color:#e5e7eb}.colorpicker-compact-button{background:#1f2937;border-color:#374151}.colorpicker-compact-button:hover{border-color:#60a5fa;-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.3);box-shadow:0 2px 4px rgba(0,0,0,0.3)}.colorpicker-compact-button:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-label{color:#9ca3af}.colorpicker-input{background:#111827;border-color:#374151;color:#f9fafb}.colorpicker-input:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-preview-color{border-color:#374151}.colorpicker-eyedropper-btn{background:#1f2937;border-color:#374151;color:#e5e7eb}.colorpicker-eyedropper-btn:hover{background:#111827;border-color:#60a5fa}.colorpicker-eyedropper-btn:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-system-picker-btn{background:#1f2937;border-color:#374151;color:#e5e7eb}.colorpicker-system-picker-btn:hover{background:#111827;border-color:#60a5fa}.colorpicker-system-picker-btn:focus{border-color:#60a5fa;-webkit-box-shadow:0 0 0 3px rgba(96,165,250,0.2);box-shadow:0 0 0 3px rgba(96,165,250,0.2)}.colorpicker-slider:focus{-webkit-box-shadow:0 0 0 2px #60a5fa;box-shadow:0 0 0 2px #60a5fa}.colorpicker-slider::-webkit-slider-thumb{border-color:#60a5fa}.colorpicker-slider::-moz-range-thumb{border-color:#60a5fa}.colorpicker-preset:hover{border-color:#60a5fa}.colorpicker-preset:focus{border-color:#60a5fa}.colorpicker-preset-list-item{background:#1f2937}.colorpicker-preset-list-item:hover{background:#111827;border-color:#374151}.colorpicker-preset-list-item:focus{background:#111827;border-color:#374151}.colorpicker-preset-label{color:#e5e7eb}.colorpicker-input-group{background:#1f2937;border-color:#374151}.colorpicker-input-group:focus-within{border-color:#60a5fa}.colorpicker-input-preview{border-right-color:#374151}input.colorpicker-has-preview{color:#f9fafb}input.colorpicker-has-preview:focus{-webkit-box-shadow:0 0 0 2px rgba(96,165,250,0.3);box-shadow:0 0 0 2px rgba(96,165,250,0.3)}}@media (prefers-contrast:high){.colorpicker-container{border-width:2px}.colorpicker-saturation{outline:2px solid currentColor}.colorpicker-saturation-pointer{border-width:4px}.colorpicker-preset{border-width:3px}}@media (prefers-reduced-motion:reduce){.colorpicker-slider::-webkit-slider-thumb{-webkit-transition:none;transition:none}.colorpicker-slider::-moz-range-thumb{-webkit-transition:none;transition:none}.colorpicker-preset{-webkit-transition:none;transition:none}.colorpicker-input{-webkit-transition:none;transition:none}.colorpicker-saturation-pointer{-webkit-transition:none;transition:none}}.colorpicker-container:not([style*="display: none"]){-webkit-animation:colorpicker-fadeIn .2s ease-out;animation:colorpicker-fadeIn .2s ease-out}@media (prefers-reduced-motion:reduce){.colorpicker-container:not([style*="display: none"]){-webkit-animation:none;animation:none}}@-webkit-keyframes colorpicker-fadeIn{from{opacity:0;-webkit-transform:translateY(-8px);transform:translateY(-8px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes colorpicker-fadeIn{from{opacity:0;-webkit-transform:translateY(-8px);transform:translateY(-8px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}

package/dist/colorpicker.min.js

@@ -1,2 +1,2 @@
-/* Pickit Color v1.0.2, @license Donationware */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).colorpicker={})}(this,(function(t){"use strict";function e(t,e,o,n){return new(o||(o=Promise))((function(r,i){function s(t){try{l(n.next(t))}catch(t){i(t)}}function a(t){try{l(n.throw(t))}catch(t){i(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,a)}l((n=n.apply(t,e||[])).next())}))}function o(t,e){var o,n,r,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(o)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(i=0)),i;)try{if(o=1,n&&(r=2&a[0]?n.return:a[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;switch(n=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(r=i.trys,(r=r.length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(6===a[0]&&i.label<r[1]){i.label=r[1],r=a;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(a);break}r[2]&&i.ops.pop(),i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t],n=0}finally{o=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}"function"==typeof SuppressedError&&SuppressedError;var n=function(){function t(e,o){var n,r,i,s,a,l,c,p,u,h,d,v,f,y;if(void 0===o&&(o={}),this.container=null,this.colorBox=null,this.hueSlider=null,this.saturationSlider=null,this.lightnessSlider=null,this.alphaSlider=null,this.hexInput=null,this.currentColor={h:0,s:100,l:50,a:1},this.isOpen=!1,this.saturationPointer=null,this.compactButton=null,this.inputPreview=null,this.announceTimeout=null,this.input="string"==typeof e?document.querySelector(e):e,!this.input)throw new Error("ColorPicker: Invalid element selector");var b=this.input.getAttribute("data-preset-colors"),g=b?b.split(",").map((function(t){return t.trim()})):null;this.options={defaultColor:o.defaultColor||"#3b82f6",format:o.format||"hex",showAlpha:null!==(n=o.showAlpha)&&void 0!==n&&n,sliderMode:null!==(r=o.sliderMode)&&void 0!==r&&r,eyeDropper:null!==(i=o.eyeDropper)&&void 0!==i&&i,presetColors:o.presetColors||g||["#ef4444","#f59e0b","#10b981","#3b82f6","#8b5cf6","#ec4899","#000000","#ffffff"],presetLabels:o.presetLabels||[],presetsOnly:null!==(s=o.presetsOnly)&&void 0!==s&&s,listView:null!==(a=o.listView)&&void 0!==a&&a,inline:null!==(l=o.inline)&&void 0!==l&&l,compact:null!==(c=o.compact)&&void 0!==c&&c,inputPreview:null!==(p=o.inputPreview)&&void 0!==p&&p,onChange:o.onChange||function(){},onOpen:o.onOpen||function(){},onClose:o.onClose||function(){},appendTo:o.appendTo||document.body,position:o.position||"auto",closeOnSelect:null===(u=o.closeOnSelect)||void 0===u||u,ariaLabels:{hue:(null===(h=o.ariaLabels)||void 0===h?void 0:h.hue)||"Hue",saturation:(null===(d=o.ariaLabels)||void 0===d?void 0:d.saturation)||"Saturation and Lightness",lightness:(null===(v=o.ariaLabels)||void 0===v?void 0:v.lightness)||"Lightness",alpha:(null===(f=o.ariaLabels)||void 0===f?void 0:f.alpha)||"Alpha",presets:(null===(y=o.ariaLabels)||void 0===y?void 0:y.presets)||"Preset colors"}},this.init(),t.instances.set(this.input,this)}return t.prototype.init=function(){var t=this.input.value||this.options.defaultColor;this.currentColor=this.parseColor(t),this.options.compact&&this.createCompactButton(),this.options.inputPreview&&!this.options.compact&&this.createInputPreview(),this.buildColorPicker(),this.setupEventListeners(),this.updateColorDisplay(),this.options.inline&&this.open()},t.prototype.buildColorPicker=function(){var t,e=this;this.container=document.createElement("div"),this.container.className="colorpicker-container",this.options.presetsOnly&&this.container.classList.add("colorpicker-presets-only"),this.options.inline&&this.container.classList.add("colorpicker-inline"),this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-label","Color picker"),this.container.style.display="none";var o='\n      <div class="colorpicker-content">\n        '.concat(this.options.presetsOnly?"":"\n        ".concat(this.options.sliderMode?"":'\n        <div class="colorpicker-saturation" \n             role="slider" \n             aria-label="'.concat(this.options.ariaLabels.saturation,'"\n             aria-valuemin="0"\n             aria-valuemax="100"\n             aria-valuenow="').concat(this.currentColor.s,'"\n             tabindex="0">\n          <div class="colorpicker-saturation-overlay"></div>\n          <div class="colorpicker-saturation-pointer" role="presentation"></div>\n        </div>\n        '),'\n        \n        <div class="colorpicker-controls">\n          <div class="colorpicker-sliders').concat(this.options.sliderMode?" colorpicker-sliders-only":"",'">\n            <div class="colorpicker-slider-group">\n              <label for="colorpicker-hue">\n                <span class="colorpicker-label">').concat(this.options.ariaLabels.hue,'</span>\n              </label>\n              <input \n                type="range" \n                id="colorpicker-hue"\n                class="colorpicker-slider colorpicker-hue-slider"\n                min="0" \n                max="360" \n                value="').concat(this.currentColor.h,'"\n                aria-label="').concat(this.options.ariaLabels.hue,'"\n                tabindex="0"\n              />\n            </div>\n            ').concat(this.options.sliderMode?'\n            <div class="colorpicker-slider-group">\n              <label for="colorpicker-saturation">\n                <span class="colorpicker-label">'.concat(this.options.ariaLabels.saturation,'</span>\n              </label>\n              <input \n                type="range" \n                id="colorpicker-saturation"\n                class="colorpicker-slider colorpicker-saturation-slider"\n                min="0" \n                max="100" \n                value="').concat(this.currentColor.s,'"\n                aria-label="').concat(this.options.ariaLabels.saturation,'"\n                tabindex="0"\n              />\n            </div>\n            <div class="colorpicker-slider-group">\n              <label for="colorpicker-lightness">\n                <span class="colorpicker-label">').concat(this.options.ariaLabels.lightness,'</span>\n              </label>\n              <input \n                type="range" \n                id="colorpicker-lightness"\n                class="colorpicker-slider colorpicker-lightness-slider"\n                min="0" \n                max="100" \n                value="').concat(this.currentColor.l,'"\n                aria-label="').concat(this.options.ariaLabels.lightness,'"\n                tabindex="0"\n              />\n            </div>\n            '):"","\n            ").concat(this.options.showAlpha?'\n              <div class="colorpicker-slider-group">\n                <label for="colorpicker-alpha">\n                  <span class="colorpicker-label">'.concat(this.options.ariaLabels.alpha,'</span>\n                </label>\n                <input \n                  type="range" \n                  id="colorpicker-alpha"\n                  class="colorpicker-slider colorpicker-alpha-slider"\n                  min="0" \n                  max="100" \n                  value="').concat(100*this.currentColor.a,'"\n                  aria-label="').concat(this.options.ariaLabels.alpha,'"\n                  tabindex="0"\n                />\n              </div>\n            '):"",'\n          </div>\n          \n          <div class="colorpicker-preview">\n            <div class="colorpicker-preview-color" role="presentation"></div>\n          </div>\n        </div>\n        \n        <div class="colorpicker-input-wrapper">\n          <label for="colorpicker-hex">\n            <span class="colorpicker-sr-only">Color value</span>\n          </label>\n          <div class="colorpicker-input-row">\n            <input \n              type="text" \n              id="colorpicker-hex"\n              class="colorpicker-input"\n              placeholder="').concat(this.getPlaceholder(),'"\n              aria-label="Color value in ').concat(this.options.format,' format"\n            />\n            ').concat(this.options.eyeDropper?"\n            ".concat(this.supportsEyeDropper()?'\n            <button \n              type="button"\n              class="colorpicker-eyedropper-btn"\n              aria-label="Pick color from screen"\n              title="Pick color from screen"\n            >\n              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n                <path d="M2 22l1-1"/>\n                <path d="M8.5 16.5l-1-1"/>\n                <path d="M17 3l4 4"/>\n                <path d="M12 8l4 4"/>\n                <path d="M3 21l9-9"/>\n                <path d="M14.5 9.5l-1 1"/>\n                <path d="M20 14l-8 8"/>\n              </svg>\n            </button>\n            ':"",'\n            <button \n              type="button"\n              class="colorpicker-system-picker-btn"\n              aria-label="Open system color picker"\n              title="Open system color picker"\n            >\n              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n                <circle cx="12" cy="12" r="10"/>\n                <path d="M12 2v20"/>\n                <path d="M2 12h20"/>\n                <circle cx="12" cy="12" r="3"/>\n              </svg>\n            </button>\n            <input \n              type="color"\n              class="colorpicker-system-picker-input"\n              style="position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;"\n            />\n            '):"","\n          </div>\n        </div>\n        "),"\n        \n        ").concat(this.options.presetColors.length>0?'\n          <div class="colorpicker-presets'.concat(this.options.listView?" colorpicker-presets-list":"",'" role="group" aria-label="').concat(this.options.ariaLabels.presets,'">\n            ').concat(this.options.presetColors.map((function(t,o){var n=e.options.presetLabels[o]||"";return e.options.listView&&n?'\n              <button \n                type="button"\n                class="colorpicker-preset colorpicker-preset-list-item" \n                data-color="'.concat(t,'"\n                aria-label="Select color ').concat(n,'"\n                tabindex="').concat(0===o?"0":"-1",'"\n              >\n                <span class="colorpicker-preset-color" style="background-color: ').concat(t,'"></span>\n                <span class="colorpicker-preset-label">').concat(n,"</span>\n              </button>\n            "):'\n              <button \n                type="button"\n                class="colorpicker-preset" \n                style="background-color: '.concat(t,'"\n                data-color="').concat(t,'"\n                aria-label="Select color ').concat(n||t,'"\n                tabindex="').concat(0===o?"0":"-1",'"\n              ></button>\n            ')})).join(""),"\n          </div>\n        "):"","\n      </div>\n    ");this.container.innerHTML=o,this.colorBox=this.container.querySelector(".colorpicker-saturation"),this.saturationPointer=this.container.querySelector(".colorpicker-saturation-pointer"),this.hueSlider=this.container.querySelector(".colorpicker-hue-slider"),this.saturationSlider=this.container.querySelector(".colorpicker-saturation-slider"),this.lightnessSlider=this.container.querySelector(".colorpicker-lightness-slider"),this.alphaSlider=this.container.querySelector(".colorpicker-alpha-slider"),this.hexInput=this.container.querySelector(".colorpicker-input"),this.options.inline?(null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.container,this.input.nextSibling),this.input.style.display="none"):this.options.appendTo.appendChild(this.container)},t.prototype.createCompactButton=function(){var t,e=this;this.input.style.position="absolute",this.input.style.opacity="0",this.input.style.pointerEvents="none",this.input.style.width="0",this.input.style.height="0",this.compactButton=document.createElement("button"),this.compactButton.type="button",this.compactButton.className="colorpicker-compact-button",this.compactButton.setAttribute("aria-label","Select color"),this.compactButton.tabIndex=0;var o=document.createElement("span");o.className="colorpicker-compact-preview",o.style.backgroundColor=this.input.value||this.options.defaultColor,this.compactButton.appendChild(o),null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.compactButton,this.input.nextSibling),this.compactButton.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),e.toggle()})),this.compactButton.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),e.toggle())}))},t.prototype.createInputPreview=function(){var t,e=document.createElement("div");e.className="colorpicker-input-group",this.inputPreview=document.createElement("span"),this.inputPreview.className="colorpicker-input-preview",this.inputPreview.style.backgroundColor=this.input.value||this.options.defaultColor,null===(t=this.input.parentNode)||void 0===t||t.insertBefore(e,this.input),e.appendChild(this.inputPreview),e.appendChild(this.input),this.input.classList.add("colorpicker-has-preview")},t.prototype.supportsEyeDropper=function(){return"undefined"!=typeof window&&"EyeDropper"in window},t.prototype.openEyeDropper=function(){return e(this,void 0,Promise,(function(){var t,e;return o(this,(function(o){switch(o.label){case 0:if(!this.supportsEyeDropper())return[2];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,(new EyeDropper).open()];case 2:return(t=o.sent()).sRGBHex&&(this.currentColor=this.parseColor(t.sRGBHex),this.input.value=t.sRGBHex,this.updateColorDisplay(),this.options.onChange(t.sRGBHex)),[3,4];case 3:return"AbortError"!==(e=o.sent()).name&&console.error("EyeDropper error:",e),[3,4];case 4:return[2]}}))}))},t.prototype.setupEventListeners=function(){var t,n,r,i,s=this;this.options.compact||(this.input.addEventListener("click",(function(){s.options.inline||s.toggle()})),this.input.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||s.options.inline||(t.preventDefault(),s.toggle())}))),this.input.addEventListener("change",(function(){s.currentColor=s.parseColor(s.input.value),s.updateColorDisplay()})),this.hueSlider&&this.hueSlider.addEventListener("input",(function(t){s.currentColor.h=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.saturationSlider&&this.saturationSlider.addEventListener("input",(function(t){s.currentColor.s=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.lightnessSlider&&this.lightnessSlider.addEventListener("input",(function(t){s.currentColor.l=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.alphaSlider&&this.alphaSlider.addEventListener("input",(function(t){s.currentColor.a=parseInt(t.target.value)/100,s.updateColorDisplay(),s.announceColorChange()})),this.colorBox&&(this.colorBox.addEventListener("mousedown",(function(t){return s.onSaturationMouseDown(t)})),this.colorBox.addEventListener("keydown",(function(t){return s.onSaturationKeyDown(t)}))),this.hexInput&&this.hexInput.addEventListener("input",(function(t){var e=t.target.value.trim();s.isValidColor(e)&&(s.currentColor=s.parseColor(e),s.updateColorDisplay(!1))}));var a=null===(t=this.container)||void 0===t?void 0:t.querySelectorAll(".colorpicker-preset");a&&a.length>0&&a.forEach((function(t,e){t.addEventListener("click",(function(t){var e=t.currentTarget.dataset.color;s.currentColor=s.parseColor(e),s.updateColorDisplay(),s.options.closeOnSelect&&s.close()})),t.addEventListener("keydown",(function(t){var o=t.key,n=!1,r=e;switch(o){case"ArrowRight":case"ArrowDown":r=Math.min(a.length-1,e+1),n=!0;break;case"ArrowLeft":case"ArrowUp":r=Math.max(0,e-1),n=!0;break;case"Home":r=0,n=!0;break;case"End":r=a.length-1,n=!0;break;case"Enter":case" ":var i=t.currentTarget.dataset.color;s.currentColor=s.parseColor(i),s.updateColorDisplay(),s.options.closeOnSelect&&s.close(),n=!0}n&&(t.preventDefault(),r!==e&&(a.forEach((function(t,e){t.setAttribute("tabindex",e===r?"0":"-1")})),a[r].focus()))}))}));var l=null===(n=this.container)||void 0===n?void 0:n.querySelector(".colorpicker-eyedropper-btn");l&&l.addEventListener("click",(function(t){return e(s,void 0,void 0,(function(){return o(this,(function(e){switch(e.label){case 0:return t.preventDefault(),t.stopPropagation(),[4,this.openEyeDropper()];case 1:return e.sent(),[2]}}))}))}));var c=null===(r=this.container)||void 0===r?void 0:r.querySelector(".colorpicker-system-picker-btn"),p=null===(i=this.container)||void 0===i?void 0:i.querySelector(".colorpicker-system-picker-input");c&&p&&(p.value=this.formatColor(this.currentColor).substring(0,7),c.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),p.click()})),p.addEventListener("change",(function(){var t=p.value;s.currentColor=s.parseColor(t),s.input.value=t,s.updateColorDisplay(),s.options.onChange(t)}))),this.options.inline||document.addEventListener("mousedown",(function(t){var e;s.isOpen&&!(null===(e=s.container)||void 0===e?void 0:e.contains(t.target))&&t.target!==s.input&&s.close()})),document.addEventListener("keydown",(function(t){"Escape"===t.key&&s.isOpen&&!s.options.inline&&(s.close(),s.input.focus())}))},t.prototype.onSaturationMouseDown=function(t){var e=this;t.preventDefault(),this.updateSaturationFromMouse(t);var o=function(t){e.updateSaturationFromMouse(t)},n=function(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)},t.prototype.updateSaturationFromMouse=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.onSaturationKeyDown=function(t){var e=t.shiftKey?10:1,o=!1;switch(t.key){case"ArrowRight":this.currentColor.s=Math.min(100,this.currentColor.s+e),o=!0;break;case"ArrowLeft":this.currentColor.s=Math.max(0,this.currentColor.s-e),o=!0;break;case"ArrowUp":this.currentColor.l=Math.min(100,this.currentColor.l+e),o=!0;break;case"ArrowDown":this.currentColor.l=Math.max(0,this.currentColor.l-e),o=!0}o&&(t.preventDefault(),this.updateColorDisplay(),this.announceColorChange())},t.prototype.updateColorDisplay=function(t){var e;if(void 0===t&&(t=!0),this.colorBox&&(this.colorBox.style.backgroundColor="hsl(".concat(this.currentColor.h,", 100%, 50%)")),this.saturationPointer&&this.colorBox){var o=this.currentColor.s/100*100,n=100*(1-this.currentColor.l/100);this.saturationPointer.style.left="".concat(o,"%"),this.saturationPointer.style.top="".concat(n,"%")}this.saturationSlider&&(this.saturationSlider.style.background="linear-gradient(to right, hsl(".concat(this.currentColor.h,", 0%, 50%), hsl(").concat(this.currentColor.h,", 100%, 50%))")),this.lightnessSlider&&(this.lightnessSlider.style.background="linear-gradient(to right, hsl(".concat(this.currentColor.h,", ").concat(this.currentColor.s,"%, 0%), hsl(").concat(this.currentColor.h,", ").concat(this.currentColor.s,"%, 50%), hsl(").concat(this.currentColor.h,", ").concat(this.currentColor.s,"%, 100%))"));var r=null===(e=this.container)||void 0===e?void 0:e.querySelector(".colorpicker-preview-color");if(r&&(r.style.backgroundColor=this.toHSLString(this.currentColor)),this.hexInput&&t&&(this.hexInput.value=this.formatColor(this.currentColor)),this.hueSlider&&(this.hueSlider.value=String(this.currentColor.h)),this.saturationSlider&&(this.saturationSlider.value=String(this.currentColor.s)),this.lightnessSlider&&(this.lightnessSlider.value=String(this.currentColor.l)),this.alphaSlider&&(this.alphaSlider.value=String(100*this.currentColor.a)),t){if(this.input.value=this.formatColor(this.currentColor),this.options.onChange(this.input.value),this.compactButton){var i=this.compactButton.querySelector(".colorpicker-compact-preview");i&&(i.style.backgroundColor=this.toHSLString(this.currentColor))}this.inputPreview&&(this.inputPreview.style.backgroundColor=this.toHSLString(this.currentColor))}},t.prototype.formatColor=function(t){switch(this.options.format){case"hsl":return this.toHSLString(t);case"rgb":return this.toRGBString(this.hslToRgb(t));case"hex":default:return this.toHex(t)}},t.prototype.getPlaceholder=function(){switch(this.options.format){case"hsl":return this.options.showAlpha?"hsla(0, 0%, 0%, 1)":"hsl(0, 0%, 0%)";case"rgb":return this.options.showAlpha?"rgba(0, 0, 0, 1)":"rgb(0, 0, 0)";case"hex":default:return"#000000"}},t.prototype.parseColor=function(t){if((t=t.trim()).startsWith("#"))return this.hexToHsl(t);var e=t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){var o={r:parseInt(e[1]),g:parseInt(e[2]),b:parseInt(e[3]),a:e[4]?parseFloat(e[4]):1};return this.rgbToHsl(o)}var n=t.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/);return n?{h:parseInt(n[1]),s:parseInt(n[2]),l:parseInt(n[3]),a:n[4]?parseFloat(n[4]):1}:this.currentColor},t.prototype.hexToHsl=function(t){t=t.replace("#","");var e=parseInt(t.substring(0,2),16)/255,o=parseInt(t.substring(2,4),16)/255,n=parseInt(t.substring(4,6),16)/255,r=8===t.length?parseInt(t.substring(6,8),16)/255:1;return this.rgbToHsl({r:255*e,g:255*o,b:255*n,a:r})},t.prototype.rgbToHsl=function(t){var e=t.r/255,o=t.g/255,n=t.b/255,r=Math.max(e,o,n),i=Math.min(e,o,n),s=0,a=0,l=(r+i)/2;if(r!==i){var c=r-i;switch(a=l>.5?c/(2-r-i):c/(r+i),r){case e:s=((o-n)/c+(o<n?6:0))/6;break;case o:s=((n-e)/c+2)/6;break;case n:s=((e-o)/c+4)/6}}return{h:Math.round(360*s),s:Math.round(100*a),l:Math.round(100*l),a:t.a}},t.prototype.hslToRgb=function(t){var e,o,n,r=t.h/360,i=t.s/100,s=t.l/100;if(0===i)e=o=n=s;else{var a=function(t,e,o){return o<0&&(o+=1),o>1&&(o-=1),o<1/6?t+6*(e-t)*o:o<.5?e:o<2/3?t+(e-t)*(2/3-o)*6:t},l=s<.5?s*(1+i):s+i-s*i,c=2*s-l;e=a(c,l,r+1/3),o=a(c,l,r),n=a(c,l,r-1/3)}return{r:Math.round(255*e),g:Math.round(255*o),b:Math.round(255*n),a:t.a}},t.prototype.toHex=function(t){var e=this.hslToRgb(t),o=function(t){return t.toString(16).padStart(2,"0")};if(this.options.showAlpha&&t.a<1){var n=Math.round(255*t.a);return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b)).concat(o(n))}return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b))},t.prototype.toHSLString=function(t){return this.options.showAlpha&&t.a<1?"hsla(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%, ").concat(t.a,")"):"hsl(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%)")},t.prototype.toRGBString=function(t){return this.options.showAlpha&&t.a<1?"rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", ").concat(t.a,")"):"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")")},t.prototype.isValidHex=function(t){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)},t.prototype.isValidColor=function(t){return!!this.isValidHex(t)||(!!/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(t)||!!/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(t))},t.prototype.announceColorChange=function(){var t=this;this.announceTimeout||(this.announceTimeout=setTimeout((function(){var e,o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.className="colorpicker-sr-only",o.textContent="Color changed to ".concat(t.formatColor(t.currentColor)),null===(e=t.container)||void 0===e||e.appendChild(o),setTimeout((function(){return o.remove()}),1e3),t.announceTimeout=null}),500))},t.prototype.open=function(){var t=this;!this.isOpen&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.inline||this.positionPicker(),this.options.onOpen(),setTimeout((function(){var e,o=null;(o=t.options.presetsOnly?null===(e=t.container)||void 0===e?void 0:e.querySelector(".colorpicker-preset"):t.options.sliderMode?t.hueSlider:t.colorBox)&&o.focus()}),0))},t.prototype.close=function(){this.isOpen&&this.container&&(this.isOpen=!1,this.options.inline||(this.container.style.display="none"),this.options.onClose())},t.prototype.toggle=function(){this.isOpen?this.close():this.open()},t.prototype.positionPicker=function(){if(this.container){var t=this.input.getBoundingClientRect(),e=this.container.getBoundingClientRect(),o=window.innerHeight,n=t.bottom+window.scrollY+4,r=t.left+window.scrollX;if("auto"===this.options.position){var i=o-t.bottom,s=t.top;i<e.height&&s>i&&(n=t.top+window.scrollY-e.height-4)}else"above"===this.options.position&&(n=t.top+window.scrollY-e.height-4);this.container.style.position="absolute",this.container.style.top="".concat(n,"px"),this.container.style.left="".concat(r,"px"),this.container.style.zIndex="9999"}},t.prototype.setColor=function(t){this.currentColor=this.parseColor(t),this.updateColorDisplay()},t.prototype.getColor=function(){return this.formatColor(this.currentColor)},t.prototype.destroy=function(){var e,o,n;if(null===(e=this.container)||void 0===e||e.remove(),null===(o=this.compactButton)||void 0===o||o.remove(),this.options.compact&&this.input&&(this.input.style.position="",this.input.style.opacity="",this.input.style.pointerEvents="",this.input.style.width="",this.input.style.height=""),this.options.inputPreview&&this.input){this.input.classList.remove("colorpicker-has-preview");var r=this.input.parentElement;r&&r.classList.contains("colorpicker-input-group")&&(null===(n=r.parentNode)||void 0===n||n.insertBefore(this.input,r),r.remove())}t.instances.delete(this.input)},t.getInstance=function(e){return t.instances.get(e)},t.instances=new Map,t}();function r(t){void 0===t&&(t=document);var e=[];return t.querySelectorAll('[data-colorpicker], .colorpicker, input[type="color"][data-format]').forEach((function(t){if(!n.getInstance(t)){var o=t.dataset,r={};if(o.colorpicker)o.colorpicker.split(/[,;]/).forEach((function(t){var e=t.split(":").map((function(t){return t.trim()})),o=e[0],n=e[1];switch(o){case"format":"hex"!==n&&"rgb"!==n&&"hsl"!==n||(r.format=n);break;case"alpha":case"showAlpha":r.showAlpha="true"===n||"1"===n;break;case"compact":r.compact="true"===n||"1"===n;break;case"inline":r.inline="true"===n||"1"===n;break;case"presets":r.presetsOnly="true"===n||"1"===n;break;case"list":r.listView="true"===n||"1"===n;break;case"sliderMode":r.sliderMode="true"===n||"1"===n;break;case"eyeDropper":r.eyeDropper="true"===n||"1"===n;break;case"inputPreview":r.inputPreview="true"===n||"1"===n}}));!o.format||"hex"!==o.format&&"rgb"!==o.format&&"hsl"!==o.format||(r.format=o.format),void 0!==o.alpha&&(r.showAlpha="true"===o.alpha||"1"===o.alpha),void 0!==o.compact&&(r.compact="true"===o.compact||"1"===o.compact),void 0!==o.inline&&(r.inline="true"===o.inline||"1"===o.inline),void 0!==o.presetsOnly&&(r.presetsOnly="true"===o.presetsOnly||"1"===o.presetsOnly),void 0!==o.listView&&(r.listView="true"===o.listView||"1"===o.listView),o.defaultColor&&(r.defaultColor=o.defaultColor);var i=new n(t,r);e.push(i)}})),e}"undefined"!=typeof window&&"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(function(){return r()})):r()),t.ColorPicker=n,t.default=function(t,e){return new n(t,e)},t.initColorPickers=r,Object.defineProperty(t,"__esModule",{value:!0})}));
+/* Pickit Color v1.1.0, @license Donationware */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).colorpicker={})}(this,(function(t){"use strict";function e(t,e,o,n){return new(o||(o=Promise))((function(r,i){function s(t){try{l(n.next(t))}catch(t){i(t)}}function a(t){try{l(n.throw(t))}catch(t){i(t)}}function l(t){var e;t.done?r(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,a)}l((n=n.apply(t,e||[])).next())}))}function o(t,e){var o,n,r,i={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},s=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return s.next=a(0),s.throw=a(1),s.return=a(2),"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(a){return function(l){return function(a){if(o)throw new TypeError("Generator is already executing.");for(;s&&(s=0,a[0]&&(i=0)),i;)try{if(o=1,n&&(r=2&a[0]?n.return:a[0]?n.throw||((r=n.return)&&r.call(n),0):n.next)&&!(r=r.call(n,a[1])).done)return r;switch(n=0,r&&(a=[2&a[0],r.value]),a[0]){case 0:case 1:r=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(r=i.trys,(r=r.length>0&&r[r.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!r||a[1]>r[0]&&a[1]<r[3])){i.label=a[1];break}if(6===a[0]&&i.label<r[1]){i.label=r[1],r=a;break}if(r&&i.label<r[2]){i.label=r[2],i.ops.push(a);break}r[2]&&i.ops.pop(),i.trys.pop();continue}a=e.call(t,i)}catch(t){a=[6,t],n=0}finally{o=r=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,l])}}}"function"==typeof SuppressedError&&SuppressedError;var n=function(){function t(e,o){var n,r,i,s,a,l,c,p,u,h,d,v,f,y;if(void 0===o&&(o={}),this.container=null,this.colorBox=null,this.hueSlider=null,this.saturationSlider=null,this.lightnessSlider=null,this.alphaSlider=null,this.hexInput=null,this.currentColor={h:0,s:100,l:50,a:1},this.isOpen=!1,this.saturationPointer=null,this.compactButton=null,this.inputPreview=null,this.announceTimeout=null,this.input="string"==typeof e?document.querySelector(e):e,!this.input)throw new Error("ColorPicker: Invalid element selector");var g=this.input.getAttribute("data-preset-colors"),b=g?g.split(",").map((function(t){return t.trim()})):null;this.options={defaultColor:o.defaultColor||"#3b82f6",format:o.format||"hex",showAlpha:null!==(n=o.showAlpha)&&void 0!==n&&n,sliderMode:null!==(r=o.sliderMode)&&void 0!==r&&r,eyeDropper:null!==(i=o.eyeDropper)&&void 0!==i&&i,presetColors:o.presetColors||b||["#ef4444","#f59e0b","#10b981","#3b82f6","#8b5cf6","#ec4899","#000000","#ffffff"],presetLabels:o.presetLabels||[],presetsOnly:null!==(s=o.presetsOnly)&&void 0!==s&&s,listView:null!==(a=o.listView)&&void 0!==a&&a,inline:null!==(l=o.inline)&&void 0!==l&&l,compact:null!==(c=o.compact)&&void 0!==c&&c,inputPreview:null!==(p=o.inputPreview)&&void 0!==p&&p,previewTarget:o.previewTarget||"",previewProperty:o.previewProperty||"background-color",onChange:o.onChange||function(){},onOpen:o.onOpen||function(){},onClose:o.onClose||function(){},appendTo:o.appendTo||document.body,position:o.position||"auto",closeOnSelect:null===(u=o.closeOnSelect)||void 0===u||u,ariaLabels:{hue:(null===(h=o.ariaLabels)||void 0===h?void 0:h.hue)||"Hue",saturation:(null===(d=o.ariaLabels)||void 0===d?void 0:d.saturation)||"Saturation and Lightness",lightness:(null===(v=o.ariaLabels)||void 0===v?void 0:v.lightness)||"Lightness",alpha:(null===(f=o.ariaLabels)||void 0===f?void 0:f.alpha)||"Alpha",presets:(null===(y=o.ariaLabels)||void 0===y?void 0:y.presets)||"Preset colors"}},this.init(),t.instances.set(this.input,this)}return t.prototype.init=function(){var t=this.input.value||this.options.defaultColor;this.currentColor=this.parseColor(t),this.options.compact&&this.createCompactButton(),this.options.inputPreview&&!this.options.compact&&this.createInputPreview(),this.buildColorPicker(),this.setupEventListeners(),this.updateColorDisplay(),this.options.inline&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.onOpen())},t.prototype.buildColorPicker=function(){var t,e=this;this.container=document.createElement("div"),this.container.className="colorpicker-container",this.options.presetsOnly&&this.container.classList.add("colorpicker-presets-only"),this.options.inline&&this.container.classList.add("colorpicker-inline"),this.container.setAttribute("role","dialog"),this.container.setAttribute("aria-label","Color picker"),this.container.style.display="none";var o='\n      <div class="colorpicker-content">\n        '.concat(this.options.presetsOnly?"":"\n        ".concat(this.options.sliderMode?"":'\n        <div class="colorpicker-saturation" \n             role="slider" \n             aria-label="'.concat(this.options.ariaLabels.saturation,'"\n             aria-valuemin="0"\n             aria-valuemax="100"\n             aria-valuenow="').concat(this.currentColor.s,'"\n             tabindex="0">\n          <div class="colorpicker-saturation-overlay"></div>\n          <div class="colorpicker-saturation-pointer" role="presentation"></div>\n        </div>\n        '),'\n        \n        <div class="colorpicker-controls">\n          <div class="colorpicker-sliders').concat(this.options.sliderMode?" colorpicker-sliders-only":"",'">\n            <div class="colorpicker-slider-group">\n              <label for="colorpicker-hue">\n                <span class="colorpicker-label">').concat(this.options.ariaLabels.hue,'</span>\n              </label>\n              <input \n                type="range" \n                id="colorpicker-hue"\n                class="colorpicker-slider colorpicker-hue-slider"\n                min="0" \n                max="360" \n                value="').concat(this.currentColor.h,'"\n                aria-label="').concat(this.options.ariaLabels.hue,'"\n                tabindex="0"\n              />\n            </div>\n            ').concat(this.options.sliderMode?'\n            <div class="colorpicker-slider-group">\n              <label for="colorpicker-saturation">\n                <span class="colorpicker-label">'.concat(this.options.ariaLabels.saturation,'</span>\n              </label>\n              <input \n                type="range" \n                id="colorpicker-saturation"\n                class="colorpicker-slider colorpicker-saturation-slider"\n                min="0" \n                max="100" \n                value="').concat(this.currentColor.s,'"\n                aria-label="').concat(this.options.ariaLabels.saturation,'"\n                tabindex="0"\n              />\n            </div>\n            <div class="colorpicker-slider-group">\n              <label for="colorpicker-lightness">\n                <span class="colorpicker-label">').concat(this.options.ariaLabels.lightness,'</span>\n              </label>\n              <input \n                type="range" \n                id="colorpicker-lightness"\n                class="colorpicker-slider colorpicker-lightness-slider"\n                min="0" \n                max="100" \n                value="').concat(this.currentColor.l,'"\n                aria-label="').concat(this.options.ariaLabels.lightness,'"\n                tabindex="0"\n              />\n            </div>\n            '):"","\n            ").concat(this.options.showAlpha?'\n              <div class="colorpicker-slider-group">\n                <label for="colorpicker-alpha">\n                  <span class="colorpicker-label">'.concat(this.options.ariaLabels.alpha,'</span>\n                </label>\n                <input \n                  type="range" \n                  id="colorpicker-alpha"\n                  class="colorpicker-slider colorpicker-alpha-slider"\n                  min="0" \n                  max="100" \n                  value="').concat(100*this.currentColor.a,'"\n                  aria-label="').concat(this.options.ariaLabels.alpha,'"\n                  tabindex="0"\n                />\n              </div>\n            '):"",'\n          </div>\n          \n          <div class="colorpicker-preview">\n            <div class="colorpicker-preview-color" role="presentation"></div>\n          </div>\n        </div>\n        \n        <div class="colorpicker-input-wrapper">\n          <label for="colorpicker-hex">\n            <span class="colorpicker-sr-only">Color value</span>\n          </label>\n          <div class="colorpicker-input-row">\n            <input \n              type="text" \n              id="colorpicker-hex"\n              class="colorpicker-input"\n              placeholder="').concat(this.getPlaceholder(),'"\n              aria-label="Color value in ').concat(this.options.format,' format"\n            />\n            ').concat(this.options.eyeDropper?"\n            ".concat(this.supportsEyeDropper()?'\n            <button \n              type="button"\n              class="colorpicker-eyedropper-btn"\n              aria-label="Pick color from screen"\n              title="Pick color from screen"\n            >\n              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n                <path d="M2 22l1-1"/>\n                <path d="M8.5 16.5l-1-1"/>\n                <path d="M17 3l4 4"/>\n                <path d="M12 8l4 4"/>\n                <path d="M3 21l9-9"/>\n                <path d="M14.5 9.5l-1 1"/>\n                <path d="M20 14l-8 8"/>\n              </svg>\n            </button>\n            ':"",'\n            <button \n              type="button"\n              class="colorpicker-system-picker-btn"\n              aria-label="Open system color picker"\n              title="Open system color picker"\n            >\n              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">\n                <circle cx="12" cy="12" r="10"/>\n                <path d="M12 2v20"/>\n                <path d="M2 12h20"/>\n                <circle cx="12" cy="12" r="3"/>\n              </svg>\n            </button>\n            <input \n              type="color"\n              class="colorpicker-system-picker-input"\n              style="position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0;"\n            />\n            '):"","\n          </div>\n        </div>\n        "),"\n        \n        ").concat(this.options.presetColors.length>0?'\n          <div class="colorpicker-presets'.concat(this.options.listView?" colorpicker-presets-list":"",'" role="group" aria-label="').concat(this.options.ariaLabels.presets,'">\n            ').concat(this.options.presetColors.map((function(t,o){var n=e.options.presetLabels[o]||"";return e.options.listView&&n?'\n              <button \n                type="button"\n                class="colorpicker-preset colorpicker-preset-list-item" \n                data-color="'.concat(t,'"\n                aria-label="Select color ').concat(n,'"\n                tabindex="').concat(0===o?"0":"-1",'"\n              >\n                <span class="colorpicker-preset-color" style="background-color: ').concat(t,'"></span>\n                <span class="colorpicker-preset-label">').concat(n,"</span>\n              </button>\n            "):'\n              <button \n                type="button"\n                class="colorpicker-preset" \n                style="background-color: '.concat(t,'"\n                data-color="').concat(t,'"\n                aria-label="Select color ').concat(n||t,'"\n                tabindex="').concat(0===o?"0":"-1",'"\n              ></button>\n            ')})).join(""),"\n          </div>\n        "):"","\n      </div>\n    ");this.container.innerHTML=o,this.colorBox=this.container.querySelector(".colorpicker-saturation"),this.saturationPointer=this.container.querySelector(".colorpicker-saturation-pointer"),this.hueSlider=this.container.querySelector(".colorpicker-hue-slider"),this.saturationSlider=this.container.querySelector(".colorpicker-saturation-slider"),this.lightnessSlider=this.container.querySelector(".colorpicker-lightness-slider"),this.alphaSlider=this.container.querySelector(".colorpicker-alpha-slider"),this.hexInput=this.container.querySelector(".colorpicker-input"),this.options.inline?(null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.container,this.input.nextSibling),this.input.style.display="none"):this.options.appendTo.appendChild(this.container)},t.prototype.createCompactButton=function(){var t,e=this;this.input.style.position="absolute",this.input.style.opacity="0",this.input.style.pointerEvents="none",this.input.style.width="0",this.input.style.height="0",this.compactButton=document.createElement("button"),this.compactButton.type="button",this.compactButton.className="colorpicker-compact-button",this.compactButton.setAttribute("aria-label","Select color"),this.compactButton.tabIndex=0;var o=document.createElement("span");o.className="colorpicker-compact-preview",o.style.backgroundColor=this.input.value||this.options.defaultColor,this.compactButton.appendChild(o),null===(t=this.input.parentNode)||void 0===t||t.insertBefore(this.compactButton,this.input.nextSibling),this.compactButton.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),e.toggle()})),this.compactButton.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),t.stopPropagation(),e.toggle())}))},t.prototype.createInputPreview=function(){var t,e=document.createElement("div");e.className="colorpicker-input-group",this.inputPreview=document.createElement("span"),this.inputPreview.className="colorpicker-input-preview",this.inputPreview.style.backgroundColor=this.input.value||this.options.defaultColor,null===(t=this.input.parentNode)||void 0===t||t.insertBefore(e,this.input),e.appendChild(this.inputPreview),e.appendChild(this.input),this.input.classList.add("colorpicker-has-preview")},t.prototype.supportsEyeDropper=function(){return"undefined"!=typeof window&&"EyeDropper"in window},t.prototype.openEyeDropper=function(){return e(this,void 0,Promise,(function(){var t,e;return o(this,(function(o){switch(o.label){case 0:if(!this.supportsEyeDropper())return[2];o.label=1;case 1:return o.trys.push([1,3,,4]),[4,(new EyeDropper).open()];case 2:return(t=o.sent()).sRGBHex&&(this.currentColor=this.parseColor(t.sRGBHex),this.input.value=t.sRGBHex,this.updateColorDisplay(),this.options.onChange(t.sRGBHex)),[3,4];case 3:return"AbortError"!==(e=o.sent()).name&&console.error("EyeDropper error:",e),[3,4];case 4:return[2]}}))}))},t.prototype.setupEventListeners=function(){var t,n,r,i,s=this;this.options.compact||(this.input.addEventListener("click",(function(){s.options.inline||s.toggle()})),this.input.addEventListener("keydown",(function(t){"Enter"!==t.key&&" "!==t.key||s.options.inline||(t.preventDefault(),s.toggle())}))),this.input.addEventListener("change",(function(){s.currentColor=s.parseColor(s.input.value),s.updateColorDisplay()})),this.hueSlider&&(this.hueSlider.addEventListener("input",(function(t){s.currentColor.h=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.hueSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.hueSlider,"h",0,360)}))),this.saturationSlider&&(this.saturationSlider.addEventListener("input",(function(t){s.currentColor.s=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.saturationSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.saturationSlider,"s",0,100)}))),this.lightnessSlider&&(this.lightnessSlider.addEventListener("input",(function(t){s.currentColor.l=parseInt(t.target.value),s.updateColorDisplay(),s.announceColorChange()})),this.lightnessSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.lightnessSlider,"l",0,100)}))),this.alphaSlider&&(this.alphaSlider.addEventListener("input",(function(t){s.currentColor.a=parseInt(t.target.value)/100,s.updateColorDisplay(),s.announceColorChange()})),this.alphaSlider.addEventListener("touchstart",(function(t){s.handleSliderTouch(t,s.alphaSlider,"a",0,100,!0)}))),this.colorBox&&(this.colorBox.addEventListener("mousedown",(function(t){return s.onSaturationMouseDown(t)})),this.colorBox.addEventListener("touchstart",(function(t){return s.onSaturationTouchStart(t)})),this.colorBox.addEventListener("keydown",(function(t){return s.onSaturationKeyDown(t)}))),this.hexInput&&this.hexInput.addEventListener("input",(function(t){var e=t.target.value.trim();s.isValidColor(e)&&(s.currentColor=s.parseColor(e),s.updateColorDisplay(!1))}));var a=null===(t=this.container)||void 0===t?void 0:t.querySelectorAll(".colorpicker-preset");a&&a.length>0&&a.forEach((function(t,e){t.addEventListener("click",(function(t){var e=t.currentTarget.dataset.color;s.currentColor=s.parseColor(e),s.updateColorDisplay(),s.options.closeOnSelect&&s.close()})),t.addEventListener("keydown",(function(t){var o=t.key,n=!1,r=e;switch(o){case"ArrowRight":case"ArrowDown":r=Math.min(a.length-1,e+1),n=!0;break;case"ArrowLeft":case"ArrowUp":r=Math.max(0,e-1),n=!0;break;case"Home":r=0,n=!0;break;case"End":r=a.length-1,n=!0;break;case"Enter":case" ":var i=t.currentTarget.dataset.color;s.currentColor=s.parseColor(i),s.updateColorDisplay(),s.options.closeOnSelect&&s.close(),n=!0}n&&(t.preventDefault(),r!==e&&(a.forEach((function(t,e){t.setAttribute("tabindex",e===r?"0":"-1")})),a[r].focus()))}))}));var l=null===(n=this.container)||void 0===n?void 0:n.querySelector(".colorpicker-eyedropper-btn");l&&l.addEventListener("click",(function(t){return e(s,void 0,void 0,(function(){return o(this,(function(e){switch(e.label){case 0:return t.preventDefault(),t.stopPropagation(),[4,this.openEyeDropper()];case 1:return e.sent(),[2]}}))}))}));var c=null===(r=this.container)||void 0===r?void 0:r.querySelector(".colorpicker-system-picker-btn"),p=null===(i=this.container)||void 0===i?void 0:i.querySelector(".colorpicker-system-picker-input");c&&p&&(p.value=this.formatColor(this.currentColor).substring(0,7),c.addEventListener("click",(function(t){t.preventDefault(),t.stopPropagation(),p.click()})),p.addEventListener("change",(function(){var t=p.value;s.currentColor=s.parseColor(t),s.input.value=t,s.updateColorDisplay(),s.options.onChange(t)}))),this.options.inline||document.addEventListener("mousedown",(function(t){var e;s.isOpen&&!(null===(e=s.container)||void 0===e?void 0:e.contains(t.target))&&t.target!==s.input&&s.close()})),document.addEventListener("keydown",(function(t){"Escape"===t.key&&s.isOpen&&!s.options.inline&&(s.close(),s.input.focus())}))},t.prototype.onSaturationMouseDown=function(t){var e=this;t.preventDefault(),this.updateSaturationFromMouse(t);var o=function(t){e.updateSaturationFromMouse(t)},n=function(){document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",n)};document.addEventListener("mousemove",o),document.addEventListener("mouseup",n)},t.prototype.onSaturationTouchStart=function(t){var e=this;t.preventDefault();var o=t.touches[0];this.updateSaturationFromTouch(o);var n=function(t){t.preventDefault();var o=t.touches[0];e.updateSaturationFromTouch(o)},r=function(){document.removeEventListener("touchmove",n),document.removeEventListener("touchend",r)};document.addEventListener("touchmove",n,{passive:!1}),document.addEventListener("touchend",r)},t.prototype.updateSaturationFromTouch=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.handleSliderTouch=function(t,e,o,n,r,i){var s=this;void 0===i&&(i=!1);var a=function(t){var a=e.getBoundingClientRect(),l=Math.max(0,Math.min(t.clientX-a.left,a.width))/a.width,c=n+l*(r-n);s.currentColor[o]=i?c/100:Math.round(c),e.value=String(Math.round(c)),s.updateColorDisplay(),s.announceColorChange()},l=t.touches[0];a(l);var c=function(t){t.preventDefault();var e=t.touches[0];a(e)},p=function(){document.removeEventListener("touchmove",c),document.removeEventListener("touchend",p)};document.addEventListener("touchmove",c,{passive:!1}),document.addEventListener("touchend",p)},t.prototype.updateSaturationFromMouse=function(t){if(this.colorBox){var e=this.colorBox.getBoundingClientRect(),o=Math.max(0,Math.min(t.clientX-e.left,e.width)),n=Math.max(0,Math.min(t.clientY-e.top,e.height));this.currentColor.s=o/e.width*100,this.currentColor.l=100-n/e.height*100,this.updateColorDisplay(),this.announceColorChange()}},t.prototype.onSaturationKeyDown=function(t){var e=t.shiftKey?10:1,o=!1;switch(t.key){case"ArrowRight":this.currentColor.s=Math.min(100,this.currentColor.s+e),o=!0;break;case"ArrowLeft":this.currentColor.s=Math.max(0,this.currentColor.s-e),o=!0;break;case"ArrowUp":this.currentColor.l=Math.min(100,this.currentColor.l+e),o=!0;break;case"ArrowDown":this.currentColor.l=Math.max(0,this.currentColor.l-e),o=!0}o&&(t.preventDefault(),this.updateColorDisplay(),this.announceColorChange())},t.prototype.updateColorDisplay=function(t){var e;if(void 0===t&&(t=!0),this.colorBox&&(this.colorBox.style.backgroundColor="hsl(".concat(this.currentColor.h,", 100%, 50%)")),this.saturationPointer&&this.colorBox){var o=this.currentColor.s/100*100,n=100*(1-this.currentColor.l/100);this.saturationPointer.style.left="".concat(o,"%"),this.saturationPointer.style.top="".concat(n,"%")}this.saturationSlider&&(this.saturationSlider.style.background="linear-gradient(to right, hsl(".concat(this.currentColor.h,", 0%, 50%), hsl(").concat(this.currentColor.h,", 100%, 50%))")),this.lightnessSlider&&(this.lightnessSlider.style.background="linear-gradient(to right, hsl(".concat(this.currentColor.h,", ").concat(this.currentColor.s,"%, 0%), hsl(").concat(this.currentColor.h,", ").concat(this.currentColor.s,"%, 50%), hsl(").concat(this.currentColor.h,", ").concat(this.currentColor.s,"%, 100%))"));var r=null===(e=this.container)||void 0===e?void 0:e.querySelector(".colorpicker-preview-color");if(r&&(r.style.backgroundColor=this.toHSLString(this.currentColor)),this.hexInput&&t&&(this.hexInput.value=this.formatColor(this.currentColor)),this.hueSlider&&(this.hueSlider.value=String(this.currentColor.h)),this.saturationSlider&&(this.saturationSlider.value=String(this.currentColor.s)),this.lightnessSlider&&(this.lightnessSlider.value=String(this.currentColor.l)),this.alphaSlider&&(this.alphaSlider.value=String(100*this.currentColor.a)),t){if(this.input.value=this.formatColor(this.currentColor),this.options.onChange(this.input.value),this.options.previewTarget){var i=document.querySelector(this.options.previewTarget);if(i){var s=this.options.previewProperty||"background-color";i.style.setProperty(s,this.input.value)}}if(this.compactButton){var a=this.compactButton.querySelector(".colorpicker-compact-preview");a&&(a.style.backgroundColor=this.toHSLString(this.currentColor))}this.inputPreview&&(this.inputPreview.style.backgroundColor=this.toHSLString(this.currentColor))}},t.prototype.formatColor=function(t){switch(this.options.format){case"hsl":return this.toHSLString(t);case"rgb":return this.toRGBString(this.hslToRgb(t));case"hex":default:return this.toHex(t)}},t.prototype.getPlaceholder=function(){switch(this.options.format){case"hsl":return this.options.showAlpha?"hsla(0, 0%, 0%, 1)":"hsl(0, 0%, 0%)";case"rgb":return this.options.showAlpha?"rgba(0, 0, 0, 1)":"rgb(0, 0, 0)";case"hex":default:return"#000000"}},t.prototype.parseColor=function(t){if((t=t.trim()).startsWith("#"))return this.hexToHsl(t);var e=t.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(e){var o={r:parseInt(e[1]),g:parseInt(e[2]),b:parseInt(e[3]),a:e[4]?parseFloat(e[4]):1};return this.rgbToHsl(o)}var n=t.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/);return n?{h:parseInt(n[1]),s:parseInt(n[2]),l:parseInt(n[3]),a:n[4]?parseFloat(n[4]):1}:this.currentColor},t.prototype.hexToHsl=function(t){t=t.replace("#","");var e=parseInt(t.substring(0,2),16)/255,o=parseInt(t.substring(2,4),16)/255,n=parseInt(t.substring(4,6),16)/255,r=8===t.length?parseInt(t.substring(6,8),16)/255:1;return this.rgbToHsl({r:255*e,g:255*o,b:255*n,a:r})},t.prototype.rgbToHsl=function(t){var e=t.r/255,o=t.g/255,n=t.b/255,r=Math.max(e,o,n),i=Math.min(e,o,n),s=0,a=0,l=(r+i)/2;if(r!==i){var c=r-i;switch(a=l>.5?c/(2-r-i):c/(r+i),r){case e:s=((o-n)/c+(o<n?6:0))/6;break;case o:s=((n-e)/c+2)/6;break;case n:s=((e-o)/c+4)/6}}return{h:Math.round(360*s),s:Math.round(100*a),l:Math.round(100*l),a:t.a}},t.prototype.hslToRgb=function(t){var e,o,n,r=t.h/360,i=t.s/100,s=t.l/100;if(0===i)e=o=n=s;else{var a=function(t,e,o){return o<0&&(o+=1),o>1&&(o-=1),o<1/6?t+6*(e-t)*o:o<.5?e:o<2/3?t+(e-t)*(2/3-o)*6:t},l=s<.5?s*(1+i):s+i-s*i,c=2*s-l;e=a(c,l,r+1/3),o=a(c,l,r),n=a(c,l,r-1/3)}return{r:Math.round(255*e),g:Math.round(255*o),b:Math.round(255*n),a:t.a}},t.prototype.toHex=function(t){var e=this.hslToRgb(t),o=function(t){return t.toString(16).padStart(2,"0")};if(this.options.showAlpha&&t.a<1){var n=Math.round(255*t.a);return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b)).concat(o(n))}return"#".concat(o(e.r)).concat(o(e.g)).concat(o(e.b))},t.prototype.toHSLString=function(t){return this.options.showAlpha&&t.a<1?"hsla(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%, ").concat(t.a,")"):"hsl(".concat(t.h,", ").concat(t.s,"%, ").concat(t.l,"%)")},t.prototype.toRGBString=function(t){return this.options.showAlpha&&t.a<1?"rgba(".concat(t.r,", ").concat(t.g,", ").concat(t.b,", ").concat(t.a,")"):"rgb(".concat(t.r,", ").concat(t.g,", ").concat(t.b,")")},t.prototype.isValidHex=function(t){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(t)},t.prototype.isValidColor=function(t){return!!this.isValidHex(t)||(!!/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(t)||!!/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(t))},t.prototype.announceColorChange=function(){var t=this;this.announceTimeout||(this.announceTimeout=setTimeout((function(){var e,o=document.createElement("div");o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.className="colorpicker-sr-only",o.textContent="Color changed to ".concat(t.formatColor(t.currentColor)),null===(e=t.container)||void 0===e||e.appendChild(o),setTimeout((function(){return o.remove()}),1e3),t.announceTimeout=null}),500))},t.prototype.open=function(){var t=this;!this.isOpen&&this.container&&(this.isOpen=!0,this.container.style.display="block",this.options.inline||this.positionPicker(),this.options.onOpen(),this.options.inline||setTimeout((function(){var e,o=null;(o=t.options.presetsOnly?null===(e=t.container)||void 0===e?void 0:e.querySelector(".colorpicker-preset"):t.options.sliderMode?t.hueSlider:t.colorBox)&&o.focus()}),0))},t.prototype.close=function(){this.isOpen&&this.container&&(this.isOpen=!1,this.options.inline||(this.container.style.display="none"),this.options.onClose())},t.prototype.toggle=function(){this.isOpen?this.close():this.open()},t.prototype.positionPicker=function(){if(this.container){var t=this.input.getBoundingClientRect(),e=this.container.getBoundingClientRect(),o=window.innerHeight,n=t.bottom+window.scrollY+4,r=t.left+window.scrollX;if("auto"===this.options.position){var i=o-t.bottom,s=t.top;i<e.height&&s>i&&(n=t.top+window.scrollY-e.height-4)}else"above"===this.options.position&&(n=t.top+window.scrollY-e.height-4);this.container.style.position="absolute",this.container.style.top="".concat(n,"px"),this.container.style.left="".concat(r,"px"),this.container.style.zIndex="9999"}},t.prototype.setColor=function(t){this.currentColor=this.parseColor(t),this.updateColorDisplay()},t.prototype.getColor=function(){return this.formatColor(this.currentColor)},t.prototype.destroy=function(){var e,o,n;if(null===(e=this.container)||void 0===e||e.remove(),null===(o=this.compactButton)||void 0===o||o.remove(),this.options.compact&&this.input&&(this.input.style.position="",this.input.style.opacity="",this.input.style.pointerEvents="",this.input.style.width="",this.input.style.height=""),this.options.inputPreview&&this.input){this.input.classList.remove("colorpicker-has-preview");var r=this.input.parentElement;r&&r.classList.contains("colorpicker-input-group")&&(null===(n=r.parentNode)||void 0===n||n.insertBefore(this.input,r),r.remove())}t.instances.delete(this.input)},t.getInstance=function(e){return t.instances.get(e)},t.instances=new Map,t}();function r(t){void 0===t&&(t=document);var e=[];return t.querySelectorAll('[data-colorpicker], .colorpicker, input[type="color"][data-format]').forEach((function(t){if(!n.getInstance(t)){var o=t.dataset,r={};if(o.colorpicker)o.colorpicker.split(/[,;]/).forEach((function(t){var e=t.split(":").map((function(t){return t.trim()})),o=e[0],n=e[1];switch(o){case"format":"hex"!==n&&"rgb"!==n&&"hsl"!==n||(r.format=n);break;case"alpha":case"showAlpha":r.showAlpha="true"===n||"1"===n;break;case"compact":r.compact="true"===n||"1"===n;break;case"inline":r.inline="true"===n||"1"===n;break;case"presets":r.presetsOnly="true"===n||"1"===n;break;case"list":r.listView="true"===n||"1"===n;break;case"sliderMode":r.sliderMode="true"===n||"1"===n;break;case"eyeDropper":r.eyeDropper="true"===n||"1"===n;break;case"inputPreview":r.inputPreview="true"===n||"1"===n;break;case"target":case"previewTarget":r.previewTarget=n;break;case"property":case"previewProperty":r.previewProperty=n}}));!o.format||"hex"!==o.format&&"rgb"!==o.format&&"hsl"!==o.format||(r.format=o.format),void 0!==o.alpha&&(r.showAlpha="true"===o.alpha||"1"===o.alpha),void 0!==o.compact&&(r.compact="true"===o.compact||"1"===o.compact),void 0!==o.inline&&(r.inline="true"===o.inline||"1"===o.inline),void 0!==o.presetsOnly&&(r.presetsOnly="true"===o.presetsOnly||"1"===o.presetsOnly),void 0!==o.listView&&(r.listView="true"===o.listView||"1"===o.listView),o.defaultColor&&(r.defaultColor=o.defaultColor);var i=new n(t,r);e.push(i)}})),e}"undefined"!=typeof window&&"undefined"!=typeof document&&("loading"===document.readyState?document.addEventListener("DOMContentLoaded",(function(){return r()})):r()),t.ColorPicker=n,t.default=function(t,e){return new n(t,e)},t.initColorPickers=r,Object.defineProperty(t,"__esModule",{value:!0})}));