@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,49 +1,49 @@
-import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property as s,state as n,customElement as i}from"lit/decorators.js";import{repeat as e}from"lit/directives/repeat.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as c}from"@nuralyui/common/mixins";import{BaseComponentController as u}from"@nuralyui/common/controllers";
+import{css as t,html as e,nothing as o,LitElement as s}from"lit";import{property as i,state as r,customElement as n}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";import{classMap as c}from"lit/directives/class-map.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const d=t`
+ */const l=t`
   :host {
     display: block;
     position: fixed;
-    z-index: var(--nuraly-z-index-toast);
+    z-index: 1200;
     pointer-events: none;
     
     /* Force CSS custom property inheritance to ensure theme switching works properly */
-    color: var(--nuraly-color-text);
-    font-family: var(--nuraly-font-family);
+    color: #161616;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   /* Container positioning */
   :host([position="top-right"]) {
-    top: var(--nuraly-spacing-4);
-    right: var(--nuraly-spacing-4);
+    top: 1rem;
+    right: 1rem;
   }
 
   :host([position="top-left"]) {
-    top: var(--nuraly-spacing-4);
-    left: var(--nuraly-spacing-4);
+    top: 1rem;
+    left: 1rem;
   }
 
   :host([position="top-center"]) {
-    top: var(--nuraly-spacing-4);
+    top: 1rem;
     left: 50%;
     transform: translateX(-50%);
   }
 
   :host([position="bottom-right"]) {
-    bottom: var(--nuraly-spacing-4);
-    right: var(--nuraly-spacing-4);
+    bottom: 1rem;
+    right: 1rem;
   }
 
   :host([position="bottom-left"]) {
-    bottom: var(--nuraly-spacing-4);
-    left: var(--nuraly-spacing-4);
+    bottom: 1rem;
+    left: 1rem;
   }
 
   :host([position="bottom-center"]) {
-    bottom: var(--nuraly-spacing-4);
+    bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
   }
@@ -51,61 +51,61 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
   .toast-container {
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-toast-stack-gap);
-    min-width: var(--nuraly-toast-min-width);
-    max-width: var(--nuraly-toast-max-width);
+    gap: 0.5rem;
+    min-width: 280px;
+    max-width: 480px;
   }
 
   .toast {
     display: flex;
     align-items: start;
-    gap: var(--nuraly-toast-gap);
-    padding: var(--nuraly-toast-padding-vertical) var(--nuraly-toast-padding-horizontal);
-    background-color: var(--nuraly-color-background);
-    color: var(--nuraly-color-text);
-    border: 1px solid var(--nuraly-color-border);
-    border-radius: var(--nuraly-border-radius-toast);
-    box-shadow: var(--nuraly-shadow-toast);
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background-color: #ffffff;
+    color: #161616;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
     pointer-events: auto;
     cursor: default;
-    transition: all var(--nuraly-transition-fast) ease;
+    transition: all 0.15s ease;
     position: relative;
     overflow: hidden;
   }
 
   .toast:hover {
-    box-shadow: var(--nuraly-shadow-toast-hover);
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
   }
 
   /* Toast type variants */
   .toast--default {
-    background-color: var(--nuraly-toast-default-background);
-    border-color: var(--nuraly-toast-default-border);
-    color: var(--nuraly-toast-default-text);
+    background-color: #ffffff;
+    border-color: #e0e0e0;
+    color: #161616;
   }
 
   .toast--success {
-    background-color: var(--nuraly-toast-success-background);
-    border-color: var(--nuraly-toast-success-border);
-    color: var(--nuraly-toast-success-text);
+    background-color: #defbe6;
+    border-color: #198038;
+    color: #0e6027;
   }
 
   .toast--error {
-    background-color: var(--nuraly-toast-error-background);
-    border-color: var(--nuraly-toast-error-border);
-    color: var(--nuraly-toast-error-text);
+    background-color: #fff1f1;
+    border-color: #dc2626;
+    color: #a61a1a;
   }
 
   .toast--warning {
-    background-color: var(--nuraly-toast-warning-background);
-    border-color: var(--nuraly-toast-warning-border);
-    color: var(--nuraly-toast-warning-text);
+    background-color: #fdf4d3;
+    border-color: #f1c21b;
+    color: #75490a;
   }
 
   .toast--info {
-    background-color: var(--nuraly-toast-info-background);
-    border-color: var(--nuraly-toast-info-border);
-    color: var(--nuraly-toast-info-text);
+    background-color: #edf5ff;
+    border-color: #0043ce;
+    color: #003087;
   }
 
   /* Toast icon */
