@nuralyui/colorpicker 0.0.4 → 0.0.6

package/color-picker.component.js

@@ -1,134 +1,321 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { LitElement, html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import '../input/index.js';
+// Import child components
 import './color-holder.component.js';
 import './default-color-sets.component.js';
+// Import styles and types
 import styles from './color-picker.style.js';
-let ColorPicker = class ColorPicker extends LitElement {
+// Import controllers
+import { ColorPickerDropdownController, ColorPickerEventController, } from './controllers/index.js';
+/**
+ * Advanced color picker component with dropdown positioning, validation, and accessibility.
+ *
+ * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,
+ * and various display configurations.
+ *
+ * @example
+ * ```html
+ * <!-- Basic color picker -->
+ * <nr-color-picker color="#3498db"></nr-color-picker>
+ *
+ * <!-- With default colors -->
+ * <nr-color-picker
+ *   color="#3498db"
+ *   .defaultColorSets="${['#3498db', '#e74c3c', '#2ecc71']}">
+ * </nr-color-picker>
+ *
+ * <!-- With custom configuration -->
+ * <nr-color-picker
+ *   color="#3498db"
+ *   trigger="click"
+ *   placement="top"
+ *   size="large"
+ *   show-input="true"
+ *   show-copy-button="true">
+ * </nr-color-picker>
+ *
+ * <!-- Disabled -->
+ * <nr-color-picker color="#3498db" disabled></nr-color-picker>
+ * ```
+ *
+ * @fires hy-color-change - Color value changed
+ * @fires nr-colorpicker-open - Dropdown opened
+ * @fires nr-colorpicker-close - Dropdown closed
+ * @fires color-changed - Legacy event for backwards compatibility
+ *
+ * @slot - Default slot for custom content
+ *
+ * @cssproperty --colorpicker-trigger-size - Size of the color trigger box
+ * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel
+ * @cssproperty --colorpicker-dropdown-background - Background color of dropdown
+ * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel
+ * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown
+ */
+let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super();
-        this.color = 'transparent';
+        this.requiredComponents = ['nr-input', 'nr-icon'];
+        /** Current color value */
+        this.color = '#3498db';
+        /** Controls dropdown visibility */
         this.show = false;
+        /** Array of preset colors to display */
         this.defaultColorSets = [];
+        /** Disables the color picker */
         this.disabled = false;
+        /** Color picker size (small, default, large) */
         this.size = "default" /* ColorPickerSize.Default */;
+        /** Trigger mode for opening dropdown */
+        this.trigger = "click" /* ColorPickerTrigger.Click */;
+        /** Dropdown placement */
+        this.placement = "auto" /* ColorPickerPlacement.Auto */;
+        /** Animation style for dropdown */
+        this.animation = "fade" /* ColorPickerAnimation.Fade */;
+        /** Close dropdown when a color is selected */
+        this.closeOnSelect = false;
+        /** Close dropdown on outside click */
+        this.closeOnOutsideClick = true;
+        /** Close dropdown on escape key */
+        this.closeOnEscape = true;
+        /** Show color input field */
+        this.showInput = true;
+        /** Show copy button on input */
+        this.showCopyButton = true;
+        /** Color format (hex, rgb, rgba, hsl, hsla) */
+        this.format = "hex" /* ColorFormat.Hex */;
+        /** Placeholder text for color input */
+        this.inputPlaceholder = 'Enter color';
+        /** Label text */
+        this.label = '';
+        /** Helper text */
+        this.helperText = '';
+        /** Validation state for color value */
         this.isValidColor = true;
-        this.onClickOutside = (onClickEvent) => {
-            const outsideClick = !onClickEvent.composedPath().includes(this);
-            if (outsideClick)
-                this.show = false;
+        /** Manages dropdown visibility and positioning */
+        this.dropdownController = new ColorPickerDropdownController(this);
+        /** Handles all event management */
+        this.eventController = new ColorPickerEventController(this);
+        /**
+         * Handles trigger click to toggle dropdown
+         */
+        this.handleTriggerClick = (event) => {
+            this.eventController.handleTriggerClick(event);
         };
-        this.calculateDropDownPosition = () => {
-            var _a, _b;
-            const dropdownContainer = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-container');
-            const colorHolder = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.color-holder');
-            if (dropdownContainer && colorHolder) {
-                const dropdownRect = dropdownContainer.getBoundingClientRect();
-                const colorHolderRect = colorHolder.getBoundingClientRect();
-                const viewportHeight = window.innerHeight;
-                const viewportWidth = window.innerWidth;
-                // Check if the dropdown is going out of the viewport vertically
-                if (colorHolderRect.bottom + dropdownRect.height > viewportHeight) {
-                    // Move the dropdown upwards if it goes out of the viewport
-                    dropdownContainer.style.top = `${colorHolderRect.top - dropdownRect.height}px`;
-                }
-                else {
-                    // Otherwise, position it below the color holder
-                    dropdownContainer.style.top = `${colorHolderRect.bottom}px`;
-                }
-                // Check if the dropdown is going out of the viewport horizontally
-                if (colorHolderRect.right + dropdownRect.width > viewportWidth) {
-                    // Move the dropdown to the left if it goes out of the viewport
-                    dropdownContainer.style.left = `${viewportWidth - dropdownRect.width}px`;
-                }
-                else {
-                    // Otherwise, position it to the right of the color holder
-                    dropdownContainer.style.left = `${colorHolderRect.left}px`;
-                }
+        /**
+         * Handles color selection from hex-color-picker or default colors
+         */
+        this.handleColorChanged = (event) => {
+            const newColor = event.detail.value;
+            this.eventController.handleColorChange(newColor);
+            if (this.closeOnSelect) {
+                this.dropdownController.close();
             }
         };
+        /**
+         * Handles input change from text input
+         */
+        this.handleInputChange = (event) => {
+            this.eventController.handleInputChange(event);
+        };
+        // Dynamically import vanilla-colorful for color picker UI
         if (typeof window !== 'undefined') {
             import('vanilla-colorful');
         }
     }
+    /**
+     * Component connected to DOM - initialize base functionality
+     */
     connectedCallback() {
         super.connectedCallback();
-        // Mark the scroll listener as passive:
-        document.addEventListener('scroll', this.calculateDropDownPosition, {
-            passive: true,
-        });
-        document.addEventListener('click', this.onClickOutside);
     }
+    /**
+     * Component disconnected from DOM - cleanup event listeners
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    /**
+     * Called after component updates
+     */
     updated(changedProperties) {
+        super.updated(changedProperties);
         if (changedProperties.has('color')) {
-            this.checkIsValidColor();
+            this.validateColor();
         }
     }
-    toggleColorHolder() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.show = !this.show;
-            yield this.updateComplete;
-            this.calculateDropDownPosition();
-        });
-    }
-    handleColorChanged(colorChangedEvent) {
-        if (this.color != colorChangedEvent.detail.value) {
-            this.color = colorChangedEvent.detail.value;
-            this.dispatchColorChange();
-        }
+    // === Public API Methods ===
+    /**
+     * Opens the color picker dropdown
+     */
+    open() {
+        this.dropdownController.open();
     }
-    onInputChange(inputChangedEvent) {
-        if (this.color != inputChangedEvent.detail.value) {
-            this.color = inputChangedEvent.detail.value;
-            this.dispatchColorChange();
-        }
+    /**
+     * Closes the color picker dropdown
+     */
+    close() {
+        this.dropdownController.close();
     }
-    dispatchColorChange() {
-        this.dispatchEvent(new CustomEvent('color-changed', {
-            detail: {
-                value: this.color,
-            },
-        }));
+    /**
+     * Toggles the color picker dropdown
+     */
+    toggle() {
+        this.dropdownController.toggle();
     }
-    checkIsValidColor() {
-        this.isValidColor = CSS.supports('color', this.color);
+    /**
+     * Validates the current color value
+     */
+    validateColor() {
+        this.isValidColor = this.eventController.isValidColor(this.color);
+        return this.isValidColor;
     }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.onClickOutside);
-        document.removeEventListener('scroll', this.calculateDropDownPosition);
+    /**
+     * Sets up global event listeners (called by dropdown controller)
+     */
+    setupEventListeners() {
+        if (this.closeOnOutsideClick || this.closeOnEscape) {
+            this.eventController.setupEventListeners();
+        }
     }
+    /**
+     * Removes global event listeners (called by dropdown controller)
+     */
+    removeEventListeners() {
+        this.eventController.removeEventListeners();
+    }
+    /**
+     * Main render method
+     */
     render() {
-        return html `<div class="color-picker-container">
-      <hy-colorholder-box
-        class="color-holder"
-        color="${this.color}"
-        .size=${this.size}
-        @click=${!this.disabled ? this.toggleColorHolder : nothing}
-      ></hy-colorholder-box>
-      <div class='dropdown-container'>
-        <hy-default-color-sets .defaultColorSets=${this.defaultColorSets} @color-click="${this.handleColorChanged}">
-        </hy-default-color-sets>
-        <hex-color-picker
+        const containerClasses = {
+            'color-picker-container': true,
+            'color-picker-container--disabled': this.disabled,
+            'color-picker-container--open': this.show,
+            [`color-picker-container--${this.size}`]: true,
+        };
+        return html `
+      <div class="${classMap(containerClasses)}" data-theme="${this.currentTheme}">
+        ${this.renderLabel()}
+        
+        <nr-colorholder-box
+          class="color-holder"
           color="${this.color}"
-          @color-changed="${(colorChangedEvent) => this.handleColorChanged(colorChangedEvent)}"
-        ></hex-color-picker>
-        <hy-input type="text" .value="${this.color}" @valueChange="${this.onInputChange}" withCopy=${true} .state=${!this.isValidColor ? 'error' : nothing}> </hy-input>
+          .size=${this.size}
+          ?disabled="${this.disabled}"
+          @click=${this.disabled ? nothing : this.handleTriggerClick}
+          role="button"
+          aria-label="Select color"
+          aria-expanded="${this.show}"
+          aria-haspopup="dialog"
+          tabindex="${this.disabled ? -1 : 0}"
+        ></nr-colorholder-box>
+        
+        ${this.renderDropdown()}
+        ${this.renderHelperText()}
+      </div>
+    `;
+    }
+    /**
+     * Renders the label if provided
+     */
+    renderLabel() {
+        if (!this.label)
+            return nothing;
+        return html `
+      <label class="color-picker-label">
+        ${this.label}
+      </label>
+    `;
+    }
+    /**
+     * Renders the dropdown panel with color picker
+     */
+    renderDropdown() {
+        if (!this.show)
+            return nothing;
+        return html `
+      <div 
+        class="dropdown-container"
+        role="dialog"
+        aria-label="Color picker"
+      >
+        ${this.renderDefaultColorSets()}
+        ${this.renderColorPicker()}
+        ${this.renderColorInput()}
+      </div>
+    `;
+    }
+    /**
+     * Renders default color sets if provided
+     */
+    renderDefaultColorSets() {
+        if (!this.defaultColorSets || this.defaultColorSets.length === 0) {
+            return nothing;
+        }
+        return html `
+      <nr-default-color-sets 
+        .defaultColorSets=${this.defaultColorSets} 
+        @color-click="${this.handleColorChanged}"
+        aria-label="Preset colors">
+      </nr-default-color-sets>
+    `;
+    }
+    /**
+     * Renders the hex color picker
+     */
+    renderColorPicker() {
+        return html `
+      <hex-color-picker
+        color="${this.color}"
+        @color-changed="${this.handleColorChanged}"
+        aria-label="Color gradient picker">
+      </hex-color-picker>
+    `;
+    }
+    /**
+     * Renders the color input field
+     */
+    renderColorInput() {
+        if (!this.showInput)
+            return nothing;
+        return html `
+      <nr-input 
+        type="text" 
+        .value="${this.color}" 
+        placeholder="${this.inputPlaceholder}"
+        @nr-input="${this.handleInputChange}" 
+        ?withCopy=${this.showCopyButton} 
+        .state="${!this.isValidColor ? "error" /* INPUT_STATE.Error */ : "default" /* INPUT_STATE.Default */}"
+        aria-label="Color value input"
+        aria-invalid="${!this.isValidColor}">
+      </nr-input>
+    `;
+    }
+    /**
+     * Renders helper text if provided
+     */
+    renderHelperText() {
+        if (!this.helperText)
+            return nothing;
+        return html `
+      <div class="color-picker-helper-text">
+        ${this.helperText}
       </div>
-    </div> `;
+    `;
     }
 };
 ColorPicker.styles = styles;
@@ -139,7 +326,7 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], ColorPicker.prototype, "show", void 0);
 __decorate([
-    property({ type: Array })
+    property({ type: Array, attribute: 'default-color-sets' })
 ], ColorPicker.prototype, "defaultColorSets", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -147,11 +334,47 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], ColorPicker.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPicker.prototype, "trigger", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPicker.prototype, "animation", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-select' })
+], ColorPicker.prototype, "closeOnSelect", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-outside-click' })
+], ColorPicker.prototype, "closeOnOutsideClick", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'close-on-escape' })
+], ColorPicker.prototype, "closeOnEscape", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-input' })
+], ColorPicker.prototype, "showInput", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-copy-button' })
+], ColorPicker.prototype, "showCopyButton", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], ColorPicker.prototype, "format", void 0);
+__decorate([
+    property({ type: String, attribute: 'input-placeholder' })
+], ColorPicker.prototype, "inputPlaceholder", void 0);
+__decorate([
+    property({ type: String })
+], ColorPicker.prototype, "label", void 0);
+__decorate([
+    property({ type: String, attribute: 'helper-text' })
+], ColorPicker.prototype, "helperText", void 0);
 __decorate([
     state()
 ], ColorPicker.prototype, "isValidColor", void 0);
 ColorPicker = __decorate([
-    customElement('hy-color-picker')
+    customElement('nr-color-picker')
 ], ColorPicker);
 export { ColorPicker };
 //# sourceMappingURL=color-picker.component.js.map

