@nuralyui/dropdown 0.0.19 → 0.0.21

package/bundle.js

@@ -1,6 +1,518 @@
-import{css as o,LitElement as t,nothing as n,html as i}from"lit";import{property as r,customElement as e}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{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=o`: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)}.dropdown{position:relative;display:inline-block}.dropdown__trigger{display:inline-block;cursor:pointer}.dropdown__trigger:focus-within{outline:var(--nuraly-focus-outline,2px solid #0f62fe);outline-offset:var(--nuraly-focus-outline-offset,1px)}.dropdown__panel{position:absolute;top:100%;left:0;z-index:var(--nuraly-dropdown-z-index,9999);background:var(--nuraly-color-dropdown-background,#fff);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,.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);overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease);box-sizing:border-box;isolation:isolate;transform-origin:top center}.dropdown__panel--open{opacity:1;visibility:visible;transform:translateY(0)}:host([open]) .dropdown__panel{opacity:1;visibility:visible;transform:translateY(0)}.dropdown__panel--top,.dropdown__panel--top-end,.dropdown__panel--top-start{top:auto;bottom:100%;margin-bottom:1px;margin-top:0;transform:translateY(8px)}.dropdown__panel--top-end.dropdown__panel--open,.dropdown__panel--top-start.dropdown__panel--open,.dropdown__panel--top.dropdown__panel--open{transform:translateY(0)}.dropdown__panel--bottom-end,.dropdown__panel--top-end{left:auto;right:0}.dropdown__panel--bottom-start,.dropdown__panel--top-start{left:0;right:auto}.dropdown__panel--small{font-size:var(--nuraly-dropdown-small-font-size,.75rem)}.dropdown__panel--medium{font-size:var(--nuraly-dropdown-font-size,.875rem)}.dropdown__panel--large{font-size:var(--nuraly-dropdown-large-font-size,1rem)}.dropdown__panel--none{transition:none}.dropdown__panel--none:not(.dropdown__panel--open){opacity:0;visibility:hidden;transform:none}.dropdown__panel--none.dropdown__panel--open{opacity:1;visibility:visible;transform:none}.dropdown__panel--fade{transition:opacity var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),visibility var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease)}.dropdown__panel--fade:not(.dropdown__panel--open){opacity:0;visibility:hidden;transform:none}.dropdown__panel--fade.dropdown__panel--open{opacity:1;visibility:visible;transform:none}.dropdown__panel--slide{transition:opacity var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),visibility var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),transform var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease)}.dropdown__panel--slide:not(.dropdown__panel--open){opacity:0;visibility:hidden;transform:translateY(-12px)}.dropdown__panel--slide.dropdown__panel--open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open),.dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),.dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open){transform:translateY(12px)}.dropdown__panel--scale{transition:opacity var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),visibility var(--nuraly-dropdown-animation-duration,.15s) var(--nuraly-dropdown-animation-timing,ease),transform var(--nuraly-dropdown-animation-duration,.15s) cubic-bezier(.25,.46,.45,.94)}.dropdown__panel--scale:not(.dropdown__panel--open){opacity:0;visibility:hidden;transform:scale(.9) translateY(-8px)}.dropdown__panel--scale.dropdown__panel--open{opacity:1;visibility:visible;transform:scale(1) translateY(0)}.dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open),.dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),.dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open){transform:scale(.9) translateY(8px)}.dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open,.dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,.dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open{transform:scale(1) translateY(0)}.dropdown__arrow{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);left:50%;transform:translateX(-50%)}.dropdown__arrow::before{content:'';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)}.dropdown__content{overflow:auto}.dropdown__items{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;overflow:visible}.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);border:none;color:var(--nuraly-color-dropdown-item-text);cursor:pointer;text-align:left;width:100%;min-height:var(--nuraly-dropdown-item-min-height);transition:var(--nuraly-dropdown-item-transition);font-size:inherit;font-family:inherit;line-height:var(--nuraly-dropdown-item-line-height);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)}.dropdown__item:focus{outline:0;background:var(--nuraly-color-dropdown-item-background-focus);color:var(--nuraly-color-dropdown-item-text-focus)}.dropdown__item:focus-visible{outline:2px solid var(--nuraly-focus-color,#0f62fe);outline-offset:-2px;background:var(--nuraly-color-dropdown-item-background-focus);color:var(--nuraly-color-dropdown-item-text-focus)}.dropdown__item:active:not(.dropdown__item--disabled){background:var(--nuraly-color-dropdown-item-background-active);color:var(--nuraly-color-dropdown-item-text-active)}.dropdown__item--disabled{opacity:var(--nuraly-dropdown-item-disabled-opacity,.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)}.dropdown__item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown__divider{height:1px;background:var(--nuraly-dropdown-divider-color);margin:var(--nuraly-dropdown-divider-margin)}.dropdown__item-container{position:relative}:host([has-cascading]) .dropdown__panel{overflow:visible!important;max-height:none!important}:host([has-cascading]) .dropdown__items{overflow:visible!important}:host([has-cascading]) .dropdown__content{overflow:visible!important}.dropdown__item--has-submenu{display:flex;justify-content:space-between;align-items:center}.dropdown__submenu-arrow{margin-left:auto;font-size:.75em;opacity:.6;transition:transform .15s ease}.dropdown__item--has-submenu:hover .dropdown__submenu-arrow{opacity:1}.dropdown__submenu{position:absolute;top:0;z-index:calc(var(--nuraly-dropdown-z-index,9999) + 1);background:var(--nuraly-color-dropdown-background,#fff);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,.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);overflow:auto;box-sizing:border-box;animation:fadeInSubmenu .15s ease;opacity:1;visibility:visible;pointer-events:auto}.dropdown__custom-content{padding:var(--nuraly-dropdown-item-padding,8px 12px);max-width:100%;box-sizing:border-box}.dropdown__custom-content h3,.dropdown__custom-content h4{margin:0 0 8px 0;font-size:.875rem;font-weight:600;color:var(--nuraly-color-text-primary)}.dropdown__custom-content p{margin:0 0 8px 0;font-size:.75rem;color:var(--nuraly-color-text-secondary);line-height:1.4}.dropdown__custom-content button,.dropdown__custom-content input,.dropdown__custom-content select{width:100%;margin-bottom:8px}.dropdown__custom-content button:last-child,.dropdown__custom-content input:last-child,.dropdown__custom-content p:last-child{margin-bottom:0}.dropdown__submenu--right{left:100%;margin-left:4px}.dropdown__submenu--left{right:100%;margin-right:4px}@keyframes fadeInSubmenu{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}.dropdown__submenu--left{animation-name:fadeInSubmenuLeft}@keyframes fadeInSubmenuLeft{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}:host(:focus-within) .dropdown__trigger{outline:var(--nuraly-dropdown-focus-outline);outline-offset:var(--nuraly-dropdown-focus-offset)}:host([disabled]){opacity:var(--nuraly-dropdown-disabled-opacity,.5);pointer-events:none}[hidden]{display:none!important}`;class p{constructor(o){this._host=o,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(o){return this._host.dispatchEvent(o)}handleError(o,t){console.error(`Dropdown Controller Error in ${t}:`,o)}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 h extends p{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;const i=o.target;if(null===(t=this._triggerElement)||void 0===t?void 0:t.contains(i))return;if(i.closest(".dropdown__panel"))return;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(i))return;if(i.closest("nr-dropdown"))return;if(i.closest(".dropdown__custom-content"))return;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(i.tagName)){if(i.closest(".dropdown__panel"))return}i.closest(".dropdown")||i.closest('[class*="dropdown"]')||this.host.closeOnOutsideClick&&this.close()}handleKeydown(o){"Escape"===o.key&&this.close()}handleScroll(){}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var o;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const t=this._triggerElement.getBoundingClientRect(),n=((null===(o=window.visualViewport)||void 0===o?void 0:o.height)||window.innerHeight)-t.bottom,i=t.top,r=200,e=this.determineOptimalPlacement(r,i,n);this.applyPlacement(e)}catch(o){this.handleError(o,"calculatePosition")}}determineOptimalPlacement(o,t,n){return n>=o?"bottom":t>=o||t>n?"top":"bottom"}applyPlacement(o){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom"),this._dropdownElement.classList.add(`dropdown__panel--${o}`),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){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:o,dropdown:this.host}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
+import{css as o,LitElement as t,nothing as n,html 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{NuralyUIBaseMixin as a}from"@nuralyui/common/mixins";const l=o`
+  :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);
+  }
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown__trigger {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .dropdown__trigger:focus-within {
+    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);
+    outline-offset: var(--nuraly-focus-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);
+    overflow: auto;
+    /* Use display none to fully hide when closed */
+    display: none;
+    /* Use opacity and visibility for smooth animations */
+    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);
+    /* Ensure proper containment */
+    box-sizing: border-box;
+    /* Create new stacking context to prevent layering issues */
+    isolation: isolate;
+    /* Force above other elements */
+    transform-origin: top center;
+    /* Prevent clipping by overflow containers */
+    pointer-events: none;
+  }
+
+  .dropdown__panel--open {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  /* Alternative attribute-based selector (like select component) */
+  :host([open]) .dropdown__panel {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  /* Placement variants - transform origin adjustments */
+  .dropdown__panel--top,
+  .dropdown__panel--top-start,
+  .dropdown__panel--top-end {
+    transform-origin: bottom center;
+    transform: translateY(8px);
+  }
+
+  .dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--top-end.dropdown__panel--open {
+    transform: translateY(0);
+  }
+
+  .dropdown__panel--bottom,
+  .dropdown__panel--bottom-start,
+  .dropdown__panel--bottom-end {
+    transform-origin: top center;
+  }
+
+  /* Size variants */
+  .dropdown__panel--small {
+    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);
+  }
+
+  .dropdown__panel--medium {
+    font-size: var(--nuraly-dropdown-font-size, 0.875rem);
+  }
+
+  .dropdown__panel--large {
+    font-size: var(--nuraly-dropdown-large-font-size, 1rem);
+  }
+
+  /* Animation variants */
+  
+  /* No animation - instant show/hide */
+  .dropdown__panel--none {
+    transition: none;
+  }
+
+  .dropdown__panel--none:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: none;
+  }
+
+  .dropdown__panel--none.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* 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);
+  }
+
+  .dropdown__panel--fade:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: none;
+  }
+
+  .dropdown__panel--fade.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  /* 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);
+  }
+
+  .dropdown__panel--slide:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-12px);
+  }
+
+  .dropdown__panel--slide.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+  }
+
+  /* For top-positioned dropdowns, slide direction is reversed */
+  .dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open),
+  .dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),
+  .dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open) {
+    transform: translateY(12px);
+  }
+
+  /* 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);
+  }
+
+  .dropdown__panel--scale:not(.dropdown__panel--open) {
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(0.9) translateY(-8px);
+  }
+
+  .dropdown__panel--scale.dropdown__panel--open {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1) translateY(0);
+  }
+
+  /* For top-positioned scale dropdowns */
+  .dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open),
+  .dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),
+  .dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open) {
+    transform: scale(0.9) translateY(8px);
+  }
+
+  .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,
+  .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,
+  .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {
+    transform: scale(1) translateY(0);
+  }
+
+  /* Arrow */
+  .dropdown__arrow {
+    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);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .dropdown__arrow::before {
+    content: '';
+    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);
+  }
+
+  /* Content areas */
+  .dropdown__content {
+    overflow: auto;
+  }
+
+  .dropdown__items {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow: visible; /* Allow submenus to extend outside */
+  }
+
+  .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);
+    border: none;
+    color: var(--nuraly-color-dropdown-item-text);
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+    min-height: var(--nuraly-dropdown-item-min-height);
+    transition: var(--nuraly-dropdown-item-transition);
+    font-size: inherit;
+    font-family: inherit;
+    line-height: var(--nuraly-dropdown-item-line-height);
+    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);
+  }
+
+  .dropdown__item:focus {
+    outline: none;
+    background: var(--nuraly-color-dropdown-item-background-focus);
+    color: var(--nuraly-color-dropdown-item-text-focus);
+  }
+
+  .dropdown__item:focus-visible {
+    outline: 2px solid var(--nuraly-focus-color, #0f62fe);
+    outline-offset: -2px;
+    background: var(--nuraly-color-dropdown-item-background-focus);
+    color: var(--nuraly-color-dropdown-item-text-focus);
+  }
+
+  .dropdown__item:active:not(.dropdown__item--disabled) {
+    background: var(--nuraly-color-dropdown-item-background-active);
+    color: var(--nuraly-color-dropdown-item-text-active);
+  }
+
+  .dropdown__item--disabled {
+    opacity: var(--nuraly-dropdown-item-disabled-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);
+  }
+
+  .dropdown__item-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown__divider {
+    height: 1px;
+    background: var(--nuraly-dropdown-divider-color);
+    margin: var(--nuraly-dropdown-divider-margin);
+  }
+
+  /* Cascading dropdown styles */
+  .dropdown__item-container {
+    position: relative;
+  }
+
+  /* Allow submenus to overflow when dropdown has cascading items */
+  :host([has-cascading]) .dropdown__panel {
+    overflow: visible !important;
+    max-height: none !important; /* Remove height restriction for cascading */
+  }
+
+  :host([has-cascading]) .dropdown__items {
+    overflow: visible !important;
+  }
+
+  /* For cascading dropdowns, we need to handle scrolling differently */
+  :host([has-cascading]) .dropdown__content {
+    overflow: visible !important;
+  }
+
+  .dropdown__item--has-submenu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .dropdown__submenu-arrow {
+    margin-left: auto;
+    font-size: 0.75em;
+    opacity: 0.6;
+    transition: transform 0.15s ease;
+  }
+
+  .dropdown__item--has-submenu:hover .dropdown__submenu-arrow {
+    opacity: 1;
+  }
+
+  .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);
+    overflow: auto;
+    box-sizing: border-box;
+    animation: fadeInSubmenu 0.15s ease;
+    /* Ensure submenu is visible */
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .dropdown__custom-content {
+    padding: var(--nuraly-dropdown-item-padding, 8px 12px);
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Custom content styling */
+  .dropdown__custom-content h3,
+  .dropdown__custom-content h4 {
+    margin: 0 0 8px 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--nuraly-color-text-primary);
+  }
+
+  .dropdown__custom-content p {
+    margin: 0 0 8px 0;
+    font-size: 0.75rem;
+    color: var(--nuraly-color-text-secondary);
+    line-height: 1.4;
+  }
+
+  .dropdown__custom-content button,
+  .dropdown__custom-content input,
+  .dropdown__custom-content select {
+    width: 100%;
+    margin-bottom: 8px;
+  }
+
+  .dropdown__custom-content button:last-child,
+  .dropdown__custom-content input:last-child,
+  .dropdown__custom-content p:last-child {
+    margin-bottom: 0;
+  }
+
+  .dropdown__submenu--right {
+    left: 100%;
+    margin-left: 4px;
+  }
+
+  .dropdown__submenu--left {
+    right: 100%;
+    margin-right: 4px;
+  }
+
+  @keyframes fadeInSubmenu {
+    from {
+      opacity: 0;
+      transform: translateX(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .dropdown__submenu--left {
+    animation-name: fadeInSubmenuLeft;
+  }
+
+  @keyframes fadeInSubmenuLeft {
+    from {
+      opacity: 0;
+      transform: translateX(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Focus styles for accessibility */
+  :host(:focus-within) .dropdown__trigger {
+    outline: var(--nuraly-dropdown-focus-outline);
+    outline-offset: var(--nuraly-dropdown-focus-offset);
+  }
+
+  /* Disabled state */
+  :host([disabled]) {
+    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);
+    pointer-events: none;
+  }
+
+  /* Hidden state */
+  [hidden] {
+    display: none !important;
+  }
+
+`;class p{constructor(o){this._host=o,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){this._host.requestUpdate()}dispatchEvent(o){return this._host.dispatchEvent(o)}handleError(o,t){console.error(`Dropdown Controller Error in ${t}:`,o)}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 h extends p{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=this.determineOptimalPlacement(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")}}determineOptimalPlacement(o,t,n){return n>=o?"bottom":t>=o||t>n?"top":"bottom"}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
- */var u=function(o,t,n,i){for(var r,e=arguments.length,d=e<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i,s=o.length-1;s>=0;s--)(r=o[s])&&(d=(e<3?r(d):e>3?r(t,n,d):r(t,n))||d);return e>3&&d&&Object.defineProperty(t,n,d),d};let c=class extends(a(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.dropdownController=new h(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=o=>{o.stopPropagation()},this.handleItemClick=o=>{o.disabled||(o.options&&o.options.length>0||o.customContent?this.toggleSubmenu(o.id):this.dropdownController.handleItemClick(o))},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()}renderItems(){return this.items.length?i`<div class="dropdown__items">${this.items.map((o=>{if(o.divider)return i`<div class="dropdown__divider"></div>`;const t=!!(o.options&&o.options.length>0)||!!o.customContent,r=t&&this.openSubmenus.has(o.id);return i`<div class="dropdown__item-container ${d({"dropdown__item-container--has-submenu":t})}"><button class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled,"dropdown__item--has-submenu":t})}" ?disabled="${o.disabled}" @click="${()=>this.handleItemClick(o)}" @mouseenter="${()=>t&&this.handleItemHover(o)}" @mouseleave="${()=>t&&this.handleItemLeave(o)}">${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n} <span class="dropdown__item-label">${o.label}</span> ${t?i`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:n}</button> ${t&&r?i`<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)}">${o.customContent?i`<div class="dropdown__custom-content">${"string"==typeof o.customContent?i`<div .innerHTML="${o.customContent}"></div>`:o.customContent}</div>`:i`<div class="dropdown__items">${o.options.map((o=>o.divider?i`<div class="dropdown__divider"></div>`:i`<button class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled})}" ?disabled="${o.disabled}" @click="${()=>this.handleItemClick(o)}">${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n} <span class="dropdown__item-label">${o.label}</span></button>`))}</div>`}</div>`:n}</div>`}))}</div>`:n}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 i`<div class="dropdown"><div class="dropdown__trigger"><slot name="trigger"></slot></div><div class="${d(o)}" style="${s(t)}" @click="${this.handleDropdownPanelClick}">${this.arrow?i`<div class="dropdown__arrow"></div>`:n}<slot name="header"></slot><div class="dropdown__content"><slot name="content">${this.renderItems()}</slot></div><slot name="footer"></slot></div></div>`}};c.styles=l,u([r({type:Array})],c.prototype,"items",void 0),u([r({type:Boolean,reflect:!0})],c.prototype,"open",void 0),u([r({type:String})],c.prototype,"placement",void 0),u([r({type:String})],c.prototype,"trigger",void 0),u([r({type:String})],c.prototype,"size",void 0),u([r({type:String})],c.prototype,"animation",void 0),u([r({type:Boolean})],c.prototype,"disabled",void 0),u([r({type:Boolean})],c.prototype,"arrow",void 0),u([r({type:Boolean,attribute:"auto-close"})],c.prototype,"autoClose",void 0),u([r({type:Boolean,attribute:"close-on-outside-click"})],c.prototype,"closeOnOutsideClick",void 0),u([r({type:Boolean,attribute:"close-on-escape"})],c.prototype,"closeOnEscape",void 0),u([r({type:Number})],c.prototype,"offset",void 0),u([r({type:Number})],c.prototype,"delay",void 0),u([r({type:String,attribute:"max-height"})],c.prototype,"maxHeight",void 0),u([r({type:String,attribute:"min-width"})],c.prototype,"minWidth",void 0),u([r({type:String,attribute:"cascade-direction"})],c.prototype,"cascadeDirection",void 0),u([r({type:Number,attribute:"cascade-delay"})],c.prototype,"cascadeDelay",void 0),u([r({type:Boolean,attribute:"cascade-on-hover"})],c.prototype,"cascadeOnHover",void 0),c=u([e("nr-dropdown")],c);export{c as NrDropdownElement};
+ */var c=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 u=class extends(a(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.dropdownController=new h(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()}renderItems(){return this.items.length?i`
+      <div class="dropdown__items">
+        ${this.items.map(o=>{if(o.divider)return i`<div class="dropdown__divider"></div>`;const t=!!(o.options&&o.options.length>0)||!!o.customContent,e=t&&this.openSubmenus.has(o.id);return i`
+            <div class="dropdown__item-container ${d({"dropdown__item-container--has-submenu":t})}">
+              <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)}"
+              >
+                ${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n}
+                <span class="dropdown__item-label">${o.label}</span>
+                ${t?i`<nr-icon name="chevron-right" class="dropdown__submenu-arrow"></nr-icon>`:n}
+              </button>
+              
+              ${t&&e?i`
+                <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)}">
+                  ${o.customContent?i`
+                    <div class="dropdown__custom-content">
+                      ${"string"==typeof o.customContent?i`<div .innerHTML="${o.customContent}"></div>`:o.customContent}
+                    </div>
+                  `:i`
+                    <div class="dropdown__items">
+                      ${o.options.map(o=>o.divider?i`<div class="dropdown__divider"></div>`:i`
+                          <button
+                            class="dropdown__item ${d({"dropdown__item--disabled":!!o.disabled})}"
+                            ?disabled="${o.disabled}"
+                            @click="${t=>this.handleItemClick(o,t)}"
+                          >
+                            ${o.icon?i`<nr-icon name="${o.icon}" class="dropdown__item-icon"></nr-icon>`:n}
+                            <span class="dropdown__item-label">${o.label}</span>
+                          </button>
+                        `)}
+                    </div>
+                  `}
+                </div>
+              `:n}
+            </div>
+          `})}
+      </div>
+    `:n}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 i`
+      <div class="dropdown">
+        <div class="dropdown__trigger">
+          <slot name="trigger"></slot>
+        </div>
+        
+        <div 
+          class="${d(o)}"
+          style="${s(t)}"
+          @click="${this.handleDropdownPanelClick}"
+        >
+          ${this.arrow?i`<div class="dropdown__arrow"></div>`:n}
+          
+          <slot name="header"></slot>
+          
+          <div class="dropdown__content">
+            <slot name="content">${this.renderItems()}</slot>
+          </div>
+          
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `}};u.styles=l,c([e({type:Array})],u.prototype,"items",void 0),c([e({type:Boolean,reflect:!0})],u.prototype,"open",void 0),c([e({type:String})],u.prototype,"placement",void 0),c([e({type:String})],u.prototype,"trigger",void 0),c([e({type:String})],u.prototype,"size",void 0),c([e({type:String})],u.prototype,"animation",void 0),c([e({type:Boolean})],u.prototype,"disabled",void 0),c([e({type:Boolean})],u.prototype,"arrow",void 0),c([e({type:Boolean,attribute:"auto-close"})],u.prototype,"autoClose",void 0),c([e({type:Boolean,attribute:"close-on-outside-click"})],u.prototype,"closeOnOutsideClick",void 0),c([e({type:Boolean,attribute:"close-on-escape"})],u.prototype,"closeOnEscape",void 0),c([e({type:Number})],u.prototype,"offset",void 0),c([e({type:Number})],u.prototype,"delay",void 0),c([e({type:String,attribute:"max-height"})],u.prototype,"maxHeight",void 0),c([e({type:String,attribute:"min-width"})],u.prototype,"minWidth",void 0),c([e({type:String,attribute:"cascade-direction"})],u.prototype,"cascadeDirection",void 0),c([e({type:Number,attribute:"cascade-delay"})],u.prototype,"cascadeDelay",void 0),c([e({type:Boolean,attribute:"cascade-on-hover"})],u.prototype,"cascadeOnHover",void 0),u=c([r("nr-dropdown")],u);export{u as NrDropdownElement};

package/dropdown.component.d.ts

@@ -89,6 +89,7 @@ export declare class NrDropdownElement extends NrDropdownElement_base {
     cascadeDirection: 'right' | 'left' | 'auto';
     cascadeDelay: number;
     cascadeOnHover: boolean;
+    allowOverflow: boolean;
     private dropdownController;
     private openSubmenus;
     private submenuTimers;
@@ -111,7 +112,7 @@ export declare class NrDropdownElement extends NrDropdownElement_base {
     hide(): void;
     toggle(): void;
     private renderItems;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=dropdown.component.d.ts.map

package/dropdown.component.js

@@ -100,20 +100,21 @@ let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitEle
         this.cascadeDirection = 'auto';
         this.cascadeDelay = 50;
         this.cascadeOnHover = true;
+        this.allowOverflow = false;
         this.dropdownController = new NrDropdownController(this);
         this.openSubmenus = new Set();
         this.submenuTimers = new Map();
         this.handleDropdownPanelClick = (e) => {
             e.stopPropagation();
         };
-        this.handleItemClick = (item) => {
+        this.handleItemClick = (item, e) => {
             if (item.disabled)
                 return;
             if ((item.options && item.options.length > 0) || item.customContent) {
                 this.toggleSubmenu(item.id);
                 return;
             }
-            this.dropdownController.handleItemClick(item);
+            this.dropdownController.handleItemClick(item, e);
         };
         this.handleItemHover = (item) => {
             var _a;
@@ -224,7 +225,7 @@ let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitEle
                 'dropdown__item--has-submenu': hasSubmenu
             })}"
                 ?disabled="${item.disabled}"
-                @click="${() => this.handleItemClick(item)}"
+                @click="${(e) => this.handleItemClick(item, e)}"
                 @mouseenter="${() => hasSubmenu && this.handleItemHover(item)}"
                 @mouseleave="${() => hasSubmenu && this.handleItemLeave(item)}"
               >
@@ -258,7 +259,7 @@ let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitEle
                     'dropdown__item--disabled': !!subItem.disabled
                 })}"
                             ?disabled="${subItem.disabled}"
