@nuraly/lumenui 0.1.0 → 0.2.2

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

@@ -5,7 +5,7 @@
  */
 import { LitElement, nothing } from 'lit';
 import { AlertType } from './alert.types.js';
-declare const NrAlertElement_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 NrAlertElement_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;
 /**
  * Alert component for displaying important messages.
  *
@@ -50,13 +50,16 @@ declare const NrAlertElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @slot icon - Custom icon slot
  * @slot action - Custom action buttons or links
  *
- * @cssproperty --nuraly-color-success - Success color
- * @cssproperty --nuraly-color-info - Info color
- * @cssproperty --nuraly-color-warning - Warning color
- * @cssproperty --nuraly-color-error - Error color
+ * @csspart alert - The root alert container element
+ * @csspart icon - The icon wrapper div (visible when show-icon is true)
+ * @csspart content - The content area holding message, description, and slots
+ * @csspart message - The message text element
+ * @csspart description - The description text element
+ * @csspart close - The close button (visible when closable is true)
  */
 export declare class NrAlertElement extends NrAlertElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     /** Alert message text */
     message: string;

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

@@ -59,10 +59,12 @@ import { EMPTY_STRING } from './alert.types.js';
  * @slot icon - Custom icon slot
  * @slot action - Custom action buttons or links
  *
- * @cssproperty --nuraly-color-success - Success color
- * @cssproperty --nuraly-color-info - Info color
- * @cssproperty --nuraly-color-warning - Warning color
- * @cssproperty --nuraly-color-error - Error color
+ * @csspart alert - The root alert container element
+ * @csspart icon - The icon wrapper div (visible when show-icon is true)
+ * @csspart content - The content area holding message, description, and slots
+ * @csspart message - The message text element
+ * @csspart description - The description text element
+ * @csspart close - The close button (visible when closable is true)
  */
 let NrAlertElement = class NrAlertElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -150,34 +152,35 @@ let NrAlertElement = class NrAlertElement extends NuralyUIBaseMixin(LitElement)
             'alert--closing': this.closing,
         };
         return html `
-      <div class=${classMap(classes)} role="alert">
+      <div part="alert" class=${classMap(classes)} role="alert">
         ${this.showIcon ? html `
-          <div class="alert__icon">
-            <slot name="icon">
-              <nr-icon 
-                name=${this.getDefaultIcon()} 
-                size=${this.hasDescription() ? 'large' : 'small'}
-              ></nr-icon>
-            </slot>
+          <div part="icon" class="alert__icon">
+            ${this.querySelector('[slot="icon"]') !== null
+            ? html `<slot name="icon"></slot>`
+            : html `<nr-icon
+                  name=${this.getDefaultIcon()}
+                  size=${this.hasDescription() ? 'large' : 'small'}
+                ></nr-icon>`}
           </div>
         ` : nothing}
-        
-        <div class="alert__content">
+
+        <div part="content" class="alert__content">
           ${this.message ? html `
-            <div class="alert__message">${this.message}</div>
+            <div part="message" class="alert__message">${this.message}</div>
           ` : nothing}
-          
+
           ${this.description ? html `
-            <div class="alert__description">${this.description}</div>
+            <div part="description" class="alert__description">${this.description}</div>
           ` : nothing}
-          
+
           <slot></slot>
-          
+
           <slot name="action"></slot>
         </div>
-        
+
         ${this.closable ? html `
           <button
+            part="close"
             class="alert__close"
             @click=${this.handleCloseClick}
             aria-label="Close alert"
@@ -191,6 +194,7 @@ let NrAlertElement = class NrAlertElement extends NuralyUIBaseMixin(LitElement)
     }
 };
 NrAlertElement.styles = styles;
+NrAlertElement.useShadowDom = true;
 __decorate([
     property({ type: String })
 ], NrAlertElement.prototype, "message", void 0);

package/dist/src/components/alert/alert.style.d.ts

@@ -3,12 +3,5 @@
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-/**
- * Alert component styles for the Hybrid UI Library
- * Using shared CSS variables from /src/shared/themes/
- *
- * This file contains all the styling for the nr-alert component with
- * clean CSS variable usage without local fallbacks and proper theme switching support.
- */
 export declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=alert.style.d.ts.map

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

