pickit-color 1.0.1 → 1.0.4

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.1, @license Donationware */
+/* Pickit Color v1.0.4, @license Donationware */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
     typeof define === 'function' && define.amd ? define(['exports'], factory) :
@@ -152,9 +152,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 () {
@@ -171,10 +173,10 @@
             this.container.setAttribute("role", "dialog");
             this.container.setAttribute("aria-label", "Color picker");
             this.container.style.display = "none";
-            var content = "\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              />\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              />\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              />\n            </div>\n            ")
+            var content = "\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(this.currentColor.a * 100, "\"\n                  aria-label=\"").concat(this.options.ariaLabels.alpha, "\"\n                />\n              </div>\n            ")
+                ? "\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(this.currentColor.a * 100, "\"\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
@@ -182,8 +184,8 @@
                     .map(function (color, index) {
                     var label = _this.options.presetLabels[index] || '';
                     return _this.options.listView && label
-                        ? "\n              <button \n                type=\"button\"\n                class=\"colorpicker-preset colorpicker-preset-list-item\" \n                data-color=\"".concat(color, "\"\n                aria-label=\"Select color ").concat(label, "\"\n              >\n                <span class=\"colorpicker-preset-color\" style=\"background-color: ").concat(color, "\"></span>\n                <span class=\"colorpicker-preset-label\">").concat(label, "</span>\n              </button>\n            ")
-                        : "\n              <button \n                type=\"button\"\n                class=\"colorpicker-preset\" \n                style=\"background-color: ".concat(color, "\"\n                data-color=\"").concat(color, "\"\n                aria-label=\"Select color ").concat(label || color, "\"\n              ></button>\n            ");
+                        ? "\n              <button \n                type=\"button\"\n                class=\"colorpicker-preset colorpicker-preset-list-item\" \n                data-color=\"".concat(color, "\"\n                aria-label=\"Select color ").concat(label, "\"\n                tabindex=\"").concat(index === 0 ? '0' : '-1', "\"\n              >\n                <span class=\"colorpicker-preset-color\" style=\"background-color: ").concat(color, "\"></span>\n                <span class=\"colorpicker-preset-label\">").concat(label, "</span>\n              </button>\n            ")
+                        : "\n              <button \n                type=\"button\"\n                class=\"colorpicker-preset\" \n                style=\"background-color: ".concat(color, "\"\n                data-color=\"").concat(color, "\"\n                aria-label=\"Select color ").concat(label || color, "\"\n                tabindex=\"").concat(index === 0 ? '0' : '-1', "\"\n              ></button>\n            ");
                 })
                     .join(""), "\n          </div>\n        ")
                 : "", "\n      </div>\n    ");
@@ -328,6 +330,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 +341,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 +352,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 +364,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);
                 });
@@ -373,18 +390,67 @@
                     }
                 });
             }
-            // Preset colors
+            // Preset colors - ensure they're in the DOM before binding
             var presets = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".colorpicker-preset");
-            presets === null || presets === void 0 ? void 0 : presets.forEach(function (preset) {
-                preset.addEventListener("click", function (e) {
-                    var color = e.currentTarget.dataset.color;
-                    _this.currentColor = _this.parseColor(color);
-                    _this.updateColorDisplay();
-                    if (_this.options.closeOnSelect) {
-                        _this.close();
-                    }
+            if (presets && presets.length > 0) {
+                presets.forEach(function (preset, index) {
+                    preset.addEventListener("click", function (e) {
+                        var color = e.currentTarget.dataset.color;
+                        _this.currentColor = _this.parseColor(color);
+                        _this.updateColorDisplay();
+                        if (_this.options.closeOnSelect) {
+                            _this.close();
+                        }
+                    });
+                    // Keyboard navigation for presets
+                    preset.addEventListener("keydown", (function (e) {
+                        var key = e.key;
+                        var handled = false;
+                        var targetIndex = index;
+                        switch (key) {
+                            case "ArrowRight":
+                            case "ArrowDown":
+                                targetIndex = Math.min(presets.length - 1, index + 1);
+                                handled = true;
+                                break;
+                            case "ArrowLeft":
+                            case "ArrowUp":
+                                targetIndex = Math.max(0, index - 1);
+                                handled = true;
+                                break;
+                            case "Home":
+                                targetIndex = 0;
+                                handled = true;
+                                break;
+                            case "End":
+                                targetIndex = presets.length - 1;
+                                handled = true;
+                                break;
+                            case "Enter":
+                            case " ":
+                                var color = e.currentTarget.dataset.color;
+                                _this.currentColor = _this.parseColor(color);
+                                _this.updateColorDisplay();
+                                if (_this.options.closeOnSelect) {
+                                    _this.close();
+                                }
+                                handled = true;
+                                break;
+                        }
+                        if (handled) {
+                            e.preventDefault();
+                            if (targetIndex !== index) {
+                                // Update tabindex for roving tabindex pattern
+                                presets.forEach(function (p, i) {
+                                    p.setAttribute("tabindex", i === targetIndex ? "0" : "-1");
+                                });
+                                // Focus target
+                                presets[targetIndex].focus();
+                            }
+                        }
+                    }));
                 });
-            });
+            }
             // EyeDropper button
             var eyeDropperBtn = (_b = this.container) === null || _b === void 0 ? void 0 : _b.querySelector(".colorpicker-eyedropper-btn");
             if (eyeDropperBtn) {
@@ -454,6 +520,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;
@@ -742,11 +868,28 @@
                 this.positionPicker();
             }
             this.options.onOpen();
-            // Focus first interactive element
-            setTimeout(function () {
-                var _a;
-                (_a = _this.colorBox) === null || _a === void 0 ? void 0 : _a.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)

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)}}