-                            @click="${() => this.handleItemClick(subItem)}"
+                            @click="${(e) => this.handleItemClick(subItem, e)}"
                           >
                             ${subItem.icon ? html `<nr-icon name="${subItem.icon}" class="dropdown__item-icon"></nr-icon>` : nothing}
                             <span class="dropdown__item-label">${subItem.label}</span>
@@ -368,6 +369,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'cascade-on-hover' })
 ], NrDropdownElement.prototype, "cascadeOnHover", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'allow-overflow' })
+], NrDropdownElement.prototype, "allowOverflow", void 0);
 NrDropdownElement = __decorate([
     customElement('nr-dropdown')
 ], NrDropdownElement);

package/dropdown.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './dropdown.style';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { NrDropdownController } from './controllers/dropdown.controller.js';\n\nimport {\n    DropdownPlacement,\n    DropdownTrigger,\n    DropdownSize,\n    DropdownAnimation,\n    DropdownItem\n} from './dropdown.types.js';\n\n/**\n * # Dropdown Component\n * \n * A versatile dropdown component that provides floating panel functionality with customizable triggers,\n * content, and positioning. Supports both predefined item lists and custom slot content with\n * cascading submenus and interactive elements.\n * \n * ## Features\n * - Multiple trigger modes (hover, click, focus, manual)\n * - Flexible positioning with auto-placement\n * - Cascading submenus with custom content support\n * - Interactive elements (forms, buttons) within dropdowns\n * - Keyboard navigation and accessibility\n * - Customizable animations and styling\n * - Event delegation and outside click detection\n * \n * ## Usage\n * ```html\n * <!-- Basic dropdown with slot content -->\n * <nr-dropdown trigger=\"hover\">\n *   <button slot=\"trigger\">Menu</button>\n *   <div slot=\"content\">\n *     <p>Custom content here</p>\n *   </div>\n * </nr-dropdown>\n * \n * <!-- Dropdown with predefined items -->\n * <nr-dropdown \n *   .items=\"${items}\" \n *   placement=\"bottom-start\"\n *   trigger=\"click\">\n *   <button slot=\"trigger\">Menu</button>\n * </nr-dropdown>\n * \n * <!-- Hover dropdown with custom positioning -->\n * <nr-dropdown \n *   trigger=\"hover\" \n *   placement=\"top\"\n *   size=\"large\">\n *   <span slot=\"trigger\">Hover me</span>\n *   <div slot=\"content\">Tooltip content</div>\n * </nr-dropdown>\n * ```\n * \n * @element nr-dropdown\n * @fires nr-dropdown-open - Fired when dropdown opens\n * @fires nr-dropdown-close - Fired when dropdown closes\n * @fires nr-dropdown-item-click - Fired when dropdown item is clicked\n * \n * @slot trigger - Element that triggers the dropdown\n * @slot content - Custom content for the dropdown panel\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n * \n * @cssproperty --dropdown-background - Background color of dropdown panel\n * @cssproperty --dropdown-border - Border of dropdown panel\n * @cssproperty --dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --dropdown-border-radius - Border radius of dropdown panel\n * @cssproperty --dropdown-max-width - Maximum width of dropdown panel\n * @cssproperty --dropdown-min-width - Minimum width of dropdown panel\n * @cssproperty --dropdown-max-height - Maximum height of dropdown panel\n */\n@customElement('nr-dropdown')\nexport class NrDropdownElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon'];\n\n  @property({ type: Array }) items: DropdownItem[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String }) placement: DropdownPlacement = DropdownPlacement.Bottom;\n  @property({ type: String }) trigger: DropdownTrigger = DropdownTrigger.Hover;\n  @property({ type: String }) size: DropdownSize = DropdownSize.Medium;\n  @property({ type: String }) animation: DropdownAnimation = DropdownAnimation.Fade;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) arrow = false;\n  @property({ type: Boolean, attribute: 'auto-close' }) autoClose = false;\n  @property({ type: Boolean, attribute: 'close-on-outside-click' }) closeOnOutsideClick = true;\n  @property({ type: Boolean, attribute: 'close-on-escape' }) closeOnEscape = true;\n  @property({ type: Number }) offset = 4;\n  @property({ type: Number }) delay = 50;\n  @property({ type: String, attribute: 'max-height' }) maxHeight = '300px';\n  @property({ type: String, attribute: 'min-width' }) minWidth = 'auto';\n  @property({ type: String, attribute: 'cascade-direction' }) cascadeDirection: 'right' | 'left' | 'auto' = 'auto';\n  @property({ type: Number, attribute: 'cascade-delay' }) cascadeDelay = 50;\n  @property({ type: Boolean, attribute: 'cascade-on-hover' }) cascadeOnHover = true;\n\n  private dropdownController = new NrDropdownController(this);\n  private openSubmenus = new Set<string>();\n  private submenuTimers = new Map<string, number>();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.updateCascadingAttribute();\n  }\n\n  override updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('items')) {\n      this.updateCascadingAttribute();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated(): void {\n  }\n\n  private updateCascadingAttribute(): void {\n    const hasCascading = this.items.some(item => \n      (item.options && item.options.length > 0) || !!item.customContent\n    );\n    if (hasCascading) {\n      this.setAttribute('has-cascading', '');\n    } else {\n      this.removeAttribute('has-cascading');\n    }\n  }\n\n  private handleDropdownPanelClick = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  private handleItemClick = (item: DropdownItem): void => {\n    if (item.disabled) return;\n\n    if ((item.options && item.options.length > 0) || item.customContent) {\n      this.toggleSubmenu(item.id);\n      return;\n    }\n\n    this.dropdownController.handleItemClick(item);\n  };\n\n  private handleItemHover = (item: DropdownItem): void => {\n    if (!item.options?.length && !item.customContent) return;\n\n    this.clearSubmenuTimer(item.id);\n\n    if (this.cascadeOnHover) {\n      const timer = window.setTimeout(() => {\n        this.showSubmenu(item.id);\n      }, this.cascadeDelay);\n      this.submenuTimers.set(item.id, timer);\n    }\n  };\n\n  private handleItemLeave = (item: DropdownItem): void => {\n    if (!item.options?.length && !item.customContent) return;\n\n    this.clearSubmenuTimer(item.id);\n\n    const timer = window.setTimeout(() => {\n      this.hideSubmenu(item.id);\n    }, 100);\n    this.submenuTimers.set(`hide-${item.id}`, timer);\n  };\n\n  private handleSubmenuEnter = (itemId: string): void => {\n    this.clearSubmenuTimer(`hide-${itemId}`);\n  };\n\n  private handleSubmenuLeave = (itemId: string): void => {\n    const timer = window.setTimeout(() => {\n      this.hideSubmenu(itemId);\n    }, 100);\n    this.submenuTimers.set(`hide-${itemId}`, timer);\n  };\n\n  private clearSubmenuTimer(key: string): void {\n    const timer = this.submenuTimers.get(key);\n    if (timer) {\n      clearTimeout(timer);\n      this.submenuTimers.delete(key);\n    }\n  }\n\n  private toggleSubmenu(itemId: string): void {\n    if (this.openSubmenus.has(itemId)) {\n      this.hideSubmenu(itemId);\n    } else {\n      this.showSubmenu(itemId);\n    }\n  }\n\n  private showSubmenu(itemId: string): void {\n    this.openSubmenus.add(itemId);\n    this.requestUpdate();\n  }\n\n  private hideSubmenu(itemId: string): void {\n    this.openSubmenus.delete(itemId);\n    this.requestUpdate();\n  }\n\n  show(): void {\n    this.dropdownController.open();\n  }\n\n  hide(): void {\n    this.dropdownController.close();\n  }\n\n  toggle(): void {\n    this.dropdownController.toggle();\n  }\n\n  private renderItems(): unknown {\n    if (!this.items.length) return nothing;\n\n    return html`\n      <div class=\"dropdown__items\">\n        ${this.items.map(item => {\n          if (item.divider) {\n            return html`<div class=\"dropdown__divider\"></div>`;\n          }\n\n          const hasSubmenu = !!(item.options && item.options.length > 0) || !!item.customContent;\n          const isSubmenuOpen = hasSubmenu && this.openSubmenus.has(item.id);\n\n          return html`\n            <div class=\"dropdown__item-container ${classMap({\n              'dropdown__item-container--has-submenu': hasSubmenu\n            })}\">\n              <button\n                class=\"dropdown__item ${classMap({\n                  'dropdown__item--disabled': !!item.disabled,\n                  'dropdown__item--has-submenu': hasSubmenu\n                })}\"\n                ?disabled=\"${item.disabled}\"\n                @click=\"${() => this.handleItemClick(item)}\"\n                @mouseenter=\"${() => hasSubmenu && this.handleItemHover(item)}\"\n                @mouseleave=\"${() => hasSubmenu && this.handleItemLeave(item)}\"\n              >\n                ${item.icon ? html`<nr-icon name=\"${item.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n                <span class=\"dropdown__item-label\">${item.label}</span>\n                ${hasSubmenu ? html`<nr-icon name=\"chevron-right\" class=\"dropdown__submenu-arrow\"></nr-icon>` : nothing}\n              </button>\n              \n              ${hasSubmenu && isSubmenuOpen ? html`\n                <div class=\"dropdown__submenu ${classMap({\n                  'dropdown__submenu--right': this.cascadeDirection === 'right' || this.cascadeDirection === 'auto',\n                  'dropdown__submenu--left': this.cascadeDirection === 'left'\n                })}\"\n                @mouseenter=\"${() => this.handleSubmenuEnter(item.id)}\"\n                @mouseleave=\"${() => this.handleSubmenuLeave(item.id)}\">\n                  ${item.customContent ? html`\n                    <div class=\"dropdown__custom-content\">\n                      ${typeof item.customContent === 'string' \n                        ? html`<div .innerHTML=\"${item.customContent}\"></div>`\n                        : item.customContent\n                      }\n                    </div>\n                  ` : html`\n                    <div class=\"dropdown__items\">\n                      ${item.options!.map(subItem => {\n                        if (subItem.divider) {\n                          return html`<div class=\"dropdown__divider\"></div>`;\n                        }\n                        \n                        return html`\n                          <button\n                            class=\"dropdown__item ${classMap({\n                              'dropdown__item--disabled': !!subItem.disabled\n                            })}\"\n                            ?disabled=\"${subItem.disabled}\"\n                            @click=\"${() => this.handleItemClick(subItem)}\"\n                          >\n                            ${subItem.icon ? html`<nr-icon name=\"${subItem.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n                            <span class=\"dropdown__item-label\">${subItem.label}</span>\n                          </button>\n                        `;\n                      })}\n                    </div>\n                  `}\n                </div>\n              ` : nothing}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  override render() {\n    const panelClasses = {\n      'dropdown__panel': true,\n      'dropdown__panel--open': this.open,\n      [`dropdown__panel--${this.size}`]: true,\n      [`dropdown__panel--${this.animation}`]: true,\n      [`dropdown__panel--${this.placement}`]: true,\n      'dropdown__panel--with-arrow': this.arrow\n    };\n\n    const panelStyles = {\n      maxHeight: this.maxHeight,\n      minWidth: this.minWidth\n    };\n\n    return html`\n      <div class=\"dropdown\">\n        <div class=\"dropdown__trigger\">\n          <slot name=\"trigger\"></slot>\n        </div>\n        \n        <div \n          class=\"${classMap(panelClasses)}\"\n          style=\"${styleMap(panelStyles)}\"\n          @click=\"${this.handleDropdownPanelClick}\"\n        >\n          ${this.arrow ? html`<div class=\"dropdown__arrow\"></div>` : nothing}\n          \n          <slot name=\"header\"></slot>\n          \n          <div class=\"dropdown__content\">\n            <slot name=\"content\">${this.renderItems()}</slot>\n          </div>\n          \n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}"]}
+{"version":3,"file":"dropdown.component.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './dropdown.style';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { NrDropdownController } from './controllers/dropdown.controller.js';\n\nimport {\n    DropdownPlacement,\n    DropdownTrigger,\n    DropdownSize,\n    DropdownAnimation,\n    DropdownItem\n} from './dropdown.types.js';\n\n/**\n * # Dropdown Component\n * \n * A versatile dropdown component that provides floating panel functionality with customizable triggers,\n * content, and positioning. Supports both predefined item lists and custom slot content with\n * cascading submenus and interactive elements.\n * \n * ## Features\n * - Multiple trigger modes (hover, click, focus, manual)\n * - Flexible positioning with auto-placement\n * - Cascading submenus with custom content support\n * - Interactive elements (forms, buttons) within dropdowns\n * - Keyboard navigation and accessibility\n * - Customizable animations and styling\n * - Event delegation and outside click detection\n * \n * ## Usage\n * ```html\n * <!-- Basic dropdown with slot content -->\n * <nr-dropdown trigger=\"hover\">\n *   <button slot=\"trigger\">Menu</button>\n *   <div slot=\"content\">\n *     <p>Custom content here</p>\n *   </div>\n * </nr-dropdown>\n * \n * <!-- Dropdown with predefined items -->\n * <nr-dropdown \n *   .items=\"${items}\" \n *   placement=\"bottom-start\"\n *   trigger=\"click\">\n *   <button slot=\"trigger\">Menu</button>\n * </nr-dropdown>\n * \n * <!-- Hover dropdown with custom positioning -->\n * <nr-dropdown \n *   trigger=\"hover\" \n *   placement=\"top\"\n *   size=\"large\">\n *   <span slot=\"trigger\">Hover me</span>\n *   <div slot=\"content\">Tooltip content</div>\n * </nr-dropdown>\n * ```\n * \n * @element nr-dropdown\n * @fires nr-dropdown-open - Fired when dropdown opens\n * @fires nr-dropdown-close - Fired when dropdown closes\n * @fires nr-dropdown-item-click - Fired when dropdown item is clicked\n * \n * @slot trigger - Element that triggers the dropdown\n * @slot content - Custom content for the dropdown panel\n * @slot header - Optional header content\n * @slot footer - Optional footer content\n * \n * @cssproperty --dropdown-background - Background color of dropdown panel\n * @cssproperty --dropdown-border - Border of dropdown panel\n * @cssproperty --dropdown-shadow - Shadow of dropdown panel\n * @cssproperty --dropdown-border-radius - Border radius of dropdown panel\n * @cssproperty --dropdown-max-width - Maximum width of dropdown panel\n * @cssproperty --dropdown-min-width - Minimum width of dropdown panel\n * @cssproperty --dropdown-max-height - Maximum height of dropdown panel\n */\n@customElement('nr-dropdown')\nexport class NrDropdownElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon'];\n\n  @property({ type: Array }) items: DropdownItem[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: String }) placement: DropdownPlacement = DropdownPlacement.Bottom;\n  @property({ type: String }) trigger: DropdownTrigger = DropdownTrigger.Hover;\n  @property({ type: String }) size: DropdownSize = DropdownSize.Medium;\n  @property({ type: String }) animation: DropdownAnimation = DropdownAnimation.Fade;\n  @property({ type: Boolean }) disabled = false;\n  @property({ type: Boolean }) arrow = false;\n  @property({ type: Boolean, attribute: 'auto-close' }) autoClose = false;\n  @property({ type: Boolean, attribute: 'close-on-outside-click' }) closeOnOutsideClick = true;\n  @property({ type: Boolean, attribute: 'close-on-escape' }) closeOnEscape = true;\n  @property({ type: Number }) offset = 4;\n  @property({ type: Number }) delay = 50;\n  @property({ type: String, attribute: 'max-height' }) maxHeight = '300px';\n  @property({ type: String, attribute: 'min-width' }) minWidth = 'auto';\n  @property({ type: String, attribute: 'cascade-direction' }) cascadeDirection: 'right' | 'left' | 'auto' = 'auto';\n  @property({ type: Number, attribute: 'cascade-delay' }) cascadeDelay = 50;\n  @property({ type: Boolean, attribute: 'cascade-on-hover' }) cascadeOnHover = true;\n  @property({ type: Boolean, attribute: 'allow-overflow' }) allowOverflow = false;\n\n  private dropdownController = new NrDropdownController(this);\n  private openSubmenus = new Set<string>();\n  private submenuTimers = new Map<string, number>();\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.updateCascadingAttribute();\n  }\n\n  override updated(changedProperties: Map<string, any>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('items')) {\n      this.updateCascadingAttribute();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated(): void {\n  }\n\n  private updateCascadingAttribute(): void {\n    const hasCascading = this.items.some(item => \n      (item.options && item.options.length > 0) || !!item.customContent\n    );\n    if (hasCascading) {\n      this.setAttribute('has-cascading', '');\n    } else {\n      this.removeAttribute('has-cascading');\n    }\n  }\n\n  private handleDropdownPanelClick = (e: Event): void => {\n    e.stopPropagation();\n  };\n\n  private handleItemClick = (item: DropdownItem, e?: MouseEvent): void => {\n    if (item.disabled) return;\n\n    if ((item.options && item.options.length > 0) || item.customContent) {\n      this.toggleSubmenu(item.id);\n      return;\n    }\n\n    this.dropdownController.handleItemClick(item, e);\n  };\n\n  private handleItemHover = (item: DropdownItem): void => {\n    if (!item.options?.length && !item.customContent) return;\n\n    this.clearSubmenuTimer(item.id);\n\n    if (this.cascadeOnHover) {\n      const timer = window.setTimeout(() => {\n        this.showSubmenu(item.id);\n      }, this.cascadeDelay);\n      this.submenuTimers.set(item.id, timer);\n    }\n  };\n\n  private handleItemLeave = (item: DropdownItem): void => {\n    if (!item.options?.length && !item.customContent) return;\n\n    this.clearSubmenuTimer(item.id);\n\n    const timer = window.setTimeout(() => {\n      this.hideSubmenu(item.id);\n    }, 100);\n    this.submenuTimers.set(`hide-${item.id}`, timer);\n  };\n\n  private handleSubmenuEnter = (itemId: string): void => {\n    this.clearSubmenuTimer(`hide-${itemId}`);\n  };\n\n  private handleSubmenuLeave = (itemId: string): void => {\n    const timer = window.setTimeout(() => {\n      this.hideSubmenu(itemId);\n    }, 100);\n    this.submenuTimers.set(`hide-${itemId}`, timer);\n  };\n\n  private clearSubmenuTimer(key: string): void {\n    const timer = this.submenuTimers.get(key);\n    if (timer) {\n      clearTimeout(timer);\n      this.submenuTimers.delete(key);\n    }\n  }\n\n  private toggleSubmenu(itemId: string): void {\n    if (this.openSubmenus.has(itemId)) {\n      this.hideSubmenu(itemId);\n    } else {\n      this.showSubmenu(itemId);\n    }\n  }\n\n  private showSubmenu(itemId: string): void {\n    this.openSubmenus.add(itemId);\n    this.requestUpdate();\n  }\n\n  private hideSubmenu(itemId: string): void {\n    this.openSubmenus.delete(itemId);\n    this.requestUpdate();\n  }\n\n  show(): void {\n    this.dropdownController.open();\n  }\n\n  hide(): void {\n    this.dropdownController.close();\n  }\n\n  toggle(): void {\n    this.dropdownController.toggle();\n  }\n\n  private renderItems(): unknown {\n    if (!this.items.length) return nothing;\n\n    return html`\n      <div class=\"dropdown__items\">\n        ${this.items.map(item => {\n          if (item.divider) {\n            return html`<div class=\"dropdown__divider\"></div>`;\n          }\n\n          const hasSubmenu = !!(item.options && item.options.length > 0) || !!item.customContent;\n          const isSubmenuOpen = hasSubmenu && this.openSubmenus.has(item.id);\n\n          return html`\n            <div class=\"dropdown__item-container ${classMap({\n              'dropdown__item-container--has-submenu': hasSubmenu\n            })}\">\n              <button\n                class=\"dropdown__item ${classMap({\n                  'dropdown__item--disabled': !!item.disabled,\n                  'dropdown__item--has-submenu': hasSubmenu\n                })}\"\n                ?disabled=\"${item.disabled}\"\n                @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n                @mouseenter=\"${() => hasSubmenu && this.handleItemHover(item)}\"\n                @mouseleave=\"${() => hasSubmenu && this.handleItemLeave(item)}\"\n              >\n                ${item.icon ? html`<nr-icon name=\"${item.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n                <span class=\"dropdown__item-label\">${item.label}</span>\n                ${hasSubmenu ? html`<nr-icon name=\"chevron-right\" class=\"dropdown__submenu-arrow\"></nr-icon>` : nothing}\n              </button>\n              \n              ${hasSubmenu && isSubmenuOpen ? html`\n                <div class=\"dropdown__submenu ${classMap({\n                  'dropdown__submenu--right': this.cascadeDirection === 'right' || this.cascadeDirection === 'auto',\n                  'dropdown__submenu--left': this.cascadeDirection === 'left'\n                })}\"\n                @mouseenter=\"${() => this.handleSubmenuEnter(item.id)}\"\n                @mouseleave=\"${() => this.handleSubmenuLeave(item.id)}\">\n                  ${item.customContent ? html`\n                    <div class=\"dropdown__custom-content\">\n                      ${typeof item.customContent === 'string' \n                        ? html`<div .innerHTML=\"${item.customContent}\"></div>`\n                        : item.customContent\n                      }\n                    </div>\n                  ` : html`\n                    <div class=\"dropdown__items\">\n                      ${item.options!.map(subItem => {\n                        if (subItem.divider) {\n                          return html`<div class=\"dropdown__divider\"></div>`;\n                        }\n                        \n                        return html`\n                          <button\n                            class=\"dropdown__item ${classMap({\n                              'dropdown__item--disabled': !!subItem.disabled\n                            })}\"\n                            ?disabled=\"${subItem.disabled}\"\n                            @click=\"${(e: MouseEvent) => this.handleItemClick(subItem, e)}\"\n                          >\n                            ${subItem.icon ? html`<nr-icon name=\"${subItem.icon}\" class=\"dropdown__item-icon\"></nr-icon>` : nothing}\n                            <span class=\"dropdown__item-label\">${subItem.label}</span>\n                          </button>\n                        `;\n                      })}\n                    </div>\n                  `}\n                </div>\n              ` : nothing}\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n\n  override render() {\n    const panelClasses = {\n      'dropdown__panel': true,\n      'dropdown__panel--open': this.open,\n      [`dropdown__panel--${this.size}`]: true,\n      [`dropdown__panel--${this.animation}`]: true,\n      [`dropdown__panel--${this.placement}`]: true,\n      'dropdown__panel--with-arrow': this.arrow\n    };\n\n    const panelStyles = {\n      maxHeight: this.maxHeight,\n      minWidth: this.minWidth\n    };\n\n    return html`\n      <div class=\"dropdown\">\n        <div class=\"dropdown__trigger\">\n          <slot name=\"trigger\"></slot>\n        </div>\n        \n        <div \n          class=\"${classMap(panelClasses)}\"\n          style=\"${styleMap(panelStyles)}\"\n          @click=\"${this.handleDropdownPanelClick}\"\n        >\n          ${this.arrow ? html`<div class=\"dropdown__arrow\"></div>` : nothing}\n          \n          <slot name=\"header\"></slot>\n          \n          <div class=\"dropdown__content\">\n            <slot name=\"content\">${this.renderItems()}</slot>\n          </div>\n          \n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}"]}