@@ -4,19 +4,12 @@
  * SPDX-License-Identifier: MIT
  */
 import { css } from 'lit';
-/**
- * Alert component styles for the Hybrid UI Library
- * Using shared CSS variables from /src/shared/themes/
- *
- * This file contains all the styling for the nr-alert component with
- * clean CSS variable usage without local fallbacks and proper theme switching support.
- */
 export const styles = css `
   :host {
     display: block;
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-font-size-base);
-    line-height: var(--nuraly-line-height-base);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
   }
 
   :host([hidden]) {
@@ -27,11 +20,11 @@ export const styles = css `
     position: relative;
     display: flex;
     align-items: flex-start;
-    gap: var(--nuraly-alert-gap);
-    padding: var(--nuraly-alert-padding);
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
     border: 1px solid transparent;
-    border-radius: var(--nuraly-alert-border-radius);
-    transition: var(--nuraly-alert-transition);
+    border-radius: 4px;
+    transition: all 0.3s ease;
   }
 
   .alert--banner {
@@ -40,55 +33,42 @@ export const styles = css `
     border-right: none;
   }
 
-  /* Alert type variants - Success */
+  /* Success */
   .alert--success {
-    background-color: var(--nuraly-color-success-light, #f6ffed);
-    border-color: var(--nuraly-color-success, #52c41a);
-    color: var(--nuraly-color-success-dark, #389e0d);
-  }
-
-  .alert--success .alert__icon {
-    color: var(--nuraly-color-success, #52c41a);
+    background-color: #f6ffed;
+    border-color: #52c41a;
+    color: #389e0d;
   }
+  .alert--success .alert__icon { color: #52c41a; }
 
-  /* Alert type variants - Info */
+  /* Info */
   .alert--info {
-    background-color: var(--nuraly-color-info-light, #e6f7ff);
-    border-color: var(--nuraly-color-info, #1890ff);
-    color: var(--nuraly-color-info-dark, #096dd9);
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #096dd9;
   }
+  .alert--info .alert__icon { color: #1890ff; }
 
-  .alert--info .alert__icon {
-    color: var(--nuraly-color-info, #1890ff);
-  }
-
-  /* Alert type variants - Warning */
+  /* Warning */
   .alert--warning {
-    background-color: var(--nuraly-color-warning-light, #fffbe6);
-    border-color: var(--nuraly-color-warning, #faad14);
-    color: var(--nuraly-color-warning-dark, #d48806);
-  }
-
-  .alert--warning .alert__icon {
-    color: var(--nuraly-color-warning, #faad14);
+    background-color: #fffbe6;
+    border-color: #faad14;
+    color: #d48806;
   }
+  .alert--warning .alert__icon { color: #faad14; }
 
-  /* Alert type variants - Error */
+  /* Error */
   .alert--error {
-    background-color: var(--nuraly-color-error-light, #fff2f0);
-    border-color: var(--nuraly-color-error, #ff4d4f);
-    color: var(--nuraly-color-error-dark, #cf1322);
+    background-color: #fff2f0;
+    border-color: #ff4d4f;
+    color: #cf1322;
   }
+  .alert--error .alert__icon { color: #ff4d4f; }
 
-  .alert--error .alert__icon {
-    color: var(--nuraly-color-error, #ff4d4f);
-  }
-
-  /* Alert with description */
+  /* With description */
   .alert--with-description {
-    padding: var(--nuraly-alert-padding-with-description);
+    padding: 0.75rem 1rem;
   }
-
   .alert--with-description .alert__icon {
     font-size: 1.5rem;
   }
@@ -108,20 +88,20 @@ export const styles = css `
   }
 
   .alert__message {
-    font-weight: var(--nuraly-font-weight-medium, 500);
+    font-weight: 500;
     margin: 0;
-    line-height: var(--nuraly-line-height-base);
+    line-height: 1.5;
   }
 
   .alert--with-description .alert__message {
-    font-size: var(--nuraly-font-size-lg, 1.125rem);
-    margin-bottom: var(--nuraly-spacing-1);
+    font-size: 1.125rem;
+    margin-bottom: 0.25rem;
   }
 
   .alert__description {
-    margin: var(--nuraly-spacing-1) 0 0;
-    font-size: var(--nuraly-font-size-sm, 0.875rem);
-    line-height: var(--nuraly-line-height-relaxed, 1.6);
+    margin: 0.25rem 0 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
     opacity: 0.85;
   }
 
