atomicuilibrary 0.0.1 → 0.1.3

package/dist/cjs/ui-color-picker.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
-const colorPickerCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}.cp-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.cp-trigger-wrapper{position:relative;display:inline-block}.cp-trigger{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--border-strong, #d1d5db);border-radius:10px;background:var(--bg-primary, #ffffff);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary, #374151);transition:border-color 0.2s, box-shadow 0.2s;min-width:140px}.cp-trigger:hover:not(.cp-disabled){border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.cp-trigger:hover:not(.cp-disabled).cp-disabled{opacity:0.5;cursor:not-allowed}.cp-trigger-swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-trigger-value{flex:1;font-family:monospace}.cp-trigger-arrow{font-size:10px;color:var(--text-muted, #9ca3af)}.cp-dropdown{position:absolute;top:calc(100% + 6px);left:0;z-index:1000;background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);border-radius:14px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);overflow:hidden;animation:cp-drop-in 0.15s ease}@keyframes cp-drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.cp-panel{width:460px;padding:14px}.cp-panel-hue{width:280px}.cp-panel-input{width:480px}.cp-panel-input .cp-inputs-grid{grid-template-columns:1fr;gap:16px}.cp-panel-input .cp-input-wrap.cp-full{grid-column:span 1}.cp-gradient{width:100%;height:140px;border-radius:8px;position:relative;cursor:crosshair;margin-bottom:12px;user-select:none}.cp-gradient-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--border-subtle, #fff);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);transform:translate(-50%, -50%);pointer-events:none}.cp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.cp-preview{width:32px;height:32px;border-radius:8px;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-sliders{flex:1;display:flex;flex-direction:column;gap:12px}.cp-hue-slider,.cp-alpha-slider{width:100%;--slider-track-height:12px;--slider-thumb-size:20px}.cp-hue-slider::part(track),.cp-alpha-slider::part(track){height:12px;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2)}.cp-hue-slider::part(thumb),.cp-alpha-slider::part(thumb){width:20px;height:20px;border:3px solid #fff;box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);background:transparent}.cp-inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.cp-panel-multi-format .cp-inputs-grid{grid-template-columns:1fr}.cp-panel-multi-format .cp-input-wrap.cp-full{grid-column:span 1}.cp-input-wrap{display:flex;flex-direction:column;gap:8px}.cp-input-wrap.cp-full{grid-column:span 2}.cp-sm-label{font-size:11px;font-weight:800;color:var(--text-muted, #94a3b8);text-transform:uppercase;letter-spacing:0.05em}.cp-input-wrap.cp-inline-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:16px;background:rgba(var(--ui-input-bg-rgb, 248, 250, 252), 0.5);padding:12px 16px;border-radius:12px;border:1px solid var(--border-subtle, #f1f5f9);transition:all 0.2s ease}.cp-input-wrap.cp-inline-row:hover{background:#fff;border-color:var(--border-strong, #e2e8f0);box-shadow:0 4px 12px rgba(0, 0, 0, 0.03)}.cp-channel-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(64px, 1fr));gap:10px;width:100%}.cp-channel-field{display:flex;flex-direction:column;gap:6px;align-items:center}.cp-channel-field .cp-channel-label{font-size:10px;font-weight:700;color:var(--text-muted, #94a3b8);margin-bottom:2px}.cp-channel-field ui-input{width:100%;--ui-input-text-align:center}.cp-text-input{--ui-input-text-align:left}:host(.cp-variant-hue) .cp-panel{padding-block:12px}:host(.cp-variant-hue) .cp-row{margin-bottom:12px}:host(.cp-variant-input) .cp-panel{padding:12px}:host(.cp-variant-input) .cp-name-display,:host(.cp-variant-input) .cp-text-input{min-height:36px}.cp-name-display{width:100%;border:1.5px solid var(--border-subtle, #f3f4f6);background:var(--bg-primary, #f9fafb);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-secondary, #4b5563);box-sizing:border-box}.cp-swatches{display:flex;flex-wrap:wrap;gap:6px}.cp-swatch{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform 0.1s, border-color 0.15s, box-shadow 0.15s;padding:0;margin:0;outline:none;box-sizing:border-box;flex-shrink:0}.cp-swatch:hover{transform:scale(1.15)}.cp-swatch.cp-swatch-active{border-color:var(--bg-primary, #ffffff);box-shadow:0 0 0 1px var(--bg-primary, #ffffff), 0 0 0 3px var(--swatch-color, var(--color-primary, #10b981))}`;
+const colorPickerCss = () => `@charset "UTF-8";.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;font-family:inherit}.cp-label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary, #374151);margin-bottom:6px}.cp-trigger-wrapper{position:relative;display:inline-block}.cp-trigger{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1.5px solid var(--border-strong, #d1d5db);border-radius:10px;background:var(--bg-primary, #ffffff);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary, #374151);transition:border-color 0.2s, box-shadow 0.2s;min-width:140px}.cp-trigger:hover:not(.cp-disabled){border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.cp-trigger:hover:not(.cp-disabled).cp-disabled{opacity:0.5;cursor:not-allowed}.cp-trigger-swatch{width:20px;height:20px;border-radius:50%;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-trigger-value{flex:1;font-family:monospace}.cp-trigger-arrow{font-size:10px;color:var(--text-muted, #9ca3af)}.cp-trigger-compact{display:inline-flex;align-items:center;justify-content:center;padding:3px;border:1.5px solid var(--border-strong, #d1d5db);border-radius:8px;background:var(--bg-primary, #ffffff);cursor:pointer;transition:border-color 0.2s, box-shadow 0.2s}.cp-trigger-compact:hover:not(:disabled){border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.12)}.cp-trigger-compact.cp-open{border-color:var(--color-primary, #10b981);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15)}.cp-trigger-compact:disabled,.cp-trigger-compact.cp-disabled{opacity:0.5;cursor:not-allowed}.cp-trigger-compact-swatch{width:26px;height:26px;border-radius:5px;border:1.5px solid rgba(0, 0, 0, 0.1);display:block}:host(.cp-size-sm) .cp-trigger-compact{border-radius:6px}:host(.cp-size-sm) .cp-trigger-compact-swatch{width:20px;height:20px;border-radius:3px}:host(.cp-size-lg) .cp-trigger-compact{border-radius:10px}:host(.cp-size-lg) .cp-trigger-compact-swatch{width:32px;height:32px;border-radius:7px}.cp-dropdown{position:fixed;z-index:9999;background:var(--bg-primary, #ffffff);border:1px solid var(--border-default, #e5e7eb);border-radius:14px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.15);overflow-x:hidden;animation:cp-drop-in 0.15s ease}@keyframes cp-drop-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.cp-panel{width:430px;padding:14px}.cp-panel-hue{width:280px}.cp-panel-input{width:480px}.cp-panel-input .cp-inputs-grid{grid-template-columns:1fr;gap:16px}.cp-panel-input .cp-input-wrap.cp-full{grid-column:span 1}.cp-gradient{width:100%;height:140px;border-radius:8px;position:relative;cursor:crosshair;margin-bottom:12px;user-select:none}.cp-gradient-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2.5px solid var(--border-subtle, #fff);box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);transform:translate(-50%, -50%);pointer-events:none}.cp-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.cp-preview{width:32px;height:32px;border-radius:8px;border:2px solid rgba(0, 0, 0, 0.1);flex-shrink:0}.cp-sliders{flex:1;display:flex;flex-direction:column;gap:12px}.cp-hue-slider,.cp-alpha-slider{width:100%;--slider-track-height:12px;--slider-thumb-size:20px}.cp-hue-slider::part(track),.cp-alpha-slider::part(track){height:12px;border-radius:6px;box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.2)}.cp-hue-slider::part(thumb),.cp-alpha-slider::part(thumb){width:20px;height:20px;border:3px solid #fff;box-shadow:0 4px 10px rgba(0, 0, 0, 0.3);background:transparent}.cp-inputs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}.cp-panel-multi-format .cp-inputs-grid{grid-template-columns:1fr}.cp-panel-multi-format .cp-input-wrap.cp-full{grid-column:span 1}.cp-input-wrap{display:flex;flex-direction:column;gap:8px}.cp-input-wrap.cp-full{grid-column:span 2}.cp-sm-label{font-size:11px;font-weight:800;color:var(--text-muted, #94a3b8);text-transform:uppercase;letter-spacing:0.05em}.cp-input-wrap.cp-inline-row{display:grid;grid-template-columns:60px 1fr;align-items:center;gap:16px;background:rgba(var(--ui-input-bg-rgb, 248, 250, 252), 0.5);padding:12px 16px;border-radius:12px;border:1px solid var(--border-subtle, #f1f5f9);transition:all 0.2s ease}.cp-input-wrap.cp-inline-row:hover{background:#fff;border-color:var(--border-strong, #e2e8f0);box-shadow:0 4px 12px rgba(0, 0, 0, 0.03)}.cp-channel-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(64px, 1fr));gap:10px;width:100%}.cp-channel-field{display:flex;flex-direction:column;gap:6px;align-items:center}.cp-channel-field .cp-channel-label{font-size:10px;font-weight:700;color:var(--text-muted, #94a3b8);margin-bottom:2px}.cp-channel-field ui-input{width:100%;--ui-input-text-align:center}.cp-text-input{--ui-input-text-align:left}.cp-input-field-wrap{display:flex;flex-direction:column;gap:0;flex:1}.cp-channel-col{display:flex;flex-direction:column;gap:0;flex:1}.cp-field-error{display:block;font-size:11px;font-weight:600;color:var(--color-danger, #ef4444);margin-top:5px;padding:3px 8px;background:rgba(239, 68, 68, 0.08);border-radius:6px;border-left:2px solid var(--color-danger, #ef4444);animation:cp-field-error-in 0.25s ease, cp-shake 0.3s ease}@keyframes cp-field-error-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes cp-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}:host(.cp-variant-hue) .cp-panel{padding-block:12px}:host(.cp-variant-hue) .cp-row{margin-bottom:12px}:host(.cp-variant-input) .cp-panel{padding:12px}:host(.cp-variant-input) .cp-name-display,:host(.cp-variant-input) .cp-text-input{min-height:36px}.cp-name-display{width:100%;border:1.5px solid var(--border-subtle, #f3f4f6);background:var(--bg-primary, #f9fafb);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;color:var(--text-secondary, #4b5563);box-sizing:border-box}.cp-swatches{display:flex;flex-wrap:wrap;gap:6px}.cp-swatch{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;transition:transform 0.1s, border-color 0.15s, box-shadow 0.15s;padding:0;margin:0;outline:none;box-sizing:border-box;flex-shrink:0}.cp-swatch:hover{transform:scale(1.15)}.cp-swatch.cp-swatch-active{border-color:var(--bg-primary, #ffffff);box-shadow:0 0 0 1px var(--bg-primary, #ffffff), 0 0 0 3px var(--swatch-color, var(--color-primary, #10b981))}`;
 
 const ColorPicker = class {
     constructor(hostRef) {
@@ -16,14 +16,19 @@ const ColorPicker = class {
     /** Show hex input field */
     showHex = true;
     /** Show RGB input field */
-    showRgb = true;
+    showRgb = false;
     /** Show RGBA input field */
-    showRgba = true;
+    showRgba = false;
     /** Show HSL input field */
-    showHsl = true;
+    showHsl = false;
     /** Show HSLA input field */
-    showHsla = true;
-    /** Show alpha channel slider */
+    showHsla = false; /**
+     * Comma-separated string or array of formats to show.
+     * Accepted values: 'hex', 'rgb', 'rgba', 'hsl', 'hsla'.
+     * When set, overrides the individual showHex/showRgb/showRgba/showHsl/showHsla flags.
+     * Examples: formats="hex,rgb"  |  :formats="['hex','hsl','hsla']"
+     */
+    formats = ''; /** Show alpha channel slider */
     showAlpha = false;
     /** Show preset swatches */
     showSwatches = true;
@@ -51,6 +56,8 @@ const ColorPicker = class {
     showGradient = false;
     /** Display variant: full picker, hue slider only, or direct inputs */
     variant = 'default';
+    /** Compact trigger — shows only the color swatch, no hex label or arrow */
+    compact = false;
     get el() { return index.getElement(this); }
     internals;
     isOpen = false;
@@ -65,6 +72,10 @@ const ColorPicker = class {
     isGradientMode = false;
     gradientStops = ['#3bf673', '#10b981'];
     activeStopIndex = 0;
+    enabledFormatsSet = null;
+    dropdownStyle = {};
+    /** Prevents refineDropdownPlacement from running more than once per open cycle */
+    _placementRefined = false;
     colorChange;
     handleDocumentPointerDown = (event) => {
         if (!this.isOpen || this.inline) {
@@ -101,13 +112,138 @@ const ColorPicker = class {
             }
         }
     }
+    handleFormatsChange() {
+        this.parseFormats();
+    }
+    handleIsOpenChange(open) {
+        if (open) {
+            // Sync input fields to the current color every time the popover opens
+            this.hexInput = this.getHexInputValue();
+            this.isInvalid = false;
+            this.invalidField = null;
+        }
+        else {
+            this.dropdownStyle = {};
+            this._placementRefined = false;
+        }
+    }
+    componentDidUpdate() {
+        // Run placement refinement exactly once after the dropdown is in the DOM
+        if (this.isOpen && !this._placementRefined) {
+            this._placementRefined = true;
+            this.refineDropdownPlacement();
+        }
+    }
+    /**
+     * Fast pre-compute using estimated panel height — called synchronously on
+     * click so the dropdown renders in the right place from the very first frame.
+     */
+    preComputePlacement() {
+        const panelHeight = this.isHueVariant() ? 340 : this.isInputVariant() ? 320 : 580;
+        const panelWidth = this.isHueVariant() ? 280 : this.isInputVariant() ? 480 : 460;
+        this.dropdownStyle = this.buildPositionStyle(panelWidth, panelHeight);
+    }
+    /**
+     * Accurate refinement using the actual rendered dropdown dimensions.
+     * Runs once after the first render with the dropdown in the DOM.
+     */
+    refineDropdownPlacement() {
+        const dropdown = this.el.shadowRoot?.querySelector('.cp-dropdown');
+        if (!dropdown)
+            return;
+        const panelWidth = this.isHueVariant() ? 280 : this.isInputVariant() ? 480 : 460;
+        const panelHeight = dropdown.scrollHeight || dropdown.offsetHeight || 580;
+        const newStyle = this.buildPositionStyle(panelWidth, panelHeight);
+        // Only write state if something changed (prevents an extra re-render)
+        const changed = Object.keys(newStyle).some(k => newStyle[k] !== this.dropdownStyle[k]);
+        if (changed)
+            this.dropdownStyle = newStyle;
+    }
+    /**
+     * Computes position: fixed coordinates so the dropdown is always fully
+     * visible within the viewport, preferring below but flipping upward as needed.
+     * Always constrains dimensions so the panel never extends past any viewport edge.
+     */
+    buildPositionStyle(panelWidth, panelHeight) {
+        const hostRect = this.el.getBoundingClientRect();
+        // clientWidth/Height excludes scrollbar width — more accurate for layout
+        const vw = document.documentElement.clientWidth || window.innerWidth;
+        const vh = document.documentElement.clientHeight || window.innerHeight;
+        const gap = 6; // gap between trigger and panel
+        const edge = 8; // minimum clearance from every viewport edge
+        // ── Width — never exceed viewport ───────────────────────────────────────
+        const actualWidth = Math.min(panelWidth, vw - 2 * edge);
+        // ── Vertical ────────────────────────────────────────────────────────────
+        const spaceBelow = vh - hostRect.bottom - gap - edge;
+        const spaceAbove = hostRect.top - gap - edge;
+        let top;
+        let maxHeight;
+        if (spaceBelow >= panelHeight || spaceBelow >= spaceAbove) {
+            // Open downward
+            top = hostRect.bottom + gap;
+            maxHeight = Math.max(80, spaceBelow);
+        }
+        else {
+            // Open upward
+            maxHeight = Math.max(80, spaceAbove);
+            top = hostRect.top - gap - Math.min(panelHeight, maxHeight);
+        }
+        // Hard-clamp: top edge and bottom edge must stay inside viewport
+        const clampedHeight = Math.min(panelHeight, maxHeight);
+        top = Math.max(edge, Math.min(top, vh - clampedHeight - edge));
+        // ── Horizontal ──────────────────────────────────────────────────────────
+        let left = hostRect.left;
+        if (left + actualWidth > vw - edge) {
+            // Would overflow right: align right edges
+            left = hostRect.right - actualWidth;
+        }
+        // Hard-clamp: left edge and right edge must stay inside viewport
+        left = Math.max(edge, Math.min(left, vw - actualWidth - edge));
+        // ── Apply constraints only when content won't fit — otherwise render naturally ─
+        const style = {
+            top: `${Math.round(top)}px`,
+            left: `${Math.round(left)}px`,
+            width: `${Math.round(actualWidth)}px`,
+        };
+        if (panelHeight > maxHeight) {
+            // Content taller than available space — constrain and scroll
+            style['max-height'] = `${Math.round(clampedHeight)}px`;
+            style['overflow-y'] = 'auto';
+            style['overflow-x'] = 'hidden';
+        }
+        return style;
+    }
     componentWillLoad() {
         this.initializeInternals();
+        this.parseFormats();
         this.syncValueToState(this.value);
         this.value = this.getFormattedValue();
         this.updateFormValue();
         this.loadHistory();
     }
+    parseFormats() {
+        if (!this.formats || (Array.isArray(this.formats) ? this.formats.length === 0 : this.formats.trim() === '')) {
+            this.enabledFormatsSet = null;
+            return;
+        }
+        const arr = Array.isArray(this.formats)
+            ? this.formats
+            : this.formats.split(',');
+        const cleaned = arr.map(f => f.trim().toLowerCase()).filter(Boolean);
+        this.enabledFormatsSet = cleaned.length > 0 ? new Set(cleaned) : null;
+    }
+    isFormatEnabled(fmt) {
+        if (this.enabledFormatsSet)
+            return this.enabledFormatsSet.has(fmt);
+        switch (fmt) {
+            case 'hex': return this.showHex;
+            case 'rgb': return this.showRgb;
+            case 'rgba': return this.showRgba;
+            case 'hsl': return this.showHsl;
+            case 'hsla': return this.showHsla;
+            default: return false;
+        }
+    }
     connectedCallback() {
         document.addEventListener('pointerdown', this.handleDocumentPointerDown, true);
     }
@@ -414,7 +550,32 @@ const ColorPicker = class {
         return this.colorNames[h] || 'Custom';
     }
     handleHexInput = (e) => {
-        this.updateColorFromInput(e.detail, 'hex');
+        const raw = String(e.detail ?? '').replace(/^#/, '').trim();
+        this.hexInput = raw;
+        if (raw.length === 0) {
+            // Empty — clear error, wait for user to finish
+            this.isInvalid = false;
+            this.invalidField = null;
+            return;
+        }
+        // When alpha is disabled only 3 and 6 char hex are valid.
+        // When alpha is enabled, 4 (shorthand + alpha) and 8 (RRGGBBAA) are also accepted.
+        const validLengths = this.showAlpha ? [3, 4, 6, 8] : [3, 6];
+        const maxLen = this.showAlpha ? 8 : 6;
+        if (validLengths.includes(raw.length)) {
+            // Complete hex length — validate and apply color
+            this.updateColorFromInput(raw, 'hex');
+        }
+        else if (raw.length > maxLen) {
+            // Exceeds maximum — always invalid
+            this.isInvalid = true;
+            this.invalidField = 'hex';
+        }
+        else {
+            // Incomplete — user is still typing, stay silent
+            this.isInvalid = false;
+            this.invalidField = null;
+        }
     };
     handleSwatch = (color) => {
         const parsedColor = this.parseHex(color);
@@ -471,8 +632,14 @@ const ColorPicker = class {
         // Removed redundant saveHistory call
     }
     handleRgbChannelChange = (channel, event) => {
-        const channelValue = this.parseChannelValue(event.detail);
+        const raw = event.detail === null || event.detail === undefined ? '' : String(event.detail).trim();
         const fieldKey = `rgb-${channel}`;
+        if (raw === '') {
+            // User cleared the field — clear error, wait for a valid value
+            this.setChannelValidation(null);
+            return;
+        }
+        const channelValue = this.parseChannelValue(raw);
         if (channelValue === null || channelValue < 0 || channelValue > 255) {
             this.setChannelValidation(fieldKey);
             return;
@@ -483,8 +650,13 @@ const ColorPicker = class {
         this.applyRgbColor(currentRgb.r, currentRgb.g, currentRgb.b);
     };
     handleRgbaChannelChange = (channel, event) => {
-        const channelValue = this.parseChannelValue(event.detail);
+        const raw = event.detail === null || event.detail === undefined ? '' : String(event.detail).trim();
         const fieldKey = `rgba-${channel}`;
+        if (raw === '') {
+            this.setChannelValidation(null);
+            return;
+        }
+        const channelValue = this.parseChannelValue(raw);
         if (channelValue === null) {
             this.setChannelValidation(fieldKey);
             return;
@@ -509,9 +681,14 @@ const ColorPicker = class {
         this.applyRgbColor(currentRgb.r, currentRgb.g, currentRgb.b, nextAlpha);
     };
     handleHslChannelChange = (channel, event) => {
-        const channelValue = this.parseChannelValue(event.detail);
+        const raw = event.detail === null || event.detail === undefined ? '' : String(event.detail).trim();
         const fieldKey = `hsl-${channel}`;
         const limits = { h: 360, s: 100, l: 100 };
+        if (raw === '') {
+            this.setChannelValidation(null);
+            return;
+        }
+        const channelValue = this.parseChannelValue(raw);
         if (channelValue === null || channelValue < 0 || channelValue > limits[channel]) {
             this.setChannelValidation(fieldKey);
             return;
@@ -526,8 +703,13 @@ const ColorPicker = class {
         this.applyHslColor(nextHsl.h, nextHsl.s, nextHsl.l);
     };
     handleHslaChannelChange = (channel, event) => {
-        const channelValue = this.parseChannelValue(event.detail);
+        const raw = event.detail === null || event.detail === undefined ? '' : String(event.detail).trim();
         const fieldKey = `hsla-${channel}`;
+        if (raw === '') {
+            this.setChannelValidation(null);
+            return;
+        }
+        const channelValue = this.parseChannelValue(raw);
         if (channelValue === null) {
             this.setChannelValidation(fieldKey);
             return;
@@ -569,7 +751,9 @@ const ColorPicker = class {
         return !this.isInputVariant();
     }
     showInputSection() {
-        return this.showHex || this.showRgb || this.showRgba || this.showHsl || this.showHsla || this.isInputVariant();
+        return this.isFormatEnabled('hex') || this.isFormatEnabled('rgb') ||
+            this.isFormatEnabled('rgba') || this.isFormatEnabled('hsl') ||
+            this.isFormatEnabled('hsla') || this.isInputVariant();
     }
     getPanelClasses() {
         return {
@@ -580,18 +764,50 @@ const ColorPicker = class {
         };
     }
     renderFormatInput(label, value, onInputChange, formatKey) {
-        return (index.h("div", { class: "cp-input-wrap cp-full cp-inline-row" }, index.h("span", { class: "cp-sm-label" }, label), index.h("ui-input", { class: { 'cp-text-input': true, 'cp-input-error': this.isInvalid && this.invalidField === formatKey }, type: "text", value: value, onInputChange: onInputChange, size: "sm" })));
+        const hasError = this.isInvalid && this.invalidField === formatKey;
+        const errMsg = this.getFieldError(formatKey);
+        return (index.h("div", { class: "cp-input-wrap cp-full cp-inline-row" }, index.h("span", { class: "cp-sm-label" }, label), index.h("div", { class: "cp-input-field-wrap" }, index.h("ui-input", { class: { 'cp-text-input': true, 'cp-input-error': hasError }, type: "text", value: value, prefixText: formatKey === 'hex' ? '#' : undefined, onInputChange: onInputChange, size: "sm" }), errMsg && index.h("span", { class: "cp-field-error" }, errMsg))));
     }
     renderChannelInput(fieldKey, label, value, min, max, step, onInputChange) {
         return (index.h("div", { class: "cp-channel-field" }, index.h("span", { class: "cp-channel-label" }, label), index.h("ui-input", { class: { 'cp-text-input': true, 'cp-channel-input': true, 'cp-input-error': this.isInvalid && this.invalidField === fieldKey }, type: "number", min: min, max: max, step: step, value: value, onInputChange: onInputChange, size: "sm" })));
     }
     renderChannelGroup(label, columns, fields) {
-        return (index.h("div", { class: "cp-input-wrap cp-full cp-channel-group cp-inline-row" }, index.h("span", { class: "cp-sm-label" }, label), index.h("div", { class: { 'cp-channel-grid': true, 'cp-channel-grid-3': columns === 3, 'cp-channel-grid-4': columns === 4 } }, fields)));
+        const groupPrefix = label.toLowerCase() + '-';
+        const errMsg = this.getFieldError(groupPrefix);
+        return (index.h("div", { class: "cp-input-wrap cp-full cp-channel-group cp-inline-row" }, index.h("span", { class: "cp-sm-label" }, label), index.h("div", { class: "cp-channel-col" }, index.h("div", { class: { 'cp-channel-grid': true, 'cp-channel-grid-3': columns === 3, 'cp-channel-grid-4': columns === 4 } }, fields), errMsg && index.h("span", { class: "cp-field-error" }, errMsg))));
+    }
+    getFieldError(prefix) {
+        if (!this.isInvalid || !this.invalidField)
+            return '';
+        if (prefix === 'hex') {
+            if (this.invalidField !== 'hex')
+                return '';
+            return this.showAlpha
+                ? 'Enter 3, 6, or 8 hex characters (e.g. FF0000 or FF0000FF for alpha)'
+                : 'Enter 3 or 6 hex characters (e.g. FF0000)';
+        }
+        if (!this.invalidField.startsWith(prefix))
+            return '';
+        if (this.invalidField.endsWith('-r'))
+            return 'Red (R) must be 0–255';
+        if (this.invalidField.endsWith('-g'))
+            return 'Green (G) must be 0–255';
+        if (this.invalidField.endsWith('-b'))
+            return 'Blue (B) must be 0–255';
+        if (this.invalidField.endsWith('-h'))
+            return 'Hue (H) must be 0–360';
+        if (this.invalidField.endsWith('-s'))
+            return 'Saturation (S) must be 0–100';
+        if (this.invalidField.endsWith('-l'))
+            return 'Lightness (L) must be 0–100';
+        if (this.invalidField.endsWith('-a'))
+            return 'Alpha (A) must be 0–1 (e.g. 0.5 = 50%)';
+        return 'Invalid value';
     }
     render() {
         const currentColor = this.hslToHex(this.hue, this.saturation, this.lightness);
         const swatches = this.getSwatches();
-        const picker = (index.h("div", { key: '1e6a1eb368643f6e67d9804cce7bcfed32b1bd1d', class: this.getPanelClasses() }, this.showGradientSurface() && (index.h("div", { key: '2970c7db9dde45a2f88ed3ede420df322c6556dc', class: "cp-gradient", role: "slider", "aria-label": "Saturation and Lightness", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.saturation, "aria-valuetext": `Saturation ${this.saturation}%, Lightness ${this.lightness}%`, tabindex: "0", onKeyDown: (e) => {
+        const picker = (index.h("div", { key: '947077dfe39fcd935bc97692b063b91d0fd06a9d', class: this.getPanelClasses() }, this.showGradientSurface() && (index.h("div", { key: 'a6c4878e2a6bca5c6b70af63da25dcd3457a8ec1', class: "cp-gradient", role: "slider", "aria-label": "Saturation and Lightness", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": this.saturation, "aria-valuetext": `Saturation ${this.saturation}%, Lightness ${this.lightness}%`, tabindex: "0", onKeyDown: (e) => {
                 const step = e.shiftKey ? 10 : 1;
                 if (e.key === 'ArrowLeft') {
                     this.saturation = Math.max(0, this.saturation - step);
@@ -625,29 +841,47 @@ const ColorPicker = class {
                 window.addEventListener('mousemove', onMove);
                 window.addEventListener('mouseup', onUp);
                 onMove(e);
-            } }, index.h("div", { key: '4136b69d81619ce158f2988be19e3e866dfa4ae8', class: "cp-gradient-thumb", style: { left: `${this.saturation}%`, top: `${100 - this.lightness}%`, background: currentColor } }))), this.showSliderSection() && (index.h("div", { key: '27572206380ad082b4c49a9652b171169d4d92c0', class: "cp-row" }, index.h("div", { key: 'c69c64ac7d1173add32d3c0541ac73fe70383d7e', class: "cp-preview", style: { background: currentColor } }), index.h("div", { key: '54663ac5d49a43922b4a46587383b4ea3db54520', class: "cp-sliders" }, index.h("ui-range-slider", { key: '058c8a3b800afafc80cb13c06cfb48462e8e8206', class: "cp-hue-slider", min: 0, max: 360, value: this.hue, onSliderChange: (e) => { this.hue = Number(e.detail); this.emitChange(); }, "aria-label": "Hue", showTooltip: false, showValue: false, hideRange: true, trackColor: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" }), this.showAlpha && (index.h("ui-range-slider", { key: 'ef3b5d6112c7040bb1910d8171c8dc84901b628b', class: "cp-alpha-slider", min: 0, max: 100, value: Math.round(this.alpha * 100), onSliderChange: (e) => { this.alpha = Number(e.detail) / 100; this.emitChange(); }, "aria-label": "Alpha", showTooltip: false, showValue: false, hideRange: true, trackColor: `linear-gradient(to right, transparent, ${this.hslToHex(this.hue, this.saturation, this.lightness)}), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='5' height='5' fill='%23ccc'/%3E%3Crect x='5' y='5' width='5' height='5' fill='%23ccc'/%3E%3C/svg%3E")` }))), this.showEyeDropper && 'EyeDropper' in window && (index.h("ui-button", { key: 'a3597f83c7b6e4293bd0975d07b8994e66580f87', variant: "ghost", onClick: () => this.handleEyeDropper(), ariaLabel: "Sample color from screen", icon: "pipette", iconLibrary: "lucide", iconOnly: true, size: "sm", title: "Sample color from screen" })))), this.showInputSection() && (index.h("div", { key: 'd3473eb493f2fda3167c506e8ff2470beb17bab9', class: "cp-inputs-grid" }, this.showHex && (this.renderFormatInput('HEX', this.hexInput || this.getHexInputValue(), this.handleHexInput, 'hex')), this.showRgb && (this.renderChannelGroup('RGB', 3, [
+            } }, index.h("div", { key: '393bdcc90e400571ed7a51aaa25ac73868cd1c55', class: "cp-gradient-thumb", style: { left: `${this.saturation}%`, top: `${100 - this.lightness}%`, background: currentColor } }))), this.showSliderSection() && (index.h("div", { key: 'ede35ae4eb38c8b655c7f74075fcfaf8ee9cb7c0', class: "cp-row" }, index.h("div", { key: 'fda077df5270580b81cacd22b252d4acb9a770ed', class: "cp-preview", style: { background: currentColor } }), index.h("div", { key: 'f9f013ad09b24b5d42ac0d46fc60d473dcc699a1', class: "cp-sliders" }, index.h("ui-range-slider", { key: '1a10770920b3d793635794a857fae6653f926757', class: "cp-hue-slider", min: 0, max: 360, value: this.hue, onSliderChange: (e) => { this.hue = Number(e.detail); this.emitChange(); }, "aria-label": "Hue", showTooltip: false, showValue: false, hideRange: true, trackColor: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" }), this.showAlpha && (index.h("ui-range-slider", { key: '2ba506ea2e7ce927cee0d3da96ac894629832e8e', class: "cp-alpha-slider", min: 0, max: 100, value: Math.round(this.alpha * 100), onSliderChange: (e) => { this.alpha = Number(e.detail) / 100; this.emitChange(); }, "aria-label": "Alpha", showTooltip: false, showValue: false, hideRange: true, trackColor: `linear-gradient(to right, transparent, ${this.hslToHex(this.hue, this.saturation, this.lightness)}), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='5' height='5' fill='%23ccc'/%3E%3Crect x='5' y='5' width='5' height='5' fill='%23ccc'/%3E%3C/svg%3E")` }))), this.showEyeDropper && 'EyeDropper' in window && (index.h("ui-button", { key: '5bca61232947d6ab735fc58e2a327849b947adda', variant: "ghost", onClick: () => this.handleEyeDropper(), ariaLabel: "Sample color from screen", icon: "pipette", iconLibrary: "lucide", iconOnly: true, size: "sm", title: "Sample color from screen" })))), this.showInputSection() && (index.h("div", { key: 'a7373dc01faaad4b1a29e2e58181121001355efc', class: "cp-inputs-grid" }, this.isFormatEnabled('hex') && (this.renderFormatInput('HEX', this.hexInput || this.getHexInputValue(), this.handleHexInput, 'hex')), this.isFormatEnabled('rgb') && (this.renderChannelGroup('RGB', 3, [
             this.renderChannelInput('rgb-r', 'R', this.getRgbValues().r, 0, 255, 1, (event) => this.handleRgbChannelChange('r', event)),
             this.renderChannelInput('rgb-g', 'G', this.getRgbValues().g, 0, 255, 1, (event) => this.handleRgbChannelChange('g', event)),
             this.renderChannelInput('rgb-b', 'B', this.getRgbValues().b, 0, 255, 1, (event) => this.handleRgbChannelChange('b', event)),
-        ])), this.showRgba && (this.renderChannelGroup('RGBA', 4, [
+        ])), this.isFormatEnabled('rgba') && (this.renderChannelGroup('RGBA', 4, [
             this.renderChannelInput('rgba-r', 'R', this.getRgbValues().r, 0, 255, 1, (event) => this.handleRgbaChannelChange('r', event)),
             this.renderChannelInput('rgba-g', 'G', this.getRgbValues().g, 0, 255, 1, (event) => this.handleRgbaChannelChange('g', event)),
             this.renderChannelInput('rgba-b', 'B', this.getRgbValues().b, 0, 255, 1, (event) => this.handleRgbaChannelChange('b', event)),
             this.renderChannelInput('rgba-a', 'A', this.alpha, 0, 1, 0.01, (event) => this.handleRgbaChannelChange('a', event)),
-        ])), this.showHsl && (this.renderChannelGroup('HSL', 3, [
+        ])), this.isFormatEnabled('hsl') && (this.renderChannelGroup('HSL', 3, [
             this.renderChannelInput('hsl-h', 'H', this.hue, 0, 360, 1, (event) => this.handleHslChannelChange('h', event)),
             this.renderChannelInput('hsl-s', 'S', this.saturation, 0, 100, 1, (event) => this.handleHslChannelChange('s', event)),
             this.renderChannelInput('hsl-l', 'L', this.lightness, 0, 100, 1, (event) => this.handleHslChannelChange('l', event)),
-        ])), this.showHsla && (this.renderChannelGroup('HSLA', 4, [
+        ])), this.isFormatEnabled('hsla') && (this.renderChannelGroup('HSLA', 4, [
             this.renderChannelInput('hsla-h', 'H', this.hue, 0, 360, 1, (event) => this.handleHslaChannelChange('h', event)),
             this.renderChannelInput('hsla-s', 'S', this.saturation, 0, 100, 1, (event) => this.handleHslaChannelChange('s', event)),
             this.renderChannelInput('hsla-l', 'L', this.lightness, 0, 100, 1, (event) => this.handleHslaChannelChange('l', event)),
             this.renderChannelInput('hsla-a', 'A', this.alpha, 0, 1, 0.01, (event) => this.handleHslaChannelChange('a', event)),
-        ])), this.showColorName && (index.h("div", { key: 'e73f932f199ad98b6d0155e4f39fc6f731821e75', class: "cp-input-wrap cp-full" }, index.h("span", { key: 'c47ac8a26ae1f1db9cc2a6fa0888ed2568043b30', class: "cp-sm-label" }, "NAME"), index.h("div", { key: '393f4e95fa277dc016f4c31291683973f4f0a48a', class: "cp-name-display" }, this.getColorName(currentColor)))), this.showGradient && (index.h("div", { key: '9029146f00a030168b63ea55a9a1f9ec67ce7cfa', class: "cp-gradient-toggle-wrap cp-full" }, index.h("ui-button", { key: 'a6561f32b69e43b5651134b73a6ab195b721c2c9', variant: 'outline', class: { 'cp-gradient-toggle': true, 'cp-active': this.isGradientMode }, onClick: this.toggleGradientMode, fullWidth: true, label: this.isGradientMode ? 'Disable Gradient' : 'Enable Gradient', size: "sm" }), this.isGradientMode && (index.h("div", { key: 'aabaa25bd9f75a7bec76e611b9d852b8918fd718', class: "cp-stop-selectors" }, this.gradientStops.map((stop, i) => (index.h("button", { type: "button", class: { 'cp-swatch': true, 'cp-swatch-active': this.activeStopIndex === i }, style: { 'background-color': stop, '--swatch-color': stop, 'border-radius': '50%' }, onClick: () => this.activeStopIndex = i, "aria-label": `Gradient stop ${i + 1}` }))))))))), !this.isInputVariant() && (this.showSwatches || (this.showRecent && this.recentColors.length > 0)) && (index.h("div", { key: 'b928b33063877a58493f56aa01a37efac5fade30', class: "cp-swatches-section" }, index.h("div", { key: '02b8efedfdad4aa7bbe93b63bd3075395bef8f37', class: "cp-swatches" }, swatches.map(s => (index.h("ui-button", { type: "button", style: { 'background-color': s, '--swatch-color': s }, class: { 'cp-swatch': true, 'cp-swatch-active': s.toLowerCase() === currentColor.toLowerCase() }, onClick: () => this.handleSwatch(s), title: this.getColorName(s), "aria-label": `Color ${this.getColorName(s)}` })))), this.showRecent && this.recentColors.length > 0 && (index.h("div", { key: '68a6692afc4ae42ac02c8835fb65f40d64572ffd', class: "cp-history", style: { marginTop: '16px' } }, index.h("div", { key: 'c14af759e7380d18fa8b046bd91d97e0d4bb7b43', class: "cp-sm-label", style: { marginBottom: '8px' } }, "RECENT"), index.h("div", { key: 'a405d48643d7b452cb90dcfd5d2756a91a37585c', class: "cp-swatches" }, this.recentColors.map(s => (index.h("ui-button", { type: "button", style: { 'background-color': s, '--swatch-color': s, 'border-radius': '50%' }, class: { 'cp-swatch': true, 'cp-history-swatch': true, 'cp-swatch-active': s.toLowerCase() === currentColor.toLowerCase() }, onClick: () => this.handleSwatch(s), title: this.getColorName(s), "aria-label": `Recent color ${this.getColorName(s)}` }))))))))));
-        return (index.h(index.Host, { key: '437644b794e0abc1a9a37f77641ef9edf0bc47d7', class: `cp-size-${this.size} cp-variant-${this.variant}` }, this.label && index.h("label", { key: 'ba2bb236655f6eab50c62cd18d3b07bbc0cf37b1', class: "cp-label" }, this.label), this.inline ? picker : (index.h("div", { class: "cp-trigger-wrapper" }, index.h("ui-button", { variant: "outline", disabled: this.disabled, onClick: () => !this.disabled && (this.isOpen = !this.isOpen), fullWidth: true }, index.h("span", { class: "cp-trigger-swatch", style: { background: this.value } }), index.h("span", { class: "cp-trigger-value", style: { marginLeft: '8px', flex: '1', textAlign: 'left' } }, this.isGradientMode ? this.value : this.getFormattedValue()), index.h("ui-icon", { name: this.isOpen ? 'chevron-up' : 'chevron-down', size: "18", library: "lucide" })), this.isOpen && (index.h("div", { class: "cp-dropdown" }, picker))))));
+        ])), this.showColorName && (index.h("div", { key: '59c6affab34a5d5e8ac1bcbbbd6b596129fc8c01', class: "cp-input-wrap cp-full" }, index.h("span", { key: '416b9dd86cd1b26d166f79799d988a0f31c94c0f', class: "cp-sm-label" }, "NAME"), index.h("div", { key: '0580d021a17ef4791bb693e62ab81328b859e1e3', class: "cp-name-display" }, this.getColorName(currentColor)))), this.showGradient && (index.h("div", { key: '36c26bcd60a6670b5db602cb64c28eb472831b34', class: "cp-gradient-toggle-wrap cp-full" }, index.h("ui-button", { key: 'd66bcf4f0079ebb0a674c4f72d29eddeab535748', variant: 'outline', class: { 'cp-gradient-toggle': true, 'cp-active': this.isGradientMode }, onClick: this.toggleGradientMode, fullWidth: true, label: this.isGradientMode ? 'Disable Gradient' : 'Enable Gradient', size: "sm" }), this.isGradientMode && (index.h("div", { key: 'b5c68733d93b41955a8c869ec413306c4c249fa6', class: "cp-stop-selectors" }, this.gradientStops.map((stop, i) => (index.h("button", { type: "button", class: { 'cp-swatch': true, 'cp-swatch-active': this.activeStopIndex === i }, style: { 'background-color': stop, '--swatch-color': stop, 'border-radius': '50%' }, onClick: () => this.activeStopIndex = i, "aria-label": `Gradient stop ${i + 1}` }))))))))), !this.isInputVariant() && (this.showSwatches || (this.showRecent && this.recentColors.length > 0)) && (index.h("div", { key: '5d0c7ae9c61d21bbc61c825c024cfd4a18969729', class: "cp-swatches-section" }, index.h("div", { key: '561f17394b3e185dba5e0cd0ee33607b72853992', class: "cp-swatches" }, swatches.map(s => (index.h("button", { type: "button", style: { 'background-color': s, '--swatch-color': s }, class: { 'cp-swatch': true, 'cp-swatch-active': s.toLowerCase() === currentColor.toLowerCase() }, onClick: () => this.handleSwatch(s), title: this.getColorName(s), "aria-label": `Color ${this.getColorName(s)}` })))), this.showRecent && this.recentColors.length > 0 && (index.h("div", { key: '961bdc3ff4959328d340dad0eae2ea3ec8f0c6fd', class: "cp-history", style: { marginTop: '16px' } }, index.h("div", { key: '2b0e31318c0be810b2ab1e0f2fa058e838488ce7', class: "cp-sm-label", style: { marginBottom: '8px' } }, "RECENT"), index.h("div", { key: '72ace7d3af678623f196ace590027a3c8e8e4332', class: "cp-swatches" }, this.recentColors.map(s => (index.h("button", { type: "button", style: { 'background-color': s, '--swatch-color': s, 'border-radius': '50%' }, class: { 'cp-swatch': true, 'cp-history-swatch': true, 'cp-swatch-active': s.toLowerCase() === currentColor.toLowerCase() }, onClick: () => this.handleSwatch(s), title: this.getColorName(s), "aria-label": `Recent color ${this.getColorName(s)}` }))))))))));
+        return (index.h(index.Host, { key: 'ea389dfa80644128e47af4416097548127585782', class: `cp-size-${this.size} cp-variant-${this.variant}` }, this.label && index.h("label", { key: '36154620d4bfad250103eec666f4c6f7934edd14', class: "cp-label" }, this.label), this.inline ? picker : (index.h("div", { class: `cp-trigger-wrapper${this.compact ? ' cp-trigger-wrapper--compact' : ''}` }, this.compact ? (index.h("button", { class: { 'cp-trigger-compact': true, 'cp-disabled': this.disabled, 'cp-open': this.isOpen }, disabled: this.disabled, "aria-label": `Color picker, current color ${this.getFormattedValue()}`, onClick: () => {
+                if (this.disabled)
+                    return;
+                if (!this.isOpen)
+                    this.preComputePlacement();
+                this.isOpen = !this.isOpen;
+            } }, index.h("span", { class: "cp-trigger-compact-swatch", style: { background: this.value } }))) : (index.h("ui-button", { variant: "outline", disabled: this.disabled, onClick: () => {
+                if (this.disabled)
+                    return;
+                if (!this.isOpen)
+                    this.preComputePlacement();
+                this.isOpen = !this.isOpen;
+            }, fullWidth: true }, index.h("span", { class: "cp-trigger-swatch", style: { background: this.value } }), index.h("span", { class: "cp-trigger-value", style: { marginLeft: '8px', flex: '1', textAlign: 'left' } }, this.isGradientMode ? this.value : this.getFormattedValue()), index.h("ui-icon", { name: this.isOpen ? 'chevron-up' : 'chevron-down', size: "18", library: "lucide" }))), this.isOpen && (index.h("div", { class: "cp-dropdown", style: this.dropdownStyle }, picker))))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
+        "formats": [{
+                "handleFormatsChange": 0
+            }],
+        "isOpen": [{
+                "handleIsOpenChange": 0
+            }],
         "value": [{
                 "valueChanged": 0
             }]

package/dist/cjs/ui-command-palette.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const commandPaletteCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;position:fixed;z-index:9999;inset:0}:host(.cp-hidden){display:none;pointer-events:none}.cp-backdrop,.cp-modal{pointer-events:auto}.cp-backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:cp-fade-in 0.25s cubic-bezier(0.4, 0, 0.2, 1)}@keyframes cp-fade-in{from{opacity:0}to{opacity:1}}.cp-modal{position:fixed;top:20%;left:50%;transform:translateX(-50%);width:560px;max-width:calc(100vw - 32px);background:var(--bg-primary, #ffffff);border-radius:16px;box-shadow:0 25px 60px rgba(0, 0, 0, 0.25);overflow:hidden;animation:cp-slide-in 0.15s ease;z-index:10000}@keyframes cp-slide-in{from{opacity:0;transform:translateX(-50%) translateY(-12px) scale(0.97)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}.cp-search-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-subtle, #f3f4f6)}.cp-search-icon{font-size:18px;color:var(--text-muted, #9ca3af);flex-shrink:0}.cp-search-input{flex:1;border:none;outline:none;font-size:16px;color:var(--text-primary, #111827);background:transparent}.cp-search-input::placeholder{color:var(--bg-secondary, #d1d5db)}.cp-clear{border:none;background:none;color:var(--text-muted, #9ca3af);font-size:14px;cursor:pointer;padding:4px;border-radius:50%;line-height:1}.cp-clear:hover{background:var(--bg-secondary, #f3f4f6);color:var(--text-secondary, #374151)}.cp-esc{background:var(--bg-secondary, #f3f4f6);border:1px solid var(--border-default, #e5e7eb);border-radius:5px;padding:2px 7px;font-size:11px;color:var(--text-muted, #6b7280);flex-shrink:0}.cp-results{max-height:380px;overflow-y:auto}.cp-results::-webkit-scrollbar{width:4px}.cp-results::-webkit-scrollbar-thumb{background:var(--bg-primary, #e5e7eb);border-radius:4px}.cp-empty{text-align:center;padding:40px 20px;color:var(--text-muted, #6b7280);font-size:14px}.cp-empty strong{color:var(--text-secondary, #374151)}.cp-group{padding:6px 0}.cp-group-label{padding:6px 16px 4px;font-size:11px;font-weight:700;color:var(--text-muted, #9ca3af);text-transform:uppercase;letter-spacing:0.6px}.cp-item{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;border-radius:8px;margin:0 8px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);opacity:0;transform:translateY(10px);animation:cp-item-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;animation-delay:calc(var(--stagger-idx, 0) * 0.03s)}.cp-item:hover,.cp-item.cp-item-active{background:var(--bg-secondary, #f3f4f6);transform:scale(1.01) translateY(0)}.cp-item:hover .cp-item-label,.cp-item.cp-item-active .cp-item-label{color:var(--color-primary, #10b981)}@keyframes cp-item-appear{to{opacity:1;transform:translateY(0)}}.cp-item-icon{font-size:20px;flex-shrink:0;width:28px;text-align:center}.cp-item-content{flex:1;min-width:0}.cp-item-label{display:block;font-size:14px;font-weight:500;color:var(--text-primary, #111827)}.cp-item-desc{display:block;font-size:12px;color:var(--text-muted, #9ca3af);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-shortcut{background:var(--bg-secondary, #f3f4f6);border:1px solid var(--border-default, #e5e7eb);border-radius:5px;padding:2px 8px;font-size:11px;color:var(--text-muted, #6b7280);white-space:nowrap;flex-shrink:0}.cp-footer{display:flex;gap:18px;align-items:center;padding:10px 16px;border-top:1px solid var(--border-subtle, #f3f4f6);background:var(--bg-primary, #fafafa);font-size:11px;color:var(--text-muted, #9ca3af)}.cp-footer kbd{background:var(--bg-primary, #e5e7eb);border:1px solid var(--border-strong, #d1d5db);border-radius:4px;padding:1px 5px;font-size:10px;color:var(--text-secondary, #374151);margin-right:3px}`;