package/dropdown.style.js

@@ -23,9 +23,7 @@ export const styles = css `
   }
 
   .dropdown__panel {
-    position: absolute;
-    top: 100%;
-    left: 0;
+    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);
@@ -35,59 +33,60 @@ export const styles = css `
     max-width: var(--nuraly-dropdown-max-width, 20rem);
     max-height: var(--nuraly-dropdown-max-height, 200px);
     overflow: auto;
+    /* Use display none to fully hide when closed */
+    display: none;
     /* Use opacity and visibility for smooth animations */
     opacity: 0;
     visibility: hidden;
     transform: translateY(-8px);
-    transition: all var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);
+    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);
     /* Ensure proper containment */
     box-sizing: border-box;
     /* Create new stacking context to prevent layering issues */
     isolation: isolate;
     /* Force above other elements */
     transform-origin: top center;
+    /* Prevent clipping by overflow containers */
+    pointer-events: none;
   }
 
   .dropdown__panel--open {
+    display: block;
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
+    transform: none;
+    pointer-events: auto;
   }
 
   /* Alternative attribute-based selector (like select component) */
   :host([open]) .dropdown__panel {
+    display: block;
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
+    transform: none;
+    pointer-events: auto;
   }
 
-  /* Placement variants */
+  /* Placement variants - transform origin adjustments */
   .dropdown__panel--top,
   .dropdown__panel--top-start,
   .dropdown__panel--top-end {
-    top: auto;
-    bottom: 100%;
-    margin-bottom: 1px;
-    margin-top: 0;
+    transform-origin: bottom center;
     transform: translateY(8px);
   }
 
   .dropdown__panel--top.dropdown__panel--open,
   .dropdown__panel--top-start.dropdown__panel--open,
   .dropdown__panel--top-end.dropdown__panel--open {
-    transform: translateY(0);
-  }
-
-  .dropdown__panel--bottom-end,
-  .dropdown__panel--top-end {
-    left: auto;
-    right: 0;
+    transform: none;
   }
 