package/color-picker.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, PropertyValues, html, nothing} from 'lit';\nimport {customElement, property, state} from 'lit/decorators.js';\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\nimport styles from './color-picker.style.js';\nimport {ColorPickerSize} from './color-picker.types.js';\n\n@customElement('hy-color-picker')\nexport class ColorPicker extends LitElement {\n  @property({type: String})\n  color = 'transparent';\n\n  @property({type: Boolean, reflect: true})\n  show = false;\n\n  @property({type: Array})\n  defaultColorSets: Array<string> = [];\n\n  @property({type: Boolean, reflect: true})\n  disabled = false;\n\n  @property({type: String, reflect: true})\n  size = ColorPickerSize.Default;\n\n  @state()\n  isValidColor=true\n\n  static override styles = styles;\n\n  constructor() {\n    super();\n    if (typeof window !== 'undefined') {\n      import('vanilla-colorful');\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Mark the scroll listener as passive:\n    document.addEventListener('scroll', this.calculateDropDownPosition, {\n      passive: true,\n    });\n    document.addEventListener('click', this.onClickOutside);\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('color')) {\n      this.checkIsValidColor()\n    }\n  }\n  private async toggleColorHolder() {\n    this.show = !this.show;\n    await this.updateComplete;\n    this.calculateDropDownPosition();\n  }\n  private onClickOutside = (onClickEvent: Event) => {\n    const outsideClick =  !onClickEvent.composedPath().includes(this)\n      if(outsideClick)\n        this.show =false\n  };\n  private calculateDropDownPosition = () => {\n    const dropdownContainer = this.shadowRoot?.querySelector('.dropdown-container') as HTMLElement;\n    const colorHolder = this.shadowRoot?.querySelector('.color-holder')  as HTMLElement;\n\n    if (dropdownContainer && colorHolder) {\n      const dropdownRect = dropdownContainer.getBoundingClientRect();\n      const colorHolderRect = colorHolder.getBoundingClientRect();\n      const viewportHeight = window.innerHeight;\n      const viewportWidth = window.innerWidth;\n\n      // Check if the dropdown is going out of the viewport vertically\n      if (colorHolderRect.bottom + dropdownRect.height > viewportHeight) {\n        // Move the dropdown upwards if it goes out of the viewport\n        dropdownContainer.style.top = `${colorHolderRect.top - dropdownRect.height}px`;\n      } else {\n        // Otherwise, position it below the color holder\n        dropdownContainer.style.top = `${colorHolderRect.bottom}px`;\n      }\n\n      // Check if the dropdown is going out of the viewport horizontally\n      if (colorHolderRect.right + dropdownRect.width > viewportWidth) {\n        // Move the dropdown to the left if it goes out of the viewport\n        dropdownContainer.style.left = `${viewportWidth - dropdownRect.width}px`;\n      } else {\n        // Otherwise, position it to the right of the color holder\n        dropdownContainer.style.left = `${colorHolderRect.left}px`;\n      }\n    }\n  };\n\n  private handleColorChanged(colorChangedEvent: CustomEvent) {\n    if(this.color !=colorChangedEvent.detail.value){\n      this.color = colorChangedEvent.detail.value;\n      this.dispatchColorChange()\n    }\n  }\n\n  private onInputChange(inputChangedEvent: CustomEvent) {\n    if(this.color != inputChangedEvent.detail.value){\n      this.color = inputChangedEvent.detail.value;\n      this.dispatchColorChange()\n    }\n  }\n  private dispatchColorChange(){\n    this.dispatchEvent(\n      new CustomEvent('color-changed', {\n        detail: {\n          value: this.color,\n        },\n      })\n    );\n\n  }\n\n  private checkIsValidColor(){\n    this.isValidColor = CSS.supports('color',this.color)\n  }\n\n  override disconnectedCallback(): void {\n    document.removeEventListener('click', this.onClickOutside);\n    document.removeEventListener('scroll', this.calculateDropDownPosition);\n  }\n\n  override render() {\n    return html`<div class=\"color-picker-container\">\n      <hy-colorholder-box\n        class=\"color-holder\"\n        color=\"${this.color}\"\n        .size=${this.size}\n        @click=${!this.disabled ? this.toggleColorHolder : nothing}\n      ></hy-colorholder-box>\n      <div class='dropdown-container'>\n        <hy-default-color-sets .defaultColorSets=${this.defaultColorSets} @color-click=\"${this.handleColorChanged}\">\n        </hy-default-color-sets>\n        <hex-color-picker\n          color=\"${this.color}\"\n          @color-changed=\"${(colorChangedEvent: CustomEvent) => this.handleColorChanged(colorChangedEvent)}\"\n        ></hex-color-picker>\n        <hy-input type=\"text\" .value=\"${this.color}\" @valueChange=\"${this.onInputChange}\" withCopy=${true} .state=${!this.isValidColor?'error':nothing}> </hy-input>\n      </div>\n    </div> `;\n  }\n}\n"]}
+{"version":3,"file":"color-picker.component.js","sourceRoot":"","sources":["../../../src/components/colorpicker/color-picker.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;;;;;AAEH,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,mBAAmB,CAAC;AAE3B,0BAA0B;AAC1B,OAAO,6BAA6B,CAAC;AACrC,OAAO,mCAAmC,CAAC;AAE3C,0BAA0B;AAC1B,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAS7C,qBAAqB;AACrB,OAAO,EACL,6BAA6B,EAC7B,0BAA0B,GAC3B,MAAM,wBAAwB,CAAC;AAKhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAmF5D;QACE,KAAK,EAAE,CAAC;QAjFD,uBAAkB,GAAG,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC;QAEtD,0BAA0B;QAE1B,UAAK,GAAG,SAAS,CAAC;QAElB,mCAAmC;QAEnC,SAAI,GAAG,KAAK,CAAC;QAEb,wCAAwC;QAExC,qBAAgB,GAAa,EAAE,CAAC;QAEhC,gCAAgC;QAEhC,aAAQ,GAAG,KAAK,CAAC;QAEjB,gDAAgD;QAEhD,SAAI,2CAA4C;QAEhD,wCAAwC;QAExC,YAAO,0CAAgD;QAEvD,yBAAyB;QAEzB,cAAS,0CAAmD;QAE5D,mCAAmC;QAEnC,cAAS,0CAAmD;QAE5D,8CAA8C;QAE9C,kBAAa,GAAG,KAAK,CAAC;QAEtB,sCAAsC;QAEtC,wBAAmB,GAAG,IAAI,CAAC;QAE3B,mCAAmC;QAEnC,kBAAa,GAAG,IAAI,CAAC;QAErB,6BAA6B;QAE7B,cAAS,GAAG,IAAI,CAAC;QAEjB,gCAAgC;QAEhC,mBAAc,GAAG,IAAI,CAAC;QAEtB,+CAA+C;QAE/C,WAAM,+BAAgC;QAEtC,uCAAuC;QAEvC,qBAAgB,GAAG,aAAa,CAAC;QAEjC,iBAAiB;QAEjB,UAAK,GAAG,EAAE,CAAC;QAEX,kBAAkB;QAElB,eAAU,GAAG,EAAE,CAAC;QAEhB,uCAAuC;QAE/B,iBAAY,GAAG,IAAI,CAAC;QAE5B,kDAAkD;QAC1C,uBAAkB,GAAG,IAAI,6BAA6B,CAAC,IAAI,CAAC,CAAC;QAErE,mCAAmC;QAC3B,oBAAe,GAAG,IAAI,0BAA0B,CAAC,IAAI,CAAC,CAAC;QAkF/D;;WAEG;QACK,uBAAkB,GAAG,CAAC,KAAY,EAAQ,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QACjD,CAAC,CAAC;QAEF;;WAEG;QACK,uBAAkB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACxD,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACpC,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;YAEjD,IAAI,IAAI,CAAC,aAAa,EAAE;gBACtB,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;aACjC;QACH,CAAC,CAAC;QAEF;;WAEG;QACK,sBAAiB,GAAG,CAAC,KAAkB,EAAQ,EAAE;YACvD,IAAI,CAAC,eAAe,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAChD,CAAC,CAAC;QAtGA,0DAA0D;QAC1D,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;YACjC,MAAM,CAAC,kBAAkB,CAAC,CAAC;SAC5B;IACH,CAAC;IAED;;OAEG;IACM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC5B,CAAC;IAED;;OAEG;IACM,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IAED;;OAEG;IACM,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAEjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;YAClC,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;IACH,CAAC;IAED,6BAA6B;IAE7B;;OAEG;IACH,IAAI;QACF,IAAI,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;IACjC,CAAC;IAED;;OAEG;IACH,KAAK;QACH,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,MAAM;QACJ,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC;IACnC,CAAC;IAED;;OAEG;IACH,aAAa;QACX,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClE,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAED;;OAEG;IACH,mBAAmB;QACjB,IAAI,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC,aAAa,EAAE;YAClD,IAAI,CAAC,eAAe,CAAC,mBAAmB,EAAE,CAAC;SAC5C;IACH,CAAC;IAED;;OAEG;IACH,oBAAoB;QAClB,IAAI,CAAC,eAAe,CAAC,oBAAoB,EAAE,CAAC;IAC9C,CAAC;IA4BD;;OAEG;IACM,MAAM;QACb,MAAM,gBAAgB,GAAG;YACvB,wBAAwB,EAAE,IAAI;YAC9B,kCAAkC,EAAE,IAAI,CAAC,QAAQ;YACjD,8BAA8B,EAAE,IAAI,CAAC,IAAI;YACzC,CAAC,2BAA2B,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SAC/C,CAAC;QAEF,OAAO,IAAI,CAAA;oBACK,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,IAAI,CAAC,YAAY;UACtE,IAAI,CAAC,WAAW,EAAE;;;;mBAIT,IAAI,CAAC,KAAK;kBACX,IAAI,CAAC,IAAI;uBACJ,IAAI,CAAC,QAAQ;mBACjB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB;;;2BAGzC,IAAI,CAAC,IAAI;;sBAEd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;UAGlC,IAAI,CAAC,cAAc,EAAE;UACrB,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAEhC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAE/B,OAAO,IAAI,CAAA;;;;;;UAML,IAAI,CAAC,sBAAsB,EAAE;UAC7B,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,sBAAsB;QAC5B,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;YAChE,OAAO,OAAO,CAAC;SAChB;QAED,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;wBACzB,IAAI,CAAC,kBAAkB;;;KAG1C,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,iBAAiB;QACvB,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;0BACD,IAAI,CAAC,kBAAkB;;;KAG5C,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,OAAO,CAAC;QAEpC,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,KAAK;uBACL,IAAI,CAAC,gBAAgB;qBACvB,IAAI,CAAC,iBAAiB;oBACvB,IAAI,CAAC,cAAc;kBACrB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,iCAAmB,CAAC,oCAAoB;;wBAEtD,CAAC,IAAI,CAAC,YAAY;;KAErC,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,OAAO,CAAC;QAErC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,UAAU;;KAEpB,CAAC;IACJ,CAAC;CACF,CAAA;AA5TiB,kBAAM,GAAG,MAAO,CAAA;AAMhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACT;AAIlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC9B;AAIb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;qDAC3B;AAIhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC1B;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCACM;AAIhD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACa;AAIvD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACkB;AAI5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACkB;AAI5D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACpC;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;wDACtC;AAI3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDACrC;AAIrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;8CACpC;AAIjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;mDACrC;AAItB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACJ;AAItC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;qDAC1B;AAIjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAChB;AAIX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CACrC;AAIhB;IADC,KAAK,EAAE;iDACoB;AA3EjB,WAAW;IADvB,aAAa,CAAC,iBAAiB,CAAC;GACpB,WAAW,CA6TvB;SA7TY,WAAW","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { INPUT_STATE } from '../input/input.types.js';\nimport '../input/index.js';\n\n// Import child components\nimport './color-holder.component.js';\nimport './default-color-sets.component.js';\n\n// Import styles and types\nimport styles from './color-picker.style.js';\nimport {\n  ColorPickerSize,\n  ColorPickerTrigger,\n  ColorPickerPlacement,\n  ColorPickerAnimation,\n  ColorFormat\n} from './color-picker.types.js';\n\n// Import controllers\nimport {\n  ColorPickerDropdownController,\n  ColorPickerEventController,\n} from './controllers/index.js';\n\n// Import interfaces\nimport type { ColorPickerHost } from './interfaces/index.js';\n\n/**\n * Advanced color picker component with dropdown positioning, validation, and accessibility.\n * \n * Supports multiple color formats, default color sets, custom triggers, keyboard navigation,\n * and various display configurations.\n * \n * @example\n * ```html\n * <!-- Basic color picker -->\n * <nr-color-picker color=\"#3498db\"></nr-color-picker>\n * \n * <!-- With default colors -->\n * <nr-color-picker \n *   color=\"#3498db\"\n *   .defaultColorSets=\"${['#3498db', '#e74c3c', '#2ecc71']}\">\n * </nr-color-picker>\n * \n * <!-- With custom configuration -->\n * <nr-color-picker\n *   color=\"#3498db\"\n *   trigger=\"click\"\n *   placement=\"top\"\n *   size=\"large\"\n *   show-input=\"true\"\n *   show-copy-button=\"true\">\n * </nr-color-picker>\n * \n * <!-- Disabled -->\n * <nr-color-picker color=\"#3498db\" disabled></nr-color-picker>\n * ```\n * \n * @fires hy-color-change - Color value changed\n * @fires nr-colorpicker-open - Dropdown opened\n * @fires nr-colorpicker-close - Dropdown closed\n * @fires color-changed - Legacy event for backwards compatibility\n * \n * @slot - Default slot for custom content\n * \n * @cssproperty --colorpicker-trigger-size - Size of the color trigger box\n * @cssproperty --colorpicker-dropdown-width - Width of the dropdown panel\n * @cssproperty --colorpicker-dropdown-background - Background color of dropdown\n * @cssproperty --colorpicker-dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown\n */\n@customElement('nr-color-picker')\nexport class ColorPicker extends NuralyUIBaseMixin(LitElement) implements ColorPickerHost {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-input', 'nr-icon'];\n\n  /** Current color value */\n  @property({ type: String }) \n  color = '#3498db';\n\n  /** Controls dropdown visibility */\n  @property({ type: Boolean, reflect: true }) \n  show = false;\n\n  /** Array of preset colors to display */\n  @property({ type: Array, attribute: 'default-color-sets' }) \n  defaultColorSets: string[] = [];\n\n  /** Disables the color picker */\n  @property({ type: Boolean, reflect: true }) \n  disabled = false;\n\n  /** Color picker size (small, default, large) */\n  @property({ type: String, reflect: true }) \n  size: ColorPickerSize = ColorPickerSize.Default;\n\n  /** Trigger mode for opening dropdown */\n  @property({ type: String, reflect: true }) \n  trigger: ColorPickerTrigger = ColorPickerTrigger.Click;\n\n  /** Dropdown placement */\n  @property({ type: String, reflect: true }) \n  placement: ColorPickerPlacement = ColorPickerPlacement.Auto;\n\n  /** Animation style for dropdown */\n  @property({ type: String, reflect: true }) \n  animation: ColorPickerAnimation = ColorPickerAnimation.Fade;\n\n  /** Close dropdown when a color is selected */\n  @property({ type: Boolean, attribute: 'close-on-select' }) \n  closeOnSelect = false;\n\n  /** Close dropdown on outside click */\n  @property({ type: Boolean, attribute: 'close-on-outside-click' }) \n  closeOnOutsideClick = true;\n\n  /** Close dropdown on escape key */\n  @property({ type: Boolean, attribute: 'close-on-escape' }) \n  closeOnEscape = true;\n\n  /** Show color input field */\n  @property({ type: Boolean, attribute: 'show-input' }) \n  showInput = true;\n\n  /** Show copy button on input */\n  @property({ type: Boolean, attribute: 'show-copy-button' }) \n  showCopyButton = true;\n\n  /** Color format (hex, rgb, rgba, hsl, hsla) */\n  @property({ type: String, reflect: true }) \n  format: ColorFormat = ColorFormat.Hex;\n\n  /** Placeholder text for color input */\n  @property({ type: String, attribute: 'input-placeholder' }) \n  inputPlaceholder = 'Enter color';\n\n  /** Label text */\n  @property({ type: String }) \n  label = '';\n\n  /** Helper text */\n  @property({ type: String, attribute: 'helper-text' }) \n  helperText = '';\n\n  /** Validation state for color value */\n  @state() \n  private isValidColor = true;\n\n  /** Manages dropdown visibility and positioning */\n  private dropdownController = new ColorPickerDropdownController(this);\n\n  /** Handles all event management */\n  private eventController = new ColorPickerEventController(this);\n\n  constructor() {\n    super();\n    // Dynamically import vanilla-colorful for color picker UI\n    if (typeof window !== 'undefined') {\n      import('vanilla-colorful');\n    }\n  }\n\n  /**\n   * Component connected to DOM - initialize base functionality\n   */\n  override connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  /**\n   * Component disconnected from DOM - cleanup event listeners\n   */\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  /**\n   * Called after component updates\n   */\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    \n    if (changedProperties.has('color')) {\n      this.validateColor();\n    }\n  }\n\n  // === Public API Methods ===\n\n  /**\n   * Opens the color picker dropdown\n   */\n  open(): void {\n    this.dropdownController.open();\n  }\n\n  /**\n   * Closes the color picker dropdown\n   */\n  close(): void {\n    this.dropdownController.close();\n  }\n\n  /**\n   * Toggles the color picker dropdown\n   */\n  toggle(): void {\n    this.dropdownController.toggle();\n  }\n\n  /**\n   * Validates the current color value\n   */\n  validateColor(): boolean {\n    this.isValidColor = this.eventController.isValidColor(this.color);\n    return this.isValidColor;\n  }\n\n  /**\n   * Sets up global event listeners (called by dropdown controller)\n   */\n  setupEventListeners(): void {\n    if (this.closeOnOutsideClick || this.closeOnEscape) {\n      this.eventController.setupEventListeners();\n    }\n  }\n\n  /**\n   * Removes global event listeners (called by dropdown controller)\n   */\n  removeEventListeners(): void {\n    this.eventController.removeEventListeners();\n  }\n\n  /**\n   * Handles trigger click to toggle dropdown\n   */\n  private handleTriggerClick = (event: Event): void => {\n    this.eventController.handleTriggerClick(event);\n  };\n\n  /**\n   * Handles color selection from hex-color-picker or default colors\n   */\n  private handleColorChanged = (event: CustomEvent): void => {\n    const newColor = event.detail.value;\n    this.eventController.handleColorChange(newColor);\n    \n    if (this.closeOnSelect) {\n      this.dropdownController.close();\n    }\n  };\n\n  /**\n   * Handles input change from text input\n   */\n  private handleInputChange = (event: CustomEvent): void => {\n    this.eventController.handleInputChange(event);\n  };\n\n  /**\n   * Main render method\n   */\n  override render() {\n    const containerClasses = {\n      'color-picker-container': true,\n      'color-picker-container--disabled': this.disabled,\n      'color-picker-container--open': this.show,\n      [`color-picker-container--${this.size}`]: true,\n    };\n\n    return html`\n      <div class=\"${classMap(containerClasses)}\" data-theme=\"${this.currentTheme}\">\n        ${this.renderLabel()}\n        \n        <nr-colorholder-box\n          class=\"color-holder\"\n          color=\"${this.color}\"\n          .size=${this.size}\n          ?disabled=\"${this.disabled}\"\n          @click=${this.disabled ? nothing : this.handleTriggerClick}\n          role=\"button\"\n          aria-label=\"Select color\"\n          aria-expanded=\"${this.show}\"\n          aria-haspopup=\"dialog\"\n          tabindex=\"${this.disabled ? -1 : 0}\"\n        ></nr-colorholder-box>\n        \n        ${this.renderDropdown()}\n        ${this.renderHelperText()}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders the label if provided\n   */\n  private renderLabel() {\n    if (!this.label) return nothing;\n    \n    return html`\n      <label class=\"color-picker-label\">\n        ${this.label}\n      </label>\n    `;\n  }\n\n  /**\n   * Renders the dropdown panel with color picker\n   */\n  private renderDropdown() {\n    if (!this.show) return nothing;\n\n    return html`\n      <div \n        class=\"dropdown-container\"\n        role=\"dialog\"\n        aria-label=\"Color picker\"\n      >\n        ${this.renderDefaultColorSets()}\n        ${this.renderColorPicker()}\n        ${this.renderColorInput()}\n      </div>\n    `;\n  }\n\n  /**\n   * Renders default color sets if provided\n   */\n  private renderDefaultColorSets() {\n    if (!this.defaultColorSets || this.defaultColorSets.length === 0) {\n      return nothing;\n    }\n\n    return html`\n      <nr-default-color-sets \n        .defaultColorSets=${this.defaultColorSets} \n        @color-click=\"${this.handleColorChanged}\"\n        aria-label=\"Preset colors\">\n      </nr-default-color-sets>\n    `;\n  }\n\n  /**\n   * Renders the hex color picker\n   */\n  private renderColorPicker() {\n    return html`\n      <hex-color-picker\n        color=\"${this.color}\"\n        @color-changed=\"${this.handleColorChanged}\"\n        aria-label=\"Color gradient picker\">\n      </hex-color-picker>\n    `;\n  }\n\n  /**\n   * Renders the color input field\n   */\n  private renderColorInput() {\n    if (!this.showInput) return nothing;\n\n    return html`\n      <nr-input \n        type=\"text\" \n        .value=\"${this.color}\" \n        placeholder=\"${this.inputPlaceholder}\"\n        @nr-input=\"${this.handleInputChange}\" \n        ?withCopy=${this.showCopyButton} \n        .state=\"${!this.isValidColor ? INPUT_STATE.Error : INPUT_STATE.Default}\"\n        aria-label=\"Color value input\"\n        aria-invalid=\"${!this.isValidColor}\">\n      </nr-input>\n    `;\n  }\n\n  /**\n   * Renders helper text if provided\n   */\n  private renderHelperText() {\n    if (!this.helperText) return nothing;\n    \n    return html`\n      <div class=\"color-picker-helper-text\">\n        ${this.helperText}\n      </div>\n    `;\n  }\n}\n"]}

package/color-picker.style.d.ts

@@ -1,3 +1,10 @@
+/**
+ * Color Picker component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-colorpicker component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
 declare const _default: import("lit").CSSResult;
 export default _default;
 //# sourceMappingURL=color-picker.style.d.ts.map

package/color-picker.style.js

@@ -1,75 +1,86 @@
 import { css } from 'lit';
+/**
+ * Color Picker component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-colorpicker component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
 export default css `
+  :host {
+    display: inline-block;
+    vertical-align: middle;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    
+    /* Ensure clean state transitions when theme changes */
+    * {
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+    }
+  }
+
+  /* Force re-evaluation of theme-dependent properties on theme change */
+  :host([data-theme]) {
+    color: inherit;
+    background-color: inherit;
+  }
+
   .color-picker-container {
     display: inline-flex;
     flex-direction: column;
   }
+  
   hex-color-picker {
     width: 100%;
   }
+  
   .dropdown-container {
     display: none;
   }
+  
   hex-color-picker::part(saturation) {
     border-radius: 0px;
   }
+  
   hex-color-picker::part(hue) {
     border-radius: 0px;
   }
+  
   hex-color-picker::part(saturation-pointer),
   hex-color-picker::part(hue-pointer) {
     cursor: pointer;
   }
+  
   .color-holder {
     cursor: pointer;
   }
+  
   :host([disabled]) .color-holder {
-    opacity: var(--hybrid-colorpicker-disabled-opacity);
+    opacity: var(--nuraly-opacity-disabled, 0.5);
     cursor: not-allowed;
   }
-  :host(:not([disabled])) .color-holder {
-    border: var(--hybrid-colorpicker-border-color);
-  }
-  :host(:not([disabled])) .color-holder:hover {
-    opacity: var(--hybrid-colorpicker-hover-opacity);
-  }
-  :host(:not([disabled])) .color-holder:active {
-    border:var(--hybrid-colorpicker-active-border)
-  }
-  
 
-  :host([show]) .dropdown-container{
+  :host([show]) .dropdown-container {
     display: block;
     position: fixed;
     width: 180px;
-    z-index: 1;
-    padding: 5px;
-    background-color: var(--hybrid-colorpicker-background-color);
-    box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);
-    -webkit-box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);
-    -moz-box-shadow: 1px -1px 5px 1px rgba(0, 0, 0, 0.14);
+    z-index: var(--nuraly-z-index-dropdown, 1000);
+    padding: var(--nuraly-spacing-2, 0.5rem);
+    background-color: var(--nuraly-color-surface, #ffffff);
+    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.1));
+    border-radius: var(--nuraly-border-radius-medium, 4px);
+    box-shadow: var(--nuraly-shadow-dropdown, 0 2px 8px rgba(0, 0, 0, 0.15));
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--nuraly-transition-fast, 0.15s) ease-in-out,
+                visibility var(--nuraly-transition-fast, 0.15s) ease-in-out;
   }
 
-  :host {
-    --hybrid-colorpicker-background-color: #f4f4f4;
-    --hybrid-colorpicker-border-color: 1px solid gray;
-    --hybrid-colorpicker-active-border: 1px solid #0f62fe;
-    --hybrid-colorpicker-disabled-opacity: 0.5;
-    --hybrid-colorpicker-hover-opacity: 0.8;
-    --hybrid-colorpicker-default-width: 30px;
-    --hybrid-colorpicker-default-height: 25px;
-    --hybrid-colorpicker-small-width: 20px;
-    --hybrid-colorpicker-small-height: 15px;
-    --hybrid-colorpicker-large-width: 35px;
-    --hybrid-colorpicker-large-height: 30px;
-  }
- 
-  @media (prefers-color-scheme: dark) {
-    :host { 
-      --hybrid-colorpicker-background-color: #393939;
-      --hybrid-colorpicker-border-color: 1px solid #f4f4f4;
-      --hybrid-colorpicker-disabled-opacity: 0.2;
-    }
+  :host([show]) .dropdown-container.positioned {
+    opacity: 1;
+    visibility: visible;
   }
 `;
 //# sourceMappingURL=color-picker.style.js.map