atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/color-picker/color-picker.js

@@ -7,14 +7,19 @@ export class ColorPicker {
     /** 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;
@@ -42,6 +47,8 @@ export class ColorPicker {
     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;
     el;
     internals;
     isOpen = false;
@@ -56,6 +63,10 @@ export class ColorPicker {
     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) {
@@ -92,13 +103,138 @@ export class ColorPicker {
             }
         }
     }
+    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);
     }
@@ -405,7 +541,32 @@ export class ColorPicker {
         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);
@@ -462,8 +623,14 @@ export class ColorPicker {
         // 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;
@@ -474,8 +641,13 @@ export class ColorPicker {
         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;
@@ -500,9 +672,14 @@ export class ColorPicker {
         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;
@@ -517,8 +694,13 @@ export class ColorPicker {
         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;
@@ -560,7 +742,9 @@ export class ColorPicker {
         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 {
@@ -571,18 +755,50 @@ export class ColorPicker {
         };
     }
     renderFormatInput(label, value, onInputChange, formatKey) {
-        return (h("div", { class: "cp-input-wrap cp-full cp-inline-row" }, h("span", { class: "cp-sm-label" }, label), 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 (h("div", { class: "cp-input-wrap cp-full cp-inline-row" }, h("span", { class: "cp-sm-label" }, label), h("div", { class: "cp-input-field-wrap" }, 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 && h("span", { class: "cp-field-error" }, errMsg))));
     }
     renderChannelInput(fieldKey, label, value, min, max, step, onInputChange) {
         return (h("div", { class: "cp-channel-field" }, h("span", { class: "cp-channel-label" }, label), 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 (h("div", { class: "cp-input-wrap cp-full cp-channel-group cp-inline-row" }, h("span", { class: "cp-sm-label" }, label), 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 (h("div", { class: "cp-input-wrap cp-full cp-channel-group cp-inline-row" }, h("span", { class: "cp-sm-label" }, label), h("div", { class: "cp-channel-col" }, h("div", { class: { 'cp-channel-grid': true, 'cp-channel-grid-3': columns === 3, 'cp-channel-grid-4': columns === 4 } }, fields), errMsg && 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 = (h("div", { key: '1e6a1eb368643f6e67d9804cce7bcfed32b1bd1d', class: this.getPanelClasses() }, this.showGradientSurface() && (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 = (h("div", { key: '947077dfe39fcd935bc97692b063b91d0fd06a9d', class: this.getPanelClasses() }, this.showGradientSurface() && (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);
@@ -616,26 +832,38 @@ export class ColorPicker {
                 window.addEventListener('mousemove', onMove);
                 window.addEventListener('mouseup', onUp);
                 onMove(e);
-            } }, h("div", { key: '4136b69d81619ce158f2988be19e3e866dfa4ae8', class: "cp-gradient-thumb", style: { left: `${this.saturation}%`, top: `${100 - this.lightness}%`, background: currentColor } }))), this.showSliderSection() && (h("div", { key: '27572206380ad082b4c49a9652b171169d4d92c0', class: "cp-row" }, h("div", { key: 'c69c64ac7d1173add32d3c0541ac73fe70383d7e', class: "cp-preview", style: { background: currentColor } }), h("div", { key: '54663ac5d49a43922b4a46587383b4ea3db54520', class: "cp-sliders" }, 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 && (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 && (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() && (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, [
+            } }, h("div", { key: '393bdcc90e400571ed7a51aaa25ac73868cd1c55', class: "cp-gradient-thumb", style: { left: `${this.saturation}%`, top: `${100 - this.lightness}%`, background: currentColor } }))), this.showSliderSection() && (h("div", { key: 'ede35ae4eb38c8b655c7f74075fcfaf8ee9cb7c0', class: "cp-row" }, h("div", { key: 'fda077df5270580b81cacd22b252d4acb9a770ed', class: "cp-preview", style: { background: currentColor } }), h("div", { key: 'f9f013ad09b24b5d42ac0d46fc60d473dcc699a1', class: "cp-sliders" }, 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 && (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 && (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() && (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 && (h("div", { key: 'e73f932f199ad98b6d0155e4f39fc6f731821e75', class: "cp-input-wrap cp-full" }, h("span", { key: 'c47ac8a26ae1f1db9cc2a6fa0888ed2568043b30', class: "cp-sm-label" }, "NAME"), h("div", { key: '393f4e95fa277dc016f4c31291683973f4f0a48a', class: "cp-name-display" }, this.getColorName(currentColor)))), this.showGradient && (h("div", { key: '9029146f00a030168b63ea55a9a1f9ec67ce7cfa', class: "cp-gradient-toggle-wrap cp-full" }, 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 && (h("div", { key: 'aabaa25bd9f75a7bec76e611b9d852b8918fd718', class: "cp-stop-selectors" }, this.gradientStops.map((stop, i) => (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)) && (h("div", { key: 'b928b33063877a58493f56aa01a37efac5fade30', class: "cp-swatches-section" }, h("div", { key: '02b8efedfdad4aa7bbe93b63bd3075395bef8f37', class: "cp-swatches" }, swatches.map(s => (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 && (h("div", { key: '68a6692afc4ae42ac02c8835fb65f40d64572ffd', class: "cp-history", style: { marginTop: '16px' } }, h("div", { key: 'c14af759e7380d18fa8b046bd91d97e0d4bb7b43', class: "cp-sm-label", style: { marginBottom: '8px' } }, "RECENT"), h("div", { key: 'a405d48643d7b452cb90dcfd5d2756a91a37585c', class: "cp-swatches" }, this.recentColors.map(s => (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 (h(Host, { key: '437644b794e0abc1a9a37f77641ef9edf0bc47d7', class: `cp-size-${this.size} cp-variant-${this.variant}` }, this.label && h("label", { key: 'ba2bb236655f6eab50c62cd18d3b07bbc0cf37b1', class: "cp-label" }, this.label), this.inline ? picker : (h("div", { class: "cp-trigger-wrapper" }, h("ui-button", { variant: "outline", disabled: this.disabled, onClick: () => !this.disabled && (this.isOpen = !this.isOpen), fullWidth: true }, h("span", { class: "cp-trigger-swatch", style: { background: this.value } }), h("span", { class: "cp-trigger-value", style: { marginLeft: '8px', flex: '1', textAlign: 'left' } }, this.isGradientMode ? this.value : this.getFormattedValue()), h("ui-icon", { name: this.isOpen ? 'chevron-up' : 'chevron-down', size: "18", library: "lucide" })), this.isOpen && (h("div", { class: "cp-dropdown" }, picker))))));
+        ])), this.showColorName && (h("div", { key: '59c6affab34a5d5e8ac1bcbbbd6b596129fc8c01', class: "cp-input-wrap cp-full" }, h("span", { key: '416b9dd86cd1b26d166f79799d988a0f31c94c0f', class: "cp-sm-label" }, "NAME"), h("div", { key: '0580d021a17ef4791bb693e62ab81328b859e1e3', class: "cp-name-display" }, this.getColorName(currentColor)))), this.showGradient && (h("div", { key: '36c26bcd60a6670b5db602cb64c28eb472831b34', class: "cp-gradient-toggle-wrap cp-full" }, 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 && (h("div", { key: 'b5c68733d93b41955a8c869ec413306c4c249fa6', class: "cp-stop-selectors" }, this.gradientStops.map((stop, i) => (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)) && (h("div", { key: '5d0c7ae9c61d21bbc61c825c024cfd4a18969729', class: "cp-swatches-section" }, h("div", { key: '561f17394b3e185dba5e0cd0ee33607b72853992', class: "cp-swatches" }, swatches.map(s => (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 && (h("div", { key: '961bdc3ff4959328d340dad0eae2ea3ec8f0c6fd', class: "cp-history", style: { marginTop: '16px' } }, h("div", { key: '2b0e31318c0be810b2ab1e0f2fa058e838488ce7', class: "cp-sm-label", style: { marginBottom: '8px' } }, "RECENT"), h("div", { key: '72ace7d3af678623f196ace590027a3c8e8e4332', class: "cp-swatches" }, this.recentColors.map(s => (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 (h(Host, { key: 'ea389dfa80644128e47af4416097548127585782', class: `cp-size-${this.size} cp-variant-${this.variant}` }, this.label && h("label", { key: '36154620d4bfad250103eec666f4c6f7934edd14', class: "cp-label" }, this.label), this.inline ? picker : (h("div", { class: `cp-trigger-wrapper${this.compact ? ' cp-trigger-wrapper--compact' : ''}` }, this.compact ? (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;
+            } }, h("span", { class: "cp-trigger-compact-swatch", style: { background: this.value } }))) : (h("ui-button", { variant: "outline", disabled: this.disabled, onClick: () => {
+                if (this.disabled)
+                    return;
+                if (!this.isOpen)
+                    this.preComputePlacement();
+                this.isOpen = !this.isOpen;
+            }, fullWidth: true }, h("span", { class: "cp-trigger-swatch", style: { background: this.value } }), h("span", { class: "cp-trigger-value", style: { marginLeft: '8px', flex: '1', textAlign: 'left' } }, this.isGradientMode ? this.value : this.getFormattedValue()), h("ui-icon", { name: this.isOpen ? 'chevron-up' : 'chevron-down', size: "18", library: "lucide" }))), this.isOpen && (h("div", { class: "cp-dropdown", style: this.dropdownStyle }, picker))))));
     }
     static get is() { return "ui-color-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -730,7 +958,7 @@ export class ColorPicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-rgb",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "showRgba": {
                 "type": "boolean",
@@ -750,7 +978,7 @@ export class ColorPicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-rgba",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "showHsl": {
                 "type": "boolean",
@@ -770,7 +998,7 @@ export class ColorPicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-hsl",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "showHsla": {
                 "type": "boolean",
@@ -790,7 +1018,27 @@ export class ColorPicker {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-hsla",
-                "defaultValue": "true"
+                "defaultValue": "false"
+            },
+            "formats": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "formats",
+                "defaultValue": "''"
             },
             "showAlpha": {
                 "type": "boolean",
@@ -804,7 +1052,7 @@ export class ColorPicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Show alpha channel slider"
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -1092,6 +1340,26 @@ export class ColorPicker {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "'default'"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Compact trigger \u2014 shows only the color swatch, no hex label or arrow"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
             }
         };
     }
@@ -1108,7 +1376,9 @@ export class ColorPicker {
             "recentColors": {},
             "isGradientMode": {},
             "gradientStops": {},
-            "activeStopIndex": {}
+            "activeStopIndex": {},
+            "enabledFormatsSet": {},
+            "dropdownStyle": {}
         };
     }
     static get events() {
@@ -1132,6 +1402,12 @@ export class ColorPicker {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "formats",
+                "methodName": "handleFormatsChange"
+            }, {
+                "propName": "isOpen",
+                "methodName": "handleIsOpenChange"
+            }, {
                 "propName": "value",
                 "methodName": "valueChanged"
             }];

package/dist/collection/components/context-menu/context-menu.css

@@ -33,9 +33,9 @@
   --ctx-fg: var(--text-primary, #000000);
   --ctx-border: var(--border-default, #d9d9d9);
   --ctx-hover: var(--bg-secondary, #e6e6e6);
-  --ctx-active: rgba(0, 138, 22, 0.08);
-  --ctx-active-fg: var(--color-success, #008a16);
-  --ctx-active-icon: var(--color-success, #008a16);
+  --ctx-active: var(--color-primary-subtle, rgba(0, 138, 22, 0.08));
+  --ctx-active-fg: var(--color-primary, #008a16);
+  --ctx-active-icon: var(--color-primary, #008a16);
   /* Force Opaque Background for accessibility & occlusion */
   background-color: var(--ctx-bg, #ffffff) !important;
   background-image: none !important;
@@ -100,12 +100,12 @@ html[data-theme=dark] :host .ctx-menu::-webkit-scrollbar-thumb {
 html[data-theme=dark] :host .ctx-menu {
   /* Portal Consistent Dark Theme */
   --ctx-bg: var(--bg-primary, #1e293b);
-  --ctx-fg: var(--bg-primary, #e2e8f0);
+  --ctx-fg: var(--text-primary, #e2e8f0);
   --ctx-border: var(--color-primary, #334155);
   --ctx-hover: var(--color-primary, #334155);
-  --ctx-active: rgba(0, 138, 22, 0.15);
-  --ctx-active-fg: var(--color-success, #008a16);
-  --ctx-active-icon: var(--color-success, #008a16);
+  --ctx-active: var(--color-primary-subtle, rgba(0, 138, 22, 0.15));
+  --ctx-active-fg: var(--color-primary, #008a16);
+  --ctx-active-icon: var(--color-primary, #008a16);
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 8px 10px rgba(0, 0, 0, 0.2);
 }
 
@@ -195,7 +195,7 @@ html[data-theme=dark] :host .ctx-list::-webkit-scrollbar-thumb:hover {
   transform: translateY(-50%);
   width: 4px;
   height: 24px;
-  background-color: var(--color-success, #008a16);
+  background-color: var(--color-primary, #008a16);
   border-radius: 4px;
 }