+  .dropdown__panel--bottom,
   .dropdown__panel--bottom-start,
-  .dropdown__panel--top-start {
-    left: 0;
-    right: auto;
+  .dropdown__panel--bottom-end {
+    transform-origin: top center;
   }
 
   /* Size variants */
@@ -156,7 +155,7 @@ export const styles = css `
   .dropdown__panel--slide.dropdown__panel--open {
     opacity: 1;
     visibility: visible;
-    transform: translateY(0);
+    transform: none;
   }
 
   /* For top-positioned dropdowns, slide direction is reversed */
@@ -182,7 +181,7 @@ export const styles = css `
   .dropdown__panel--scale.dropdown__panel--open {
     opacity: 1;
     visibility: visible;
-    transform: scale(1) translateY(0);
+    transform: none;
   }
 
   /* For top-positioned scale dropdowns */
@@ -195,7 +194,7 @@ export const styles = css `
   .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,
   .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,
   .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {
-    transform: scale(1) translateY(0);
+    transform: none;
   }
 
   /* Arrow */
@@ -349,7 +348,7 @@ export const styles = css `
     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);
+    max-height: var(--nuraly-dropdown-max-height, auto);
     overflow: auto;
     box-sizing: border-box;
     animation: fadeInSubmenu 0.15s ease;
