@nuraly/lumenui 0.3.5 → 0.3.7

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

@@ -71,7 +71,7 @@ import './utils/locale.helper.js';
 let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
-        this.requiredComponents = ['nr-input', 'nr-button', 'nr-icon', 'hy-select'];
+        this.requiredComponents = ['nr-input', 'nr-button', 'nr-icon', 'nr-select'];
         // Controllers - following the delegation pattern
         this.calendarController = new DatePickerCalendarController(this);
         this.selectionController = new DatePickerSelectionController(this);
@@ -185,6 +185,11 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
         this.addEventListener('calendar-close-request', () => {
             this.positioningController.closeCalendar();
         });
+        // Sync openedCalendar when the dropdown controller closes
+        // (outside-click, Escape, scroll-away all flow through here)
+        this.addEventListener('dropdown-close', () => {
+            this.openedCalendar = false;
+        });
     }
     /**
      * Initialize range properties if range mode is enabled
@@ -273,26 +278,13 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
      * Open calendar - DELEGATES to dropdown controller for better positioning
      */
     openCalendar() {
-        console.log('openCalendar called');
         this.openedCalendar = true;
         this.requestUpdate();
-        // Wait for DOM update, then setup positioning
         this.updateComplete.then(() => {
-            console.log('DOM updated, checking elements:', {
-                calendarContainer: !!this.calendarContainer,
-                dateInput: !!this.dateInput
-            });
             if (this.calendarContainer && this.dateInput) {
-                console.log('Setting up dropdown controller');
                 this.dropdownController.setElements(this.calendarContainer, this.dateInput);
                 this.dropdownController.open();
             }
-            else {
-                console.error('Elements not found:', {
-                    calendarContainer: this.calendarContainer,
-                    dateInput: this.dateInput
-                });
-            }
         });
     }
     /**
@@ -439,7 +431,7 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
           <nr-button
             type="text"
             class="header-prev-button prev-month"
-            .icon="${['angle-left']}"
+            .icon="${['chevron-left']}"
             @click="${this.prevMonth}"
             aria-label="Previous month"
           ></nr-button>
@@ -447,7 +439,7 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
           <nr-button
             type="text"
             class="header-next-button next-month"
-            .icon="${['angle-right']}"
+            .icon="${['chevron-right']}"
             @click="${this.nextMonth}"
             aria-label="Next month"
           ></nr-button>
@@ -481,7 +473,7 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
         ${this.currentMode !== DatePickerMode.Year
             ? html `
             <div class="month-selector">
-              <hy-select
+              <nr-select
                 .options="${this.monthOptions}"
                 .value="${this.navigationDates.start.month.toString()}"
                 .defaultValue="${[this.navigationDates.start.month.toString()]}"
@@ -491,13 +483,13 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
                 placeholder=""
                 .clearable=${false}
                 max-height="200px"
-              ></hy-select>
+              ></nr-select>
             </div>
           `
             : nothing}
 
         <div class="current-year-container">
-          <hy-select
+          <nr-select
             .options="${this.yearOptions}"
             .value="${this.navigationDates.start.year.toString()}"
             .defaultValue="${[this.navigationDates.start.year.toString()]}"
@@ -507,17 +499,17 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
             placeholder=""
             .clearable=${false}
             max-height="200px"
-          ></hy-select>
+          ></nr-select>
           <div class="year-icons-toggler">
             <nr-button
               class="next-year"
-              .icon="${['caret-up']}"
+              .icon="${['chevron-up']}"
               @click="${this.nextYear}"
               aria-label="Next year"
             ></nr-button>
             <nr-button
               class="previous-year"
-              .icon="${['caret-down']}"
+              .icon="${['chevron-down']}"
               @click="${this.prevYear}"
               aria-label="Previous year"
             ></nr-button>

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

@@ -23,7 +23,7 @@ import{css as t,html as e,nothing as o,LitElement as i}from"lit";import{property
 
   .dropdown__panel {
     position: fixed;
-    z-index: 9999;
+    z-index: var(--nuraly-dropdown-z-index, 9999);
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
@@ -340,7 +340,7 @@ import{css as t,html as e,nothing as o,LitElement as i}from"lit";import{property
   .dropdown__submenu {
     position: absolute;
     top: 0;
-    z-index: calc(9999 + 1);
+    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
@@ -460,7 +460,7 @@ import{css as t,html as e,nothing as o,LitElement as i}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */,h=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,o;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const o=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},p=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},c=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(p())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!p())return!0;let e=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){e=!1;const i=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,i):console.error(i.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},u=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const i=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,i)}dispatchInputEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,o)}dispatchFocusEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,o)}dispatchValidationEvent(t,e){var o;const i=Object.assign({target:e.target||this,value:e.value,isValid:null!==(o=e.isValid)&&void 0!==o&&o,error:e.error},e);this.dispatchCustomEvent(t,i)}dispatchActionEvent(t,e){const o=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,o)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},m=new Set,w=new Map;
+ */,p=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,o;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(o=this.mediaQuery)||void 0===o||o.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const o=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return o||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},h=()=>{var t;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(t=process.env)||void 0===t?void 0:t.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},c=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(h())for(const t of this.requiredComponents)if(!this.isComponentAvailable(t))throw new Error(`Required component "${t}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${t}';`)}validateDependenciesWithHandler(t){if(!h())return!0;let e=!0;for(const o of this.requiredComponents)if(!this.isComponentAvailable(o)){e=!1;const i=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,i):console.error(i.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},u=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const i=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,i)}dispatchInputEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,o)}dispatchFocusEvent(t,e){const o=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,o)}dispatchValidationEvent(t,e){var o;const i=Object.assign({target:e.target||this,value:e.value,isValid:null!==(o=e.isValid)&&void 0!==o&&o,error:e.error},e);this.dispatchCustomEvent(t,i)}dispatchActionEvent(t,e){const o=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,o)}isReadonlyKeyAllowed(t){if(t.ctrlKey||t.metaKey){return["KeyA","KeyC"].includes(t.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(t.key)}isActivationKey(t){return"Enter"===t.key||" "===t.key}},m=new Set,w=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -471,12 +471,12 @@ const _=t=>{class e extends t{constructor(){super(...arguments),this.t=null}crea
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class v{constructor(t){this._host=t,t.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}handleError(t,e){console.error(`[${this.constructor.name}] Error in ${e}:`,t);try{this._host.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t.message,context:e,controller:this.constructor.name},bubbles:!0,composed:!0}))}catch(t){}}safeExecute(t,e,o){try{return t()}catch(t){return this.handleError(t,e),o}}debounce(t,e){let o;const i=(...i)=>{void 0!==o&&clearTimeout(o),o=setTimeout(()=>{o=void 0,t.apply(this,i)},e)};return i.cancel=()=>{void 0!==o&&(clearTimeout(o),o=void 0)},i}}class b extends v{findElement(t){var e;return null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelector(t)}findElements(t){var e;return null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelectorAll(t)}}class g extends b{constructor(t){super(t),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._triggerElement=null,this._dropdownElement=null,this._outsideClickHandler=null,this._keydownHandler=null,this._hoverTimer=null,this._triggerClickHandler=null,this._triggerHoverHandler=null,this._triggerLeaveHandler=null,this._triggerFocusHandler=null,this._triggerBlurHandler=null,this._scrollHandler=null,this._resizeHandler=null,this._isOpen=t.open}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){}hostUpdated(){this._isOpen!==this.host.open&&(this._isOpen=this.host.open),this._triggerElement||this.setupTriggerListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.open=!0,this.requestUpdate(),setTimeout(()=>{this.calculatePosition(),this.setupEventListeners()},10),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this.removeEventListeners(),this._isOpen=!1,this.host.open=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(t){this.handleError(t,"close")}}toggle(){try{this._isOpen?this.close():this.open()}catch(t){this.handleError(t,"toggle")}}removeTriggerListeners(){this._triggerElement&&(this._triggerClickHandler&&(this._triggerElement.removeEventListener("click",this._triggerClickHandler),this._triggerClickHandler=null),this._triggerHoverHandler&&(this._triggerElement.removeEventListener("mouseenter",this._triggerHoverHandler),this._triggerHoverHandler=null),this._triggerLeaveHandler&&(this._triggerElement.removeEventListener("mouseleave",this._triggerLeaveHandler),this._triggerLeaveHandler=null),this._triggerFocusHandler&&(this._triggerElement.removeEventListener("focusin",this._triggerFocusHandler),this._triggerFocusHandler=null),this._triggerBlurHandler&&(this._triggerElement.removeEventListener("focusout",this._triggerBlurHandler),this._triggerBlurHandler=null))}findDropdownElements(){this._dropdownElement=this.findElement(".dropdown__panel"),this._triggerElement=this.findElement(".dropdown__trigger")}setupTriggerListeners(){if(this.findDropdownElements(),this._triggerElement)switch(this.removeTriggerListeners(),this.host.trigger){case"click":this._triggerClickHandler=this.handleTriggerClick.bind(this),this._triggerElement.addEventListener("click",this._triggerClickHandler);break;case"hover":this._triggerHoverHandler=this.handleTriggerHover.bind(this),this._triggerLeaveHandler=this.handleTriggerLeave.bind(this),this._triggerElement.addEventListener("mouseenter",this._triggerHoverHandler),this._triggerElement.addEventListener("mouseleave",this._triggerLeaveHandler);break;case"focus":this._triggerFocusHandler=this.handleTriggerFocus.bind(this),this._triggerBlurHandler=this.handleTriggerBlur.bind(this),this._triggerElement.addEventListener("focusin",this._triggerFocusHandler),this._triggerElement.addEventListener("focusout",this._triggerBlurHandler)}}setupEventListeners(){this.host.closeOnOutsideClick&&(this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0)),this.host.closeOnEscape&&(this._keydownHandler=this.handleKeydown.bind(this),document.addEventListener("keydown",this._keydownHandler)),this._scrollHandler=this.handleScroll.bind(this),this._resizeHandler=this.handleResize.bind(this),window.addEventListener("scroll",this._scrollHandler,!0),window.addEventListener("resize",this._resizeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._keydownHandler&&(document.removeEventListener("keydown",this._keydownHandler),this._keydownHandler=null),this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}handleTriggerClick(){this.host.disabled||this.toggle()}handleTriggerHover(){this.host.disabled||(this._hoverTimer&&clearTimeout(this._hoverTimer),this._hoverTimer=window.setTimeout(()=>{this.open()},this.host.delay))}handleTriggerLeave(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null),setTimeout(()=>{this.isHoveringDropdown()||this.close()},100)}handleTriggerFocus(){this.host.disabled||this.open()}handleTriggerBlur(){setTimeout(()=>{this.isDropdownFocused()||this.close()},100)}handleOutsideClick(t){var e,o,i,n;if(!this.host.closeOnOutsideClick)return;const s=t.target;if(null===(e=this._triggerElement)||void 0===e?void 0:e.contains(s))return;if(null===(o=this._dropdownElement)||void 0===o?void 0:o.contains(s))return;const r=t.composedPath();for(const t of r){if(t===this._dropdownElement)return;if(t instanceof Element&&(null===(i=this._dropdownElement)||void 0===i?void 0:i.contains(t)))return}let d=s;for(;d;){const t=d.getRootNode();if(!(t instanceof ShadowRoot&&t.host))break;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(t.host))return;d=t.host}this.close()}handleKeydown(t){"Escape"===t.key&&this.close()}handleScroll(){this._isOpen&&this.calculatePosition()}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),n=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,r=n-o.bottom,d=o.top,a=s-o.right,l=o.left,h=i.height||200,p=i.width||300,c=function(t,e,o){return o>=t?"bottom":e>=t||e>o?"top":"bottom"}(h,d,r),u=this.determineHorizontalPlacement(p,l,a);let m,w;m="bottom"===c?o.bottom+this.host.offset:o.top-h-this.host.offset,w="left"===u?o.right-p:o.left,w=Math.max(8,Math.min(w,s-p-8)),m=Math.max(8,Math.min(m,n-h-8)),this._dropdownElement.style.top=`${m}px`,this._dropdownElement.style.left=`${w}px`,this.applyPlacement(c,u)}catch(t){this.handleError(t,"calculatePosition")}}determineHorizontalPlacement(t,e,o){const i=this.host.placement;if(i.includes("left")||i.includes("right")){if(i.includes("left")&&e>=t)return"left";if(i.includes("right")&&o>=t)return"right"}return o>=t?"right":e>=t?"left":o>e?"right":"left"}applyPlacement(t,e){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom","dropdown__panel--left-aligned","dropdown__panel--right-aligned"),this._dropdownElement.classList.add(`dropdown__panel--${t}`),"left"===e?this._dropdownElement.classList.add("dropdown__panel--right-aligned"):"right"===e&&this._dropdownElement.classList.add("dropdown__panel--left-aligned"),this._position.placement=t)}isHoveringDropdown(){var t;return(null===(t=this._dropdownElement)||void 0===t?void 0:t.matches(":hover"))||!1}isDropdownFocused(){var t;const e=document.activeElement;if(!e)return!1;if(null===(t=this._dropdownElement)||void 0===t?void 0:t.contains(e))return!0;if(e.closest(".dropdown__custom-content"))return!0;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(e.tagName)){if(e.closest(".dropdown__panel"))return!0}return!1}handleItemClick(t,e){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:t,dropdown:this.host,originalEvent:e}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
+ */class v{constructor(t){this._host=t,t.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}handleError(t,e){console.error(`[${this.constructor.name}] Error in ${e}:`,t);try{this._host.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t.message,context:e,controller:this.constructor.name},bubbles:!0,composed:!0}))}catch(t){}}safeExecute(t,e,o){try{return t()}catch(t){return this.handleError(t,e),o}}debounce(t,e){let o;const i=(...i)=>{void 0!==o&&clearTimeout(o),o=setTimeout(()=>{o=void 0,t.apply(this,i)},e)};return i.cancel=()=>{void 0!==o&&(clearTimeout(o),o=void 0)},i}}class b extends v{findElement(t){var e;return null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelector(t)}findElements(t){var e;return null===(e=this._host.shadowRoot)||void 0===e?void 0:e.querySelectorAll(t)}}class g extends b{constructor(t){super(t),this._isOpen=!1,this._position={top:0,left:0,width:0,placement:"bottom"},this._triggerElement=null,this._dropdownElement=null,this._outsideClickHandler=null,this._keydownHandler=null,this._hoverTimer=null,this._triggerClickHandler=null,this._triggerHoverHandler=null,this._triggerLeaveHandler=null,this._triggerFocusHandler=null,this._triggerBlurHandler=null,this._scrollHandler=null,this._resizeHandler=null,this._isOpen=t.open}get isOpen(){return this._isOpen}get position(){return Object.assign({},this._position)}hostConnected(){}hostUpdated(){this._isOpen!==this.host.open&&(this._isOpen=this.host.open),this._triggerElement||this.setupTriggerListeners()}hostDisconnected(){this.cleanup()}open(){try{this._isOpen||this.host.disabled||(this._isOpen=!0,this.host.open=!0,this.requestUpdate(),setTimeout(()=>{this.calculatePosition(),this.setupEventListeners()},10),this.dispatchEvent(new CustomEvent("nr-dropdown-open",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(t){this.handleError(t,"open")}}close(){try{this._isOpen&&(this.removeEventListeners(),this._isOpen=!1,this.host.open=!1,this.requestUpdate(),this.dispatchEvent(new CustomEvent("nr-dropdown-close",{bubbles:!0,composed:!0,detail:{dropdown:this.host}})))}catch(t){this.handleError(t,"close")}}toggle(){try{this._isOpen?this.close():this.open()}catch(t){this.handleError(t,"toggle")}}removeTriggerListeners(){this._triggerElement&&(this._triggerClickHandler&&(this._triggerElement.removeEventListener("click",this._triggerClickHandler),this._triggerClickHandler=null),this._triggerHoverHandler&&(this._triggerElement.removeEventListener("mouseenter",this._triggerHoverHandler),this._triggerHoverHandler=null),this._triggerLeaveHandler&&(this._triggerElement.removeEventListener("mouseleave",this._triggerLeaveHandler),this._triggerLeaveHandler=null),this._triggerFocusHandler&&(this._triggerElement.removeEventListener("focusin",this._triggerFocusHandler),this._triggerFocusHandler=null),this._triggerBlurHandler&&(this._triggerElement.removeEventListener("focusout",this._triggerBlurHandler),this._triggerBlurHandler=null))}findDropdownElements(){this._dropdownElement=this.findElement(".dropdown__panel"),this._triggerElement=this.findElement(".dropdown__trigger")}setupTriggerListeners(){if(this.findDropdownElements(),this._triggerElement)switch(this.removeTriggerListeners(),this.host.trigger){case"click":this._triggerClickHandler=this.handleTriggerClick.bind(this),this._triggerElement.addEventListener("click",this._triggerClickHandler);break;case"hover":this._triggerHoverHandler=this.handleTriggerHover.bind(this),this._triggerLeaveHandler=this.handleTriggerLeave.bind(this),this._triggerElement.addEventListener("mouseenter",this._triggerHoverHandler),this._triggerElement.addEventListener("mouseleave",this._triggerLeaveHandler);break;case"focus":this._triggerFocusHandler=this.handleTriggerFocus.bind(this),this._triggerBlurHandler=this.handleTriggerBlur.bind(this),this._triggerElement.addEventListener("focusin",this._triggerFocusHandler),this._triggerElement.addEventListener("focusout",this._triggerBlurHandler)}}setupEventListeners(){this.host.closeOnOutsideClick&&(this._outsideClickHandler=this.handleOutsideClick.bind(this),document.addEventListener("click",this._outsideClickHandler,!0)),this.host.closeOnEscape&&(this._keydownHandler=this.handleKeydown.bind(this),document.addEventListener("keydown",this._keydownHandler)),this._scrollHandler=this.handleScroll.bind(this),this._resizeHandler=this.handleResize.bind(this),window.addEventListener("scroll",this._scrollHandler,!0),window.addEventListener("resize",this._resizeHandler)}removeEventListeners(){this._outsideClickHandler&&(document.removeEventListener("click",this._outsideClickHandler,!0),this._outsideClickHandler=null),this._keydownHandler&&(document.removeEventListener("keydown",this._keydownHandler),this._keydownHandler=null),this._scrollHandler&&(window.removeEventListener("scroll",this._scrollHandler,!0),this._scrollHandler=null),this._resizeHandler&&(window.removeEventListener("resize",this._resizeHandler),this._resizeHandler=null)}handleTriggerClick(){this.host.disabled||this.toggle()}handleTriggerHover(){this.host.disabled||(this._hoverTimer&&clearTimeout(this._hoverTimer),this._hoverTimer=window.setTimeout(()=>{this.open()},this.host.delay))}handleTriggerLeave(){this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null),setTimeout(()=>{this.isHoveringDropdown()||this.close()},100)}handleTriggerFocus(){this.host.disabled||this.open()}handleTriggerBlur(){setTimeout(()=>{this.isDropdownFocused()||this.close()},100)}handleOutsideClick(t){var e,o,i,n;if(!this.host.closeOnOutsideClick)return;const s=t.target;if(null===(e=this._triggerElement)||void 0===e?void 0:e.contains(s))return;if(null===(o=this._dropdownElement)||void 0===o?void 0:o.contains(s))return;const r=t.composedPath();for(const t of r){if(t===this._dropdownElement)return;if(t instanceof Element&&(null===(i=this._dropdownElement)||void 0===i?void 0:i.contains(t)))return}let d=s;for(;d;){const t=d.getRootNode();if(!(t instanceof ShadowRoot&&t.host))break;if(null===(n=this._dropdownElement)||void 0===n?void 0:n.contains(t.host))return;d=t.host}this.close()}handleKeydown(t){"Escape"===t.key&&this.close()}handleScroll(){this._isOpen&&this.calculatePosition()}handleResize(){this._isOpen&&this.calculatePosition()}calculatePosition(){var t,e;try{if(this._dropdownElement&&this._triggerElement||this.findDropdownElements(),!this._dropdownElement||!this._triggerElement)return;const o=this._triggerElement.getBoundingClientRect(),i=this._dropdownElement.getBoundingClientRect(),n=(null===(t=window.visualViewport)||void 0===t?void 0:t.height)||window.innerHeight,s=(null===(e=window.visualViewport)||void 0===e?void 0:e.width)||window.innerWidth,r=n-o.bottom,d=o.top,a=s-o.right,l=o.left,p=i.height||200,h=i.width||300,c=function(t,e,o){return o>=t?"bottom":e>=t||e>o?"top":"bottom"}(p,d,r),u=this.determineHorizontalPlacement(h,l,a);let m,w;m="bottom"===c?o.bottom+this.host.offset:o.top-p-this.host.offset,w="left"===u?o.right-h:o.left,w=Math.max(8,Math.min(w,s-h-8)),m=Math.max(8,Math.min(m,n-p-8)),this._dropdownElement.style.top=`${m}px`,this._dropdownElement.style.left=`${w}px`,this.applyPlacement(c,u)}catch(t){this.handleError(t,"calculatePosition")}}determineHorizontalPlacement(t,e,o){const i=this.host.placement;if(i.includes("left")||i.includes("right")){if(i.includes("left")&&e>=t)return"left";if(i.includes("right")&&o>=t)return"right"}return o>=t?"right":e>=t?"left":o>e?"right":"left"}applyPlacement(t,e){this._dropdownElement&&(this._dropdownElement.classList.remove("dropdown__panel--top","dropdown__panel--bottom","dropdown__panel--left-aligned","dropdown__panel--right-aligned"),this._dropdownElement.classList.add(`dropdown__panel--${t}`),"left"===e?this._dropdownElement.classList.add("dropdown__panel--right-aligned"):"right"===e&&this._dropdownElement.classList.add("dropdown__panel--left-aligned"),this._position.placement=t)}isHoveringDropdown(){var t;return(null===(t=this._dropdownElement)||void 0===t?void 0:t.matches(":hover"))||!1}isDropdownFocused(){var t;const e=document.activeElement;if(!e)return!1;if(null===(t=this._dropdownElement)||void 0===t?void 0:t.contains(e))return!0;if(e.closest(".dropdown__custom-content"))return!0;if(["INPUT","BUTTON","TEXTAREA","SELECT","A"].includes(e.tagName)){if(e.closest(".dropdown__panel"))return!0}return!1}handleItemClick(t,e){this.dispatchEvent(new CustomEvent("nr-dropdown-item-click",{bubbles:!0,composed:!0,detail:{item:t,dropdown:this.host,originalEvent:e}})),this.host.autoClose&&this.close()}cleanup(){this.removeEventListeners(),this.removeTriggerListeners(),this._hoverTimer&&(clearTimeout(this._hoverTimer),this._hoverTimer=null)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var y=function(t,e,o,i){for(var n,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,d=t.length-1;d>=0;d--)(n=t[d])&&(r=(s<3?n(r):s>3?n(e,o,r):n(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r};let x=class extends((t=>c(h(u(_(t)))))(i)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.open=!1,this.placement="bottom",this.trigger="hover",this.size="medium",this.animation="fade",this.disabled=!1,this.arrow=!1,this.autoClose=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.offset=4,this.delay=50,this.maxHeight="300px",this.minWidth="auto",this.cascadeDirection="auto",this.cascadeDelay=50,this.cascadeOnHover=!0,this.allowOverflow=!1,this.dropdownController=new g(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=t=>{t.stopPropagation()},this.handleItemClick=(t,e)=>{t.disabled||(t.options&&t.options.length>0||t.customContent?this.toggleSubmenu(t.id):this.dropdownController.handleItemClick(t,e))},this.handleItemHover=t=>{var e;if(((null===(e=t.options)||void 0===e?void 0:e.length)||t.customContent)&&(this.clearSubmenuTimer(t.id),this.cascadeOnHover)){const e=window.setTimeout(()=>{this.showSubmenu(t.id)},this.cascadeDelay);this.submenuTimers.set(t.id,e)}},this.handleItemLeave=t=>{var e;if(!(null===(e=t.options)||void 0===e?void 0:e.length)&&!t.customContent)return;this.clearSubmenuTimer(t.id);const o=window.setTimeout(()=>{this.hideSubmenu(t.id)},100);this.submenuTimers.set(`hide-${t.id}`,o)},this.handleSubmenuEnter=t=>{this.clearSubmenuTimer(`hide-${t}`)},this.handleSubmenuLeave=t=>{const e=window.setTimeout(()=>{this.hideSubmenu(t)},100);this.submenuTimers.set(`hide-${t}`,e)}}connectedCallback(){super.connectedCallback(),this.updateCascadingAttribute()}updated(t){super.updated(t),t.has("items")&&this.updateCascadingAttribute()}disconnectedCallback(){super.disconnectedCallback()}firstUpdated(){}updateCascadingAttribute(){this.items.some(t=>t.options&&t.options.length>0||!!t.customContent)?this.setAttribute("has-cascading",""):this.removeAttribute("has-cascading")}clearSubmenuTimer(t){const e=this.submenuTimers.get(t);e&&(clearTimeout(e),this.submenuTimers.delete(t))}toggleSubmenu(t){this.openSubmenus.has(t)?this.hideSubmenu(t):this.showSubmenu(t)}showSubmenu(t){this.openSubmenus.add(t),this.requestUpdate()}hideSubmenu(t){this.openSubmenus.delete(t),this.requestUpdate()}show(){this.dropdownController.open()}hide(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}renderCustomContent(t){return"string"==typeof t.customContent?e`<div>${a(t.customContent)}</div>`:t.customContent}renderSubmenuContent(t){return t.customContent?e`
+ */var y=function(t,e,o,i){for(var n,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i,d=t.length-1;d>=0;d--)(n=t[d])&&(r=(s<3?n(r):s>3?n(e,o,r):n(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r};let x=class extends((t=>c(p(u(_(t)))))(i)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.items=[],this.open=!1,this.placement="bottom",this.trigger="hover",this.size="medium",this.animation="fade",this.disabled=!1,this.arrow=!1,this.autoClose=!1,this.closeOnOutsideClick=!0,this.closeOnEscape=!0,this.offset=4,this.delay=50,this.maxHeight="300px",this.minWidth="auto",this.cascadeDirection="auto",this.cascadeDelay=50,this.cascadeOnHover=!0,this.allowOverflow=!1,this.dropdownController=new g(this),this.openSubmenus=new Set,this.submenuTimers=new Map,this.handleDropdownPanelClick=t=>{t.stopPropagation()},this.handleItemClick=(t,e)=>{t.disabled||(t.options&&t.options.length>0||t.customContent?this.toggleSubmenu(t.id):this.dropdownController.handleItemClick(t,e))},this.handleItemHover=t=>{var e;if(((null===(e=t.options)||void 0===e?void 0:e.length)||t.customContent)&&(this.clearSubmenuTimer(t.id),this.cascadeOnHover)){const e=window.setTimeout(()=>{this.showSubmenu(t.id)},this.cascadeDelay);this.submenuTimers.set(t.id,e)}},this.handleItemLeave=t=>{var e;if(!(null===(e=t.options)||void 0===e?void 0:e.length)&&!t.customContent)return;this.clearSubmenuTimer(t.id);const o=window.setTimeout(()=>{this.hideSubmenu(t.id)},100);this.submenuTimers.set(`hide-${t.id}`,o)},this.handleSubmenuEnter=t=>{this.clearSubmenuTimer(`hide-${t}`)},this.handleSubmenuLeave=t=>{const e=window.setTimeout(()=>{this.hideSubmenu(t)},100);this.submenuTimers.set(`hide-${t}`,e)}}connectedCallback(){super.connectedCallback(),this.updateCascadingAttribute()}updated(t){super.updated(t),t.has("items")&&this.updateCascadingAttribute()}disconnectedCallback(){super.disconnectedCallback()}firstUpdated(){}updateCascadingAttribute(){this.items.some(t=>t.options&&t.options.length>0||!!t.customContent)?this.setAttribute("has-cascading",""):this.removeAttribute("has-cascading")}clearSubmenuTimer(t){const e=this.submenuTimers.get(t);e&&(clearTimeout(e),this.submenuTimers.delete(t))}toggleSubmenu(t){this.openSubmenus.has(t)?this.hideSubmenu(t):this.showSubmenu(t)}showSubmenu(t){this.openSubmenus.add(t),this.requestUpdate()}hideSubmenu(t){this.openSubmenus.delete(t),this.requestUpdate()}show(){this.dropdownController.open()}hide(){this.dropdownController.close()}toggle(){this.dropdownController.toggle()}renderCustomContent(t){return"string"==typeof t.customContent?e`<div>${a(t.customContent)}</div>`:t.customContent}renderSubmenuContent(t){return t.customContent?e`
         <div class="dropdown__custom-content">
           ${this.renderCustomContent(t)}
         </div>
@@ -520,24 +520,25 @@ const _=t=>{class e extends t{constructor(){super(...arguments),this.t=null}crea
           `})}
       </div>
     `:o}render(){const t={dropdown__panel:!0,"dropdown__panel--open":this.open,[`dropdown__panel--${this.size}`]:!0,[`dropdown__panel--${this.animation}`]:!0,[`dropdown__panel--${this.placement}`]:!0,"dropdown__panel--with-arrow":this.arrow},i={maxHeight:this.maxHeight,minWidth:this.minWidth};return e`
-      <div class="dropdown">
-        <div class="dropdown__trigger">
+      <div class="dropdown" part="container">
+        <div class="dropdown__trigger" part="trigger">
           <slot name="trigger"></slot>
         </div>
-        
-        <div 
+
+        <div
           class="${r(t)}"
           style="${d(i)}"
+          part="panel"
           @click="${this.handleDropdownPanelClick}"
         >
-          ${this.arrow?e`<div class="dropdown__arrow"></div>`:o}
-          
+          ${this.arrow?e`<div class="dropdown__arrow" part="arrow"></div>`:o}
+
           <slot name="header"></slot>
-          
-          <div class="dropdown__content">
+
+          <div class="dropdown__content" part="content">
             <slot name="content">${this.renderItems()}</slot>
           </div>
-          
+
           <slot name="footer"></slot>
         </div>
       </div>

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

@@ -301,24 +301,25 @@ let NrDropdownElement = class NrDropdownElement extends NuralyUIBaseMixin(LitEle
             minWidth: this.minWidth
         };
         return html `
-      <div class="dropdown">
-        <div class="dropdown__trigger">
+      <div class="dropdown" part="container">
+        <div class="dropdown__trigger" part="trigger">
           <slot name="trigger"></slot>
         </div>
-        
-        <div 
+
+        <div
           class="${classMap(panelClasses)}"
           style="${styleMap(panelStyles)}"
+          part="panel"
           @click="${this.handleDropdownPanelClick}"
         >
-          ${this.arrow ? html `<div class="dropdown__arrow"></div>` : nothing}
-          
+          ${this.arrow ? html `<div class="dropdown__arrow" part="arrow"></div>` : nothing}
+
           <slot name="header"></slot>
-          
-          <div class="dropdown__content">
+
+          <div class="dropdown__content" part="content">
             <slot name="content">${this.renderItems()}</slot>
           </div>
-          
+
           <slot name="footer"></slot>
         </div>
       </div>

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

@@ -24,7 +24,7 @@ export const styles = css `
 
   .dropdown__panel {
     position: fixed;
-    z-index: 9999;
+    z-index: var(--nuraly-dropdown-z-index, 9999);
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
@@ -341,7 +341,7 @@ export const styles = css `
   .dropdown__submenu {
     position: absolute;
     top: 0;
-    z-index: calc(9999 + 1);
+    z-index: calc(var(--nuraly-dropdown-z-index, 9999) + 1);
     background: #ffffff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;

package/dist/src/components/file-upload/bundle.js

@@ -375,7 +375,7 @@ import{css as e,html as t,LitElement as i}from"lit";import{property as o,state a
  * SPDX-License-Identifier: MIT
  */
 const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=g(i);e&&function(e,t,i){var o;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const s=u.get(e),r=`doc:${e}`;if(p.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],p.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(o=i.host)||void 0===o?void 0:o.tagName)||"").toLowerCase()}:${e}`;p.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],p.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function g(e){return Array.isArray(e)?e.map(e=>g(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}var m=function(e,t,i,o){for(var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o,n=e.length-1;n>=0;n--)(s=e[n])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a},v=function(e,t,i,o){return new(i||(i=Promise))(function(s,r){function a(e){try{d(o.next(e))}catch(e){r(e)}}function n(e){try{d(o.throw(e))}catch(e){r(e)}}function d(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(a,n)}d((o=o.apply(e,t||[])).next())})};let w=class extends((e=>h(d(c(f(e)))))(i)){constructor(){super(...arguments),this.accept="",this.multiple=!1,this.drag=!0,this.tip="",this.limit=0,this.preview=!0,this.generatePreviewOnUpload=!1,this.fileList=[],this.isDragOver=!1,this.showDragArea=!1,this.inputElement=null,this.dragCounter=0,this.previewImage=null,this._onDocumentDragEnter=e=>{e.preventDefault(),this.dragCounter++,1===this.dragCounter&&(this.showDragArea=!0)},this._onDocumentDragLeave=e=>{e.preventDefault(),this.dragCounter--,0===this.dragCounter&&(this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDrop=e=>{e.target===this||this.contains(e.target)||(e.preventDefault(),this.dragCounter=0,this.showDragArea=!1,this.isDragOver=!1)},this._onDocumentDragOver=e=>{e.preventDefault();const t=e.composedPath().includes(this);this.isDragOver=!!t},this._onDrop=e=>{var t;e.preventDefault(),e.stopPropagation(),this.dragCounter=0,this.isDragOver=!1,this.showDragArea=!1,(null===(t=e.dataTransfer)||void 0===t?void 0:t.files)&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:e.dataTransfer.files,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("file-drop",{detail:{files:e.dataTransfer.files},bubbles:!0,composed:!0})),this._handleFiles(e.dataTransfer.files))},this._onClick=()=>{var e;null===(e=this.inputElement)||void 0===e||e.click()},this._onChange=e=>{const t=e.target;t.files&&(this.dispatchEvent(new CustomEvent("files-changed",{detail:t.files,bubbles:!0,composed:!0})),this._handleFiles(t.files),t.value="")}}connectedCallback(){super.connectedCallback(),this._updateThemeAttribute(),this.drag&&(document.addEventListener("dragenter",this._onDocumentDragEnter),document.addEventListener("dragleave",this._onDocumentDragLeave),document.addEventListener("drop",this._onDocumentDrop),document.addEventListener("dragover",this._onDocumentDragOver))}updated(e){super.updated(e),this._updateThemeAttribute()}_updateThemeAttribute(){const e=this.explicitTheme;e?this.setAttribute("data-theme",e):this.removeAttribute("data-theme")}disconnectedCallback(){super.disconnectedCallback(),this.drag&&(document.removeEventListener("dragenter",this._onDocumentDragEnter),document.removeEventListener("dragleave",this._onDocumentDragLeave),document.removeEventListener("drop",this._onDocumentDrop),document.removeEventListener("dragover",this._onDocumentDragOver))}firstUpdated(e){var t;super.firstUpdated(e),this.inputElement=(null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector('input[type="file"]'))||null}_handleFiles(e){return v(this,void 0,void 0,function*(){if(this.multiple&&this.limit>0&&this.fileList.length+e.length>this.limit)return void this._dispatchEvent("exceed",{files:e});if(!this.multiple&&e.length>0){const t=e[e.length-1];this.previewImage&&this.fileList.some(e=>e.url===this.previewImage)&&(this.previewImage=null);const i=[...this.fileList];for(const e of i)this._dispatchEvent("remove",{file:e});this.fileList=[];const o=n.isImageFile(t),s={name:t.name,size:n.formatFileSize(t.size),raw:t,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:o};return this.preview&&this.generatePreviewOnUpload&&o&&(s.url=yield n.createFilePreview(t)),this.fileList=[s],this.requestUpdate(),void this._dispatchEvent("select",{files:[s],fileList:this.fileList})}const t=[];for(const i of Array.from(e)){const e=n.isImageFile(i),o={name:i.name,size:n.formatFileSize(i.size),raw:i,status:"ready",percentage:0,uid:Date.now()+Math.random().toString(36).substring(2),isImage:e};this.preview&&this.generatePreviewOnUpload&&e&&(o.url=yield n.createFilePreview(i)),this.fileList=[...this.fileList,o],t.push(o)}this.requestUpdate(),this._dispatchEvent("select",{files:t,fileList:this.fileList})})}updateFileStatus(e,t,i){const o=this.fileList.find(t=>t.uid===e);o&&(o.status=t,void 0!==i&&(o.percentage=i),this._updateFile(o))}_updateFile(e){this.fileList=this.fileList.map(t=>t.uid===e.uid?e:t),this.requestUpdate()}_removeFile(e){const t=this.fileList.find(t=>t.uid===e);this.fileList=this.fileList.filter(t=>t.uid!==e),t&&this._dispatchEvent("remove",{file:t}),this.requestUpdate()}_dispatchEvent(e,t){this.dispatchEvent(new CustomEvent(`file-${e}`,{detail:t,bubbles:!0,composed:!0}))}_showPreview(e){this.previewImage=e}_closePreview(){this.previewImage=null}render(){return t`
-      <div class="upload" @drop=${this._onDrop} @dragover=${e=>e.preventDefault()}>
+      <div class="upload" part="container" @drop=${this._onDrop} @dragover=${e=>e.preventDefault()}>
         <input 
           type="file" 
           class="hidden" 
@@ -385,28 +385,29 @@ const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
         />
 
         ${this.showDragArea?t`
-          <div 
-            class="upload-dragger ${this.isDragOver?"is-dragover":""}" 
+          <div
+            class="upload-dragger ${this.isDragOver?"is-dragover":""}"
+            part="dragger"
             @click=${this._onClick}
           >
-            <div class="upload-icon">
+            <div class="upload-icon" part="icon">
               <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                 <polyline points="17 8 12 3 7 8"></polyline>
                 <line x1="12" y1="3" x2="12" y2="15"></line>
               </svg>
             </div>
-            <div class="upload-text">Drop file here or click to upload</div>
-            ${this.tip?t`<div class="upload-tip">${this.tip}</div>`:""}
+            <div class="upload-text" part="text">Drop file here or click to upload</div>
+            ${this.tip?t`<div class="upload-tip" part="tip">${this.tip}</div>`:""}
           </div>
         `:t`
-        <nr-button  @click=${this._onClick}>Upload File</nr-button>
-          ${this.tip?t`<div class="upload-tip">${this.tip}</div>`:""}
+        <nr-button part="button" @click=${this._onClick}>Upload File</nr-button>
+          ${this.tip?t`<div class="upload-tip" part="tip">${this.tip}</div>`:""}
         `}
 
-        <div class="file-list">
+        <div class="file-list" part="file-list">
           ${this.fileList.map(e=>t`
-            <div class="file-item">
+            <div class="file-item" part="file-item">
               ${e.isImage?t`
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
@@ -433,7 +434,7 @@ const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
                   </svg>
                 `:"uploading"===e.status?t`${e.percentage}%`:""}
               </div>
-              <div class="file-actions">
+              <div class="file-actions" part="file-actions">
                 ${e.isImage&&e.url?t`
                   <button class="preview-icon" @click=${()=>this._showPreview(e.url)}>
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -469,9 +470,9 @@ const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}crea
         </div>
 
         ${this.previewImage?t`
-          <div class="preview-modal" @click=${this._closePreview}>
-            <button class="preview-close">×</button>
-            <img src="${this.previewImage}" alt="Preview" />
+          <div class="preview-modal" part="preview-modal" @click=${this._closePreview}>
+            <button class="preview-close" part="preview-close">×</button>
+            <img src="${this.previewImage}" alt="Preview" part="preview-image" />
           </div>
         `:""}
       </div>

package/dist/src/components/file-upload/file-upload.component.js

@@ -248,7 +248,7 @@ let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
     }
     render() {
         return html `
-      <div class="upload" @drop=${this._onDrop} @dragover=${(e) => e.preventDefault()}>
+      <div class="upload" part="container" @drop=${this._onDrop} @dragover=${(e) => e.preventDefault()}>
         <input 
           type="file" 
           class="hidden" 
@@ -258,28 +258,29 @@ let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
         />
 
         ${this.showDragArea ? html `
-          <div 
-            class="upload-dragger ${this.isDragOver ? 'is-dragover' : ''}" 
+          <div
+            class="upload-dragger ${this.isDragOver ? 'is-dragover' : ''}"
+            part="dragger"
             @click=${this._onClick}
           >
-            <div class="upload-icon">
+            <div class="upload-icon" part="icon">
               <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                 <polyline points="17 8 12 3 7 8"></polyline>
                 <line x1="12" y1="3" x2="12" y2="15"></line>
               </svg>
             </div>
-            <div class="upload-text">Drop file here or click to upload</div>
-            ${this.tip ? html `<div class="upload-tip">${this.tip}</div>` : ''}
+            <div class="upload-text" part="text">Drop file here or click to upload</div>
+            ${this.tip ? html `<div class="upload-tip" part="tip">${this.tip}</div>` : ''}
           </div>
         ` : html `
-        <nr-button  @click=${this._onClick}>Upload File</nr-button>
-          ${this.tip ? html `<div class="upload-tip">${this.tip}</div>` : ''}
+        <nr-button part="button" @click=${this._onClick}>Upload File</nr-button>
+          ${this.tip ? html `<div class="upload-tip" part="tip">${this.tip}</div>` : ''}
         `}
 
-        <div class="file-list">
+        <div class="file-list" part="file-list">
           ${this.fileList.map(file => html `
-            <div class="file-item">
+            <div class="file-item" part="file-item">
               ${file.isImage ? html `
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
@@ -306,7 +307,7 @@ let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
                   </svg>
                 ` : file.status === 'uploading' ? html `${file.percentage}%` : ''}
               </div>
-              <div class="file-actions">
+              <div class="file-actions" part="file-actions">
                 ${file.isImage && file.url ? html `
                   <button class="preview-icon" @click=${() => this._showPreview(file.url)}>
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -342,9 +343,9 @@ let FileUpload = class FileUpload extends NuralyUIBaseMixin(LitElement) {
         </div>
 
         ${this.previewImage ? html `
-          <div class="preview-modal" @click=${this._closePreview}>
-            <button class="preview-close">×</button>
-            <img src="${this.previewImage}" alt="Preview" />
+          <div class="preview-modal" part="preview-modal" @click=${this._closePreview}>
+            <button class="preview-close" part="preview-close">×</button>
+            <img src="${this.previewImage}" alt="Preview" part="preview-image" />
           </div>
         ` : ''}
       </div>