@@ -137,55 +117,33 @@ export const styles = css `
     justify-content: center;
     color: currentColor;
     opacity: 0.6;
-    transition: opacity var(--nuraly-transition-fast) ease;
+    transition: opacity 0.15s ease;
     line-height: 1;
   }
 
-  .alert__close:hover {
-    opacity: 1;
-  }
-
-  .alert__close:focus {
-    outline: none;
-    opacity: 1;
-  }
-
+  .alert__close:hover { opacity: 1; }
+  .alert__close:focus { outline: none; opacity: 1; }
   .alert__close:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 2px;
-    border-radius: var(--nuraly-border-radius-sm, 2px);
+    border-radius: 2px;
   }
 
-  /* Animation for closing */
-  @keyframes alertFadeOut {
-    from {
-      opacity: 1;
-      max-height: 200px;
-    }
-    to {
-      opacity: 0;
-      max-height: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
+  /* Closing animation */
+  @keyframes nr-alertFadeOut {
+    from { opacity: 1; max-height: 200px; }
+    to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
   }
 
   .alert--closing {
-    animation: alertFadeOut 0.3s ease forwards;
+    animation: nr-alertFadeOut 0.3s ease forwards;
     overflow: hidden;
   }
 
-  /* Responsive adjustments */
+  /* Responsive */
   @media (max-width: 768px) {
-    .alert {
-      padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);
-    }
-
-    .alert--with-description {
-      padding: var(--nuraly-spacing-3) var(--nuraly-spacing-4);
-    }
+    .alert { padding: 0.5rem 0.75rem; }
+    .alert--with-description { padding: 0.75rem 1rem; }
   }
 `;
 //# sourceMappingURL=alert.style.js.map

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

@@ -1,14 +1,14 @@
-import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property as i,state as o,customElement as n}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";
+import{css as e,nothing as t,html as i,LitElement as r}from"lit";import{property as s,state as o,customElement as n}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const c=r`
+ */const l=e`
   :host {
     display: block;
-    font-family: var(--nuraly-font-family);
-    font-size: var(--nuraly-font-size-base);
-    line-height: var(--nuraly-line-height-base);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
   }
 
   :host([hidden]) {
@@ -19,11 +19,11 @@ import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property
     position: relative;
     display: flex;
     align-items: flex-start;
-    gap: var(--nuraly-alert-gap);
-    padding: var(--nuraly-alert-padding);
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
     border: 1px solid transparent;
-    border-radius: var(--nuraly-alert-border-radius);
-    transition: var(--nuraly-alert-transition);
+    border-radius: 4px;
+    transition: all 0.3s ease;
   }
 
   .alert--banner {
@@ -32,55 +32,42 @@ import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property
     border-right: none;
   }
 