@@ -126,12 +126,12 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-spacing-2);
+    gap: 0.5rem;
     min-width: 0;
   }
 
   .toast__text {
-    font-size: var(--nuraly-font-size-sm);
+    font-size: 0.875rem;
     line-height: 1.5;
     word-break: break-word;
   }
@@ -140,7 +140,7 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
   .toast__button {
     display: flex;
     align-items: center;
-    margin-top: var(--nuraly-spacing-1);
+    margin-top: 0.25rem;
   }
 
   .toast__button nr-button {
@@ -150,8 +150,8 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
   /* Close button */
   .toast__close {
     flex-shrink: 0;
-    min-width: var(--nuraly-toast-close-size);
-    min-height: var(--nuraly-toast-close-size);
+    min-width: 1.5rem;
+    min-height: 1.5rem;
     padding: 0;
     border: none;
     background: transparent;
@@ -160,19 +160,19 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--nuraly-border-radius-small);
-    transition: all var(--nuraly-transition-fast) ease;
-    opacity: var(--nuraly-toast-close-opacity);
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    opacity: 0.6;
   }
 
   .toast__close:hover {
-    opacity: var(--nuraly-toast-close-opacity-hover);
-    background-color: var(--nuraly-toast-close-hover-background);
+    opacity: 1;
+    background-color: rgba(0,0,0,0.08);
   }
 
   .toast__close:focus {
-    outline: var(--nuraly-focus-outline);
-    outline-offset: var(--nuraly-focus-outline-offset);
+    outline: 2px solid #7c3aed;
+    outline-offset: 2px;
   }
 
   .toast__close nr-icon {
@@ -282,38 +282,38 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
 
   /* Animation classes */
   .toast--fade-in {
-    animation: toast-fade-in var(--nuraly-transition-toast) ease;
+    animation: toast-fade-in 0.3s ease;
   }
 
   .toast--fade-out {
-    animation: toast-fade-out var(--nuraly-transition-toast) ease;
+    animation: toast-fade-out 0.3s ease;
   }
 
   .toast--slide-in {
-    animation: toast-slide-in-right var(--nuraly-transition-toast) ease;
+    animation: toast-slide-in-right 0.3s ease;
   }
 
   .toast--slide-out {
-    animation: toast-slide-out-right var(--nuraly-transition-toast) ease;
+    animation: toast-slide-out-right 0.3s ease;
   }
 
   .toast--bounce-in {
-    animation: toast-bounce-in var(--nuraly-transition-toast) ease;
+    animation: toast-bounce-in 0.3s ease;
   }
 
   .toast--bounce-out {
-    animation: toast-bounce-out var(--nuraly-transition-toast) ease;
+    animation: toast-bounce-out 0.3s ease;
   }
 
   /* Position-specific slide animations */
   :host([position="top-left"]) .toast--slide-in,
   :host([position="bottom-left"]) .toast--slide-in {
-    animation: toast-slide-in-left var(--nuraly-transition-toast) ease;
+    animation: toast-slide-in-left 0.3s ease;
   }
 
   :host([position="top-left"]) .toast--slide-out,
   :host([position="bottom-left"]) .toast--slide-out {
-    animation: toast-slide-out-left var(--nuraly-transition-toast) ease;
+    animation: toast-slide-out-left 0.3s ease;
   }
 
   /* Progress bar for duration indicator */
@@ -321,9 +321,9 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
     position: absolute;
     bottom: 0;
     left: 0;
-    height: var(--nuraly-toast-progress-height);
+    height: 3px;
     background-color: currentColor;
-    opacity: var(--nuraly-toast-progress-opacity);
+    opacity: 0.4;
     transition: width linear;
   }
 `
@@ -331,63 +331,79 @@ import{css as t,LitElement as o,html as a,nothing as r}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */,f="",m=5e3,y=5;
+ */,d=t=>class extends t{constructor(){super(...arguments),this.handleSystemThemeChange=()=>{this.closest("[data-theme]")||document.documentElement.hasAttribute("data-theme")||this.requestUpdate()}}connectedCallback(){super.connectedCallback(),this.setupThemeObserver(),this.setupDesignSystemObserver(),this.setupSystemThemeListener()}disconnectedCallback(){var t,e,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)},u=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 s=new Error(`Required component "${o}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(o,s):console.error(s.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)}},m=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var o;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(o=this.tagName)||void 0===o?void 0:o.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}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 s=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,s)}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}},f=new Set,p=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var p=function(t,o,a,r){for(var s,n=arguments.length,i=n<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,a):r,e=t.length-1;e>=0;e--)(s=t[e])&&(i=(n<3?s(i):n>3?s(o,a,i):s(o,a))||i);return n>3&&i&&Object.defineProperty(o,a,i),i};let h=class extends(c(o)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button"],this.position="top-right",this.maxToasts=5,this.defaultDuration=5e3,this.animation="fade",this.stack=!0,this.autoDismiss=!0,this.toasts=[],this.timeouts=new Map}show(t){var o,a,r;const s="string"==typeof t?{text:t}:t,n={id:this.generateId(),timestamp:Date.now(),text:s.text,content:s.content,type:s.type||"default",duration:null!==(o=s.duration)&&void 0!==o?o:this.defaultDuration,autoDismiss:null!==(a=s.autoDismiss)&&void 0!==a?a:this.autoDismiss,closable:null===(r=s.closable)||void 0===r||r,icon:s.icon||this.getDefaultIcon(s.type),customClass:s.customClass,button:s.button,onClose:s.onClose,onClick:s.onClick};if(this.stack?this.toasts.length>=this.maxToasts&&this.removeToast(this.toasts[0].id):this.clearAll(),this.toasts=[...this.toasts,n],this.emitToastEvent("nr-toast-show",n,"show"),n.autoDismiss&&n.duration&&n.duration>0){const t=window.setTimeout(()=>{this.removeToast(n.id)},n.duration);this.timeouts.set(n.id,t)}return n.id}success(t,o){return this.show({text:t,type:"success",duration:o})}error(t,o){return this.show({text:t,type:"error",duration:o})}warning(t,o){return this.show({text:t,type:"warning",duration:o})}info(t,o){return this.show({text:t,type:"info",duration:o})}removeToast(t){const o=this.toasts.find(o=>o.id===t);if(!o)return;o.removing=!0,this.requestUpdate();const a=this.timeouts.get(t);a&&(clearTimeout(a),this.timeouts.delete(t)),setTimeout(()=>{var a;this.toasts=this.toasts.filter(o=>o.id!==t),this.emitToastEvent("nr-toast-close",o,"close"),null===(a=o.onClose)||void 0===a||a.call(o)},300)}clearAll(){this.toasts.forEach(t=>{const o=this.timeouts.get(t.id);o&&clearTimeout(o)}),this.timeouts.clear(),this.toasts=[]}handleToastClick(t){var o;this.emitToastEvent("nr-toast-click",t,"click"),null===(o=t.onClick)||void 0===o||o.call(t)}handleCloseClick(t,o){t.stopPropagation(),this.removeToast(o.id)}getDefaultIcon(t){switch(t){case"success":return"check-circle";case"error":return"x-circle";case"warning":return"alert-triangle";case"info":return"info";default:return""}}generateId(){return`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}getAnimationClass(t){const o=t.removing?"out":"in";return`toast--${this.animation}-${o}`}emitToastEvent(t,o,a){this.dispatchEvent(new CustomEvent(t,{detail:{toast:o,action:a},bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.clearAll()}render(){return a`
+const b=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),o=t.styles;if(o){const t=v(o);t&&function(t,e,o){var s;if(!p.has(t)){const o=new CSSStyleSheet;o.replaceSync(e),p.set(t,o)}const i=p.get(t),r=`doc:${t}`;if(f.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,i],f.add(r)),o){let e=o;for(;e;){const o=e.getRootNode();if(!(o instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=o.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;f.has(r)||(o.adoptedStyleSheets=[...o.adoptedStyleSheets,i],f.add(r)),e=o.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function v(t){return Array.isArray(t)?t.map(t=>v(t)).filter(Boolean).join("\n"):t&&"string"==typeof t.cssText?t.cssText:"string"==typeof t?t:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const g="",y=5e3,w=5;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var x=function(t,e,o,s){for(var i,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s,a=t.length-1;a>=0;a--)(i=t[a])&&(n=(r<3?i(n):r>3?i(e,o,n):i(e,o))||n);return r>3&&n&&Object.defineProperty(e,o,n),n};let k=class extends((t=>u(d(m(b(t)))))(s)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button"],this.position="top-right",this.maxToasts=5,this.defaultDuration=5e3,this.animation="fade",this.stack=!0,this.autoDismiss=!0,this.toasts=[],this.timeouts=new Map}show(t){var e,o,s;const i="string"==typeof t?{text:t}:t,r={id:this.generateId(),timestamp:Date.now(),text:i.text,content:i.content,type:i.type||"default",duration:null!==(e=i.duration)&&void 0!==e?e:this.defaultDuration,autoDismiss:null!==(o=i.autoDismiss)&&void 0!==o?o:this.autoDismiss,closable:null===(s=i.closable)||void 0===s||s,icon:i.icon||this.getDefaultIcon(i.type),customClass:i.customClass,button:i.button,onClose:i.onClose,onClick:i.onClick};if(this.stack?this.toasts.length>=this.maxToasts&&this.removeToast(this.toasts[0].id):this.clearAll(),this.toasts=[...this.toasts,r],this.emitToastEvent("nr-toast-show",r,"show"),r.autoDismiss&&r.duration&&r.duration>0){const t=window.setTimeout(()=>{this.removeToast(r.id)},r.duration);this.timeouts.set(r.id,t)}return r.id}success(t,e){return this.show({text:t,type:"success",duration:e})}error(t,e){return this.show({text:t,type:"error",duration:e})}warning(t,e){return this.show({text:t,type:"warning",duration:e})}info(t,e){return this.show({text:t,type:"info",duration:e})}removeToast(t){const e=this.toasts.find(e=>e.id===t);if(!e)return;e.removing=!0,this.requestUpdate();const o=this.timeouts.get(t);o&&(clearTimeout(o),this.timeouts.delete(t)),setTimeout(()=>{var o;this.toasts=this.toasts.filter(e=>e.id!==t),this.emitToastEvent("nr-toast-close",e,"close"),null===(o=e.onClose)||void 0===o||o.call(e)},300)}clearAll(){this.toasts.forEach(t=>{const e=this.timeouts.get(t.id);e&&clearTimeout(e)}),this.timeouts.clear(),this.toasts=[]}handleToastClick(t){var e;this.emitToastEvent("nr-toast-click",t,"click"),null===(e=t.onClick)||void 0===e||e.call(t)}handleCloseClick(t,e){t.stopPropagation(),this.removeToast(e.id)}getDefaultIcon(t){switch(t){case"success":return"check-circle";case"error":return"x-circle";case"warning":return"alert-triangle";case"info":return"info";default:return""}}generateId(){return`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}getAnimationClass(t){const e=t.removing?"out":"in";return`toast--${this.animation}-${e}`}emitToastEvent(t,e,o){this.dispatchEvent(new CustomEvent(t,{detail:{toast:e,action:o},bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.clearAll()}render(){return e`
       <div class="toast-container">
-        ${e(this.toasts,t=>t.id,t=>this.renderToast(t))}
+        ${a(this.toasts,t=>t.id,t=>this.renderToast(t))}
       </div>
-    `}renderToast(t){const o={toast:!0,[`toast--${t.type}`]:!0,[this.getAnimationClass(t)]:!0,[t.customClass||""]:!!t.customClass};return a`
+    `}renderToast(t){const s={toast:!0,[`toast--${t.type}`]:!0,[this.getAnimationClass(t)]:!0,[t.customClass||""]:!!t.customClass};return e`
       <div
-        class=${l(o)}
+        class=${c(s)}
         @click=${()=>this.handleToastClick(t)}
         role="alert"
         aria-live="polite"
       >
-        ${t.icon?a`
+        ${t.icon?e`
           <div class="toast__icon">
             <nr-icon name=${t.icon} size="medium"></nr-icon>
           </div>
-        `:r}
+        `:o}
         
         <div class="toast__content">
-          ${t.content?t.content:a`
+          ${t.content?t.content:e`
               <div class="toast__text">${t.text}</div>
-              ${t.button?this.renderButton(t.button):r}
+              ${t.button?this.renderButton(t.button):o}
             `}
         </div>
         
-        ${t.closable?a`
+        ${t.closable?e`
           <button
             class="toast__close"
-            @click=${o=>this.handleCloseClick(o,t)}
+            @click=${e=>this.handleCloseClick(e,t)}
             aria-label="Close notification"
             type="button"
           >
             <nr-icon name="x" size="small"></nr-icon>
           </button>
-        `:r}
+        `:o}
       </div>
-    `}renderButton(t){return a`
+    `}renderButton(t){return e`
       <div class="toast__button">
         <nr-button
           type=${t.type||"default"}
           size=${t.size||"small"}
           ?disabled=${t.disabled||!1}
-          @click=${o=>{o.stopPropagation(),t.onClick(o)}}
+          @click=${e=>{e.stopPropagation(),t.onClick(e)}}
         >
-          ${t.icon?a`<nr-icon slot="icon-left" name=${t.icon}></nr-icon>`:r}
+          ${t.icon?e`<nr-icon slot="icon-left" name=${t.icon}></nr-icon>`:o}
           ${t.label}
         </nr-button>
       </div>
-    `}};h.styles=d,p([s({type:String,reflect:!0})],h.prototype,"position",void 0),p([s({type:Number})],h.prototype,"maxToasts",void 0),p([s({type:Number})],h.prototype,"defaultDuration",void 0),p([s({type:String})],h.prototype,"animation",void 0),p([s({type:Boolean})],h.prototype,"stack",void 0),p([s({type:Boolean})],h.prototype,"autoDismiss",void 0),p([n()],h.prototype,"toasts",void 0),h=p([i("nr-toast")],h);
+    `}};k.useShadowDom=!0,k.styles=l,x([i({type:String,reflect:!0})],k.prototype,"position",void 0),x([i({type:Number})],k.prototype,"maxToasts",void 0),x([i({type:Number})],k.prototype,"defaultDuration",void 0),x([i({type:String})],k.prototype,"animation",void 0),x([i({type:Boolean})],k.prototype,"stack",void 0),x([i({type:Boolean})],k.prototype,"autoDismiss",void 0),x([r()],k.prototype,"toasts",void 0),k=x([n("nr-toast")],k);
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-class v extends u{}export{v as BaseToastController,y as DEFAULT_MAX_TOASTS,m as DEFAULT_TOAST_DURATION,f as EMPTY_STRING,h as NrToastElement};
+class ${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 s=(...s)=>{void 0!==o&&clearTimeout(o),o=setTimeout(()=>{o=void 0,t.apply(this,s)},e)};return s.cancel=()=>{void 0!==o&&(clearTimeout(o),o=void 0)},s}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class _ extends ${}export{_ as BaseToastController,w as DEFAULT_MAX_TOASTS,y as DEFAULT_TOAST_DURATION,g as EMPTY_STRING,k as NrToastElement};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { ToastPosition, ToastAnimation, ToastConfig } from './toast.types.js';
-declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * Toast notification component for displaying temporary messages.
  *
@@ -71,6 +71,7 @@ declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @cssproperty --nuraly-toast-info-background - Info toast background
  */
 export declare class NrToastElement extends NrToastElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     /** Position of toast container on screen */

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

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