@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,9 +1,9 @@
-import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property as e,customElement as r}from"lit/decorators.js";import{classMap as d}from"lit/directives/class-map.js";import{styleMap as s}from"lit/directives/style-map.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{BaseComponentController as p}from"@nuralyui/common/controllers";const h=o`
+import{css as t,html as e,nothing as o,LitElement as i}from"lit";import{property as n,customElement as s}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{styleMap as d}from"lit/directives/style-map.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";const l=t`
   :host {
     display: inline-block;
     position: relative;
-    color: var(--nuraly-color-text);
-    font-family: var(--nuraly-dropdown-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);
+    color: #161616;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   }
 
   .dropdown {
@@ -17,20 +17,20 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
   }
 
   .dropdown__trigger:focus-within {
-    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);
-    outline-offset: var(--nuraly-focus-outline-offset, 1px);
+    outline: 2px solid #0f62fe;
+    outline-offset: 1px;
   }
 
   .dropdown__panel {
     position: fixed;
-    z-index: var(--nuraly-dropdown-z-index, 9999);
-    background: var(--nuraly-color-dropdown-background, #ffffff);
-    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);
-    border-radius: var(--nuraly-dropdown-border-radius, 6px);
-    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
-    min-width: var(--nuraly-dropdown-min-width, 10rem);
-    max-width: var(--nuraly-dropdown-max-width, 20rem);
-    max-height: var(--nuraly-dropdown-max-height, 200px);
+    z-index: 9999;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    min-width: 10rem;
+    max-width: 20rem;
+    max-height: 200px;
     overflow: auto;
     /* Use display none to fully hide when closed */
     display: none;
@@ -38,9 +38,9 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
-    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+    transition: opacity 0.15s ease,
+                visibility 0.15s ease,
+                transform 0.15s ease;
     /* Ensure proper containment */
     box-sizing: border-box;
     /* Create new stacking context to prevent layering issues */
@@ -90,15 +90,15 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
 
   /* Size variants */
   .dropdown__panel--small {
-    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);
+    font-size: 0.75rem;
   }
 
   .dropdown__panel--medium {
-    font-size: var(--nuraly-dropdown-font-size, 0.875rem);
+    font-size: 0.875rem;
   }
 
   .dropdown__panel--large {
-    font-size: var(--nuraly-dropdown-large-font-size, 1rem);
+    font-size: 1rem;
   }
 
   /* Animation variants */
@@ -122,8 +122,8 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
 
   /* Fade animation - opacity only */
   .dropdown__panel--fade {
-    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+    transition: opacity 0.15s ease,
+                visibility 0.15s ease;
   }
 
   .dropdown__panel--fade:not(.dropdown__panel--open) {
@@ -140,9 +140,9 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
 
   /* Slide animation - slide down/up with opacity */
   .dropdown__panel--slide {
-    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+    transition: opacity 0.15s ease,
+                visibility 0.15s ease,
+                transform 0.15s ease;
   }
 
   .dropdown__panel--slide:not(.dropdown__panel--open) {
@@ -166,9 +166,9 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
 
   /* Scale animation - scale and opacity */
   .dropdown__panel--scale {
-    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),
-                transform var(--nuraly-dropdown-animation-duration, 0.15s) cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition: opacity 0.15s ease,
+                visibility 0.15s ease,
+                transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
 
   .dropdown__panel--scale:not(.dropdown__panel--open) {
@@ -201,9 +201,9 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
     position: absolute;
     width: 0;
     height: 0;
-    border: var(--nuraly-dropdown-arrow-size) solid transparent;
-    border-bottom-color: var(--nuraly-dropdown-background);
-    top: calc(-1 * var(--nuraly-dropdown-arrow-size) * 2);
+    border: 5px solid transparent;
+    border-bottom-color: #ffffff;
+    top: calc(-1 * 5px * 2);
     left: 50%;
     transform: translateX(-50%);
   }
@@ -213,10 +213,10 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
     position: absolute;
     width: 0;
     height: 0;
-    border: calc(var(--nuraly-dropdown-arrow-size) + 1px) solid transparent;
-    border-bottom-color: var(--nuraly-dropdown-border-color);
-    top: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);
-    left: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);
+    border: calc(5px + 1px) solid transparent;
+    border-bottom-color: #e0e0e0;
+    top: calc(-1 * 5px - 1px);
+    left: calc(-1 * 5px - 1px);
   }
 
   /* Content areas */
@@ -236,55 +236,55 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
   .dropdown__item {
     display: flex;
     align-items: center;
-    gap: var(--nuraly-dropdown-item-gap);
-    padding: var(--nuraly-dropdown-item-padding);
-    background: var(--nuraly-color-dropdown-item-background);
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: transparent;
     border: none;
-    color: var(--nuraly-color-dropdown-item-text);
+    color: #161616;
     cursor: pointer;
     text-align: left;
     width: 100%;
-    min-height: var(--nuraly-dropdown-item-min-height);
-    transition: var(--nuraly-dropdown-item-transition);
+    min-height: 2.5rem;
+    transition: background-color 0.15s ease;
     font-size: inherit;
     font-family: inherit;
-    line-height: var(--nuraly-dropdown-item-line-height);
+    line-height: 1.5;
     position: relative;
   }
 
   .dropdown__item:hover:not(.dropdown__item--disabled) {
-    background: var(--nuraly-color-dropdown-item-background-hover);
-    color: var(--nuraly-color-dropdown-item-text-hover);
+    background: #f4f4f4;
+    color: #161616;
   }
 
   .dropdown__item:focus {
     outline: none;
-    background: var(--nuraly-color-dropdown-item-background-focus);
-    color: var(--nuraly-color-dropdown-item-text-focus);
+    background: #f4f4f4;
+    color: #161616;
   }
 
   .dropdown__item:focus-visible {
-    outline: 2px solid var(--nuraly-focus-color, #0f62fe);
+    outline: 2px solid #0f62fe;
     outline-offset: -2px;
-    background: var(--nuraly-color-dropdown-item-background-focus);
-    color: var(--nuraly-color-dropdown-item-text-focus);
+    background: #f4f4f4;
+    color: #161616;
   }
 
   .dropdown__item:active:not(.dropdown__item--disabled) {
-    background: var(--nuraly-color-dropdown-item-background-active);
-    color: var(--nuraly-color-dropdown-item-text-active);
+    background: #f4f4f4;
+    color: #161616;
   }
 
   .dropdown__item--disabled {
-    opacity: var(--nuraly-dropdown-item-disabled-opacity, 0.5);
+    opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }
 
   .dropdown__item-icon {
     flex-shrink: 0;
-    width: var(--nuraly-dropdown-item-icon-size);
-    height: var(--nuraly-dropdown-item-icon-size);
+    width: 1rem;
+    height: 1rem;
   }
 
   .dropdown__item-label {
@@ -296,8 +296,8 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
 
   .dropdown__divider {
     height: 1px;
-    background: var(--nuraly-dropdown-divider-color);
-    margin: var(--nuraly-dropdown-divider-margin);
+    background: #e0e0e0;
+    margin: 0.25rem 0;
   }
 
   /* Cascading dropdown styles */
@@ -340,14 +340,14 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
   .dropdown__submenu {
     position: absolute;
     top: 0;
-    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);
-    background: var(--nuraly-color-dropdown-background, #ffffff);
-    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);
-    border-radius: var(--nuraly-dropdown-border-radius, 6px);
-    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));
-    min-width: var(--nuraly-dropdown-min-width, 10rem);
-    max-width: var(--nuraly-dropdown-max-width, 20rem);
-    max-height: var(--nuraly-dropdown-max-height, auto);
+    z-index: calc(9999 + 1);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    min-width: 10rem;
+    max-width: 20rem;
+    max-height: auto;
     overflow: auto;
     box-sizing: border-box;
     animation: fadeInSubmenu 0.15s ease;
@@ -358,7 +358,7 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
   }
 
   .dropdown__custom-content {
-    padding: var(--nuraly-dropdown-item-padding, 8px 12px);
+    padding: 8px 12px;
     max-width: 100%;
     box-sizing: border-box;
   }
@@ -369,13 +369,13 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
     margin: 0 0 8px 0;
     font-size: 0.875rem;
     font-weight: 600;
-    color: var(--nuraly-color-text-primary);
+    color: #161616;
   }
 
   .dropdown__custom-content p {
     margin: 0 0 8px 0;
     font-size: 0.75rem;
-    color: var(--nuraly-color-text-secondary);
+    color: #525252;
     line-height: 1.4;
   }
 
@@ -430,13 +430,13 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
 
   /* Focus styles for accessibility */
   :host(:focus-within) .dropdown__trigger {
-    outline: var(--nuraly-dropdown-focus-outline);
-    outline-offset: var(--nuraly-dropdown-focus-offset);
+    outline: 2px solid #7c3aed;
+    outline-offset: 2px;
   }
 
   /* Disabled state */
   :host([disabled]) {
-    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);
+    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -455,66 +455,82 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
     display: none !important;
   }
 
-`;class c extends p{findElement(o){var t;return null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelector(o)}findElements(o){var t;return null===(t=this._host.shadowRoot)||void 0===t?void 0:t.querySelectorAll(o)}}class u extends c{constructor(o){super(o),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._triggerElement=null,this._dropdownElement=null,this._outsideClickHandler=null,this._keydownHandler=null,this._hoverTimer=null,this._triggerClickHandler=null,this._triggerHoverHandler=null,this._triggerLeaveHandler=null,this._triggerFocusHandler=null,this._triggerBlurHandler=null,this._scrollHandler=null,this._resizeHandler=null,this._isOpen=o.open}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){}hostUpdated(){this._isOpen!==this.host.open&&(this._isOpen=this.host.open),this._triggerElement||this.setupTriggerListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.open=!0,this.requestUpdate(),setTimeout(()=>{this.calculatePosition(),this.setupEventListeners()},10),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(o){this.handleError(o,"open")}}close(){try{this._isOpen&&(this.removeEventListeners(),this._isOpen=!1,this.host.open=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(o){this.handleError(o,"close")}}toggle(){try{this._isOpen?this.close():this.open()}catch(o){this.handleError(o,"toggle")}}removeTriggerListeners(){this._triggerElement&&(this._triggerClickHandler&&(this._triggerElement.removeEventListener("click",this._triggerClickHandler),this._triggerClickHandler=null),this._triggerHoverHandler&&(this._triggerElement.removeEventListener("mouseenter",this._triggerHoverHandler),this._triggerHoverHandler=null),this._triggerLeaveHandler&&(this._triggerElement.removeEventListener("mouseleave",this._triggerLeaveHandler),this._triggerLeaveHandler=null),this._triggerFocusHandler&&(this._triggerElement.removeEventListener("focusin",this._triggerFocusHandler),this._triggerFocusHandler=null),this._triggerBlurHandler&&(this._triggerElement.removeEventListener("focusout",this._triggerBlurHandler),this._triggerBlurHandler=null))}findDropdownElements(){this._dropdownElement=this.findElement(".dropdown__panel"),this._triggerElement=this.findElement(".dropdown__trigger")}setupTriggerListeners(){if(this.findDropdownElements(),this._triggerElement)switch(this.removeTriggerListeners(),this.host.trigger){case"click":this._triggerClickHandler=this.handleTriggerClick.bind(this),this._triggerElement.addEventListener("click",this._triggerClickHandler);break;case"hover":this._triggerHoverHandler=this.handleTriggerHover.bind(this),this._triggerLeaveHandler=this.handleTriggerLeave.bind(this),this._triggerElement.addEventListener("mouseenter",this._triggerHoverHandler),this._triggerElement.addEventListener("mouseleave",this._triggerLeaveHandler);break;case"focus":this._triggerFocusHandler=this.handleTriggerFocus.bind(this),this._triggerBlurHandler=this.handleTriggerBlur.bind(this),this._triggerElement.addEventListener("focusin",this._triggerFocusHandler),this._triggerElement.addEventListener("focusout",this._triggerBlurHandler)}}setupEventListeners(){this.host.closeOnOutsideClick&&(this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0)),this.host.closeOnEscape&&(this._keydownHandler=this.handleKeydown.bind(this),document.addEventListener("keydown",this._keydownHandler)),this._scrollHandler=this.handleScroll.bind(this),this._resizeHandler=this.handleResize.bind(this),window.addEventListener("scroll",this._scrollHandler,!0),window.addEventListener("resize",this._resizeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._keydownHandler&&(document.removeEventListener("keydown",this._keydownHandler),this._keydownHandler=null),this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}handleTriggerClick(){this.host.disabled||this.toggle()}handleTriggerHover(){this.host.disabled||(this._hoverTimer&&clearTimeout(this._hoverTimer),this._hoverTimer=window.setTimeout(()=>{this.open()},this.host.delay))}handleTriggerLeave(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null),setTimeout(()=>{this.isHoveringDropdown()||this.close()},100)}handleTriggerFocus(){this.host.disabled||this.open()}handleTriggerBlur(){setTimeout(()=>{this.isDropdownFocused()||this.close()},100)}handleOutsideClick(o){var t,n,i,e;if(!this.host.closeOnOutsideClick)return;const r=o.target;if(null===(t=this._triggerElement)||void 0===t?void 0:t.contains(r))return;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(r))return;const d=o.composedPath();for(const o of d){if(o===this._dropdownElement)return;if(o instanceof Element&&(null===(i=this._dropdownElement)||void 0===i?void 0:i.contains(o)))return}let s=r;for(;s;){const o=s.getRootNode();if(!(o instanceof ShadowRoot&&o.host))break;if(null===(e=this._dropdownElement)||void 0===e?void 0:e.contains(o.host))return;s=o.host}this.close()}handleKeydown(o){"Escape"===o.key&&this.close()}handleScroll(){this._isOpen&&this.calculatePosition()}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var o,t;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const n=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),e=(null===(o=window.visualViewport)||void 0===o?void 0:o.height)||window.innerHeight,r=(null===(t=window.visualViewport)||void 0===t?void 0:t.width)||window.innerWidth,d=e-n.bottom,s=n.top,a=r-n.right,l=n.left,p=i.height||200,h=i.width||300,c=function(o,t,n){return n>=o?"bottom":t>=o||t>n?"top":"bottom"}(p,s,d),u=this.determineHorizontalPlacement(h,l,a);let w,m;w="bottom"===c?n.bottom+this.host.offset:n.top-p-this.host.offset,m="left"===u?n.right-h:n.left,m=Math.max(8,Math.min(m,r-h-8)),w=Math.max(8,Math.min(w,e-p-8)),this._dropdownElement.style.top=`${w}px`,this._dropdownElement.style.left=`${m}px`,this.applyPlacement(c,u)}catch(o){this.handleError(o,"calculatePosition")}}determineHorizontalPlacement(o,t,n){const i=this.host.placement;if(i.includes("left")||i.includes("right")){if(i.includes("left")&&t>=o)return"left";if(i.includes("right")&&n>=o)return"right"}return n>=o?"right":t>=o?"left":n>t?"right":"left"}applyPlacement(o,t){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom","dropdown__panel--left-aligned","dropdown__panel--right-aligned"),this._dropdownElement.classList.add(`dropdown__panel--${o}`),"left"===t?this._dropdownElement.classList.add("dropdown__panel--right-aligned"):"right"===t&&this._dropdownElement.classList.add("dropdown__panel--left-aligned"),this._position.placement=o)}isHoveringDropdown(){var o;return(null===(o=this._dropdownElement)||void 0===o?void 0:o.matches(":hover"))||!1}isDropdownFocused(){var o;const t=document.activeElement;if(!t)return!1;if(null===(o=this._dropdownElement)||void 0===o?void 0:o.contains(t))return!0;if(t.closest(".dropdown__custom-content"))return!0;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(t.tagName)){if(t.closest(".dropdown__panel"))return!0}return!1}handleItemClick(o,t){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:o,dropdown:this.host,originalEvent:t}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */,h=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,o;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const o=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((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))}},p=()=>{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)},c=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(p())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(!p())return!0;let e=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){e=!1;const i=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,i):console.error(i.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)}},u=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const i=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,i)}dispatchInputEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,o)}dispatchFocusEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,o)}dispatchValidationEvent(t,e){var o;const i=Object.assign({target:e.target||this,value:e.value,isValid:null!==(o=e.isValid)&&void 0!==o&&o,error:e.error},e);this.dispatchCustomEvent(t,i)}dispatchActionEvent(t,e){const o=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,o)}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}},m=new Set,w=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const _=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(),o=t.styles;if(o){const t=f(o);t&&function(t,e,o){var i;if(!w.has(t)){const o=new CSSStyleSheet;o.replaceSync(e),w.set(t,o)}const n=w.get(t),s=`doc:${t}`;if(m.has(s)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],m.add(s)),o){let e=o;for(;e;){const o=e.getRootNode();if(!(o instanceof ShadowRoot))break;{const s=`shadow:${((null===(i=o.host)||void 0===i?void 0:i.tagName)||"").toLowerCase()}:${t}`;m.has(s)||(o.adoptedStyleSheets=[...o.adoptedStyleSheets,n],m.add(s)),e=o.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 f(t){return Array.isArray(t)?t.map(t=>f(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
+ */class v{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,o){try{return t()}catch(t){return this.handleError(t,e),o}}debounce(t,e){let o;const i=(...i)=>{void 0!==o&&clearTimeout(o),o=setTimeout(()=>{o=void 0,t.apply(this,i)},e)};return i.cancel=()=>{void 0!==o&&(clearTimeout(o),o=void 0)},i}}class b extends v{findElement(t){var e;return null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelector(t)}findElements(t){var e;return null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelectorAll(t)}}class g extends b{constructor(t){super(t),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._triggerElement=null,this._dropdownElement=null,this._outsideClickHandler=null,this._keydownHandler=null,this._hoverTimer=null,this._triggerClickHandler=null,this._triggerHoverHandler=null,this._triggerLeaveHandler=null,this._triggerFocusHandler=null,this._triggerBlurHandler=null,this._scrollHandler=null,this._resizeHandler=null,this._isOpen=t.open}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){}hostUpdated(){this._isOpen!==this.host.open&&(this._isOpen=this.host.open),this._triggerElement||this.setupTriggerListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.open=!0,this.requestUpdate(),setTimeout(()=>{this.calculatePosition(),this.setupEventListeners()},10),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this.removeEventListeners(),this._isOpen=!1,this.host.open=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(t){this.handleError(t,"close")}}toggle(){try{this._isOpen?this.close():this.open()}catch(t){this.handleError(t,"toggle")}}removeTriggerListeners(){this._triggerElement&&(this._triggerClickHandler&&(this._triggerElement.removeEventListener("click",this._triggerClickHandler),this._triggerClickHandler=null),this._triggerHoverHandler&&(this._triggerElement.removeEventListener("mouseenter",this._triggerHoverHandler),this._triggerHoverHandler=null),this._triggerLeaveHandler&&(this._triggerElement.removeEventListener("mouseleave",this._triggerLeaveHandler),this._triggerLeaveHandler=null),this._triggerFocusHandler&&(this._triggerElement.removeEventListener("focusin",this._triggerFocusHandler),this._triggerFocusHandler=null),this._triggerBlurHandler&&(this._triggerElement.removeEventListener("focusout",this._triggerBlurHandler),this._triggerBlurHandler=null))}findDropdownElements(){this._dropdownElement=this.findElement(".dropdown__panel"),this._triggerElement=this.findElement(".dropdown__trigger")}setupTriggerListeners(){if(this.findDropdownElements(),this._triggerElement)switch(this.removeTriggerListeners(),this.host.trigger){case"click":this._triggerClickHandler=this.handleTriggerClick.bind(this),this._triggerElement.addEventListener("click",this._triggerClickHandler);break;case"hover":this._triggerHoverHandler=this.handleTriggerHover.bind(this),this._triggerLeaveHandler=this.handleTriggerLeave.bind(this),this._triggerElement.addEventListener("mouseenter",this._triggerHoverHandler),this._triggerElement.addEventListener("mouseleave",this._triggerLeaveHandler);break;case"focus":this._triggerFocusHandler=this.handleTriggerFocus.bind(this),this._triggerBlurHandler=this.handleTriggerBlur.bind(this),this._triggerElement.addEventListener("focusin",this._triggerFocusHandler),this._triggerElement.addEventListener("focusout",this._triggerBlurHandler)}}setupEventListeners(){this.host.closeOnOutsideClick&&(this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0)),this.host.closeOnEscape&&(this._keydownHandler=this.handleKeydown.bind(this),document.addEventListener("keydown",this._keydownHandler)),this._scrollHandler=this.handleScroll.bind(this),this._resizeHandler=this.handleResize.bind(this),window.addEventListener("scroll",this._scrollHandler,!0),window.addEventListener("resize",this._resizeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._keydownHandler&&(document.removeEventListener("keydown",this._keydownHandler),this._keydownHandler=null),this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}handleTriggerClick(){this.host.disabled||this.toggle()}handleTriggerHover(){this.host.disabled||(this._hoverTimer&&clearTimeout(this._hoverTimer),this._hoverTimer=window.setTimeout(()=>{this.open()},this.host.delay))}handleTriggerLeave(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null),setTimeout(()=>{this.isHoveringDropdown()||this.close()},100)}handleTriggerFocus(){this.host.disabled||this.open()}handleTriggerBlur(){setTimeout(()=>{this.isDropdownFocused()||this.close()},100)}handleOutsideClick(t){var e,o,i,n;if(!this.host.closeOnOutsideClick)return;const s=t.target;if(null===(e=this._triggerElement)||void 0===e?void 0:e.contains(s))return;if(null===(o=this._dropdownElement)||void 0===o?void 0:o.contains(s))return;const r=t.composedPath();for(const t of r){if(t===this._dropdownElement)return;if(t instanceof Element&&(null===(i=this._dropdownElement)||void 0===i?void 0:i.contains(t)))return}let d=s;for(;d;){const t=d.getRootNode();if(!(t instanceof ShadowRoot&&t.host))break;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(t.host))return;d=t.host}this.close()}handleKeydown(t){"Escape"===t.key&&this.close()}handleScroll(){this._isOpen&&this.calculatePosition()}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),n=(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,r=n-o.bottom,d=o.top,a=s-o.right,l=o.left,h=i.height||200,p=i.width||300,c=function(t,e,o){return o>=t?"bottom":e>=t||e>o?"top":"bottom"}(h,d,r),u=this.determineHorizontalPlacement(p,l,a);let m,w;m="bottom"===c?o.bottom+this.host.offset:o.top-h-this.host.offset,w="left"===u?o.right-p:o.left,w=Math.max(8,Math.min(w,s-p-8)),m=Math.max(8,Math.min(m,n-h-8)),this._dropdownElement.style.top=`${m}px`,this._dropdownElement.style.left=`${w}px`,this.applyPlacement(c,u)}catch(t){this.handleError(t,"calculatePosition")}}determineHorizontalPlacement(t,e,o){const i=this.host.placement;if(i.includes("left")||i.includes("right")){if(i.includes("left")&&e>=t)return"left";if(i.includes("right")&&o>=t)return"right"}return o>=t?"right":e>=t?"left":o>e?"right":"left"}applyPlacement(t,e){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom","dropdown__panel--left-aligned","dropdown__panel--right-aligned"),this._dropdownElement.classList.add(`dropdown__panel--${t}`),"left"===e?this._dropdownElement.classList.add("dropdown__panel--right-aligned"):"right"===e&&this._dropdownElement.classList.add("dropdown__panel--left-aligned"),this._position.placement=t)}isHoveringDropdown(){var t;return(null===(t=this._dropdownElement)||void 0===t?void 0:t.matches(":hover"))||!1}isDropdownFocused(){var t;const e=document.activeElement;if(!e)return!1;if(null===(t=this._dropdownElement)||void 0===t?void 0:t.contains(e))return!0;if(e.closest(".dropdown__custom-content"))return!0;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(e.tagName)){if(e.closest(".dropdown__panel"))return!0}return!1}handleItemClick(t,e){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:t,dropdown:this.host,originalEvent:e}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var w=function(o,t,n,i){for(var e,r=arguments.length,d=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i,s=o.length-1;s>=0;s--)(e=o[s])&&(d=(r<3?e(d):r>3?e(t,n,d):e(t,n))||d);return r>3&&d&&Object.defineProperty(t,n,d),d};let m=class extends(l(t)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.open=!1,this.placement="bottom",this.trigger="hover",this.size="medium",this.animation="fade",this.disabled=!1,this.arrow=!1,this.autoClose=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.offset=4,this.delay=50,this.maxHeight="300px",this.minWidth="auto",this.cascadeDirection="auto",this.cascadeDelay=50,this.cascadeOnHover=!0,this.allowOverflow=!1,this.dropdownController=new u(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=o=>{o.stopPropagation()},this.handleItemClick=(o,t)=>{o.disabled||(o.options&&o.options.length>0||o.customContent?this.toggleSubmenu(o.id):this.dropdownController.handleItemClick(o,t))},this.handleItemHover=o=>{var t;if(((null===(t=o.options)||void 0===t?void 0:t.length)||o.customContent)&&(this.clearSubmenuTimer(o.id),this.cascadeOnHover)){const t=window.setTimeout(()=>{this.showSubmenu(o.id)},this.cascadeDelay);this.submenuTimers.set(o.id,t)}},this.handleItemLeave=o=>{var t;if(!(null===(t=o.options)||void 0===t?void 0:t.length)&&!o.customContent)return;this.clearSubmenuTimer(o.id);const n=window.setTimeout(()=>{this.hideSubmenu(o.id)},100);this.submenuTimers.set(`hide-${o.id}`,n)},this.handleSubmenuEnter=o=>{this.clearSubmenuTimer(`hide-${o}`)},this.handleSubmenuLeave=o=>{const t=window.setTimeout(()=>{this.hideSubmenu(o)},100);this.submenuTimers.set(`hide-${o}`,t)}}connectedCallback(){super.connectedCallback(),this.updateCascadingAttribute()}updated(o){super.updated(o),o.has("items")&&this.updateCascadingAttribute()}disconnectedCallback(){super.disconnectedCallback()}firstUpdated(){}updateCascadingAttribute(){this.items.some(o=>o.options&&o.options.length>0||!!o.customContent)?this.setAttribute("has-cascading",""):this.removeAttribute("has-cascading")}clearSubmenuTimer(o){const t=this.submenuTimers.get(o);t&&(clearTimeout(t),this.submenuTimers.delete(o))}toggleSubmenu(o){this.openSubmenus.has(o)?this.hideSubmenu(o):this.showSubmenu(o)}showSubmenu(o){this.openSubmenus.add(o),this.requestUpdate()}hideSubmenu(o){this.openSubmenus.delete(o),this.requestUpdate()}show(){this.dropdownController.open()}hide(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}renderCustomContent(o){return"string"==typeof o.customContent?n`<div>${a(o.customContent)}</div>`:o.customContent}renderSubmenuContent(o){return o.customContent?n`
+ */var y=function(t,e,o,i){for(var n,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,d=t.length-1;d>=0;d--)(n=t[d])&&(r=(s<3?n(r):s>3?n(e,o,r):n(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r};let x=class extends((t=>c(h(u(_(t)))))(i)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.open=!1,this.placement="bottom",this.trigger="hover",this.size="medium",this.animation="fade",this.disabled=!1,this.arrow=!1,this.autoClose=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.offset=4,this.delay=50,this.maxHeight="300px",this.minWidth="auto",this.cascadeDirection="auto",this.cascadeDelay=50,this.cascadeOnHover=!0,this.allowOverflow=!1,this.dropdownController=new g(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=t=>{t.stopPropagation()},this.handleItemClick=(t,e)=>{t.disabled||(t.options&&t.options.length>0||t.customContent?this.toggleSubmenu(t.id):this.dropdownController.handleItemClick(t,e))},this.handleItemHover=t=>{var e;if(((null===(e=t.options)||void 0===e?void 0:e.length)||t.customContent)&&(this.clearSubmenuTimer(t.id),this.cascadeOnHover)){const e=window.setTimeout(()=>{this.showSubmenu(t.id)},this.cascadeDelay);this.submenuTimers.set(t.id,e)}},this.handleItemLeave=t=>{var e;if(!(null===(e=t.options)||void 0===e?void 0:e.length)&&!t.customContent)return;this.clearSubmenuTimer(t.id);const o=window.setTimeout(()=>{this.hideSubmenu(t.id)},100);this.submenuTimers.set(`hide-${t.id}`,o)},this.handleSubmenuEnter=t=>{this.clearSubmenuTimer(`hide-${t}`)},this.handleSubmenuLeave=t=>{const e=window.setTimeout(()=>{this.hideSubmenu(t)},100);this.submenuTimers.set(`hide-${t}`,e)}}connectedCallback(){super.connectedCallback(),this.updateCascadingAttribute()}updated(t){super.updated(t),t.has("items")&&this.updateCascadingAttribute()}disconnectedCallback(){super.disconnectedCallback()}firstUpdated(){}updateCascadingAttribute(){this.items.some(t=>t.options&&t.options.length>0||!!t.customContent)?this.setAttribute("has-cascading",""):this.removeAttribute("has-cascading")}clearSubmenuTimer(t){const e=this.submenuTimers.get(t);e&&(clearTimeout(e),this.submenuTimers.delete(t))}toggleSubmenu(t){this.openSubmenus.has(t)?this.hideSubmenu(t):this.showSubmenu(t)}showSubmenu(t){this.openSubmenus.add(t),this.requestUpdate()}hideSubmenu(t){this.openSubmenus.delete(t),this.requestUpdate()}show(){this.dropdownController.open()}hide(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}renderCustomContent(t){return"string"==typeof t.customContent?e`<div>${a(t.customContent)}</div>`:t.customContent}renderSubmenuContent(t){return t.customContent?e`
         <div class="dropdown__custom-content">
-          ${this.renderCustomContent(o)}
+          ${this.renderCustomContent(t)}
         </div>
-      `:n`
+      `:e`
       <div class="dropdown__items">
-        ${(o.options||[]).map(o=>o.divider?n`<div class="dropdown__divider"></div>`:n`
+        ${(t.options||[]).map(t=>t.divider?e`<div class="dropdown__divider"></div>`:e`
             <button
-              class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled})}"
-              ?disabled="${o.disabled}"
-              @click="${t=>this.handleItemClick(o,t)}"
+              class="dropdown__item ${r({"dropdown__item--disabled":!!t.disabled})}"
+              ?disabled="${t.disabled}"
+              @click="${e=>this.handleItemClick(t,e)}"
             >
-              ${o.icon?n`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:i}
-              <span class="dropdown__item-label">${o.label}</span>
+              ${t.icon?e`<nr-icon name="${t.icon}" class="dropdown__item-icon"></nr-icon>`:o}
+              <span class="dropdown__item-label">${t.label}</span>
             </button>
           `)}
       </div>
-    `}renderItems(){return this.items.length?n`
+    `}renderItems(){return this.items.length?e`
       <div class="dropdown__items">
-        ${this.items.map(o=>{if(o.divider)return n`<div class="dropdown__divider"></div>`;const t=!!(o.options&&o.options.length>0)||!!o.customContent,e=t&&this.openSubmenus.has(o.id);return n`
-            <div class="dropdown__item-container ${d({"dropdown__item-container--has-submenu":t})}">
+        ${this.items.map(t=>{if(t.divider)return e`<div class="dropdown__divider"></div>`;const i=!!(t.options&&t.options.length>0)||!!t.customContent,n=i&&this.openSubmenus.has(t.id);return e`
+            <div class="dropdown__item-container ${r({"dropdown__item-container--has-submenu":i})}">
               <button
-                class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled,"dropdown__item--has-submenu":t})}"
-                ?disabled="${o.disabled}"
-                @click="${t=>this.handleItemClick(o,t)}"
-                @mouseenter="${()=>t&&this.handleItemHover(o)}"
-                @mouseleave="${()=>t&&this.handleItemLeave(o)}"
+                class="dropdown__item ${r({"dropdown__item--disabled":!!t.disabled,"dropdown__item--has-submenu":i})}"
+                ?disabled="${t.disabled}"
+                @click="${e=>this.handleItemClick(t,e)}"
+                @mouseenter="${()=>i&&this.handleItemHover(t)}"
+                @mouseleave="${()=>i&&this.handleItemLeave(t)}"
               >
-                ${o.icon?n`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:i}
-                <span class="dropdown__item-label">${o.label}</span>
-                ${t?n`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:i}
+                ${t.icon?e`<nr-icon name="${t.icon}" class="dropdown__item-icon"></nr-icon>`:o}
+                <span class="dropdown__item-label">${t.label}</span>
+                ${i?e`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:o}
               </button>
               
-              ${t&&e?n`
-                <div class="dropdown__submenu ${d({"dropdown__submenu--right":"right"===this.cascadeDirection||"auto"===this.cascadeDirection,"dropdown__submenu--left":"left"===this.cascadeDirection})}"
-                @mouseenter="${()=>this.handleSubmenuEnter(o.id)}"
-                @mouseleave="${()=>this.handleSubmenuLeave(o.id)}">
-                  ${this.renderSubmenuContent(o)}
+              ${i&&n?e`
+                <div class="dropdown__submenu ${r({"dropdown__submenu--right":"right"===this.cascadeDirection||"auto"===this.cascadeDirection,"dropdown__submenu--left":"left"===this.cascadeDirection})}"
+                @mouseenter="${()=>this.handleSubmenuEnter(t.id)}"
+                @mouseleave="${()=>this.handleSubmenuLeave(t.id)}">
+                  ${this.renderSubmenuContent(t)}
                 </div>
-              `:i}
+              `:o}
             </div>
           `})}
       </div>
-    `:i}render(){const o={dropdown__panel:!0,"dropdown__panel--open":this.open,[`dropdown__panel--${this.size}`]:!0,[`dropdown__panel--${this.animation}`]:!0,[`dropdown__panel--${this.placement}`]:!0,"dropdown__panel--with-arrow":this.arrow},t={maxHeight:this.maxHeight,minWidth:this.minWidth};return n`
+    `:o}render(){const t={dropdown__panel:!0,"dropdown__panel--open":this.open,[`dropdown__panel--${this.size}`]:!0,[`dropdown__panel--${this.animation}`]:!0,[`dropdown__panel--${this.placement}`]:!0,"dropdown__panel--with-arrow":this.arrow},i={maxHeight:this.maxHeight,minWidth:this.minWidth};return e`
       <div class="dropdown">
         <div class="dropdown__trigger">
           <slot name="trigger"></slot>
         </div>
         
         <div 
-          class="${d(o)}"
-          style="${s(t)}"
+          class="${r(t)}"
+          style="${d(i)}"
           @click="${this.handleDropdownPanelClick}"
         >
-          ${this.arrow?n`<div class="dropdown__arrow"></div>`:i}
+          ${this.arrow?e`<div class="dropdown__arrow"></div>`:o}
           
           <slot name="header"></slot>
           
@@ -525,4 +541,4 @@ import{css as o,LitElement as t,html as n,nothing as i}from"lit";import{property
           <slot name="footer"></slot>
         </div>
       </div>
-    `}};m.styles=h,w([e({type:Array})],m.prototype,"items",void 0),w([e({type:Boolean,reflect:!0})],m.prototype,"open",void 0),w([e({type:String})],m.prototype,"placement",void 0),w([e({type:String})],m.prototype,"trigger",void 0),w([e({type:String})],m.prototype,"size",void 0),w([e({type:String})],m.prototype,"animation",void 0),w([e({type:Boolean})],m.prototype,"disabled",void 0),w([e({type:Boolean})],m.prototype,"arrow",void 0),w([e({type:Boolean,attribute:"auto-close"})],m.prototype,"autoClose",void 0),w([e({type:Boolean,attribute:"close-on-outside-click"})],m.prototype,"closeOnOutsideClick",void 0),w([e({type:Boolean,attribute:"close-on-escape"})],m.prototype,"closeOnEscape",void 0),w([e({type:Number})],m.prototype,"offset",void 0),w([e({type:Number})],m.prototype,"delay",void 0),w([e({type:String,attribute:"max-height"})],m.prototype,"maxHeight",void 0),w([e({type:String,attribute:"min-width"})],m.prototype,"minWidth",void 0),w([e({type:String,attribute:"cascade-direction"})],m.prototype,"cascadeDirection",void 0),w([e({type:Number,attribute:"cascade-delay"})],m.prototype,"cascadeDelay",void 0),w([e({type:Boolean,attribute:"cascade-on-hover"})],m.prototype,"cascadeOnHover",void 0),w([e({type:Boolean,attribute:"allow-overflow"})],m.prototype,"allowOverflow",void 0),m=w([r("nr-dropdown")],m);export{m as NrDropdownElement};
+    `}};x.useShadowDom=!0,x.styles=l,y([n({type:Array})],x.prototype,"items",void 0),y([n({type:Boolean,reflect:!0})],x.prototype,"open",void 0),y([n({type:String})],x.prototype,"placement",void 0),y([n({type:String})],x.prototype,"trigger",void 0),y([n({type:String})],x.prototype,"size",void 0),y([n({type:String})],x.prototype,"animation",void 0),y([n({type:Boolean})],x.prototype,"disabled",void 0),y([n({type:Boolean})],x.prototype,"arrow",void 0),y([n({type:Boolean,attribute:"auto-close"})],x.prototype,"autoClose",void 0),y([n({type:Boolean,attribute:"close-on-outside-click"})],x.prototype,"closeOnOutsideClick",void 0),y([n({type:Boolean,attribute:"close-on-escape"})],x.prototype,"closeOnEscape",void 0),y([n({type:Number})],x.prototype,"offset",void 0),y([n({type:Number})],x.prototype,"delay",void 0),y([n({type:String,attribute:"max-height"})],x.prototype,"maxHeight",void 0),y([n({type:String,attribute:"min-width"})],x.prototype,"minWidth",void 0),y([n({type:String,attribute:"cascade-direction"})],x.prototype,"cascadeDirection",void 0),y([n({type:Number,attribute:"cascade-delay"})],x.prototype,"cascadeDelay",void 0),y([n({type:Boolean,attribute:"cascade-on-hover"})],x.prototype,"cascadeOnHover",void 0),y([n({type:Boolean,attribute:"allow-overflow"})],x.prototype,"allowOverflow",void 0),x=y([s("nr-dropdown")],x);export{x as NrDropdownElement};

package/dist/src/components/dropdown/dropdown.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { DropdownPlacement, DropdownTrigger, DropdownSize, DropdownAnimation, DropdownItem } from './dropdown.types.js';
-declare const NrDropdownElement_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 NrDropdownElement_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").LightDomContent) & typeof LitElement;
 /**
  * # Dropdown Component
  *
@@ -69,6 +69,7 @@ declare const NrDropdownElement_base: (new (...args: any[]) => import("@nuralyui
  * @cssproperty --dropdown-max-height - Maximum height of dropdown panel
  */
 export declare class NrDropdownElement extends NrDropdownElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     items: DropdownItem[];

package/dist/src/components/dropdown/dropdown.component.js

@@ -325,6 +325,7 @@ let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitEle
     `;
     }
 };
+NrDropdownElement.useShadowDom = true;
 NrDropdownElement.styles = styles;
 __decorate([
     property({ type: Array })