-  /* Alert type variants - Success */
+  /* Success */
   .alert--success {
-    background-color: var(--nuraly-color-success-light, #f6ffed);
-    border-color: var(--nuraly-color-success, #52c41a);
-    color: var(--nuraly-color-success-dark, #389e0d);
+    background-color: #f6ffed;
+    border-color: #52c41a;
+    color: #389e0d;
   }
+  .alert--success .alert__icon { color: #52c41a; }
 
-  .alert--success .alert__icon {
-    color: var(--nuraly-color-success, #52c41a);
-  }
-
-  /* Alert type variants - Info */
+  /* Info */
   .alert--info {
-    background-color: var(--nuraly-color-info-light, #e6f7ff);
-    border-color: var(--nuraly-color-info, #1890ff);
-    color: var(--nuraly-color-info-dark, #096dd9);
-  }
-
-  .alert--info .alert__icon {
-    color: var(--nuraly-color-info, #1890ff);
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+    color: #096dd9;
   }
+  .alert--info .alert__icon { color: #1890ff; }
 
-  /* Alert type variants - Warning */
+  /* Warning */
   .alert--warning {
-    background-color: var(--nuraly-color-warning-light, #fffbe6);
-    border-color: var(--nuraly-color-warning, #faad14);
-    color: var(--nuraly-color-warning-dark, #d48806);
+    background-color: #fffbe6;
+    border-color: #faad14;
+    color: #d48806;
   }
+  .alert--warning .alert__icon { color: #faad14; }
 
-  .alert--warning .alert__icon {
-    color: var(--nuraly-color-warning, #faad14);
-  }
-
-  /* Alert type variants - Error */
+  /* Error */
   .alert--error {
-    background-color: var(--nuraly-color-error-light, #fff2f0);
-    border-color: var(--nuraly-color-error, #ff4d4f);
-    color: var(--nuraly-color-error-dark, #cf1322);
-  }
-
-  .alert--error .alert__icon {
-    color: var(--nuraly-color-error, #ff4d4f);
+    background-color: #fff2f0;
+    border-color: #ff4d4f;
+    color: #cf1322;
   }
+  .alert--error .alert__icon { color: #ff4d4f; }
 
-  /* Alert with description */
+  /* With description */
   .alert--with-description {
-    padding: var(--nuraly-alert-padding-with-description);
+    padding: 0.75rem 1rem;
   }
-
   .alert--with-description .alert__icon {
     font-size: 1.5rem;
   }
@@ -100,20 +87,20 @@ import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property
   }
 
   .alert__message {
-    font-weight: var(--nuraly-font-weight-medium, 500);
+    font-weight: 500;
     margin: 0;
-    line-height: var(--nuraly-line-height-base);
+    line-height: 1.5;
   }
 
   .alert--with-description .alert__message {
-    font-size: var(--nuraly-font-size-lg, 1.125rem);
-    margin-bottom: var(--nuraly-spacing-1);
+    font-size: 1.125rem;
+    margin-bottom: 0.25rem;
   }
 
   .alert__description {
-    margin: var(--nuraly-spacing-1) 0 0;
-    font-size: var(--nuraly-font-size-sm, 0.875rem);
-    line-height: var(--nuraly-line-height-relaxed, 1.6);
+    margin: 0.25rem 0 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
     opacity: 0.85;
   }
 
@@ -129,96 +116,83 @@ import{css as r,LitElement as e,nothing as t,html as a}from"lit";import{property
     justify-content: center;
     color: currentColor;
     opacity: 0.6;
-    transition: opacity var(--nuraly-transition-fast) ease;
+    transition: opacity 0.15s ease;
     line-height: 1;
   }
 
-  .alert__close:hover {
-    opacity: 1;
-  }
-
-  .alert__close:focus {
-    outline: none;
-    opacity: 1;
-  }
-
+  .alert__close:hover { opacity: 1; }
+  .alert__close:focus { outline: none; opacity: 1; }
   .alert__close:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 2px;
-    border-radius: var(--nuraly-border-radius-sm, 2px);
+    border-radius: 2px;
   }
 
-  /* Animation for closing */
-  @keyframes alertFadeOut {
-    from {
-      opacity: 1;
-      max-height: 200px;
-    }
-    to {
-      opacity: 0;
-      max-height: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      margin-top: 0;
-      margin-bottom: 0;
-    }
+  /* Closing animation */
+  @keyframes nr-alertFadeOut {
+    from { opacity: 1; max-height: 200px; }
+    to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
   }
 
   .alert--closing {
-    animation: alertFadeOut 0.3s ease forwards;
+    animation: nr-alertFadeOut 0.3s ease forwards;
     overflow: hidden;
   }
 
-  /* Responsive adjustments */
+  /* Responsive */
   @media (max-width: 768px) {
-    .alert {
-      padding: var(--nuraly-spacing-2) var(--nuraly-spacing-3);
-    }
-
-    .alert--with-description {
-      padding: var(--nuraly-spacing-3) var(--nuraly-spacing-4);
-    }
+    .alert { padding: 0.5rem 0.75rem; }
+    .alert--with-description { padding: 0.75rem 1rem; }
   }
 `
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */,d="";
+ */,c=e=>class extends e{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 e,t,i;super.disconnectedCallback(),null===(e=this.themeObserver)||void 0===e||e.disconnect(),null===(t=this.designSystemObserver)||void 0===t||t.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var e,t;const i=(null===(e=this.closest("[data-theme]"))||void 0===e?void 0:e.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(t=window.matchMedia)||void 0===t?void 0:t.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var e;const t=(null===(e=this.closest("[design-system]"))||void 0===e?void 0:e.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===t?t:"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))}},d=()=>{var e;return void 0!==globalThis.litElementVersions||"undefined"!=typeof process&&"development"===(null===(e=process.env)||void 0===e?void 0:e.NODE_ENV)||"undefined"!=typeof window&&("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname)},h=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(d())for(const e of this.requiredComponents)if(!this.isComponentAvailable(e))throw new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}. Example: import '@nuralyui/${e}';`)}validateDependenciesWithHandler(e){if(!d())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const r=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,r):console.error(r.message)}return t}isComponentAvailable(e){return!!customElements.get(e)}getMissingDependencies(){return this.requiredComponents.filter(e=>!this.isComponentAvailable(e))}areDependenciesAvailable(){return this.requiredComponents.every(e=>this.isComponentAvailable(e))}addRequiredComponent(e){this.requiredComponents.includes(e)||this.requiredComponents.push(e)}removeRequiredComponent(e){const t=this.requiredComponents.indexOf(e);t>-1&&this.requiredComponents.splice(t,1)}},u=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const r=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,r)}dispatchInputEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,originalEvent:t.originalEvent},t);this.dispatchCustomEvent(e,i)}dispatchFocusEvent(e,t){const i=Object.assign({target:t.target||this,value:t.value,focused:t.focused,cursorPosition:t.cursorPosition,selectedText:t.selectedText},t);this.dispatchCustomEvent(e,i)}dispatchValidationEvent(e,t){var i;const r=Object.assign({target:t.target||this,value:t.value,isValid:null!==(i=t.isValid)&&void 0!==i&&i,error:t.error},t);this.dispatchCustomEvent(e,r)}dispatchActionEvent(e,t){const i=Object.assign({target:t.target||this,action:t.action,previousValue:t.previousValue,newValue:t.newValue},t);this.dispatchCustomEvent(e,i)}isReadonlyKeyAllowed(e){if(e.ctrlKey||e.metaKey){return["KeyA","KeyC"].includes(e.code)}return["Tab","Escape","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(e.key)}isActivationKey(e){return"Enter"===e.key||" "===e.key}},p=new Set,m=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var u=function(r,e,t,a){for(var i,o=arguments.length,n=o<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,t):a,l=r.length-1;l>=0;l--)(i=r[l])&&(n=(o<3?i(n):o>3?i(e,t,n):i(e,t))||n);return o>3&&n&&Object.defineProperty(e,t,n),n};let h=class extends(s(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.message="",this.type="info",this.description="",this.closable=!1,this.showIcon=!1,this.icon="",this.banner=!1,this.visible=!0,this.closing=!1}close(){this.visible&&!this.closing&&(this.closing=!0,setTimeout(()=>{this.visible=!1,this.closing=!1,this.dispatchEvent(new CustomEvent("nr-alert-close",{detail:{message:this.message,type:this.type},bubbles:!0,composed:!0}))},300))}handleCloseClick(r){r.stopPropagation(),this.close()}getDefaultIcon(){if(this.icon)return this.icon;switch(this.type){case"success":return"check-circle";case"info":return"info";case"warning":return"alert-triangle";case"error":return"x-circle";default:return""}}hasDescription(){return!!this.description}render(){if(!this.visible)return t;const r={alert:!0,[`alert--${this.type}`]:!0,"alert--with-description":this.hasDescription(),"alert--banner":this.banner,"alert--closing":this.closing};return a`
-      <div class=${l(r)} role="alert">
-        ${this.showIcon?a`
-          <div class="alert__icon">
-            <slot name="icon">
-              <nr-icon 
-                name=${this.getDefaultIcon()} 
-                size=${this.hasDescription()?"large":"small"}
-              ></nr-icon>
-            </slot>
+const f=e=>{class t extends e{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const e=this.constructor.useShadowDom;if(!e&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!e){const e=this.constructor,t=this.tagName.toLowerCase(),i=e.styles;if(i){const e=g(i);e&&function(e,t,i){var r;if(!m.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),m.set(e,i)}const s=m.get(e),o=`doc:${e}`;if(p.has(o)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,s],p.add(o)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const o=`shadow:${((null===(r=i.host)||void 0===r?void 0:r.tagName)||"").toLowerCase()}:${e}`;p.has(o)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,s],p.add(o)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function g(e){return Array.isArray(e)?e.map(e=>g(e)).filter(Boolean).join("\n"):e&&"string"==typeof e.cssText?e.cssText:"string"==typeof e?e:""}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const v="";
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */var b=function(e,t,i,r){for(var s,o=arguments.length,n=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r,a=e.length-1;a>=0;a--)(s=e[a])&&(n=(o<3?s(n):o>3?s(t,i,n):s(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n};let w=class extends((e=>h(c(u(f(e)))))(r)){constructor(){super(...arguments),this.requiredComponents=["nr-icon"],this.message="",this.type="info",this.description="",this.closable=!1,this.showIcon=!1,this.icon="",this.banner=!1,this.visible=!0,this.closing=!1}close(){this.visible&&!this.closing&&(this.closing=!0,setTimeout(()=>{this.visible=!1,this.closing=!1,this.dispatchEvent(new CustomEvent("nr-alert-close",{detail:{message:this.message,type:this.type},bubbles:!0,composed:!0}))},300))}handleCloseClick(e){e.stopPropagation(),this.close()}getDefaultIcon(){if(this.icon)return this.icon;switch(this.type){case"success":return"check-circle";case"info":return"info";case"warning":return"alert-triangle";case"error":return"x-circle";default:return""}}hasDescription(){return!!this.description}render(){if(!this.visible)return t;const e={alert:!0,[`alert--${this.type}`]:!0,"alert--with-description":this.hasDescription(),"alert--banner":this.banner,"alert--closing":this.closing};return i`
+      <div part="alert" class=${a(e)} role="alert">
+        ${this.showIcon?i`
+          <div part="icon" class="alert__icon">
+            ${null!==this.querySelector('[slot="icon"]')?i`<slot name="icon"></slot>`:i`<nr-icon
+                  name=${this.getDefaultIcon()}
+                  size=${this.hasDescription()?"large":"small"}
+                ></nr-icon>`}
           </div>
         `:t}
-        
-        <div class="alert__content">
-          ${this.message?a`
-            <div class="alert__message">${this.message}</div>
+
+        <div part="content" class="alert__content">
+          ${this.message?i`
+            <div part="message" class="alert__message">${this.message}</div>
           `:t}
-          
-          ${this.description?a`
-            <div class="alert__description">${this.description}</div>
+
+          ${this.description?i`
+            <div part="description" class="alert__description">${this.description}</div>
           `:t}
-          
+
           <slot></slot>
-          
+
           <slot name="action"></slot>
         </div>
-        
-        ${this.closable?a`
+
+        ${this.closable?i`
           <button
+            part="close"
             class="alert__close"
             @click=${this.handleCloseClick}
             aria-label="Close alert"
@@ -228,4 +202,4 @@ var u=function(r,e,t,a){for(var i,o=arguments.length,n=o<3?e:null===a?a=Object.g
           </button>
         `:t}
       </div>
-    `}};h.styles=c,u([i({type:String})],h.prototype,"message",void 0),u([i({type:String,reflect:!0})],h.prototype,"type",void 0),u([i({type:String})],h.prototype,"description",void 0),u([i({type:Boolean})],h.prototype,"closable",void 0),u([i({type:Boolean,attribute:"show-icon"})],h.prototype,"showIcon",void 0),u([i({type:String})],h.prototype,"icon",void 0),u([i({type:Boolean})],h.prototype,"banner",void 0),u([o()],h.prototype,"visible",void 0),u([o()],h.prototype,"closing",void 0),h=u([n("nr-alert")],h);export{d as EMPTY_STRING,h as NrAlertElement};
+    `}};w.styles=l,w.useShadowDom=!0,b([s({type:String})],w.prototype,"message",void 0),b([s({type:String,reflect:!0})],w.prototype,"type",void 0),b([s({type:String})],w.prototype,"description",void 0),b([s({type:Boolean})],w.prototype,"closable",void 0),b([s({type:Boolean,attribute:"show-icon"})],w.prototype,"showIcon",void 0),b([s({type:String})],w.prototype,"icon",void 0),b([s({type:Boolean})],w.prototype,"banner",void 0),b([o()],w.prototype,"visible",void 0),b([o()],w.prototype,"closing",void 0),w=b([n("nr-alert")],w);export{v as EMPTY_STRING,w as NrAlertElement};