@nuralyui/modal 0.0.4 → 0.0.5

package/bundle.js

@@ -287,13 +287,13 @@ var ca,aa,ea,sa;!function(c){c.Small="small",c.Medium="medium",c.Large="large",c
 
   /* Modal footer */
   .modal-footer {
-    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
     border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--nuraly-spacing-03, 0.5rem);
-    min-height: var(--nuraly-modal-footer-height, 64px);
+    min-height: var(--nuraly-modal-footer-height, 48px);
     flex-shrink: 0;
   }
 
@@ -607,7 +607,7 @@ class{constructor(){this.modalStack=[],this.baseZIndex=1e3,this.zIndexIncrement=
     
     /* Size properties with fallbacks */
     --nuraly-icon-size-fallback: 18px;
-    --nuraly-icon-size-small-fallback: 16px;
+    --nuraly-icon-size-small-fallback: 14px;
     --nuraly-icon-size-medium-fallback: 20px;
     --nuraly-icon-size-large-fallback: 24px;
     --nuraly-icon-size-xlarge-fallback: 32px;
@@ -741,7 +741,13 @@ var aN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
       >
         <path d="${c}" />
       </svg>
-    `}getIconPath(){if(!this.name)return console.warn("HyIconElement: Icon name is required"),"";const c="solid"==this.type?"fas":"far";try{const a=Ti.definitions;if(!a||!a[c])return console.warn(`HyIconElement: Icon pack "${c}" not found`),"";const e=a[c][this.name];if(!e)return console.warn(`HyIconElement: Icon "${this.name}" not found in ${c} pack`),"";const s=e[4];return s&&"string"==typeof s?s:(console.warn(`HyIconElement: Invalid path data for icon "${this.name}"`),"")}catch(c){return console.error(`HyIconElement: Error loading icon "${this.name}":`,c),""}}getIconRole(){return this.clickable?"button":this.alt?"img":"presentation"}getIconTabIndex(){return this.clickable&&!this.disabled?"0":"-1"}getAriaDisabled(){return this.disabled?"true":void 0}};sN.styles=Jb,aN([jc({type:String})],sN.prototype,"name",void 0),aN([jc()],sN.prototype,"type",void 0),aN([jc({type:String,attribute:"alt"})],sN.prototype,"alt",void 0),aN([jc({type:String,reflect:!0})],sN.prototype,"size",void 0),aN([jc({type:String})],sN.prototype,"color",void 0),aN([jc({type:String})],sN.prototype,"width",void 0),aN([jc({type:String})],sN.prototype,"height",void 0),sN=aN([$c("nr-icon")],sN);const iN="",nN=n`
+    `}getIconPath(){if(!this.name)return console.warn("HyIconElement: Icon name is required"),"";const c="solid"==this.type?"fas":"far";try{const a=Ti.definitions;if(!a||!a[c])return console.warn(`HyIconElement: Icon pack "${c}" not found`),"";const e=a[c][this.name];if(!e)return console.warn(`HyIconElement: Icon "${this.name}" not found in ${c} pack`),"";const s=e[4];return s&&"string"==typeof s?s:(console.warn(`HyIconElement: Invalid path data for icon "${this.name}"`),"")}catch(c){return console.error(`HyIconElement: Error loading icon "${this.name}":`,c),""}}getIconRole(){return this.clickable?"button":this.alt?"img":"presentation"}getIconTabIndex(){return this.clickable&&!this.disabled?"0":"-1"}getAriaDisabled(){return this.disabled?"true":void 0}};sN.styles=Jb,aN([jc({type:String})],sN.prototype,"name",void 0),aN([jc()],sN.prototype,"type",void 0),aN([jc({type:String,attribute:"alt"})],sN.prototype,"alt",void 0),aN([jc({type:String,reflect:!0})],sN.prototype,"size",void 0),aN([jc({type:String})],sN.prototype,"color",void 0),aN([jc({type:String})],sN.prototype,"width",void 0),aN([jc({type:String})],sN.prototype,"height",void 0),sN=aN([$c("nr-icon")],sN);
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const iN=c=>null!=c?c:E,nN="",lN=n`
   :host {
     display: inline-block;
     vertical-align: middle;
@@ -816,6 +822,28 @@ var aN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
       color: inherit;
       /* Override any size attribute with CSS variable */
       font-size: var(--nuraly-button-icon-size, 1rem) !important;
+      transition: all var(--nuraly-transition-fast, 0.15s) ease;
+      /* Inherit cursor from button */
+      cursor: inherit;
+      /* Prevent icon from being focusable */
+      pointer-events: none;
+    }
+
+    /* Icon focus state */
+    &:focus:not(:disabled) nr-icon {
+      opacity: 1;
+      filter: brightness(1.1);
+    }
+
+    /* Icon active state */
+    &:active:not(:disabled) nr-icon {
+      opacity: 0.9;
+      transform: scale(0.95);
+    }
+
+    /* Icon hover state */
+    &:hover:not(:disabled) nr-icon {
+      opacity: 1;
     }
 
     /* Icon spacing - use gap for cleaner spacing */
@@ -1212,32 +1240,32 @@ var aN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-class lN{constructor(c){this._host=c,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(c,a){console.error(`[ButtonController:${this.constructor.name}] Error in ${a}:`,c),this._host.dispatchEvent(new CustomEvent("nr-button-error",{detail:{error:c.message,context:a,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(c){this.handleError(c,"requestUpdate")}}dispatchEvent(c){try{return this._host.dispatchEvent(c)}catch(c){return this.handleError(c,"dispatchEvent"),!1}}}
+class oN{constructor(c){this._host=c,this._host.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}handleError(c,a){console.error(`[ButtonController:${this.constructor.name}] Error in ${a}:`,c),this._host.dispatchEvent(new CustomEvent("nr-button-error",{detail:{error:c.message,context:a,controller:this.constructor.name},bubbles:!0,composed:!0}))}requestUpdate(){try{this._host.requestUpdate()}catch(c){this.handleError(c,"requestUpdate")}}dispatchEvent(c){try{return this._host.dispatchEvent(c)}catch(c){return this.handleError(c,"dispatchEvent"),!1}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class oN extends lN{createRipple(c){try{if(!this.host.ripple||this.host.disabled)return;const a=c.currentTarget,e=a.getBoundingClientRect(),s=2*Math.max(e.width,e.height),i=c.clientX-e.left-s/2,n=c.clientY-e.top-s/2,l=document.createElement("span");l.className="ripple",l.style.width=l.style.height=s+"px",l.style.left=i+"px",l.style.top=n+"px";a.querySelectorAll(".ripple").forEach((c=>c.remove())),a.appendChild(l),setTimeout((()=>{l.remove()}),600)}catch(c){this.handleError(c,"createRipple")}}handleRippleClick(c){try{this.createRipple(c),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:c.clientX,y:c.clientY}},bubbles:!0,composed:!0}))}catch(c){this.handleError(c,"handleRippleClick")}}}
+ */class rN extends oN{createRipple(c){try{if(!this.host.ripple||this.host.disabled)return;const a=c.currentTarget,e=a.getBoundingClientRect(),s=2*Math.max(e.width,e.height),i=c.clientX-e.left-s/2,n=c.clientY-e.top-s/2,l=document.createElement("span");l.className="ripple",l.style.width=l.style.height=s+"px",l.style.left=i+"px",l.style.top=n+"px";a.querySelectorAll(".ripple").forEach((c=>c.remove())),a.appendChild(l),setTimeout((()=>{l.remove()}),600)}catch(c){this.handleError(c,"createRipple")}}handleRippleClick(c){try{this.createRipple(c),this.dispatchEvent(new CustomEvent("button-click",{detail:{disabled:this.host.disabled,timestamp:Date.now(),coordinates:{x:c.clientX,y:c.clientY}},bubbles:!0,composed:!0}))}catch(c){this.handleError(c,"handleRippleClick")}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class rN extends lN{handleKeyboardActivation(c){try{if(this.host.disabled)return;this.isActivationKey(c)&&(c.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:c.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"handleKeyboardActivation")}}handleKeydown(c){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(c))return void c.preventDefault()}this.handleKeyboardActivation(c)}catch(c){this.handleError(c,"handleKeydown")}}isActivationKey(c){return"Enter"===c.key||" "===c.key}isReadonlyKeyAllowed(c){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(c.key)}}
+ */class fN extends oN{handleKeyboardActivation(c){try{if(this.host.disabled)return;this.isActivationKey(c)&&(c.preventDefault(),this.host.click(),this.dispatchEvent(new CustomEvent("keyboard-activation",{detail:{key:c.key,timestamp:Date.now(),target:this.host},bubbles:!0,composed:!0})))}catch(c){this.handleError(c,"handleKeyboardActivation")}}handleKeydown(c){try{if(this.host.disabled){if(!this.isReadonlyKeyAllowed(c))return void c.preventDefault()}this.handleKeyboardActivation(c)}catch(c){this.handleError(c,"handleKeydown")}}isActivationKey(c){return"Enter"===c.key||" "===c.key}isReadonlyKeyAllowed(c){return["Tab","Shift","Escape","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End"].includes(c.key)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class fN extends lN{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const c={};return this.isLinkType()?(c.href=this.host.href,this.host.target&&(c.target=this.host.target,"_blank"===this.host.target&&(c.rel="noopener noreferrer")),c.role="link"):c.role="button",c}catch(c){return this.handleError(c,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(c){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:c},bubbles:!0,composed:!0}))}catch(c){this.handleError(c,"handleLinkNavigation")}}}
+ */class tN extends oN{isLinkType(){return"link"===this.host.type&&!!this.host.href}getElementTag(){return this.isLinkType()?"a":"button"}getLinkAttributes(){try{const c={};return this.isLinkType()?(c.href=this.host.href,this.host.target&&(c.target=this.host.target,"_blank"===this.host.target&&(c.rel="noopener noreferrer")),c.role="link"):c.role="button",c}catch(c){return this.handleError(c,"getLinkAttributes"),{role:"button"}}}handleLinkNavigation(c){try{this.isLinkType()&&this.dispatchEvent(new CustomEvent("link-navigation",{detail:{href:this.host.href,target:this.host.target,timestamp:Date.now(),originalEvent:c},bubbles:!0,composed:!0}))}catch(c){this.handleError(c,"handleLinkNavigation")}}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var tN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let zN=class extends(ua(qc)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=iN,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=iN,this.target=iN,this.ripple=!0,this.buttonAriaLabel=iN,this.ariaDescribedBy=iN,this.htmlType=iN,this.requiredComponents=["nr-icon"],this.rippleController=new oN(this),this.keyboardController=new rN(this),this.linkController=new fN(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||Cc,"data-state":this.loading?"loading":Cc,"data-theme":this.currentTheme,"data-block":this.block?"true":Cc,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||Cc,"aria-describedby":this.ariaDescribedBy||Cc,tabindex:this.disabled?"-1":"0"}}renderIcon(c){if(!this.isComponentAvailable("nr-icon")){const a="string"==typeof c?c:c.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${a}" will not render. Ensure the icon component is imported and registered.`),Cc}if("string"==typeof c)return dc`<nr-icon name=${c}></nr-icon>`;const{name:a,type:e="solid",size:s,color:i,alt:n}=c;return dc`<nr-icon 
-      name=${a}
-      type=${e}
-      alt=${n||""}
-      size=${s||""}
-      color=${i||""}
+ */var zN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let mN=class extends(ua(qc)){constructor(){super(...arguments),this.disabled=!1,this.loading=!1,this.size=nN,this.type="default",this.shape="default",this.block=!1,this.dashed=!1,this.icon=[],this.iconPosition="left",this.href=nN,this.target=nN,this.ripple=!0,this.buttonAriaLabel=nN,this.ariaDescribedBy=nN,this.htmlType=nN,this.requiredComponents=["nr-icon"],this.rippleController=new rN(this),this.keyboardController=new fN(this),this.linkController=new tN(this)}connectedCallback(){super.connectedCallback(),this.validateDependencies()}getCommonAttributes(){return{"data-type":this.type,"data-shape":this.shape,"data-size":this.size||Cc,"data-state":this.loading?"loading":Cc,"data-theme":this.currentTheme,"data-block":this.block?"true":Cc,class:this.dashed?"button-dashed":"","aria-disabled":this.disabled?"true":"false","aria-label":this.buttonAriaLabel||Cc,"aria-describedby":this.ariaDescribedBy||Cc,tabindex:this.disabled?"-1":"0"}}renderIcon(c){if(!this.isComponentAvailable("nr-icon")){const a="string"==typeof c?c:c.name;return console.warn(`[nr-button] Icon component 'nr-icon' not available. Icon "${a}" will not render. Ensure the icon component is imported and registered.`),Cc}const a=()=>{switch(this.size){case"small":return"small";case"medium":default:return"medium";case"large":return"large"}};if("string"==typeof c){const e=a();return dc`<nr-icon name=${c} size=${iN(e)}></nr-icon>`}const{name:e,type:s="solid",size:i,color:n,alt:l}=c,o=i||a();return dc`<nr-icon 
+      name=${e}
+      type=${s}
+      alt=${l||""}
+      size=${iN(o)}
+      color=${n||""}
     ></nr-icon>`}handleClick(c){this.disabled?c.preventDefault():(this.rippleController.handleRippleClick(c),this.linkController.isLinkType()&&this.linkController.handleLinkNavigation(c),this.dispatchEventWithMetadata("button-clicked",{type:this.type,disabled:this.disabled,loading:this.loading,href:this.href||null}))}handleKeydown(c){this.keyboardController.handleKeydown(c)}getResolvedLeftIcon(){var c,a;return this.iconLeft?this.iconLeft:(null===(c=this.icons)||void 0===c?void 0:c.left)?this.icons.left:(null===(a=this.icon)||void 0===a?void 0:a.length)>0?this.icon[0]:void 0}getResolvedRightIcon(){var c,a;return this.iconRight?this.iconRight:(null===(c=this.icons)||void 0===c?void 0:c.right)?this.icons.right:2===(null===(a=this.icon)||void 0===a?void 0:a.length)?this.icon[1]:void 0}render(){const c=this.linkController.getElementTag(),a=this.getCommonAttributes(),e=this.linkController.getLinkAttributes(),s=this.getResolvedLeftIcon(),i=this.getResolvedRightIcon(),n=dc`
       <span id="container" part="container">
         ${s?this.renderIcon(s):Cc}
@@ -1287,23 +1315,23 @@ class lN{constructor(c){this._host=c,this._host.addController(this)}get host(){r
       >
         ${n}
       </button>
-    `}};zN.styles=nN,tN([jc({type:Boolean})],zN.prototype,"disabled",void 0),tN([jc({type:Boolean})],zN.prototype,"loading",void 0),tN([jc({type:String})],zN.prototype,"size",void 0),tN([jc({type:String})],zN.prototype,"type",void 0),tN([jc({type:String})],zN.prototype,"shape",void 0),tN([jc({type:Boolean})],zN.prototype,"block",void 0),tN([jc({type:Boolean})],zN.prototype,"dashed",void 0),tN([jc({type:Array})],zN.prototype,"icon",void 0),tN([jc({type:Object})],zN.prototype,"iconLeft",void 0),tN([jc({type:Object})],zN.prototype,"iconRight",void 0),tN([jc({type:Object})],zN.prototype,"icons",void 0),tN([jc({reflect:!0})],zN.prototype,"iconPosition",void 0),tN([jc({type:String})],zN.prototype,"href",void 0),tN([jc({type:String})],zN.prototype,"target",void 0),tN([jc({type:Boolean})],zN.prototype,"ripple",void 0),tN([jc({type:String})],zN.prototype,"buttonAriaLabel",void 0),tN([jc({type:String})],zN.prototype,"ariaDescribedBy",void 0),tN([jc({type:String})],zN.prototype,"htmlType",void 0),zN=tN([$c("nr-button")],zN);
+    `}};mN.styles=lN,zN([jc({type:Boolean})],mN.prototype,"disabled",void 0),zN([jc({type:Boolean})],mN.prototype,"loading",void 0),zN([jc({type:String})],mN.prototype,"size",void 0),zN([jc({type:String})],mN.prototype,"type",void 0),zN([jc({type:String})],mN.prototype,"shape",void 0),zN([jc({type:Boolean})],mN.prototype,"block",void 0),zN([jc({type:Boolean})],mN.prototype,"dashed",void 0),zN([jc({type:Array})],mN.prototype,"icon",void 0),zN([jc({type:Object})],mN.prototype,"iconLeft",void 0),zN([jc({type:Object})],mN.prototype,"iconRight",void 0),zN([jc({type:Object})],mN.prototype,"icons",void 0),zN([jc({reflect:!0})],mN.prototype,"iconPosition",void 0),zN([jc({type:String})],mN.prototype,"href",void 0),zN([jc({type:String})],mN.prototype,"target",void 0),zN([jc({type:Boolean})],mN.prototype,"ripple",void 0),zN([jc({type:String})],mN.prototype,"buttonAriaLabel",void 0),zN([jc({type:String})],mN.prototype,"ariaDescribedBy",void 0),zN([jc({type:String})],mN.prototype,"htmlType",void 0),mN=zN([$c("nr-button")],mN);
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-class mN{constructor(c){this.initialX=0,this.initialY=0,this.dragHandle=null,this.handleMouseDown=c=>{var a;if(!this.host.modalDraggable)return;c.preventDefault(),this.host.isDragging=!0,this.initialX=c.clientX-this.host.offsetX,this.initialY=c.clientY-this.host.offsetY;const e=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");e&&e.classList.add("modal--dragging")},this.handleMouseMove=c=>{var a;if(!this.host.isDragging||!this.host.modalDraggable)return;c.preventDefault();const e=c.clientX-this.initialX,s=c.clientY-this.initialY,i=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(i){const c=i.getBoundingClientRect(),a=window.innerWidth,n=window.innerHeight,l=-c.width/2,o=a-c.width/2,r=-c.height/2,f=n-c.height/2;this.host.offsetX=Math.max(l,Math.min(o,e)),this.host.offsetY=Math.max(r,Math.min(f,s)),i.style.transform=`translate(${this.host.offsetX}px, ${this.host.offsetY}px)`}this.host.requestUpdate()},this.handleMouseUp=()=>{var c;if(!this.host.isDragging)return;this.host.isDragging=!1;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");a&&a.classList.remove("modal--dragging"),this.host.requestUpdate()},this.host=c,this.host.addController(this)}hostConnected(){this.setupDragHandlers()}hostDisconnected(){this.cleanupDragHandlers()}setupDragHandlers(){requestAnimationFrame((()=>{var c;this.dragHandle=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal-header--draggable"),this.dragHandle&&this.host.modalDraggable&&(this.dragHandle.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}))}cleanupDragHandlers(){this.dragHandle&&this.dragHandle.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}resetPosition(){var c;this.host.offsetX=0,this.host.offsetY=0;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");a&&(a.style.transform="none"),this.host.requestUpdate()}}
+class HN{constructor(c){this.initialX=0,this.initialY=0,this.dragHandle=null,this.handleMouseDown=c=>{var a;if(!this.host.modalDraggable)return;c.preventDefault(),this.host.isDragging=!0,this.initialX=c.clientX-this.host.offsetX,this.initialY=c.clientY-this.host.offsetY;const e=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");e&&e.classList.add("modal--dragging")},this.handleMouseMove=c=>{var a;if(!this.host.isDragging||!this.host.modalDraggable)return;c.preventDefault();const e=c.clientX-this.initialX,s=c.clientY-this.initialY,i=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(i){const c=i.getBoundingClientRect(),a=window.innerWidth,n=window.innerHeight,l=-c.width/2,o=a-c.width/2,r=-c.height/2,f=n-c.height/2;this.host.offsetX=Math.max(l,Math.min(o,e)),this.host.offsetY=Math.max(r,Math.min(f,s)),i.style.transform=`translate(${this.host.offsetX}px, ${this.host.offsetY}px)`}this.host.requestUpdate()},this.handleMouseUp=()=>{var c;if(!this.host.isDragging)return;this.host.isDragging=!1;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");a&&a.classList.remove("modal--dragging"),this.host.requestUpdate()},this.host=c,this.host.addController(this)}hostConnected(){this.setupDragHandlers()}hostDisconnected(){this.cleanupDragHandlers()}setupDragHandlers(){requestAnimationFrame((()=>{var c;this.dragHandle=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal-header--draggable"),this.dragHandle&&this.host.modalDraggable&&(this.dragHandle.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}))}cleanupDragHandlers(){this.dragHandle&&this.dragHandle.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}resetPosition(){var c;this.host.offsetX=0,this.host.offsetY=0;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");a&&(a.style.transform="none"),this.host.requestUpdate()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class HN{constructor(c){this.handleKeyDown=c=>{if(this.host.open)switch(c.key){case"Escape":if(this.host.closable){c.preventDefault(),c.stopPropagation();if(!da.handleEscapeKey()){const c=new CustomEvent("modal-escape",{bubbles:!0,cancelable:!0});this.host.dispatchEvent(c)&&this.host.closeModal()}}break;case"Tab":da.isTopModal(this.host)&&this.handleTabNavigation(c)}},this.host=c,this.host.addController(this)}hostConnected(){document.addEventListener("keydown",this.handleKeyDown)}hostDisconnected(){document.removeEventListener("keydown",this.handleKeyDown)}handleTabNavigation(c){var a;const e=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!e)return;const s=this.getFocusableElements(e);if(0===s.length)return;const i=s[0],n=s[s.length-1];c.shiftKey?document.activeElement===i&&(c.preventDefault(),n.focus()):document.activeElement===n&&(c.preventDefault(),i.focus())}getFocusableElements(c){const a=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]'].join(", ");return Array.from(c.querySelectorAll(a)).filter((c=>c.offsetWidth>0&&c.offsetHeight>0&&!c.hidden&&"hidden"!==getComputedStyle(c).visibility))}focusFirstElement(){var c;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");if(!a)return;const e=this.getFocusableElements(a);e.length>0?e[0].focus():a.focus()}focusLastElement(){var c;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");if(!a)return;const e=this.getFocusableElements(a);e.length>0&&e[e.length-1].focus()}}
+ */class hN{constructor(c){this.handleKeyDown=c=>{if(this.host.open)switch(c.key){case"Escape":if(this.host.closable){c.preventDefault(),c.stopPropagation();if(!da.handleEscapeKey()){const c=new CustomEvent("modal-escape",{bubbles:!0,cancelable:!0});this.host.dispatchEvent(c)&&this.host.closeModal()}}break;case"Tab":da.isTopModal(this.host)&&this.handleTabNavigation(c)}},this.host=c,this.host.addController(this)}hostConnected(){document.addEventListener("keydown",this.handleKeyDown)}hostDisconnected(){document.removeEventListener("keydown",this.handleKeyDown)}handleTabNavigation(c){var a;const e=null===(a=this.host.shadowRoot)||void 0===a?void 0:a.querySelector(".modal");if(!e)return;const s=this.getFocusableElements(e);if(0===s.length)return;const i=s[0],n=s[s.length-1];c.shiftKey?document.activeElement===i&&(c.preventDefault(),n.focus()):document.activeElement===n&&(c.preventDefault(),i.focus())}getFocusableElements(c){const a=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[contenteditable="true"]'].join(", ");return Array.from(c.querySelectorAll(a)).filter((c=>c.offsetWidth>0&&c.offsetHeight>0&&!c.hidden&&"hidden"!==getComputedStyle(c).visibility))}focusFirstElement(){var c;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");if(!a)return;const e=this.getFocusableElements(a);e.length>0?e[0].focus():a.focus()}focusLastElement(){var c;const a=null===(c=this.host.shadowRoot)||void 0===c?void 0:c.querySelector(".modal");if(!a)return;const e=this.getFocusableElements(a);e.length>0&&e[e.length-1].focus()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */var hN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let VN=class extends(ua(qc)){constructor(){super(...arguments),this.open=!1,this.size=ca.Medium,this.position=aa.Center,this.animation=ea.Fade,this.backdrop=sa.Closable,this.closable=!0,this.modalDraggable=!1,this.resizable=!1,this.fullscreen=!1,this.modalTitle=ia,this.showCloseButton=!0,this.headerIcon=ia,this.zIndex=1e3,this.width=ia,this.height=ia,this.isDragging=!1,this.offsetX=0,this.offsetY=0,this.animationState="closed",this.previousActiveElement=null,this.requiredComponents=["nr-icon","nr-button"],this.dragController=new mN(this),this.keyboardController=new HN(this),this.handleBackdropClick=c=>{this.backdrop===sa.Closable&&c.target===c.currentTarget&&da.handleBackdropClick(this)&&this.closeModal()}}connectedCallback(){super.connectedCallback(),this.validateDependencies()}disconnectedCallback(){super.disconnectedCallback(),this.previousActiveElement instanceof HTMLElement&&this.previousActiveElement.focus()}willUpdate(c){super.willUpdate(c),c.has("open")&&(this.open?this.handleOpen():this.handleClose())}handleOpen(){const c=da.openModal(this);this.zIndex=c,this.animationState="opening",this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,detail:{modal:this,stackDepth:da.getStackDepth()}})),this.updateComplete.then((()=>{this.startOpenAnimation()}))}startOpenAnimation(){var c,a;const e=null===(c=this.shadowRoot)||void 0===c?void 0:c.querySelector(".modal"),s=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector(".modal-backdrop");if(!e||!s)return;const{modalKeyframes:i}=this.getAnimationKeyframes();e.animate(i,{duration:300,easing:"ease",fill:"forwards"}).addEventListener("finish",(()=>{this.animationState="open",da.isTopModal(this)&&this.keyboardController.focusFirstElement(),this.dispatchEvent(new CustomEvent("modal-after-open",{bubbles:!0,detail:{modal:this,stackDepth:da.getStackDepth()}}))}))}getAnimationKeyframes(){let c;switch(this.animation){case"fade":default:c=[{opacity:0,transform:"scale(0.9)"},{opacity:1,transform:"scale(1)"}];break;case"zoom":c=[{opacity:0,transform:"scale(0.7)"},{opacity:1,transform:"scale(1)"}];break;case"slide-up":c=[{opacity:0,transform:"translateY(20px)"},{opacity:1,transform:"translateY(0)"}];break;case"slide-down":c=[{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]}return{modalKeyframes:c,backdropKeyframes:[{opacity:0},{opacity:1}]}}handleClose(){this.animationState="closing",da.closeModal(this),this.dragController.resetPosition(),setTimeout((()=>{this.animationState="closed"}),300)}openModal(){this.open=!0}closeModal(){if(!this.closable)return;const c=new CustomEvent("modal-before-close",{bubbles:!0,cancelable:!0,detail:{modal:this,cancel:()=>c.preventDefault()}});this.dispatchEvent(c)&&(this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,detail:{modal:this}})))}getBackdropClasses(){return{"modal-backdrop":!0,"modal-backdrop--hidden":!this.open,[`modal-backdrop--position-${this.position}`]:!0}}getModalClasses(){return{modal:!0,[`modal--size-${this.size}`]:!this.fullscreen,"modal--fullscreen":this.fullscreen,[`modal--animation-${this.animation}`]:"opening"===this.animationState||"open"===this.animationState,"modal--dragging":this.isDragging,"modal--resizable":this.resizable}}getModalStyles(){const c={};return this.zIndex&&(c["--nuraly-z-modal-backdrop"]=this.zIndex.toString()),this.width&&(c.width=this.width),this.height&&(c.height=this.height),c}renderHeader(){const c=this.querySelector('[slot="header"]'),a=this.modalTitle||this.headerIcon;return c||a||this.showCloseButton?dc`
+ */var VN=function(c,a,e,s){for(var i,n=arguments.length,l=n<3?a:null===s?s=Object.getOwnPropertyDescriptor(a,e):s,o=c.length-1;o>=0;o--)(i=c[o])&&(l=(n<3?i(l):n>3?i(a,e,l):i(a,e))||l);return n>3&&l&&Object.defineProperty(a,e,l),l};let MN=class extends(ua(qc)){constructor(){super(...arguments),this.open=!1,this.size=ca.Medium,this.position=aa.Center,this.animation=ea.Fade,this.backdrop=sa.Closable,this.closable=!0,this.modalDraggable=!1,this.resizable=!1,this.fullscreen=!1,this.modalTitle=ia,this.showCloseButton=!0,this.headerIcon=ia,this.zIndex=1e3,this.width=ia,this.height=ia,this.isDragging=!1,this.offsetX=0,this.offsetY=0,this.animationState="closed",this.previousActiveElement=null,this.requiredComponents=["nr-icon","nr-button"],this.dragController=new HN(this),this.keyboardController=new hN(this),this.handleBackdropClick=c=>{this.backdrop===sa.Closable&&c.target===c.currentTarget&&da.handleBackdropClick(this)&&this.closeModal()}}connectedCallback(){super.connectedCallback(),this.validateDependencies()}disconnectedCallback(){super.disconnectedCallback(),this.previousActiveElement instanceof HTMLElement&&this.previousActiveElement.focus()}willUpdate(c){super.willUpdate(c),c.has("open")&&(this.open?this.handleOpen():this.handleClose())}handleOpen(){const c=da.openModal(this);this.zIndex=c,this.animationState="opening",this.dispatchEvent(new CustomEvent("modal-open",{bubbles:!0,detail:{modal:this,stackDepth:da.getStackDepth()}})),this.updateComplete.then((()=>{this.startOpenAnimation()}))}startOpenAnimation(){var c,a;const e=null===(c=this.shadowRoot)||void 0===c?void 0:c.querySelector(".modal"),s=null===(a=this.shadowRoot)||void 0===a?void 0:a.querySelector(".modal-backdrop");if(!e||!s)return;const{modalKeyframes:i}=this.getAnimationKeyframes();e.animate(i,{duration:300,easing:"ease",fill:"forwards"}).addEventListener("finish",(()=>{this.animationState="open",da.isTopModal(this)&&this.keyboardController.focusFirstElement(),this.dispatchEvent(new CustomEvent("modal-after-open",{bubbles:!0,detail:{modal:this,stackDepth:da.getStackDepth()}}))}))}getAnimationKeyframes(){let c;switch(this.animation){case"fade":default:c=[{opacity:0,transform:"scale(0.9)"},{opacity:1,transform:"scale(1)"}];break;case"zoom":c=[{opacity:0,transform:"scale(0.7)"},{opacity:1,transform:"scale(1)"}];break;case"slide-up":c=[{opacity:0,transform:"translateY(20px)"},{opacity:1,transform:"translateY(0)"}];break;case"slide-down":c=[{opacity:0,transform:"translateY(-20px)"},{opacity:1,transform:"translateY(0)"}]}return{modalKeyframes:c,backdropKeyframes:[{opacity:0},{opacity:1}]}}handleClose(){this.animationState="closing",da.closeModal(this),this.dragController.resetPosition(),setTimeout((()=>{this.animationState="closed"}),300)}openModal(){this.open=!0}closeModal(){if(!this.closable)return;const c=new CustomEvent("modal-before-close",{bubbles:!0,cancelable:!0,detail:{modal:this,cancel:()=>c.preventDefault()}});this.dispatchEvent(c)&&(this.open=!1,this.dispatchEvent(new CustomEvent("modal-close",{bubbles:!0,detail:{modal:this}})))}getBackdropClasses(){return{"modal-backdrop":!0,"modal-backdrop--hidden":!this.open,[`modal-backdrop--position-${this.position}`]:!0}}getModalClasses(){return{modal:!0,[`modal--size-${this.size}`]:!this.fullscreen,"modal--fullscreen":this.fullscreen,[`modal--animation-${this.animation}`]:"opening"===this.animationState||"open"===this.animationState,"modal--dragging":this.isDragging,"modal--resizable":this.resizable}}getModalStyles(){const c={};return this.zIndex&&(c["--nuraly-z-modal-backdrop"]=this.zIndex.toString()),this.width&&(c.width=this.width),this.height&&(c.height=this.height),c}renderHeader(){const c=this.querySelector('[slot="header"]'),a=this.modalTitle||this.headerIcon;return c||a||this.showCloseButton?dc`
       <div class="modal-header ${this.modalDraggable?"modal-header--draggable":""}">
         ${c?dc`
           <div class="modal-header-content">
@@ -1360,4 +1388,4 @@ class mN{constructor(c){this.initialX=0,this.initialY=0,this.dragHandle=null,thi
           `:Cc}
         </div>
       </div>
-    `:Cc}};VN.styles=Ha,hN([jc({type:Boolean,reflect:!0})],VN.prototype,"open",void 0),hN([jc({type:String})],VN.prototype,"size",void 0),hN([jc({type:String})],VN.prototype,"position",void 0),hN([jc({type:String})],VN.prototype,"animation",void 0),hN([jc({type:String})],VN.prototype,"backdrop",void 0),hN([jc({type:Boolean})],VN.prototype,"closable",void 0),hN([jc({type:Boolean})],VN.prototype,"modalDraggable",void 0),hN([jc({type:Boolean})],VN.prototype,"resizable",void 0),hN([jc({type:Boolean})],VN.prototype,"fullscreen",void 0),hN([jc({type:String})],VN.prototype,"modalTitle",void 0),hN([jc({type:Boolean,attribute:"show-close-button"})],VN.prototype,"showCloseButton",void 0),hN([jc({type:String})],VN.prototype,"headerIcon",void 0),hN([jc({type:Number})],VN.prototype,"zIndex",void 0),hN([jc({type:String})],VN.prototype,"width",void 0),hN([jc({type:String})],VN.prototype,"height",void 0),hN([Gc()],VN.prototype,"isDragging",void 0),hN([jc({type:Number})],VN.prototype,"offsetX",void 0),hN([jc({type:Number})],VN.prototype,"offsetY",void 0),hN([Gc()],VN.prototype,"animationState",void 0),VN=hN([$c("nr-modal")],VN);export{ta as DEFAULT_MODAL_CONFIG,ma as DEFAULT_MODAL_FOOTER,za as DEFAULT_MODAL_HEADER,na as DEFAULT_Z_INDEX,ia as EMPTY_STRING,ea as ModalAnimation,sa as ModalBackdrop,mN as ModalDragController,HN as ModalKeyboardController,da as ModalManager,aa as ModalPosition,ca as ModalSize,VN as NrModalElement,ra as isModalAnimation,fa as isModalBackdrop,oa as isModalPosition,la as isModalSize};
+    `:Cc}};MN.styles=Ha,VN([jc({type:Boolean,reflect:!0})],MN.prototype,"open",void 0),VN([jc({type:String})],MN.prototype,"size",void 0),VN([jc({type:String})],MN.prototype,"position",void 0),VN([jc({type:String})],MN.prototype,"animation",void 0),VN([jc({type:String})],MN.prototype,"backdrop",void 0),VN([jc({type:Boolean})],MN.prototype,"closable",void 0),VN([jc({type:Boolean})],MN.prototype,"modalDraggable",void 0),VN([jc({type:Boolean})],MN.prototype,"resizable",void 0),VN([jc({type:Boolean})],MN.prototype,"fullscreen",void 0),VN([jc({type:String})],MN.prototype,"modalTitle",void 0),VN([jc({type:Boolean,attribute:"show-close-button"})],MN.prototype,"showCloseButton",void 0),VN([jc({type:String})],MN.prototype,"headerIcon",void 0),VN([jc({type:Number})],MN.prototype,"zIndex",void 0),VN([jc({type:String})],MN.prototype,"width",void 0),VN([jc({type:String})],MN.prototype,"height",void 0),VN([Gc()],MN.prototype,"isDragging",void 0),VN([jc({type:Number})],MN.prototype,"offsetX",void 0),VN([jc({type:Number})],MN.prototype,"offsetY",void 0),VN([Gc()],MN.prototype,"animationState",void 0),MN=VN([$c("nr-modal")],MN);export{ta as DEFAULT_MODAL_CONFIG,ma as DEFAULT_MODAL_FOOTER,za as DEFAULT_MODAL_HEADER,na as DEFAULT_Z_INDEX,ia as EMPTY_STRING,ea as ModalAnimation,sa as ModalBackdrop,HN as ModalDragController,hN as ModalKeyboardController,da as ModalManager,aa as ModalPosition,ca as ModalSize,MN as NrModalElement,ra as isModalAnimation,fa as isModalBackdrop,oa as isModalPosition,la as isModalSize};

package/modal.component.d.ts

@@ -8,7 +8,7 @@ import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop } from './modal
 import '../icon/icon.component.js';
 import '../button/button.component.js';
 import { ModalDragHost, ModalKeyboardHost } from './controllers/index.js';
-declare const NrModalElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrModalElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * Versatile modal component with multiple sizes, animations, and enhanced functionality.
  *

package/modal.component.js

@@ -15,7 +15,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { ModalSize, ModalPosition, ModalAnimation, ModalBackdrop, EMPTY_STRING } from './modal.types.js';
 import { styles } from './modal.style.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { ModalManager } from './modal-manager.js';
 // Import icon component
 import '../icon/icon.component.js';

package/modal.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.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, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  ModalSize,\n  ModalPosition,\n  ModalAnimation,\n  ModalBackdrop,\n  EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { ModalManager } from './modal-manager.js';\n\n// Import icon component\nimport '../icon/icon.component.js';\nimport '../button/button.component.js';\n\n// Import controllers\nimport {\n  ModalDragController,\n  ModalDragHost,\n  ModalKeyboardController,\n  ModalKeyboardHost\n} from './controllers/index.js';\n\n/**\n * Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n *   <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n *   open\n *   size=\"large\"\n *   position=\"top\"\n *   animation=\"zoom\"\n *   backdrop=\"static\"\n *   draggable>\n *   <div slot=\"header\">\n *     <nr-icon name=\"info\"></nr-icon>\n *     <span>Custom Header</span>\n *   </div>\n *   <p>Modal content</p>\n *   <div slot=\"footer\">\n *     <nr-button type=\"secondary\">Cancel</nr-button>\n *     <nr-button type=\"primary\">OK</nr-button>\n *   </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n */\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n  implements ModalDragHost, ModalKeyboardHost {\n  static override styles = styles;\n\n  /** Whether the modal is open */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Modal size (small, medium, large, xl) */\n  @property({ type: String })\n  size: ModalSize = ModalSize.Medium;\n\n  /** Modal position (center, top, bottom) */\n  @property({ type: String })\n  position: ModalPosition = ModalPosition.Center;\n\n  /** Animation type */\n  @property({ type: String })\n  animation: ModalAnimation = ModalAnimation.Fade;\n\n  /** Backdrop behavior */\n  @property({ type: String })\n  backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n  /** Whether the modal can be closed */\n  @property({ type: Boolean })\n  closable = true;\n\n  /** Whether the modal can be dragged */\n  @property({ type: Boolean })\n  modalDraggable = false;\n\n  /** Whether the modal is resizable */\n  @property({ type: Boolean })\n  resizable = false;\n\n  /** Whether the modal is fullscreen */\n  @property({ type: Boolean })\n  fullscreen = false;\n\n  /** Modal title */\n  @property({ type: String })\n  modalTitle = EMPTY_STRING;\n\n  /** Show close button in header */\n  @property({ type: Boolean, attribute: 'show-close-button' })\n  showCloseButton = true;\n\n  /** Header icon */\n  @property({ type: String })\n  headerIcon = EMPTY_STRING;\n\n  /** Z-index for the modal */\n  @property({ type: Number })\n  zIndex = 1000;\n\n  /** Custom width */\n  @property({ type: String })\n  width = EMPTY_STRING;\n\n  /** Custom height */\n  @property({ type: String })\n  height = EMPTY_STRING;\n\n  /** Dragging state */\n  @state()\n  isDragging = false;\n\n  /** Current X offset for dragging */\n  @property({ type: Number })\n  offsetX = 0;\n\n  /** Current Y offset for dragging */\n  @property({ type: Number })\n  offsetY = 0;\n\n  /** Animation state */\n  @state()\n  private animationState: 'closed' | 'opening' | 'open' | 'closing' = 'closed';\n\n  /** Previous focus element */\n  private previousActiveElement: Element | null = null;\n\n  override requiredComponents = ['nr-icon', 'nr-button'];\n\n  // Controllers\n  private dragController = new ModalDragController(this);\n  private keyboardController = new ModalKeyboardController(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // Restore focus when modal is destroyed\n    if (this.previousActiveElement instanceof HTMLElement) {\n      this.previousActiveElement.focus();\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen() {\n    // Register with modal manager and get z-index\n    const assignedZIndex = ModalManager.openModal(this);\n    this.zIndex = assignedZIndex;\n    \n    // Set animation state to opening\n    this.animationState = 'opening';\n    \n    // Dispatch before open event\n    this.dispatchEvent(new CustomEvent('modal-open', {\n      bubbles: true,\n      detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n    }));\n\n    // Wait for DOM update, then start JavaScript animation\n    this.updateComplete.then(() => {\n      this.startOpenAnimation();\n    });\n  }\n\n  private startOpenAnimation() {\n    const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n    const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n    \n    if (!modalElement || !backdropElement) return;\n\n    // Get animation keyframes based on animation type\n    const { modalKeyframes} = this.getAnimationKeyframes();\n    \n    // Start animations\n    const modalAnimation = modalElement.animate(modalKeyframes, {\n      duration: 300,\n      easing: 'ease',\n      fill: 'forwards'\n    });\n\n\n    // When animation completes\n    modalAnimation.addEventListener('finish', () => {\n      this.animationState = 'open';\n      \n      // Only focus if this is the top modal\n      if (ModalManager.isTopModal(this)) {\n        this.keyboardController.focusFirstElement();\n      }\n      \n      // Dispatch after open event\n      this.dispatchEvent(new CustomEvent('modal-after-open', {\n        bubbles: true,\n        detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n      }));\n    });\n  }\n\n  private getAnimationKeyframes() {\n    const backdropKeyframes = [\n      { opacity: 0 },\n      { opacity: 1 }\n    ];\n\n    let modalKeyframes;\n    switch (this.animation) {\n      case 'fade':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'zoom':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.7)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'slide-up':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      case 'slide-down':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(-20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      default:\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n    }\n\n    return { modalKeyframes, backdropKeyframes };\n  }\n\n  private handleClose() {\n    this.animationState = 'closing';\n    \n    // Unregister from modal manager\n    ModalManager.closeModal(this);\n    \n    // Reset drag position\n    this.dragController.resetPosition();\n    \n    // Wait for animation to complete\n    setTimeout(() => {\n      this.animationState = 'closed';\n    }, 300);\n  }\n\n  /**\n   * Opens the modal\n   */\n  openModal() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the modal\n   */\n  closeModal() {\n    if (!this.closable) return;\n\n    // Dispatch before close event (cancelable)\n    const beforeCloseEvent = new CustomEvent('modal-before-close', {\n      bubbles: true,\n      cancelable: true,\n      detail: { \n        modal: this,\n        cancel: () => beforeCloseEvent.preventDefault()\n      }\n    });\n\n    const dispatched = this.dispatchEvent(beforeCloseEvent);\n    \n    // Only close if event wasn't cancelled\n    if (dispatched) {\n      this.open = false;\n      \n      // Dispatch close event\n      this.dispatchEvent(new CustomEvent('modal-close', {\n        bubbles: true,\n        detail: { modal: this }\n      }));\n    }\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    // Only allow backdrop close if this is the top modal and backdrop is closable\n    if (this.backdrop === ModalBackdrop.Closable && \n        event.target === event.currentTarget && \n        ModalManager.handleBackdropClick(this)) {\n      this.closeModal();\n    }\n  };\n\n  private getBackdropClasses() {\n    return {\n      'modal-backdrop': true,\n      'modal-backdrop--hidden': !this.open,\n      [`modal-backdrop--position-${this.position}`]: true\n    };\n  }\n\n  private getModalClasses() {\n    return {\n      'modal': true,\n      [`modal--size-${this.size}`]: !this.fullscreen,\n      'modal--fullscreen': this.fullscreen,\n      [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',\n      'modal--dragging': this.isDragging,\n      'modal--resizable': this.resizable\n    };\n  }\n\n  private getModalStyles() {\n    const styles: any = {};\n    \n    if (this.zIndex) {\n      styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n    }\n    \n    if (this.width) {\n      styles.width = this.width;\n    }\n    \n    if (this.height) {\n      styles.height = this.height;\n    }\n    \n    return styles;\n  }\n\n  private renderHeader() {\n    const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n    const hasTitle = this.modalTitle || this.headerIcon;\n    \n    if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n        ${hasCustomHeader ? html`\n          <div class=\"modal-header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n        ` : hasTitle ? html`\n          <div class=\"modal-header-content\">\n            ${this.headerIcon ? html`\n              <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n            ` : nothing}\n            ${this.modalTitle ? html`\n              <h2 class=\"modal-title\">${this.modalTitle}</h2>\n            ` : nothing}\n          </div>\n        ` : nothing}\n        \n        ${this.showCloseButton ? html`\n          <button \n            class=\"modal-close-button\"\n            @click=${this.closeModal}\n            aria-label=\"Close modal\"\n            type=\"button\">\n            <nr-icon class=\"modal-close-icon\" name=\"close\"></nr-icon>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private renderFooter() {\n    const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n    \n    if (!hasCustomFooter) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-footer\">\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n   override updated() {\n        this.updateDataTheme();\n    }\n\n   private updateDataTheme() {\n        if (!this.closest('[data-theme]')) {\n            this.setAttribute('data-theme', this.currentTheme);\n        }\n    }\n\n  override render() {\n    if (!this.open && this.animationState === 'closed') {\n      return nothing;\n    }\n\n    return html`\n      <div \n        class=${classMap(this.getBackdropClasses())}\n        @click=${this.handleBackdropClick}\n        style=${styleMap(this.getModalStyles())}>\n        \n        <div \n          class=${classMap(this.getModalClasses())}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n          tabindex=\"-1\">\n          \n          ${this.renderHeader()}\n          \n          <div class=\"modal-body\">\n            <slot></slot>\n          </div>\n          \n          ${this.renderFooter()}\n          \n          ${this.resizable ? html`\n            <div class=\"resize-handle\"></div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"modal.component.js","sourceRoot":"","sources":["../../../src/components/modal/modal.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, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport {\n  ModalSize,\n  ModalPosition,\n  ModalAnimation,\n  ModalBackdrop,\n  EMPTY_STRING\n} from './modal.types.js';\nimport { styles } from './modal.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { ModalManager } from './modal-manager.js';\n\n// Import icon component\nimport '../icon/icon.component.js';\nimport '../button/button.component.js';\n\n// Import controllers\nimport {\n  ModalDragController,\n  ModalDragHost,\n  ModalKeyboardController,\n  ModalKeyboardHost\n} from './controllers/index.js';\n\n/**\n * Versatile modal component with multiple sizes, animations, and enhanced functionality.\n * \n * @example\n * ```html\n * <!-- Simple usage -->\n * <nr-modal open title=\"My Modal\">\n *   <p>Modal content goes here</p>\n * </nr-modal>\n * \n * <!-- With custom configuration -->\n * <nr-modal \n *   open\n *   size=\"large\"\n *   position=\"top\"\n *   animation=\"zoom\"\n *   backdrop=\"static\"\n *   draggable>\n *   <div slot=\"header\">\n *     <nr-icon name=\"info\"></nr-icon>\n *     <span>Custom Header</span>\n *   </div>\n *   <p>Modal content</p>\n *   <div slot=\"footer\">\n *     <nr-button type=\"secondary\">Cancel</nr-button>\n *     <nr-button type=\"primary\">OK</nr-button>\n *   </div>\n * </nr-modal>\n * ```\n * \n * @fires modal-open - Modal opened\n * @fires modal-close - Modal closed\n * @fires modal-before-close - Before modal closes (cancelable)\n * @fires modal-after-open - After modal opens\n * @fires modal-escape - Escape key pressed\n * \n * @slot default - Modal body content\n * @slot header - Custom header content\n * @slot footer - Custom footer content\n */\n@customElement('nr-modal')\nexport class NrModalElement extends NuralyUIBaseMixin(LitElement) \n  implements ModalDragHost, ModalKeyboardHost {\n  static override styles = styles;\n\n  /** Whether the modal is open */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /** Modal size (small, medium, large, xl) */\n  @property({ type: String })\n  size: ModalSize = ModalSize.Medium;\n\n  /** Modal position (center, top, bottom) */\n  @property({ type: String })\n  position: ModalPosition = ModalPosition.Center;\n\n  /** Animation type */\n  @property({ type: String })\n  animation: ModalAnimation = ModalAnimation.Fade;\n\n  /** Backdrop behavior */\n  @property({ type: String })\n  backdrop: ModalBackdrop = ModalBackdrop.Closable;\n\n  /** Whether the modal can be closed */\n  @property({ type: Boolean })\n  closable = true;\n\n  /** Whether the modal can be dragged */\n  @property({ type: Boolean })\n  modalDraggable = false;\n\n  /** Whether the modal is resizable */\n  @property({ type: Boolean })\n  resizable = false;\n\n  /** Whether the modal is fullscreen */\n  @property({ type: Boolean })\n  fullscreen = false;\n\n  /** Modal title */\n  @property({ type: String })\n  modalTitle = EMPTY_STRING;\n\n  /** Show close button in header */\n  @property({ type: Boolean, attribute: 'show-close-button' })\n  showCloseButton = true;\n\n  /** Header icon */\n  @property({ type: String })\n  headerIcon = EMPTY_STRING;\n\n  /** Z-index for the modal */\n  @property({ type: Number })\n  zIndex = 1000;\n\n  /** Custom width */\n  @property({ type: String })\n  width = EMPTY_STRING;\n\n  /** Custom height */\n  @property({ type: String })\n  height = EMPTY_STRING;\n\n  /** Dragging state */\n  @state()\n  isDragging = false;\n\n  /** Current X offset for dragging */\n  @property({ type: Number })\n  offsetX = 0;\n\n  /** Current Y offset for dragging */\n  @property({ type: Number })\n  offsetY = 0;\n\n  /** Animation state */\n  @state()\n  private animationState: 'closed' | 'opening' | 'open' | 'closing' = 'closed';\n\n  /** Previous focus element */\n  private previousActiveElement: Element | null = null;\n\n  override requiredComponents = ['nr-icon', 'nr-button'];\n\n  // Controllers\n  private dragController = new ModalDragController(this);\n  private keyboardController = new ModalKeyboardController(this);\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.validateDependencies();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    // Restore focus when modal is destroyed\n    if (this.previousActiveElement instanceof HTMLElement) {\n      this.previousActiveElement.focus();\n    }\n  }\n\n  override willUpdate(changedProperties: PropertyValues) {\n    super.willUpdate(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.handleOpen();\n      } else {\n        this.handleClose();\n      }\n    }\n  }\n\n  private handleOpen() {\n    // Register with modal manager and get z-index\n    const assignedZIndex = ModalManager.openModal(this);\n    this.zIndex = assignedZIndex;\n    \n    // Set animation state to opening\n    this.animationState = 'opening';\n    \n    // Dispatch before open event\n    this.dispatchEvent(new CustomEvent('modal-open', {\n      bubbles: true,\n      detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n    }));\n\n    // Wait for DOM update, then start JavaScript animation\n    this.updateComplete.then(() => {\n      this.startOpenAnimation();\n    });\n  }\n\n  private startOpenAnimation() {\n    const modalElement = this.shadowRoot?.querySelector('.modal') as HTMLElement;\n    const backdropElement = this.shadowRoot?.querySelector('.modal-backdrop') as HTMLElement;\n    \n    if (!modalElement || !backdropElement) return;\n\n    // Get animation keyframes based on animation type\n    const { modalKeyframes} = this.getAnimationKeyframes();\n    \n    // Start animations\n    const modalAnimation = modalElement.animate(modalKeyframes, {\n      duration: 300,\n      easing: 'ease',\n      fill: 'forwards'\n    });\n\n\n    // When animation completes\n    modalAnimation.addEventListener('finish', () => {\n      this.animationState = 'open';\n      \n      // Only focus if this is the top modal\n      if (ModalManager.isTopModal(this)) {\n        this.keyboardController.focusFirstElement();\n      }\n      \n      // Dispatch after open event\n      this.dispatchEvent(new CustomEvent('modal-after-open', {\n        bubbles: true,\n        detail: { modal: this, stackDepth: ModalManager.getStackDepth() }\n      }));\n    });\n  }\n\n  private getAnimationKeyframes() {\n    const backdropKeyframes = [\n      { opacity: 0 },\n      { opacity: 1 }\n    ];\n\n    let modalKeyframes;\n    switch (this.animation) {\n      case 'fade':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'zoom':\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.7)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n        break;\n      case 'slide-up':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      case 'slide-down':\n        modalKeyframes = [\n          { opacity: 0, transform: 'translateY(-20px)' },\n          { opacity: 1, transform: 'translateY(0)' }\n        ];\n        break;\n      default:\n        modalKeyframes = [\n          { opacity: 0, transform: 'scale(0.9)' },\n          { opacity: 1, transform: 'scale(1)' }\n        ];\n    }\n\n    return { modalKeyframes, backdropKeyframes };\n  }\n\n  private handleClose() {\n    this.animationState = 'closing';\n    \n    // Unregister from modal manager\n    ModalManager.closeModal(this);\n    \n    // Reset drag position\n    this.dragController.resetPosition();\n    \n    // Wait for animation to complete\n    setTimeout(() => {\n      this.animationState = 'closed';\n    }, 300);\n  }\n\n  /**\n   * Opens the modal\n   */\n  openModal() {\n    this.open = true;\n  }\n\n  /**\n   * Closes the modal\n   */\n  closeModal() {\n    if (!this.closable) return;\n\n    // Dispatch before close event (cancelable)\n    const beforeCloseEvent = new CustomEvent('modal-before-close', {\n      bubbles: true,\n      cancelable: true,\n      detail: { \n        modal: this,\n        cancel: () => beforeCloseEvent.preventDefault()\n      }\n    });\n\n    const dispatched = this.dispatchEvent(beforeCloseEvent);\n    \n    // Only close if event wasn't cancelled\n    if (dispatched) {\n      this.open = false;\n      \n      // Dispatch close event\n      this.dispatchEvent(new CustomEvent('modal-close', {\n        bubbles: true,\n        detail: { modal: this }\n      }));\n    }\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    // Only allow backdrop close if this is the top modal and backdrop is closable\n    if (this.backdrop === ModalBackdrop.Closable && \n        event.target === event.currentTarget && \n        ModalManager.handleBackdropClick(this)) {\n      this.closeModal();\n    }\n  };\n\n  private getBackdropClasses() {\n    return {\n      'modal-backdrop': true,\n      'modal-backdrop--hidden': !this.open,\n      [`modal-backdrop--position-${this.position}`]: true\n    };\n  }\n\n  private getModalClasses() {\n    return {\n      'modal': true,\n      [`modal--size-${this.size}`]: !this.fullscreen,\n      'modal--fullscreen': this.fullscreen,\n      [`modal--animation-${this.animation}`]: this.animationState === 'opening' || this.animationState === 'open',\n      'modal--dragging': this.isDragging,\n      'modal--resizable': this.resizable\n    };\n  }\n\n  private getModalStyles() {\n    const styles: any = {};\n    \n    if (this.zIndex) {\n      styles['--nuraly-z-modal-backdrop'] = this.zIndex.toString();\n    }\n    \n    if (this.width) {\n      styles.width = this.width;\n    }\n    \n    if (this.height) {\n      styles.height = this.height;\n    }\n    \n    return styles;\n  }\n\n  private renderHeader() {\n    const hasCustomHeader = this.querySelector('[slot=\"header\"]');\n    const hasTitle = this.modalTitle || this.headerIcon;\n    \n    if (!hasCustomHeader && !hasTitle && !this.showCloseButton) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-header ${this.modalDraggable ? 'modal-header--draggable' : ''}\">\n        ${hasCustomHeader ? html`\n          <div class=\"modal-header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n        ` : hasTitle ? html`\n          <div class=\"modal-header-content\">\n            ${this.headerIcon ? html`\n              <nr-icon class=\"modal-header-icon\" name=\"${this.headerIcon}\"></nr-icon>\n            ` : nothing}\n            ${this.modalTitle ? html`\n              <h2 class=\"modal-title\">${this.modalTitle}</h2>\n            ` : nothing}\n          </div>\n        ` : nothing}\n        \n        ${this.showCloseButton ? html`\n          <button \n            class=\"modal-close-button\"\n            @click=${this.closeModal}\n            aria-label=\"Close modal\"\n            type=\"button\">\n            <nr-icon class=\"modal-close-icon\" name=\"close\"></nr-icon>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private renderFooter() {\n    const hasCustomFooter = this.querySelector('[slot=\"footer\"]');\n    \n    if (!hasCustomFooter) {\n      return nothing;\n    }\n\n    return html`\n      <div class=\"modal-footer\">\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  }\n\n   override updated() {\n        this.updateDataTheme();\n    }\n\n   private updateDataTheme() {\n        if (!this.closest('[data-theme]')) {\n            this.setAttribute('data-theme', this.currentTheme);\n        }\n    }\n\n  override render() {\n    if (!this.open && this.animationState === 'closed') {\n      return nothing;\n    }\n\n    return html`\n      <div \n        class=${classMap(this.getBackdropClasses())}\n        @click=${this.handleBackdropClick}\n        style=${styleMap(this.getModalStyles())}>\n        \n        <div \n          class=${classMap(this.getModalClasses())}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=${this.modalTitle ? 'modal-title' : nothing}\n          tabindex=\"-1\">\n          \n          ${this.renderHeader()}\n          \n          <div class=\"modal-body\">\n            <slot></slot>\n          </div>\n          \n          ${this.renderFooter()}\n          \n          ${this.resizable ? html`\n            <div class=\"resize-handle\"></div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"]}

package/modal.style.js

@@ -224,13 +224,13 @@ export const styles = css `
 
   /* Modal footer */
   .modal-footer {
-    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));
+    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));
     border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--nuraly-spacing-03, 0.5rem);
-    min-height: var(--nuraly-modal-footer-height, 64px);
+    min-height: var(--nuraly-modal-footer-height, 48px);
     flex-shrink: 0;
   }
 

package/modal.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: contents;\n    font-family: var(--nuraly-font-family);\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    \n    /* Ensure theme variables are properly inherited */\n    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n    \n    /* Ensure clean state transitions when theme changes */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  /* Modal backdrop */\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n    \n    &.modal-backdrop--hidden {\n      display: none;\n    }\n    \n    &.modal-backdrop--position-top {\n      align-items: flex-start;\n      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n    }\n    \n    &.modal-backdrop--position-bottom {\n      align-items: flex-end;\n      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n    }\n  }\n\n  /* Nested modals support */\n  .modal-backdrop {\n    /* Ensure each modal backdrop has its own stacking context */\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n  }\n\n  /* Nested modal backdrop styling */\n  .modal-backdrop + .modal-backdrop {\n    /* Subsequent modals get slightly darker backdrop */\n    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n  }\n\n  /* Nested modal animation delay to avoid conflicts */\n  .modal-backdrop:not(:first-of-type) {\n    animation-delay: 0.1s;\n  }\n\n  /* Modal container */\n  .modal {\n    position: relative;\n    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n    border-radius: var(--modal-border-radius);\n    box-shadow: var(--nuraly-shadow-modal, \n      0 6px 16px 0 rgba(0, 0, 0, 0.08), \n      0 3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 9px 28px 8px rgba(0, 0, 0, 0.05)\n    );\n    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n  }\n\n\n  /* Modal sizes */\n  .modal--size-small {\n    width: var(--nuraly-modal-width-small, 400px);\n    min-height: var(--nuraly-modal-min-height-small, 200px);\n  }\n\n  .modal--size-medium {\n    width: var(--nuraly-modal-width-medium, 600px);\n    min-height: var(--nuraly-modal-min-height-medium, 300px);\n  }\n\n  .modal--size-large {\n    width: var(--nuraly-modal-width-large, 800px);\n    min-height: var(--nuraly-modal-min-height-large, 400px);\n  }\n\n  .modal--size-xl {\n    width: var(--nuraly-modal-width-xl, 1000px);\n    min-height: var(--nuraly-modal-min-height-xl, 500px);\n  }\n\n  .modal--fullscreen {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n  }\n\n  /* Modal header */\n  .modal-header {\n    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--nuraly-modal-header-height);\n    flex-shrink: 0;\n    \n    &.modal-header--draggable {\n      cursor: move;\n      user-select: none;\n    }\n  }\n\n  .modal-header-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .modal-header-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-header-icon-size, 20px);\n    height: var(--nuraly-modal-header-icon-size, 20px);\n    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n  }\n\n  .modal-title {\n    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n    margin: 0;\n    line-height: var(--nuraly-line-height-02, 1.375);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .modal-close-button {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-close-size, 32px);\n    height: var(--nuraly-modal-close-size, 32px);\n    border: none;\n    background: transparent;\n    border-radius: var(--nuraly-border-radius-sm, 4px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n    transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    \n    &:hover {\n      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n    }\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n    \n    &:active {\n      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n    }\n  }\n\n  .modal-close-icon {\n    width: var(--nuraly-modal-close-icon-size, 16px);\n    height: var(--nuraly-modal-close-icon-size, 16px);\n  }\n\n  /* Carbon theme specific - sharp corners for close button */\n  :host([data-theme=\"carbon\"]) .modal-close-button,\n  :host([data-theme=\"carbon-light\"]) .modal-close-button,\n  :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n    border-radius: 0;\n  }\n\n  /* Modal body */\n  .modal-body {\n    flex: 1;\n    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    overflow-y: auto;\n    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n    line-height: var(--nuraly-line-height-03, 1.5);\n  }\n\n  /* Modal footer */\n  .modal-footer {\n    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    min-height: var(--nuraly-modal-footer-height, 64px);\n    flex-shrink: 0;\n  }\n\n  /* Animation keyframes */\n  @keyframes modalFadeIn {\n    from {\n      opacity: 0;\n      transform: scale(0.9);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalZoomIn {\n    from {\n      opacity: 0;\n      transform: scale(0.7);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes modalSlideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Animation classes */\n  .modal-backdrop--animation-fade {\n    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-fade {\n    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-zoom {\n    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-up {\n    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-down {\n    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  /* Dragging state */\n  .modal--dragging {\n    user-select: none;\n    cursor: move;\n  }\n\n  /* Resizing handles (when resizable) */\n  .modal--resizable {\n    resize: both;\n    overflow: auto;\n  }\n\n  .resize-handle {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    cursor: se-resize;\n    background: linear-gradient(\n      -45deg,\n      transparent 40%,\n      var(--nuraly-color-border, #e0e0e0) 40%,\n      var(--nuraly-color-border, #e0e0e0) 60%,\n      transparent 60%\n    );\n  }\n\n  /* Responsive behavior */\n  @media (max-width: 768px) {\n    .modal-backdrop {\n      padding: var(--nuraly-spacing-02, 0.25rem);\n    }\n    \n    .modal--size-small,\n    .modal--size-medium,\n    .modal--size-large,\n    .modal--size-xl {\n      width: 100%;\n      max-width: none;\n    }\n    \n    .modal-header,\n    .modal-body,\n    .modal-footer {\n      padding-left: var(--nuraly-spacing-04, 0.75rem);\n      padding-right: var(--nuraly-spacing-04, 0.75rem);\n    }\n  }\n\n  /* Dark theme support through CSS custom properties */\n  @media (prefers-color-scheme: dark) {\n    :host(:not([data-theme])) {\n      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n    }\n  }\n`;"]}
+{"version":3,"file":"modal.style.js","sourceRoot":"","sources":["../../../src/components/modal/modal.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuWxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Modal component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-modal component with\n * clean CSS variable usage and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: contents;\n    font-family: var(--nuraly-font-family);\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    background-color: var(--nuraly-color-background);\n    \n    /* Ensure theme variables are properly inherited */\n    --modal-border-radius: var(--nuraly-border-radius-modal, 8px);\n    \n    /* Ensure clean state transitions when theme changes */\n    * {\n      transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    }\n  }\n\n  /* Force re-evaluation of theme-dependent properties on theme change */\n  :host([data-theme]) {\n    color: inherit;\n    background-color: inherit;\n  }\n\n  /* Modal backdrop */\n  .modal-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--nuraly-color-modal-backdrop, rgba(0, 0, 0, 0.45));\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--nuraly-spacing-modal-padding, var(--nuraly-spacing-05, 1rem));\n    backdrop-filter: var(--nuraly-modal-backdrop-filter, none);\n    \n    &.modal-backdrop--hidden {\n      display: none;\n    }\n    \n    &.modal-backdrop--position-top {\n      align-items: flex-start;\n      padding-top: var(--nuraly-spacing-modal-top, var(--nuraly-spacing-07, 2rem));\n    }\n    \n    &.modal-backdrop--position-bottom {\n      align-items: flex-end;\n      padding-bottom: var(--nuraly-spacing-modal-bottom, var(--nuraly-spacing-07, 2rem));\n    }\n  }\n\n  /* Nested modals support */\n  .modal-backdrop {\n    /* Ensure each modal backdrop has its own stacking context */\n    z-index: var(--nuraly-z-modal-backdrop, 1000);\n  }\n\n  /* Nested modal backdrop styling */\n  .modal-backdrop + .modal-backdrop {\n    /* Subsequent modals get slightly darker backdrop */\n    background-color: var(--nuraly-color-modal-backdrop-nested, rgba(0, 0, 0, 0.6));\n  }\n\n  /* Nested modal animation delay to avoid conflicts */\n  .modal-backdrop:not(:first-of-type) {\n    animation-delay: 0.1s;\n  }\n\n  /* Modal container */\n  .modal {\n    position: relative;\n    background-color: var(--nuraly-color-modal-background, var(--nuraly-color-background, #ffffff));\n    border-radius: var(--modal-border-radius);\n    box-shadow: var(--nuraly-shadow-modal, \n      0 6px 16px 0 rgba(0, 0, 0, 0.08), \n      0 3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 9px 28px 8px rgba(0, 0, 0, 0.05)\n    );\n    border: var(--nuraly-border-modal, 1px solid var(--nuraly-color-border, #e0e0e0));\n    max-height: calc(100vh - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    max-width: calc(100vw - var(--nuraly-spacing-modal-margin, var(--nuraly-spacing-07, 2rem)) * 2);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n  }\n\n\n  /* Modal sizes */\n  .modal--size-small {\n    width: var(--nuraly-modal-width-small, 400px);\n    min-height: var(--nuraly-modal-min-height-small, 200px);\n  }\n\n  .modal--size-medium {\n    width: var(--nuraly-modal-width-medium, 600px);\n    min-height: var(--nuraly-modal-min-height-medium, 300px);\n  }\n\n  .modal--size-large {\n    width: var(--nuraly-modal-width-large, 800px);\n    min-height: var(--nuraly-modal-min-height-large, 400px);\n  }\n\n  .modal--size-xl {\n    width: var(--nuraly-modal-width-xl, 1000px);\n    min-height: var(--nuraly-modal-min-height-xl, 500px);\n  }\n\n  .modal--fullscreen {\n    width: 100vw;\n    height: 100vh;\n    max-width: 100vw;\n    max-height: 100vh;\n    border-radius: 0;\n  }\n\n  /* Modal header */\n  .modal-header {\n    padding: var(--nuraly-spacing-modal-header, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    border-bottom: var(--nuraly-border-modal-header, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    min-height: var(--nuraly-modal-header-height);\n    flex-shrink: 0;\n    \n    &.modal-header--draggable {\n      cursor: move;\n      user-select: none;\n    }\n  }\n\n  .modal-header-content {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    flex: 1;\n    min-width: 0;\n  }\n\n  .modal-header-icon {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-header-icon-size, 20px);\n    height: var(--nuraly-modal-header-icon-size, 20px);\n    color: var(--nuraly-color-modal-header-icon, var(--nuraly-color-text-secondary, #525252));\n  }\n\n  .modal-title {\n    font-size: var(--nuraly-font-size-modal-title, var(--nuraly-font-size-04, 1.125rem));\n    font-weight: var(--nuraly-font-weight-modal-title, var(--nuraly-font-weight-medium, 500));\n    color: var(--nuraly-color-modal-title, var(--nuraly-color-text, #161616));\n    margin: 0;\n    line-height: var(--nuraly-line-height-02, 1.375);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .modal-close-button {\n    flex-shrink: 0;\n    width: var(--nuraly-modal-close-size, 32px);\n    height: var(--nuraly-modal-close-size, 32px);\n    border: none;\n    background: transparent;\n    border-radius: var(--nuraly-border-radius-sm, 4px);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--nuraly-color-modal-close-icon, var(--nuraly-color-text-secondary, #525252));\n    transition: all var(--nuraly-transition-fast, 0.15s) ease;\n    \n    &:hover {\n      background-color: var(--nuraly-color-modal-close-hover, var(--nuraly-color-background-hover, #f4f4f4));\n      color: var(--nuraly-color-modal-close-icon-hover, var(--nuraly-color-text, #161616));\n    }\n    \n    &:focus {\n      outline: var(--nuraly-focus-outline, 2px solid var(--nuraly-color-primary, #0f62fe));\n      outline-offset: var(--nuraly-focus-outline-offset, 1px);\n    }\n    \n    &:active {\n      background-color: var(--nuraly-color-modal-close-active, var(--nuraly-color-background-active, #c6c6c6));\n    }\n  }\n\n  .modal-close-icon {\n    width: var(--nuraly-modal-close-icon-size, 16px);\n    height: var(--nuraly-modal-close-icon-size, 16px);\n  }\n\n  /* Carbon theme specific - sharp corners for close button */\n  :host([data-theme=\"carbon\"]) .modal-close-button,\n  :host([data-theme=\"carbon-light\"]) .modal-close-button,\n  :host([data-theme=\"carbon-dark\"]) .modal-close-button {\n    border-radius: 0;\n  }\n\n  /* Modal body */\n  .modal-body {\n    flex: 1;\n    padding: var(--nuraly-spacing-modal-body, var(--nuraly-spacing-05, 1rem) var(--nuraly-spacing-06, 1.5rem));\n    overflow-y: auto;\n    color: var(--nuraly-color-modal-body-text, var(--nuraly-color-text, #161616));\n    line-height: var(--nuraly-line-height-03, 1.5);\n  }\n\n  /* Modal footer */\n  .modal-footer {\n    padding: var(--nuraly-spacing-modal-footer, var(--nuraly-spacing-03, 0.5rem) var(--nuraly-spacing-05, 1rem));\n    border-top: var(--nuraly-border-modal-footer, 1px solid var(--nuraly-color-border, #e0e0e0));\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--nuraly-spacing-03, 0.5rem);\n    min-height: var(--nuraly-modal-footer-height, 48px);\n    flex-shrink: 0;\n  }\n\n  /* Animation keyframes */\n  @keyframes modalFadeIn {\n    from {\n      opacity: 0;\n      transform: scale(0.9);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalZoomIn {\n    from {\n      opacity: 0;\n      transform: scale(0.7);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes modalSlideUp {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes modalSlideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  /* Animation classes */\n  .modal-backdrop--animation-fade {\n    animation: backdropFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-fade {\n    animation: modalFadeIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-zoom {\n    animation: modalZoomIn var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-up {\n    animation: modalSlideUp var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  .modal--animation-slide-down {\n    animation: modalSlideDown var(--nuraly-transition-modal, 0.3s) ease;\n  }\n\n  /* Dragging state */\n  .modal--dragging {\n    user-select: none;\n    cursor: move;\n  }\n\n  /* Resizing handles (when resizable) */\n  .modal--resizable {\n    resize: both;\n    overflow: auto;\n  }\n\n  .resize-handle {\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    width: 20px;\n    height: 20px;\n    cursor: se-resize;\n    background: linear-gradient(\n      -45deg,\n      transparent 40%,\n      var(--nuraly-color-border, #e0e0e0) 40%,\n      var(--nuraly-color-border, #e0e0e0) 60%,\n      transparent 60%\n    );\n  }\n\n  /* Responsive behavior */\n  @media (max-width: 768px) {\n    .modal-backdrop {\n      padding: var(--nuraly-spacing-02, 0.25rem);\n    }\n    \n    .modal--size-small,\n    .modal--size-medium,\n    .modal--size-large,\n    .modal--size-xl {\n      width: 100%;\n      max-width: none;\n    }\n    \n    .modal-header,\n    .modal-body,\n    .modal-footer {\n      padding-left: var(--nuraly-spacing-04, 0.75rem);\n      padding-right: var(--nuraly-spacing-04, 0.75rem);\n    }\n  }\n\n  /* Dark theme support through CSS custom properties */\n  @media (prefers-color-scheme: dark) {\n    :host(:not([data-theme])) {\n      --nuraly-color-modal-backdrop: rgba(0, 0, 0, 0.6);\n    }\n  }\n`;"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/modal",
-    "version": "0.0.4",
+    "version": "0.0.5",
     "description": "",
     "main": "index.js",
     "type": "module",