@nuraly/lumenui 0.1.0 → 0.2.1

package/dist/src/components/colorpicker/bundle.js

@@ -1,39 +1,60 @@
-import{css as t,LitElement as e,html as o,nothing as r}from"lit";import{property as i,customElement as s,state as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";import{renderLabel as h}from"@nuralyui/common/utils";import{styleMap as c}from"lit/directives/style-map.js";import{map as d}from"lit/directives/map.js";import{BaseComponentController as u}from"@nuralyui/common/controllers";const p=t`
+import{nothing as t,html as e,css as i,LitElement as o}from"lit";import{property as s,customElement as r,state as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{ifDefined as a}from"lit/directives/if-defined.js";import{styleMap as h}from"lit/directives/style-map.js";import{map as c}from"lit/directives/map.js";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const d=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},u=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},p=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(u())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!u())return!0;let e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const o=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,o):console.error(o.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},b=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const o=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,o)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const o=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,o)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},v=new Set,m=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const f=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=g(i);t&&function(t,e,i){var o;if(!m.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),m.set(t,i)}const s=m.get(t),r=`doc:${t}`;if(v.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],v.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${t}`;v.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],v.add(r)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function g(t){return Array.isArray(t)?t.map(t=>g(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const w=i`
   :host {
     display: inline-block;
     cursor: pointer;
     
     /* Ensure clean state transitions */
     * {
-      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      transition: all 0.15s ease;
     }
   }
 
   .color-holder-container {
-    width: var(--nuraly-size-colorpicker-default, 30px);
-    height: var(--nuraly-size-colorpicker-default-height, 25px);
-    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));
+    width: 30px;
+    height: 25px;
+    border: 1px solid #e0e0e0;
     box-sizing: border-box;