@@ -442,6 +441,16 @@ export const styles = css `
     pointer-events: none;
   }
 
+  /* Allow overflow for nested dropdowns/selects */
+  :host([allow-overflow]) .dropdown__panel {
+    overflow: visible !important;
+    max-height: none !important;
+  }
+
+  :host([allow-overflow]) .dropdown__content {
+    overflow: visible !important;
+  }
+
   /* Hidden state */
   [hidden] {
     display: none !important;

package/dropdown.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.style.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgcxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    color: var(--nuraly-color-text);\n    font-family: var(--nuraly-dropdown-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);\n  }\n\n  .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n\n  .dropdown__trigger {\n    display: inline-block;\n    cursor: pointer;\n  }\n\n  .dropdown__trigger:focus-within {\n    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);\n    outline-offset: var(--nuraly-focus-outline-offset, 1px);\n  }\n\n  .dropdown__panel {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    z-index: var(--nuraly-dropdown-z-index, 9999);\n    background: var(--nuraly-color-dropdown-background, #ffffff);\n    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);\n    border-radius: var(--nuraly-dropdown-border-radius, 6px);\n    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));\n    min-width: var(--nuraly-dropdown-min-width, 10rem);\n    max-width: var(--nuraly-dropdown-max-width, 20rem);\n    max-height: var(--nuraly-dropdown-max-height, 200px);\n    overflow: auto;\n    /* Use opacity and visibility for smooth animations */\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-8px);\n    transition: all var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n    /* Ensure proper containment */\n    box-sizing: border-box;\n    /* Create new stacking context to prevent layering issues */\n    isolation: isolate;\n    /* Force above other elements */\n    transform-origin: top center;\n  }\n\n  .dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  /* Alternative attribute-based selector (like select component) */\n  :host([open]) .dropdown__panel {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  /* Placement variants */\n  .dropdown__panel--top,\n  .dropdown__panel--top-start,\n  .dropdown__panel--top-end {\n    top: auto;\n    bottom: 100%;\n    margin-bottom: 1px;\n    margin-top: 0;\n    transform: translateY(8px);\n  }\n\n  .dropdown__panel--top.dropdown__panel--open,\n  .dropdown__panel--top-start.dropdown__panel--open,\n  .dropdown__panel--top-end.dropdown__panel--open {\n    transform: translateY(0);\n  }\n\n  .dropdown__panel--bottom-end,\n  .dropdown__panel--top-end {\n    left: auto;\n    right: 0;\n  }\n\n  .dropdown__panel--bottom-start,\n  .dropdown__panel--top-start {\n    left: 0;\n    right: auto;\n  }\n\n  /* Size variants */\n  .dropdown__panel--small {\n    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);\n  }\n\n  .dropdown__panel--medium {\n    font-size: var(--nuraly-dropdown-font-size, 0.875rem);\n  }\n\n  .dropdown__panel--large {\n    font-size: var(--nuraly-dropdown-large-font-size, 1rem);\n  }\n\n  /* Animation variants */\n  \n  /* No animation - instant show/hide */\n  .dropdown__panel--none {\n    transition: none;\n  }\n\n  .dropdown__panel--none:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: none;\n  }\n\n  .dropdown__panel--none.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* Fade animation - opacity only */\n  .dropdown__panel--fade {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n  }\n\n  .dropdown__panel--fade:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: none;\n  }\n\n  .dropdown__panel--fade.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* Slide animation - slide down/up with opacity */\n  .dropdown__panel--slide {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n  }\n\n  .dropdown__panel--slide:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-12px);\n  }\n\n  .dropdown__panel--slide.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: translateY(0);\n  }\n\n  /* For top-positioned dropdowns, slide direction is reversed */\n  .dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open),\n  .dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),\n  .dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open) {\n    transform: translateY(12px);\n  }\n\n  /* Scale animation - scale and opacity */\n  .dropdown__panel--scale {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  }\n\n  .dropdown__panel--scale:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(0.9) translateY(-8px);\n  }\n\n  .dropdown__panel--scale.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: scale(1) translateY(0);\n  }\n\n  /* For top-positioned scale dropdowns */\n  .dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open),\n  .dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),\n  .dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open) {\n    transform: scale(0.9) translateY(8px);\n  }\n\n  .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,\n  .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,\n  .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {\n    transform: scale(1) translateY(0);\n  }\n\n  /* Arrow */\n  .dropdown__arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border: var(--nuraly-dropdown-arrow-size) solid transparent;\n    border-bottom-color: var(--nuraly-dropdown-background);\n    top: calc(-1 * var(--nuraly-dropdown-arrow-size) * 2);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .dropdown__arrow::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border: calc(var(--nuraly-dropdown-arrow-size) + 1px) solid transparent;\n    border-bottom-color: var(--nuraly-dropdown-border-color);\n    top: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);\n    left: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);\n  }\n\n  /* Content areas */\n  .dropdown__content {\n    overflow: auto;\n  }\n\n  .dropdown__items {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow: visible; /* Allow submenus to extend outside */\n  }\n\n  .dropdown__item {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-dropdown-item-gap);\n    padding: var(--nuraly-dropdown-item-padding);\n    background: var(--nuraly-color-dropdown-item-background);\n    border: none;\n    color: var(--nuraly-color-dropdown-item-text);\n    cursor: pointer;\n    text-align: left;\n    width: 100%;\n    min-height: var(--nuraly-dropdown-item-min-height);\n    transition: var(--nuraly-dropdown-item-transition);\n    font-size: inherit;\n    font-family: inherit;\n    line-height: var(--nuraly-dropdown-item-line-height);\n    position: relative;\n  }\n\n  .dropdown__item:hover:not(.dropdown__item--disabled) {\n    background: var(--nuraly-color-dropdown-item-background-hover);\n    color: var(--nuraly-color-dropdown-item-text-hover);\n  }\n\n  .dropdown__item:focus {\n    outline: none;\n    background: var(--nuraly-color-dropdown-item-background-focus);\n    color: var(--nuraly-color-dropdown-item-text-focus);\n  }\n\n  .dropdown__item:focus-visible {\n    outline: 2px solid var(--nuraly-focus-color, #0f62fe);\n    outline-offset: -2px;\n    background: var(--nuraly-color-dropdown-item-background-focus);\n    color: var(--nuraly-color-dropdown-item-text-focus);\n  }\n\n  .dropdown__item:active:not(.dropdown__item--disabled) {\n    background: var(--nuraly-color-dropdown-item-background-active);\n    color: var(--nuraly-color-dropdown-item-text-active);\n  }\n\n  .dropdown__item--disabled {\n    opacity: var(--nuraly-dropdown-item-disabled-opacity, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .dropdown__item-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-dropdown-item-icon-size);\n    height: var(--nuraly-dropdown-item-icon-size);\n  }\n\n  .dropdown__item-label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .dropdown__divider {\n    height: 1px;\n    background: var(--nuraly-dropdown-divider-color);\n    margin: var(--nuraly-dropdown-divider-margin);\n  }\n\n  /* Cascading dropdown styles */\n  .dropdown__item-container {\n    position: relative;\n  }\n\n  /* Allow submenus to overflow when dropdown has cascading items */\n  :host([has-cascading]) .dropdown__panel {\n    overflow: visible !important;\n    max-height: none !important; /* Remove height restriction for cascading */\n  }\n\n  :host([has-cascading]) .dropdown__items {\n    overflow: visible !important;\n  }\n\n  /* For cascading dropdowns, we need to handle scrolling differently */\n  :host([has-cascading]) .dropdown__content {\n    overflow: visible !important;\n  }\n\n  .dropdown__item--has-submenu {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .dropdown__submenu-arrow {\n    margin-left: auto;\n    font-size: 0.75em;\n    opacity: 0.6;\n    transition: transform 0.15s ease;\n  }\n\n  .dropdown__item--has-submenu:hover .dropdown__submenu-arrow {\n    opacity: 1;\n  }\n\n  .dropdown__submenu {\n    position: absolute;\n    top: 0;\n    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);\n    background: var(--nuraly-color-dropdown-background, #ffffff);\n    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);\n    border-radius: var(--nuraly-dropdown-border-radius, 6px);\n    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));\n    min-width: var(--nuraly-dropdown-min-width, 10rem);\n    max-width: var(--nuraly-dropdown-max-width, 20rem);\n    max-height: var(--nuraly-dropdown-max-height, 200px);\n    overflow: auto;\n    box-sizing: border-box;\n    animation: fadeInSubmenu 0.15s ease;\n    /* Ensure submenu is visible */\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .dropdown__custom-content {\n    padding: var(--nuraly-dropdown-item-padding, 8px 12px);\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  /* Custom content styling */\n  .dropdown__custom-content h3,\n  .dropdown__custom-content h4 {\n    margin: 0 0 8px 0;\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--nuraly-color-text-primary);\n  }\n\n  .dropdown__custom-content p {\n    margin: 0 0 8px 0;\n    font-size: 0.75rem;\n    color: var(--nuraly-color-text-secondary);\n    line-height: 1.4;\n  }\n\n  .dropdown__custom-content button,\n  .dropdown__custom-content input,\n  .dropdown__custom-content select {\n    width: 100%;\n    margin-bottom: 8px;\n  }\n\n  .dropdown__custom-content button:last-child,\n  .dropdown__custom-content input:last-child,\n  .dropdown__custom-content p:last-child {\n    margin-bottom: 0;\n  }\n\n  .dropdown__submenu--right {\n    left: 100%;\n    margin-left: 4px;\n  }\n\n  .dropdown__submenu--left {\n    right: 100%;\n    margin-right: 4px;\n  }\n\n  @keyframes fadeInSubmenu {\n    from {\n      opacity: 0;\n      transform: translateX(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  .dropdown__submenu--left {\n    animation-name: fadeInSubmenuLeft;\n  }\n\n  @keyframes fadeInSubmenuLeft {\n    from {\n      opacity: 0;\n      transform: translateX(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  /* Focus styles for accessibility */\n  :host(:focus-within) .dropdown__trigger {\n    outline: var(--nuraly-dropdown-focus-outline);\n    outline-offset: var(--nuraly-dropdown-focus-offset);\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);\n    pointer-events: none;\n  }\n\n  /* Hidden state */\n  [hidden] {\n    display: none !important;\n  }\n\n`;"]}
+{"version":3,"file":"dropdown.style.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAycxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    color: var(--nuraly-color-text);\n    font-family: var(--nuraly-dropdown-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif);\n  }\n\n  .dropdown {\n    position: relative;\n    display: inline-block;\n  }\n\n  .dropdown__trigger {\n    display: inline-block;\n    cursor: pointer;\n  }\n\n  .dropdown__trigger:focus-within {\n    outline: var(--nuraly-focus-outline, 2px solid #0f62fe);\n    outline-offset: var(--nuraly-focus-outline-offset, 1px);\n  }\n\n  .dropdown__panel {\n    position: fixed;\n    z-index: var(--nuraly-dropdown-z-index, 9999);\n    background: var(--nuraly-color-dropdown-background, #ffffff);\n    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);\n    border-radius: var(--nuraly-dropdown-border-radius, 6px);\n    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));\n    min-width: var(--nuraly-dropdown-min-width, 10rem);\n    max-width: var(--nuraly-dropdown-max-width, 20rem);\n    max-height: var(--nuraly-dropdown-max-height, 200px);\n    overflow: auto;\n    /* Use display none to fully hide when closed */\n    display: none;\n    /* Use opacity and visibility for smooth animations */\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-8px);\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n    /* Ensure proper containment */\n    box-sizing: border-box;\n    /* Create new stacking context to prevent layering issues */\n    isolation: isolate;\n    /* Force above other elements */\n    transform-origin: top center;\n    /* Prevent clipping by overflow containers */\n    pointer-events: none;\n  }\n\n  .dropdown__panel--open {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n    pointer-events: auto;\n  }\n\n  /* Alternative attribute-based selector (like select component) */\n  :host([open]) .dropdown__panel {\n    display: block;\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n    pointer-events: auto;\n  }\n\n  /* Placement variants - transform origin adjustments */\n  .dropdown__panel--top,\n  .dropdown__panel--top-start,\n  .dropdown__panel--top-end {\n    transform-origin: bottom center;\n    transform: translateY(8px);\n  }\n\n  .dropdown__panel--top.dropdown__panel--open,\n  .dropdown__panel--top-start.dropdown__panel--open,\n  .dropdown__panel--top-end.dropdown__panel--open {\n    transform: none;\n  }\n\n  .dropdown__panel--bottom,\n  .dropdown__panel--bottom-start,\n  .dropdown__panel--bottom-end {\n    transform-origin: top center;\n  }\n\n  /* Size variants */\n  .dropdown__panel--small {\n    font-size: var(--nuraly-dropdown-small-font-size, 0.75rem);\n  }\n\n  .dropdown__panel--medium {\n    font-size: var(--nuraly-dropdown-font-size, 0.875rem);\n  }\n\n  .dropdown__panel--large {\n    font-size: var(--nuraly-dropdown-large-font-size, 1rem);\n  }\n\n  /* Animation variants */\n  \n  /* No animation - instant show/hide */\n  .dropdown__panel--none {\n    transition: none;\n  }\n\n  .dropdown__panel--none:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: none;\n  }\n\n  .dropdown__panel--none.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* Fade animation - opacity only */\n  .dropdown__panel--fade {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n  }\n\n  .dropdown__panel--fade:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: none;\n  }\n\n  .dropdown__panel--fade.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* Slide animation - slide down/up with opacity */\n  .dropdown__panel--slide {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease);\n  }\n\n  .dropdown__panel--slide:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateY(-12px);\n  }\n\n  .dropdown__panel--slide.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* For top-positioned dropdowns, slide direction is reversed */\n  .dropdown__panel--slide.dropdown__panel--top:not(.dropdown__panel--open),\n  .dropdown__panel--slide.dropdown__panel--top-start:not(.dropdown__panel--open),\n  .dropdown__panel--slide.dropdown__panel--top-end:not(.dropdown__panel--open) {\n    transform: translateY(12px);\n  }\n\n  /* Scale animation - scale and opacity */\n  .dropdown__panel--scale {\n    transition: opacity var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                visibility var(--nuraly-dropdown-animation-duration, 0.15s) var(--nuraly-dropdown-animation-timing, ease),\n                transform var(--nuraly-dropdown-animation-duration, 0.15s) cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  }\n\n  .dropdown__panel--scale:not(.dropdown__panel--open) {\n    opacity: 0;\n    visibility: hidden;\n    transform: scale(0.9) translateY(-8px);\n  }\n\n  .dropdown__panel--scale.dropdown__panel--open {\n    opacity: 1;\n    visibility: visible;\n    transform: none;\n  }\n\n  /* For top-positioned scale dropdowns */\n  .dropdown__panel--scale.dropdown__panel--top:not(.dropdown__panel--open),\n  .dropdown__panel--scale.dropdown__panel--top-start:not(.dropdown__panel--open),\n  .dropdown__panel--scale.dropdown__panel--top-end:not(.dropdown__panel--open) {\n    transform: scale(0.9) translateY(8px);\n  }\n\n  .dropdown__panel--scale.dropdown__panel--top.dropdown__panel--open,\n  .dropdown__panel--scale.dropdown__panel--top-start.dropdown__panel--open,\n  .dropdown__panel--scale.dropdown__panel--top-end.dropdown__panel--open {\n    transform: none;\n  }\n\n  /* Arrow */\n  .dropdown__arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border: var(--nuraly-dropdown-arrow-size) solid transparent;\n    border-bottom-color: var(--nuraly-dropdown-background);\n    top: calc(-1 * var(--nuraly-dropdown-arrow-size) * 2);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .dropdown__arrow::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border: calc(var(--nuraly-dropdown-arrow-size) + 1px) solid transparent;\n    border-bottom-color: var(--nuraly-dropdown-border-color);\n    top: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);\n    left: calc(-1 * var(--nuraly-dropdown-arrow-size) - 1px);\n  }\n\n  /* Content areas */\n  .dropdown__content {\n    overflow: auto;\n  }\n\n  .dropdown__items {\n    display: flex;\n    flex-direction: column;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    overflow: visible; /* Allow submenus to extend outside */\n  }\n\n  .dropdown__item {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-dropdown-item-gap);\n    padding: var(--nuraly-dropdown-item-padding);\n    background: var(--nuraly-color-dropdown-item-background);\n    border: none;\n    color: var(--nuraly-color-dropdown-item-text);\n    cursor: pointer;\n    text-align: left;\n    width: 100%;\n    min-height: var(--nuraly-dropdown-item-min-height);\n    transition: var(--nuraly-dropdown-item-transition);\n    font-size: inherit;\n    font-family: inherit;\n    line-height: var(--nuraly-dropdown-item-line-height);\n    position: relative;\n  }\n\n  .dropdown__item:hover:not(.dropdown__item--disabled) {\n    background: var(--nuraly-color-dropdown-item-background-hover);\n    color: var(--nuraly-color-dropdown-item-text-hover);\n  }\n\n  .dropdown__item:focus {\n    outline: none;\n    background: var(--nuraly-color-dropdown-item-background-focus);\n    color: var(--nuraly-color-dropdown-item-text-focus);\n  }\n\n  .dropdown__item:focus-visible {\n    outline: 2px solid var(--nuraly-focus-color, #0f62fe);\n    outline-offset: -2px;\n    background: var(--nuraly-color-dropdown-item-background-focus);\n    color: var(--nuraly-color-dropdown-item-text-focus);\n  }\n\n  .dropdown__item:active:not(.dropdown__item--disabled) {\n    background: var(--nuraly-color-dropdown-item-background-active);\n    color: var(--nuraly-color-dropdown-item-text-active);\n  }\n\n  .dropdown__item--disabled {\n    opacity: var(--nuraly-dropdown-item-disabled-opacity, 0.5);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .dropdown__item-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-dropdown-item-icon-size);\n    height: var(--nuraly-dropdown-item-icon-size);\n  }\n\n  .dropdown__item-label {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .dropdown__divider {\n    height: 1px;\n    background: var(--nuraly-dropdown-divider-color);\n    margin: var(--nuraly-dropdown-divider-margin);\n  }\n\n  /* Cascading dropdown styles */\n  .dropdown__item-container {\n    position: relative;\n  }\n\n  /* Allow submenus to overflow when dropdown has cascading items */\n  :host([has-cascading]) .dropdown__panel {\n    overflow: visible !important;\n    max-height: none !important; /* Remove height restriction for cascading */\n  }\n\n  :host([has-cascading]) .dropdown__items {\n    overflow: visible !important;\n  }\n\n  /* For cascading dropdowns, we need to handle scrolling differently */\n  :host([has-cascading]) .dropdown__content {\n    overflow: visible !important;\n  }\n\n  .dropdown__item--has-submenu {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .dropdown__submenu-arrow {\n    margin-left: auto;\n    font-size: 0.75em;\n    opacity: 0.6;\n    transition: transform 0.15s ease;\n  }\n\n  .dropdown__item--has-submenu:hover .dropdown__submenu-arrow {\n    opacity: 1;\n  }\n\n  .dropdown__submenu {\n    position: absolute;\n    top: 0;\n    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);\n    background: var(--nuraly-color-dropdown-background, #ffffff);\n    border: var(--nuraly-dropdown-border-width, 1px) solid var(--nuraly-color-dropdown-border, #e0e0e0);\n    border-radius: var(--nuraly-dropdown-border-radius, 6px);\n    box-shadow: var(--nuraly-dropdown-shadow, 0 2px 6px rgba(0, 0, 0, 0.15));\n    min-width: var(--nuraly-dropdown-min-width, 10rem);\n    max-width: var(--nuraly-dropdown-max-width, 20rem);\n    max-height: var(--nuraly-dropdown-max-height, auto);\n    overflow: auto;\n    box-sizing: border-box;\n    animation: fadeInSubmenu 0.15s ease;\n    /* Ensure submenu is visible */\n    opacity: 1;\n    visibility: visible;\n    pointer-events: auto;\n  }\n\n  .dropdown__custom-content {\n    padding: var(--nuraly-dropdown-item-padding, 8px 12px);\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  /* Custom content styling */\n  .dropdown__custom-content h3,\n  .dropdown__custom-content h4 {\n    margin: 0 0 8px 0;\n    font-size: 0.875rem;\n    font-weight: 600;\n    color: var(--nuraly-color-text-primary);\n  }\n\n  .dropdown__custom-content p {\n    margin: 0 0 8px 0;\n    font-size: 0.75rem;\n    color: var(--nuraly-color-text-secondary);\n    line-height: 1.4;\n  }\n\n  .dropdown__custom-content button,\n  .dropdown__custom-content input,\n  .dropdown__custom-content select {\n    width: 100%;\n    margin-bottom: 8px;\n  }\n\n  .dropdown__custom-content button:last-child,\n  .dropdown__custom-content input:last-child,\n  .dropdown__custom-content p:last-child {\n    margin-bottom: 0;\n  }\n\n  .dropdown__submenu--right {\n    left: 100%;\n    margin-left: 4px;\n  }\n\n  .dropdown__submenu--left {\n    right: 100%;\n    margin-right: 4px;\n  }\n\n  @keyframes fadeInSubmenu {\n    from {\n      opacity: 0;\n      transform: translateX(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  .dropdown__submenu--left {\n    animation-name: fadeInSubmenuLeft;\n  }\n\n  @keyframes fadeInSubmenuLeft {\n    from {\n      opacity: 0;\n      transform: translateX(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  /* Focus styles for accessibility */\n  :host(:focus-within) .dropdown__trigger {\n    outline: var(--nuraly-dropdown-focus-outline);\n    outline-offset: var(--nuraly-dropdown-focus-offset);\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    opacity: var(--nuraly-dropdown-disabled-opacity, 0.5);\n    pointer-events: none;\n  }\n\n  /* Allow overflow for nested dropdowns/selects */\n  :host([allow-overflow]) .dropdown__panel {\n    overflow: visible !important;\n    max-height: none !important;\n  }\n\n  :host([allow-overflow]) .dropdown__content {\n    overflow: visible !important;\n  }\n\n  /* Hidden state */\n  [hidden] {\n    display: none !important;\n  }\n\n`;"]}