-    border-radius: var(--nuraly-border-radius-small, 2px);
+    border-radius: 4px;
   }
   
   :host([size='small']) .color-holder-container {
-    width: var(--nuraly-size-colorpicker-small, 20px);
-    height: var(--nuraly-size-colorpicker-small-height, 15px);
+    width: 20px;
+    height: 15px;
   }
   
   :host([size='large']) .color-holder-container {
-    width: var(--nuraly-size-colorpicker-large, 35px);
-    height: var(--nuraly-size-colorpicker-large-height, 30px);
+    width: 35px;
+    height: 30px;
   }
   
   .color-holder-container--disabled {
-    opacity: var(--nuraly-opacity-disabled, 0.5);
+    opacity: 0.5;
     cursor: not-allowed;
   }
   
   :host(:hover:not([disabled])) .color-holder-container {
-    border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));
+    border-color: rgba(0, 0, 0, 0.4);
   }
 `;
 /**
@@ -41,15 +62,16 @@ import{css as t,LitElement as e,html as o,nothing as r}from"lit";import{property
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var b=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let v=class extends e{constructor(){super(...arguments),this.color="#3498db",this.size="default",this.disabled=!1,this.showTransparencyGrid=!0,this.borderWidth=2,this.showBorder=!0}isValidColor(){try{return CSS.supports("color",this.color)}catch(t){return!1}}isTransparent(){return"transparent"===this.color||this.color.toLowerCase().includes("rgba")||this.color.toLowerCase().includes("hsla")}render(){const t={"color-holder-container":!0,"color-holder-container--disabled":this.disabled,"color-holder-container--invalid":!this.isValidColor(),"color-holder-container--transparent":this.isTransparent()&&this.showTransparencyGrid,[`color-holder-container--${this.size}`]:!0},e={backgroundColor:this.isValidColor()?this.color:"#ffffff",borderWidth:this.showBorder?`${this.borderWidth}px`:"0"};return o`
-      <div 
-        class="${l(t)}" 
-        style="${c(e)}"
+var y=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let x=class extends o{constructor(){super(...arguments),this.color="#3498db",this.size="default",this.disabled=!1,this.showTransparencyGrid=!0,this.borderWidth=2,this.showBorder=!0}isValidColor(){try{return CSS.supports("color",this.color)}catch(t){return!1}}isTransparent(){return"transparent"===this.color||this.color.toLowerCase().includes("rgba")||this.color.toLowerCase().includes("hsla")}render(){const t={"color-holder-container":!0,"color-holder-container--disabled":this.disabled,"color-holder-container--invalid":!this.isValidColor(),"color-holder-container--transparent":this.isTransparent()&&this.showTransparencyGrid,[`color-holder-container--${this.size}`]:!0},i={backgroundColor:this.isValidColor()?this.color:"#ffffff",borderWidth:this.showBorder?`${this.borderWidth}px`:"0"};return e`
+      <div
+        class="${l(t)}"
+        style="${h(i)}"
+        part="container"
         role="img"
         aria-label="Color swatch: ${this.color}"
         title="${this.color}"
       ></div>
-    `}};v.styles=p,b([i({type:String})],v.prototype,"color",void 0),b([i({type:String,reflect:!0})],v.prototype,"size",void 0),b([i({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),b([i({type:Boolean,attribute:"show-transparency-grid"})],v.prototype,"showTransparencyGrid",void 0),b([i({type:Number,attribute:"border-width"})],v.prototype,"borderWidth",void 0),b([i({type:Boolean,attribute:"show-border"})],v.prototype,"showBorder",void 0),v=b([s("nr-colorholder-box")],v);const m=t`
+    `}};x.styles=w,x.useShadowDom=!0,y([s({type:String})],x.prototype,"color",void 0),y([s({type:String,reflect:!0})],x.prototype,"size",void 0),y([s({type:Boolean,reflect:!0})],x.prototype,"disabled",void 0),y([s({type:Boolean,attribute:"show-transparency-grid"})],x.prototype,"showTransparencyGrid",void 0),y([s({type:Number,attribute:"border-width"})],x.prototype,"borderWidth",void 0),y([s({type:Boolean,attribute:"show-border"})],x.prototype,"showBorder",void 0),x=y([r("nr-colorholder-box")],x);const $=i`
   .default-color-sets-container {
     display: flex;
     flex-wrap: wrap;
@@ -57,22 +79,22 @@ var b=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
   }
   
   .default-color-sets-container * {
-    margin: var(--nuraly-spacing-1, 0.25rem);
+    margin: 0.25rem;
   }
   
   .color-set-container {
     cursor: pointer;
     position: relative;
-    transition: all var(--nuraly-transition-base, 0.2s) ease-in-out;
+    transition: all 0.2s ease-in-out;
   }
   
   .color-set-container:hover {
-    box-shadow: 0 0 0 2px var(--nuraly-color-focus, rgba(15, 98, 254, 0.5));
-    opacity: var(--nuraly-opacity-hover, 0.9);
+    box-shadow: 0 0 0 2px #7c3aed;
+    opacity: 0.9;
   }
   
   .color-set-container:active {
-    box-shadow: 0 0 0 2px var(--nuraly-color-focus-active, rgba(15, 98, 254, 0.8));
+    box-shadow: 0 0 0 2px rgba(15, 98, 254, 0.8);
     opacity: 1;
   }
 `;
@@ -81,14 +103,15 @@ var b=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let y=class extends e{constructor(){super(...arguments),this.defaultColorSets=[],this.size="default",this.columns=8}handleColorClick(t,e){if(e.stopPropagation(),!this.isValidColor(t))return void console.warn(`Invalid color: ${t}`);const o={value:t};this.dispatchEvent(new CustomEvent("color-click",{bubbles:!0,composed:!0,detail:o}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}render(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`
-      <div 
+var k=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let C=class extends o{constructor(){super(...arguments),this.defaultColorSets=[],this.size="default",this.columns=8}handleColorClick(t,e){if(e.stopPropagation(),!this.isValidColor(t))return void console.warn(`Invalid color: ${t}`);const i={value:t};this.dispatchEvent(new CustomEvent("color-click",{bubbles:!0,composed:!0,detail:i}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}render(){return this.defaultColorSets&&0!==this.defaultColorSets.length?e`
+      <div
         class="default-color-sets-container"
+        part="container"
         role="list"
         aria-label="Preset color swatches"
         style="--columns: ${this.columns}"
       >
-        ${d(this.defaultColorSets,t=>o`
+        ${c(this.defaultColorSets,t=>e`
             <nr-colorholder-box
               color="${t}"
               .size=${this.size}
@@ -101,18 +124,18 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
             ></nr-colorholder-box>
           `)}
       </div>
-    `:r}};y.styles=m,f([i({type:Array,attribute:"default-color-sets"})],y.prototype,"defaultColorSets",void 0),f([i({type:String,reflect:!0})],y.prototype,"size",void 0),f([i({type:Number,attribute:"columns"})],y.prototype,"columns",void 0),y=f([s("nr-default-color-sets")],y);var x=t`
+    `:t}};C.styles=$,C.useShadowDom=!0,k([s({type:Array,attribute:"default-color-sets"})],C.prototype,"defaultColorSets",void 0),k([s({type:String,reflect:!0})],C.prototype,"size",void 0),k([s({type:Number,attribute:"columns"})],C.prototype,"columns",void 0),C=k([r("nr-default-color-sets")],C);var E=i`
   :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);
+    color: #161616;
+    background-color: #ffffff;
     
     /* Ensure clean state transitions when theme changes */
     * {
-      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      transition: all 0.15s ease;
     }
   }
 
@@ -153,7 +176,7 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
   }
   
   :host([disabled]) .color-holder {
-    opacity: var(--nuraly-opacity-disabled, 0.5);
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -161,29 +184,34 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
     display: block;
     position: fixed;
     width: 180px;
-    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));
+    z-index: 1000;
+    padding: 0.5rem;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 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;
+    transition: opacity 0.15s ease-in-out,
+                visibility 0.15s ease-in-out;
   }
 
   :host([show]) .dropdown-container.positioned {
     opacity: 1;
     visibility: visible;
   }
-`;class g extends u{findElement(t){var e;return(null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelector(t))||null}}class w extends g{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this._scrollHandler=null,this._resizeHandler=null}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){this.setupScrollAndResizeListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),requestAnimationFrame(()=>{this.findElements(),this._dropdownElement&&this._dropdownElement.classList.remove("positioned"),requestAnimationFrame(()=>{this.calculatePosition(),this._dropdownElement&&this._dropdownElement.classList.add("positioned")})}),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout(()=>{var t,e;null===(e=(t=this.host).setupEventListeners)||void 0===e||e.call(t)},50),this.dispatchEvent(new CustomEvent("nr-colorpicker-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){var t,e;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(e=(t=this.host).removeEventListeners)||void 0===e||e.call(t)),this.dispatchEvent(new CustomEvent("nr-colorpicker-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),r=this._dropdownElement.getBoundingClientRect(),i=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,n=i-o.bottom,l=o.top,a=s-o.left;let h,c,d="bottom";n>=r.height||n>l?(h=o.bottom,d="bottom"):(h=o.top-r.height,d="top"),c=a>=r.width?o.left:Math.max(0,s-r.width),this._position={top:h,left:c,width:Math.max(o.width,r.width),placement:d},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}applyPosition(){try{if(!this._dropdownElement)return;this._dropdownElement.style.position="fixed",this._dropdownElement.style.top=`${this._position.top}px`,this._dropdownElement.style.left=`${this._position.left}px`,this._dropdownElement.style.zIndex="9999",this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${this._position.placement}`),this._dropdownElement.classList.add("positioned")}catch(t){this.handleError(t,"applyPosition")}}resetPosition(){try{this._dropdownElement&&(this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom","positioned"))}catch(t){this.handleError(t,"resetPosition")}}setupScrollAndResizeListeners(){this._scrollHandler=()=>{this._isOpen&&this.calculatePosition()},this._resizeHandler=()=>{this._isOpen&&this.calculatePosition()},document.addEventListener("scroll",this._scrollHandler,{passive:!0}),window.addEventListener("resize",this._resizeHandler)}cleanup(){this._scrollHandler&&(document.removeEventListener("scroll",this._scrollHandler),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}}class k extends g{constructor(){super(...arguments),this._outsideClickHandler=null,this._escapeHandler=null}setupEventListeners(){this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0),this._escapeHandler=this.handleEscapeKey.bind(this),document.addEventListener("keydown",this._escapeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null)}handleTriggerClick(t){if(t.stopPropagation(),!this.host.disabled){const t=this.host.dropdownController;t&&t.toggle()}}handleOutsideClick(t){if(!t.composedPath().includes(this.host)){const t=this.host.dropdownController;t&&t.close()}}handleEscapeKey(t){if("Escape"===t.key&&this.host.show){t.preventDefault();const e=this.host.dropdownController;e&&e.close()}}handleColorChange(t){if(this.isValidColor(t)&&this.host.color!==t){const e=this.host.color;this.host.color=t,this.dispatchColorChangeEvent(t,e),this.requestUpdate()}}handleInputChange(t){const e=t.detail.value;e&&e!==this.host.color&&this.handleColorChange(e)}dispatchColorChangeEvent(t,e){const o={value:t,previousValue:e,isValid:this.isValidColor(t),color:t};this.dispatchEvent(new CustomEvent("nr-color-change",{bubbles:!0,composed:!0,detail:o})),this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:o})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:t,color:t}}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}}
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;class S{constructor(t){this._host=t,t.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}handleError(t,e){console.error(`[${this.constructor.name}] Error in ${e}:`,t);try{this._host.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t.message,context:e,controller:this.constructor.name},bubbles:!0,composed:!0}))}catch(t){}}safeExecute(t,e,i){try{return t()}catch(t){return this.handleError(t,e),i}}debounce(t,e){let i;const o=(...o)=>{void 0!==i&&clearTimeout(i),i=setTimeout(()=>{i=void 0,t.apply(this,o)},e)};return o.cancel=()=>{void 0!==i&&(clearTimeout(i),i=void 0)},o}}class O extends S{findElement(t){var e;return(null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelector(t))||null}}class j extends O{constructor(){super(...arguments),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._dropdownElement=null,this._triggerElement=null,this._scrollHandler=null,this._resizeHandler=null}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){this.setupScrollAndResizeListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.show=!0,this.requestUpdate(),requestAnimationFrame(()=>{this.findElements(),this._dropdownElement&&this._dropdownElement.classList.remove("positioned"),requestAnimationFrame(()=>{this.calculatePosition(),this._dropdownElement&&this._dropdownElement.classList.add("positioned")})}),this.host&&"function"==typeof this.host.setupEventListeners&&setTimeout(()=>{var t,e;null===(e=(t=this.host).setupEventListeners)||void 0===e||e.call(t)},50),this.dispatchEvent(new CustomEvent("nr-colorpicker-open",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"open")}}close(){var t,e;try{this._isOpen&&(this._isOpen=!1,this.host.show=!1,this.resetPosition(),this.requestUpdate(),this.host&&"function"==typeof this.host.removeEventListeners&&(null===(e=(t=this.host).removeEventListeners)||void 0===e||e.call(t)),this.dispatchEvent(new CustomEvent("nr-colorpicker-close",{bubbles:!0,composed:!0})))}catch(t){this.handleError(t,"close")}}toggle(){this._isOpen?this.close():this.open()}findElements(){this._dropdownElement=this.findElement(".dropdown-container"),this._triggerElement=this.findElement(".color-holder")}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findElements(),!this._dropdownElement||!this._triggerElement)return;const i=this._triggerElement.getBoundingClientRect(),o=this._dropdownElement.getBoundingClientRect(),s=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,r=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,n=s-i.bottom,l=i.top,a=r-i.left;let h,c,d="bottom";n>=o.height||n>l?(h=i.bottom,d="bottom"):(h=i.top-o.height,d="top"),c=a>=o.width?i.left:Math.max(0,r-o.width),this._position={top:h,left:c,width:Math.max(i.width,o.width),placement:d},this.applyPosition()}catch(t){this.handleError(t,"calculatePosition")}}applyPosition(){try{if(!this._dropdownElement)return;this._dropdownElement.style.position="fixed",this._dropdownElement.style.top=`${this._position.top}px`,this._dropdownElement.style.left=`${this._position.left}px`,this._dropdownElement.style.zIndex="9999",this._dropdownElement.classList.remove("placement-top","placement-bottom"),this._dropdownElement.classList.add(`placement-${this._position.placement}`),this._dropdownElement.classList.add("positioned")}catch(t){this.handleError(t,"applyPosition")}}resetPosition(){try{this._dropdownElement&&(this._dropdownElement.style.removeProperty("position"),this._dropdownElement.style.removeProperty("top"),this._dropdownElement.style.removeProperty("left"),this._dropdownElement.style.removeProperty("z-index"),this._dropdownElement.classList.remove("placement-top","placement-bottom","positioned"))}catch(t){this.handleError(t,"resetPosition")}}setupScrollAndResizeListeners(){this._scrollHandler=()=>{this._isOpen&&this.calculatePosition()},this._resizeHandler=()=>{this._isOpen&&this.calculatePosition()},document.addEventListener("scroll",this._scrollHandler,{passive:!0}),window.addEventListener("resize",this._resizeHandler)}cleanup(){this._scrollHandler&&(document.removeEventListener("scroll",this._scrollHandler),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}}class A extends O{constructor(){super(...arguments),this._outsideClickHandler=null,this._escapeHandler=null}setupEventListeners(){this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0),this._escapeHandler=this.handleEscapeKey.bind(this),document.addEventListener("keydown",this._escapeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._escapeHandler&&(document.removeEventListener("keydown",this._escapeHandler),this._escapeHandler=null)}handleTriggerClick(t){if(t.stopPropagation(),!this.host.disabled){const t=this.host.dropdownController;t&&t.toggle()}}handleOutsideClick(t){if(!t.composedPath().includes(this.host)){const t=this.host.dropdownController;t&&t.close()}}handleEscapeKey(t){if("Escape"===t.key&&this.host.show){t.preventDefault();const e=this.host.dropdownController;e&&e.close()}}handleColorChange(t){if(this.isValidColor(t)&&this.host.color!==t){const e=this.host.color;this.host.color=t,this.dispatchColorChangeEvent(t,e),this.requestUpdate()}}handleInputChange(t){const e=t.detail.value;e&&e!==this.host.color&&this.handleColorChange(e)}dispatchColorChangeEvent(t,e){const i={value:t,previousValue:e,isValid:this.isValidColor(t),color:t};this.dispatchEvent(new CustomEvent("nr-color-change",{bubbles:!0,composed:!0,detail:i})),this.dispatchEvent(new CustomEvent("hy-color-change",{bubbles:!0,composed:!0,detail:i})),this.dispatchEvent(new CustomEvent("color-changed",{bubbles:!0,composed:!0,detail:{value:t,color:t}}))}isValidColor(t){try{return CSS.supports("color",t)}catch(t){return!1}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var $=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r,l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};let C=class extends(a(e)){constructor(){super(),this.requiredComponents=["nr-input","nr-icon"],this.color="#3498db",this.show=!1,this.defaultColorSets=[],this.disabled=!1,this.size="default",this.trigger="click",this.placement="auto",this.animation="fade",this.closeOnSelect=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.showInput=!0,this.showCopyButton=!0,this.format="hex",this.inputPlaceholder="Enter color",this.label="",this.helperText="",this.isValidColor=!0,this.dropdownController=new w(this),this.eventController=new k(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleColorChanged=t=>{const e=t.detail.value;this.eventController.handleColorChange(e),this.closeOnSelect&&this.dropdownController.close()},this.handleInputChange=t=>{this.eventController.handleInputChange(t)},"undefined"!=typeof window&&Promise.resolve().then(function(){return tt})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(t){super.updated(t),t.has("color")&&this.validateColor()}open(){this.dropdownController.open()}close(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}validateColor(){return this.isValidColor=this.eventController.isValidColor(this.color),this.isValidColor}setupEventListeners(){(this.closeOnOutsideClick||this.closeOnEscape)&&this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){const t={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return o`
-      <div class="${l(t)}" data-theme="${this.currentTheme}">
+ */var P=function(t,e,i,o){for(var s,r=arguments.length,n=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o,l=t.length-1;l>=0;l--)(s=t[l])&&(n=(r<3?s(n):r>3?s(e,i,n):s(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let z=class extends((t=>p(d(b(f(t)))))(o)){constructor(){super(),this.requiredComponents=["nr-input","nr-icon"],this.color="#3498db",this.show=!1,this.defaultColorSets=[],this.disabled=!1,this.size="default",this.trigger="click",this.placement="auto",this.animation="fade",this.closeOnSelect=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.showInput=!0,this.showCopyButton=!0,this.format="hex",this.inputPlaceholder="Enter color",this.label="",this.helperText="",this.isValidColor=!0,this.dropdownController=new j(this),this.eventController=new A(this),this.handleTriggerClick=t=>{this.eventController.handleTriggerClick(t)},this.handleColorChanged=t=>{const e=t.detail.value;this.eventController.handleColorChange(e),this.closeOnSelect&&this.dropdownController.close()},this.handleInputChange=t=>{this.eventController.handleInputChange(t)},"undefined"!=typeof window&&Promise.resolve().then(function(){return lt})}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(t){super.updated(t),t.has("color")&&this.validateColor()}open(){this.dropdownController.open()}close(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}validateColor(){return this.isValidColor=this.eventController.isValidColor(this.color),this.isValidColor}setupEventListeners(){(this.closeOnOutsideClick||this.closeOnEscape)&&this.eventController.setupEventListeners()}removeEventListeners(){this.eventController.removeEventListeners()}render(){const i={"color-picker-container":!0,"color-picker-container--disabled":this.disabled,"color-picker-container--open":this.show,[`color-picker-container--${this.size}`]:!0};return e`
+      <div class="${l(i)}" data-theme="${this.currentTheme}">
         ${this.renderLabel()}
         
         <nr-colorholder-box
@@ -191,7 +219,7 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
           color="${this.color}"
           .size=${this.size}
           ?disabled="${this.disabled}"
-          @click=${this.disabled?r:this.handleTriggerClick}
+          @click=${this.disabled?t:this.handleTriggerClick}
           role="button"
           aria-label="Select color"
           aria-expanded="${this.show}"
@@ -202,7 +230,16 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
         ${this.renderDropdown()}
         ${this.renderHelperText()}
       </div>
-    `}renderLabel(){return h(this.label,!1,{cssClass:"color-picker-label"})}renderDropdown(){return this.show?o`
+    `}renderLabel(){return function(i,o,s){if(!i)return t;const r=(null==s?void 0:s.cssClass)||"label",n=(null==s?void 0:s.part)||"label",l=(null==s?void 0:s.requiredClass)||"required-indicator";return e`
+    <label
+      class="${r}"
+      part="${n}"
+      for="${a(null==s?void 0:s.forId)}"
+    >
+      ${i}
+      ${o?e`<span class="${l}">*</span>`:t}
+    </label>
+  `}(this.label,!1,{cssClass:"color-picker-label"})}renderDropdown(){return this.show?e`
       <div 
         class="dropdown-container"
         role="dialog"
@@ -212,19 +249,19 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
         ${this.renderColorPicker()}
         ${this.renderColorInput()}
       </div>
-    `:r}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?o`
+    `:t}renderDefaultColorSets(){return this.defaultColorSets&&0!==this.defaultColorSets.length?e`
       <nr-default-color-sets 
         .defaultColorSets=${this.defaultColorSets} 
         @color-click="${this.handleColorChanged}"
         aria-label="Preset colors">
       </nr-default-color-sets>
-    `:r}renderColorPicker(){return o`
+    `:t}renderColorPicker(){return e`
       <hex-color-picker
         color="${this.color}"
         @color-changed="${this.handleColorChanged}"
         aria-label="Color gradient picker">
       </hex-color-picker>
-    `}renderColorInput(){return this.showInput?o`
+    `}renderColorInput(){return this.showInput?e`
       <nr-input 
         type="text" 
         .value="${this.color}" 
@@ -235,8 +272,8 @@ var f=function(t,e,o,r){for(var i,s=arguments.length,n=s<3?e:null===r?r=Object.g
         aria-label="Color value input"
         aria-invalid="${!this.isValidColor}">
       </nr-input>
-    `:r}renderHelperText(){return this.helperText?o`
+    `:t}renderHelperText(){return this.helperText?e`
       <div class="color-picker-helper-text">
         ${this.helperText}
       </div>
-    `:r}};C.styles=x,$([i({type:String})],C.prototype,"color",void 0),$([i({type:Boolean,reflect:!0})],C.prototype,"show",void 0),$([i({type:Array,attribute:"default-color-sets"})],C.prototype,"defaultColorSets",void 0),$([i({type:Boolean,reflect:!0})],C.prototype,"disabled",void 0),$([i({type:String,reflect:!0})],C.prototype,"size",void 0),$([i({type:String,reflect:!0})],C.prototype,"trigger",void 0),$([i({type:String,reflect:!0})],C.prototype,"placement",void 0),$([i({type:String,reflect:!0})],C.prototype,"animation",void 0),$([i({type:Boolean,attribute:"close-on-select"})],C.prototype,"closeOnSelect",void 0),$([i({type:Boolean,attribute:"close-on-outside-click"})],C.prototype,"closeOnOutsideClick",void 0),$([i({type:Boolean,attribute:"close-on-escape"})],C.prototype,"closeOnEscape",void 0),$([i({type:Boolean,attribute:"show-input"})],C.prototype,"showInput",void 0),$([i({type:Boolean,attribute:"show-copy-button"})],C.prototype,"showCopyButton",void 0),$([i({type:String,reflect:!0})],C.prototype,"format",void 0),$([i({type:String,attribute:"input-placeholder"})],C.prototype,"inputPlaceholder",void 0),$([i({type:String})],C.prototype,"label",void 0),$([i({type:String,attribute:"helper-text"})],C.prototype,"helperText",void 0),$([n()],C.prototype,"isValidColor",void 0),C=$([s("nr-color-picker")],C);const S=(t,e=0,o=1)=>t>o?o:t<e?e:t,E=(t,e=0,o=Math.pow(10,e))=>Math.round(o*t)/o,z=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?E(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?E(parseInt(t.substring(6,8),16)/255,2):1}),O=t=>{const{h:e,s:o,l:r}=(({h:t,s:e,v:o,a:r})=>{const i=(200-e)*o/100;return{h:E(t),s:E(i>0&&i<200?e*o/100/(i<=100?i:200-i)*100:0),l:E(i/2),a:E(r,2)}})(t);return`hsl(${e}, ${o}%, ${r}%)`},j=({h:t,s:e,v:o,a:r})=>{t=t/360*6,e/=100,o/=100;const i=Math.floor(t),s=o*(1-e),n=o*(1-(t-i)*e),l=o*(1-(1-t+i)*e),a=i%6;return{r:E(255*[o,n,s,s,l,o][a]),g:E(255*[l,o,o,n,s,s][a]),b:E(255*[s,s,l,o,o,n][a]),a:E(r,2)}},B=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},P=({r:t,g:e,b:o,a:r})=>{const i=r<1?B(E(255*r)):"";return"#"+B(t)+B(e)+B(o)+i},I=({r:t,g:e,b:o,a:r})=>{const i=Math.max(t,e,o),s=i-Math.min(t,e,o),n=s?i===t?(e-o)/s:i===e?2+(o-t)/s:4+(t-e)/s:0;return{h:E(60*(n<0?n+6:n)),s:E(i?s/i*100:0),v:E(i/255*100),a:r}},M=(t,e)=>{if(t===e)return!0;for(const o in t)if(t[o]!==e[o])return!1;return!0},A={},L=t=>{let e=A[t];return e||(e=document.createElement("template"),e.innerHTML=t,A[t]=e),e},T=(t,e,o)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o}))};let H=!1;const V=t=>"touches"in t,F=(t,e)=>{const o=V(e)?e.touches[0]:e,r=t.el.getBoundingClientRect();T(t.el,"move",t.getMove({x:S((o.pageX-(r.left+window.pageXOffset))/r.width),y:S((o.pageY-(r.top+window.pageYOffset))/r.height)}))};class _{constructor(t,e,o,r){const i=L(`<div role="slider" tabindex="0" part="${e}" ${o}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const s=t.querySelector(`[part=${e}]`);s.addEventListener("mousedown",this),s.addEventListener("touchstart",this),s.addEventListener("keydown",this),this.el=s,this.xy=r,this.nodes=[s.firstChild,s]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(H?"touchmove":"mousemove",this),e(H?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(H&&!V(t)||(H||(H=V(t)),0)))(t)||!H&&0!=t.button)return;this.el.focus(),F(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),F(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const o=e.keyCode;o>40||t.xy&&o<37||o<33||(e.preventDefault(),T(t.el,"move",t.getMove({x:39===o?.01:37===o?-.01:34===o?.05:33===o?-.05:35===o?1:36===o?-1:0,y:40===o?.01:38===o?-.01:0},!0)))})(this,t)}}style(t){t.forEach((t,e)=>{for(const o in t)this.nodes[e].style.setProperty(o,t[o])})}}class q extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:O({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${E(t)}`)}getMove(t,e){return{h:e?S(this.h+360*t.x,0,360):360*t.x}}}class D extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:O(t)},{"background-color":O({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${E(t.s)}%, Brightness ${E(t.v)}%`)}getMove(t,e){return{s:e?S(this.hsva.s+100*t.x,0,100):100*t.x,v:e?S(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const N=Symbol("same"),W=Symbol("color"),G=Symbol("hsva"),K=Symbol("update"),R=Symbol("parts"),J=Symbol("css"),Q=Symbol("sliders");class U extends HTMLElement{static get observedAttributes(){return["color"]}get[J](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[Q](){return[D,q]}get color(){return this[W]}set color(t){if(!this[N](t)){const e=this.colorModel.toHsva(t);this[K](e),this[W]=t}}constructor(){super();const t=L(`<style>${this[J].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[R]=this[Q].map(t=>new t(e))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,o){const r=this.colorModel.fromAttr(o);this[N](r)||(this.color=r)}handleEvent(t){const e=this[G],o={...e,...t.detail};let r;this[K](o),M(o,e)||this[N](r=this.colorModel.fromHsva(o))||(this[W]=r,T(this,"color-changed",{value:r}))}[N](t){return this.color&&this.colorModel.equal(t,this.color)}[K](t){this[G]=t,this[R].forEach(e=>e.update(t))}}const X={defaultColor:"#000",toHsva:t=>I(z(t)),fromHsva:({h:t,s:e,v:o})=>P(j({h:t,s:e,v:o,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||M(z(t),z(e)),fromAttr:t=>t};class Y extends U{get colorModel(){return X}}class Z extends Y{}customElements.define("hex-color-picker",Z);var tt=Object.freeze({__proto__:null,HexColorPicker:Z});export{v as ColorHolderBox,C as ColorPicker};
+    `:t}};z.useShadowDom=!0,z.styles=E,P([s({type:String})],z.prototype,"color",void 0),P([s({type:Boolean,reflect:!0})],z.prototype,"show",void 0),P([s({type:Array,attribute:"default-color-sets"})],z.prototype,"defaultColorSets",void 0),P([s({type:Boolean,reflect:!0})],z.prototype,"disabled",void 0),P([s({type:String,reflect:!0})],z.prototype,"size",void 0),P([s({type:String,reflect:!0})],z.prototype,"trigger",void 0),P([s({type:String,reflect:!0})],z.prototype,"placement",void 0),P([s({type:String,reflect:!0})],z.prototype,"animation",void 0),P([s({type:Boolean,attribute:"close-on-select"})],z.prototype,"closeOnSelect",void 0),P([s({type:Boolean,attribute:"close-on-outside-click"})],z.prototype,"closeOnOutsideClick",void 0),P([s({type:Boolean,attribute:"close-on-escape"})],z.prototype,"closeOnEscape",void 0),P([s({type:Boolean,attribute:"show-input"})],z.prototype,"showInput",void 0),P([s({type:Boolean,attribute:"show-copy-button"})],z.prototype,"showCopyButton",void 0),P([s({type:String,reflect:!0})],z.prototype,"format",void 0),P([s({type:String,attribute:"input-placeholder"})],z.prototype,"inputPlaceholder",void 0),P([s({type:String})],z.prototype,"label",void 0),P([s({type:String,attribute:"helper-text"})],z.prototype,"helperText",void 0),P([n()],z.prototype,"isValidColor",void 0),z=P([r("nr-color-picker")],z);const M=(t,e=0,i=1)=>t>i?i:t<e?e:t,T=(t,e=0,i=Math.pow(10,e))=>Math.round(i*t)/i,B=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?T(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?T(parseInt(t.substring(6,8),16)/255,2):1}),D=t=>{const{h:e,s:i,l:o}=(({h:t,s:e,v:i,a:o})=>{const s=(200-e)*i/100;return{h:T(t),s:T(s>0&&s<200?e*i/100/(s<=100?s:200-s)*100:0),l:T(s/2),a:T(o,2)}})(t);return`hsl(${e}, ${i}%, ${o}%)`},I=({h:t,s:e,v:i,a:o})=>{t=t/360*6,e/=100,i/=100;const s=Math.floor(t),r=i*(1-e),n=i*(1-(t-s)*e),l=i*(1-(1-t+s)*e),a=s%6;return{r:T(255*[i,n,r,r,l,i][a]),g:T(255*[l,i,i,n,r,r][a]),b:T(255*[r,r,l,i,i,n][a]),a:T(o,2)}},q=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},R=({r:t,g:e,b:i,a:o})=>{const s=o<1?q(T(255*o)):"";return"#"+q(t)+q(e)+q(i)+s},V=({r:t,g:e,b:i,a:o})=>{const s=Math.max(t,e,i),r=s-Math.min(t,e,i),n=r?s===t?(e-i)/r:s===e?2+(i-t)/r:4+(t-e)/r:0;return{h:T(60*(n<0?n+6:n)),s:T(s?r/s*100:0),v:T(s/255*100),a:o}},L=(t,e)=>{if(t===e)return!0;for(const i in t)if(t[i]!==e[i])return!1;return!0},H={},F=t=>{let e=H[t];return e||(e=document.createElement("template"),e.innerHTML=t,H[t]=e),e},U=(t,e,i)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:i}))};let K=!1;const N=t=>"touches"in t,W=(t,e)=>{const i=N(e)?e.touches[0]:e,o=t.el.getBoundingClientRect();U(t.el,"move",t.getMove({x:M((i.pageX-(o.left+window.pageXOffset))/o.width),y:M((i.pageY-(o.top+window.pageYOffset))/o.height)}))};class _{constructor(t,e,i,o){const s=F(`<div role="slider" tabindex="0" part="${e}" ${i}><div part="${e}-pointer"></div></div>`);t.appendChild(s.content.cloneNode(!0));const r=t.querySelector(`[part=${e}]`);r.addEventListener("mousedown",this),r.addEventListener("touchstart",this),r.addEventListener("keydown",this),this.el=r,this.xy=o,this.nodes=[r.firstChild,r]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(K?"touchmove":"mousemove",this),e(K?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(K&&!N(t)||(K||(K=N(t)),0)))(t)||!K&&0!=t.button)return;this.el.focus(),W(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),W(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const i=e.keyCode;i>40||t.xy&&i<37||i<33||(e.preventDefault(),U(t.el,"move",t.getMove({x:39===i?.01:37===i?-.01:34===i?.05:33===i?-.05:35===i?1:36===i?-1:0,y:40===i?.01:38===i?-.01:0},!0)))})(this,t)}}style(t){t.forEach((t,e)=>{for(const i in t)this.nodes[e].style.setProperty(i,t[i])})}}class G extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:D({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",`${T(t)}`)}getMove(t,e){return{h:e?M(this.h+360*t.x,0,360):360*t.x}}}class J extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:`${t.s}%`,color:D(t)},{"background-color":D({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${T(t.s)}%, Brightness ${T(t.v)}%`)}getMove(t,e){return{s:e?M(this.hsva.s+100*t.x,0,100):100*t.x,v:e?M(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const Q=Symbol("same"),X=Symbol("color"),Y=Symbol("hsva"),Z=Symbol("update"),tt=Symbol("parts"),et=Symbol("css"),it=Symbol("sliders");class ot extends HTMLElement{static get observedAttributes(){return["color"]}get[et](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[it](){return[J,G]}get color(){return this[X]}set color(t){if(!this[Q](t)){const e=this.colorModel.toHsva(t);this[Z](e),this[X]=t}}constructor(){super();const t=F(`<style>${this[et].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[tt]=this[it].map(t=>new t(e))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,i){const o=this.colorModel.fromAttr(i);this[Q](o)||(this.color=o)}handleEvent(t){const e=this[Y],i={...e,...t.detail};let o;this[Z](i),L(i,e)||this[Q](o=this.colorModel.fromHsva(i))||(this[X]=o,U(this,"color-changed",{value:o}))}[Q](t){return this.color&&this.colorModel.equal(t,this.color)}[Z](t){this[Y]=t,this[tt].forEach(e=>e.update(t))}}const st={defaultColor:"#000",toHsva:t=>V(B(t)),fromHsva:({h:t,s:e,v:i})=>R(I({h:t,s:e,v:i,a:1})),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||L(B(t),B(e)),fromAttr:t=>t};class rt extends ot{get colorModel(){return st}}class nt extends rt{}customElements.define("hex-color-picker",nt);var lt=Object.freeze({__proto__:null,HexColorPicker:nt});export{x as ColorHolderBox,z as ColorPicker};

package/dist/src/components/colorpicker/color-holder.component.d.ts

@@ -18,13 +18,11 @@ import { ColorPickerSize } from './color-picker.types.js';
  * <nr-colorholder-box color="#e74c3c" disabled></nr-colorholder-box>
  * ```
  *
- * @cssproperty --color-holder-size - Size of the color box
- * @cssproperty --color-holder-border - Border style
- * @cssproperty --color-holder-border-radius - Border radius
- * @cssproperty --color-holder-cursor - Cursor style
+ * @csspart container - The color swatch div element
  */
 export declare class ColorHolderBox extends LitElement {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** The color value to display */
     color: string;
     /** Size variant (small, default, large) */

package/dist/src/components/colorpicker/color-holder.component.js

@@ -27,10 +27,7 @@ import { styles } from './color-holder.style.js';
  * <nr-colorholder-box color="#e74c3c" disabled></nr-colorholder-box>
  * ```
  *
- * @cssproperty --color-holder-size - Size of the color box
- * @cssproperty --color-holder-border - Border style
- * @cssproperty --color-holder-border-radius - Border radius
- * @cssproperty --color-holder-cursor - Cursor style
+ * @csspart container - The color swatch div element
  */
 let ColorHolderBox = class ColorHolderBox extends LitElement {
     constructor() {
@@ -80,9 +77,10 @@ let ColorHolderBox = class ColorHolderBox extends LitElement {
             borderWidth: this.showBorder ? `${this.borderWidth}px` : '0',
         };
         return html `
-      <div 
-        class="${classMap(containerClasses)}" 
+      <div
+        class="${classMap(containerClasses)}"
         style="${styleMap(containerStyles)}"
+        part="container"
         role="img"
         aria-label="Color swatch: ${this.color}"
         title="${this.color}"
@@ -91,6 +89,7 @@ let ColorHolderBox = class ColorHolderBox extends LitElement {
     }
 };
 ColorHolderBox.styles = styles;
+ColorHolderBox.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], ColorHolderBox.prototype, "color", void 0);

package/dist/src/components/colorpicker/color-holder.style.js

@@ -10,35 +10,35 @@ const colorHolderStyles = css `
     
     /* Ensure clean state transitions */
     * {
-      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      transition: all 0.15s ease;
     }
   }
 
   .color-holder-container {
-    width: var(--nuraly-size-colorpicker-default, 30px);
-    height: var(--nuraly-size-colorpicker-default-height, 25px);
-    border: 1px solid var(--nuraly-color-border, rgba(0, 0, 0, 0.2));
+    width: 30px;
+    height: 25px;
+    border: 1px solid #e0e0e0;
     box-sizing: border-box;
-    border-radius: var(--nuraly-border-radius-small, 2px);
+    border-radius: 4px;
   }
   
   :host([size='small']) .color-holder-container {
-    width: var(--nuraly-size-colorpicker-small, 20px);
-    height: var(--nuraly-size-colorpicker-small-height, 15px);
+    width: 20px;
+    height: 15px;
   }
   
   :host([size='large']) .color-holder-container {
-    width: var(--nuraly-size-colorpicker-large, 35px);
-    height: var(--nuraly-size-colorpicker-large-height, 30px);
+    width: 35px;
+    height: 30px;
   }
   
   .color-holder-container--disabled {
-    opacity: var(--nuraly-opacity-disabled, 0.5);
+    opacity: 0.5;
     cursor: not-allowed;
   }
   
   :host(:hover:not([disabled])) .color-holder-container {
-    border-color: var(--nuraly-color-border-hover, rgba(0, 0, 0, 0.4));
+    border-color: rgba(0, 0, 0, 0.4);
   }
 `;
 export const styles = colorHolderStyles;

package/dist/src/components/colorpicker/color-picker.component.d.ts

@@ -8,7 +8,7 @@ import './color-holder.component.js';
 import './default-color-sets.component.js';
 import { ColorPickerSize, ColorPickerTrigger, ColorPickerPlacement, ColorPickerAnimation, ColorFormat } from './color-picker.types.js';
 import type { ColorPickerHost } from './interfaces/index.js';
-declare const ColorPicker_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const ColorPicker_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Advanced color picker component with dropdown positioning, validation, and accessibility.
  *
@@ -54,6 +54,7 @@ declare const ColorPicker_base: (new (...args: any[]) => import("@nuralyui/commo
  * @cssproperty --colorpicker-dropdown-border-radius - Border radius of dropdown
  */
 export declare class ColorPicker extends ColorPicker_base implements ColorPickerHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     /** Current color value */

package/dist/src/components/colorpicker/color-picker.component.js

@@ -312,6 +312,7 @@ let ColorPicker = class ColorPicker extends NuralyUIBaseMixin(LitElement) {
     `;
     }
 };
+ColorPicker.useShadowDom = true;
 ColorPicker.styles = styles;
 __decorate([
     property({ type: String })

package/dist/src/components/colorpicker/color-picker.style.js

@@ -12,12 +12,12 @@ export default css `
     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);
+    color: #161616;
+    background-color: #ffffff;
     
     /* Ensure clean state transitions when theme changes */
     * {
-      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      transition: all 0.15s ease;
     }
   }
 
@@ -58,7 +58,7 @@ export default css `
   }
   
   :host([disabled]) .color-holder {
-    opacity: var(--nuraly-opacity-disabled, 0.5);
+    opacity: 0.5;
     cursor: not-allowed;
   }
 
@@ -66,16 +66,16 @@ export default css `
     display: block;
     position: fixed;
     width: 180px;
-    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));
+    z-index: 1000;
+    padding: 0.5rem;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 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;
+    transition: opacity 0.15s ease-in-out,
+                visibility 0.15s ease-in-out;
   }
 
   :host([show]) .dropdown-container.positioned {

package/dist/src/components/colorpicker/default-color-sets.component.d.ts

@@ -19,11 +19,11 @@ import './color-holder.component.js';
  *
  * @fires color-click - Fired when a color swatch is clicked
  *
- * @cssproperty --default-color-sets-gap - Gap between color swatches
- * @cssproperty --default-color-sets-padding - Padding around the color grid
+ * @csspart container - The color swatches grid container
  */
 export declare class DefaultColorSets extends LitElement {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     /** Array of color values to display as swatches */
     defaultColorSets: string[];
     /** Size of the color swatches */

package/dist/src/components/colorpicker/default-color-sets.component.js

@@ -28,8 +28,7 @@ import './color-holder.component.js';
  *
  * @fires color-click - Fired when a color swatch is clicked
  *
- * @cssproperty --default-color-sets-gap - Gap between color swatches
- * @cssproperty --default-color-sets-padding - Padding around the color grid
+ * @csspart container - The color swatches grid container
  */
 let DefaultColorSets = class DefaultColorSets extends LitElement {
     constructor() {
@@ -77,8 +76,9 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
             return nothing;
         }
         return html `
-      <div 
+      <div
         class="default-color-sets-container"
+        part="container"
         role="list"
         aria-label="Preset color swatches"
         style="--columns: ${this.columns}"
@@ -105,6 +105,7 @@ let DefaultColorSets = class DefaultColorSets extends LitElement {
     }
 };
 DefaultColorSets.styles = styles;
+DefaultColorSets.useShadowDom = true;
 __decorate([
     property({ type: Array, attribute: 'default-color-sets' })
 ], DefaultColorSets.prototype, "defaultColorSets", void 0);