package/dropdown.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * Dropdown placement options\n */\nexport const enum DropdownPlacement {\n  Bottom = 'bottom',\n  Top = 'top',\n  BottomStart = 'bottom-start',\n  BottomEnd = 'bottom-end',\n  TopStart = 'top-start',\n  TopEnd = 'top-end',\n  Auto = 'auto'\n}\n\n/**\n * Dropdown trigger events\n */\nexport const enum DropdownTrigger {\n  Click = 'click',\n  Hover = 'hover',\n  Focus = 'focus',\n  Manual = 'manual'\n}\n\n/**\n * Dropdown size variants\n */\nexport const enum DropdownSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n/**\n * Dropdown animation types\n */\nexport const enum DropdownAnimation {\n  None = 'none',\n  Fade = 'fade',\n  Slide = 'slide',\n  Scale = 'scale'\n}\n\n/**\n * Dropdown item configuration\n */\nexport interface DropdownItem {\n  id: string;\n  label: string;\n  value?: any;\n  icon?: string;\n  disabled?: boolean;\n  divider?: boolean;\n  options?: DropdownItem[]; // Cascading submenu items (use either this OR customContent)\n  customContent?: string | TemplateResult; // Custom HTML string or Lit template for interactive submenu\n  additionalData?: any;\n}\n\n/**\n * Dropdown position information\n */\nexport interface DropdownPosition {\n  top: number;\n  left: number;\n  width: number;\n  height?: number;\n  placement: DropdownPlacement;\n}\n\n/**\n * Dropdown configuration\n */\nexport interface DropdownConfig {\n  placement?: DropdownPlacement;\n  trigger?: DropdownTrigger;\n  size?: DropdownSize;\n  animation?: DropdownAnimation;\n  disabled?: boolean;\n  arrow?: boolean;\n  autoClose?: boolean;\n  closeOnEscape?: boolean;\n  closeOnOutsideClick?: boolean;\n  offset?: number;\n  delay?: number;\n  maxHeight?: string;\n  minWidth?: string;\n  items?: DropdownItem[];\n}\n\n// Legacy interfaces for backward compatibility - will be deprecated\nexport interface IOption extends DropdownItem {\n  label: string;\n  value?: string;\n  disabled?: boolean;\n  icon?: string;\n  children?: IOption[];\n  additionalData?: any;\n}\n\nexport const enum TriggerMode {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport const enum DropDownDirection {\n  Right = 'right',\n  Left = 'left',\n}\n"]}
+{"version":3,"file":"dropdown.types.js","sourceRoot":"","sources":["../../../../src/components/dropdown/dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import { TemplateResult } from 'lit';\n\n/**\n * Dropdown placement options\n */\nexport const enum DropdownPlacement {\n  Bottom = 'bottom',\n  Top = 'top',\n  BottomStart = 'bottom-start',\n  BottomEnd = 'bottom-end',\n  TopStart = 'top-start',\n  TopEnd = 'top-end',\n  Auto = 'auto'\n}\n\n/**\n * Dropdown trigger events\n */\nexport const enum DropdownTrigger {\n  Click = 'click',\n  Hover = 'hover',\n  Focus = 'focus',\n  Manual = 'manual'\n}\n\n/**\n * Dropdown size variants\n */\nexport const enum DropdownSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large'\n}\n\n/**\n * Dropdown animation types\n */\nexport const enum DropdownAnimation {\n  None = 'none',\n  Fade = 'fade',\n  Slide = 'slide',\n  Scale = 'scale'\n}\n\n/**\n * Dropdown item configuration\n */\nexport interface DropdownItem {\n  id: string;\n  label: string;\n  value?: any;\n  icon?: string;\n  disabled?: boolean;\n  divider?: boolean;\n  options?: DropdownItem[]; // Cascading submenu items (use either this OR customContent)\n  customContent?: string | TemplateResult; // Custom HTML string or Lit template for interactive submenu\n  additionalData?: any;\n}\n\n/**\n * Dropdown position information\n */\nexport interface DropdownPosition {\n  top: number;\n  left: number;\n  width: number;\n  height?: number;\n  placement: DropdownPlacement;\n}\n\n/**\n * Dropdown configuration\n */\nexport interface DropdownConfig {\n  placement?: DropdownPlacement;\n  trigger?: DropdownTrigger;\n  size?: DropdownSize;\n  animation?: DropdownAnimation;\n  disabled?: boolean;\n  arrow?: boolean;\n  autoClose?: boolean;\n  closeOnEscape?: boolean;\n  closeOnOutsideClick?: boolean;\n  offset?: number;\n  delay?: number;\n  maxHeight?: string;\n  minWidth?: string;\n  items?: DropdownItem[];\n}\n\n// Legacy interfaces for backward compatibility - will be deprecated\nexport interface IOption extends DropdownItem {\n  label: string;\n  value?: string;\n  disabled?: boolean;\n  icon?: string;\n  children?: IOption[];\n  additionalData?: any;\n}\n\nexport const enum TriggerMode {\n  Click = 'click',\n  Hover = 'hover',\n}\n\nexport const enum DropDownDirection {\n  Right = 'right',\n  Left = 'left',\n}\n"]}

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './dropdown.component.js';\nexport * from './dropdown.types.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './dropdown.component.js';\nexport * from './dropdown.types.js';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/dropdown",
-    "version": "0.0.19",
+    "version": "0.0.21",
     "description": "Dropdown component for NuralyUI",
     "main": "index.js",
     "type": "module",

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/dropdown/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB,EAAE,gBAAgB;QACpC,mBAAmB,EAAE,iBAAiB;QACtC,wBAAwB,EAAE,qBAAqB;KAChD;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrDropdownElement } from './dropdown.component.js';\n\nexport const NrDropdown = createComponent({\n  tagName: 'nr-dropdown',\n  elementClass: NrDropdownElement,\n  react: React,\n  events: {\n    'nr-dropdown-open': 'onDropdownOpen',\n    'nr-dropdown-close': 'onDropdownClose',\n    'nr-dropdown-item-click': 'onDropdownItemClick'\n  },\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/dropdown/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAE5D,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC;IACxC,OAAO,EAAE,aAAa;IACtB,YAAY,EAAE,iBAAiB;IAC/B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,kBAAkB,EAAE,gBAAgB;QACpC,mBAAmB,EAAE,iBAAiB;QACtC,wBAAwB,EAAE,qBAAqB;KAChD;CACF,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrDropdownElement } from './dropdown.component.js';\n\nexport const NrDropdown = createComponent({\n  tagName: 'nr-dropdown',\n  elementClass: NrDropdownElement,\n  react: React,\n  events: {\n    'nr-dropdown-open': 'onDropdownOpen',\n    'nr-dropdown-close': 'onDropdownClose',\n    'nr-dropdown-item-click': 'onDropdownItemClick'\n  },\n});\n"]}