@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,4 +1,4 @@
-import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property as i,state as e,customElement as a}from"lit/decorators.js";import{NuralyUIBaseMixin as c}from"@nuralyui/common/mixins";import{styleMap as l}from"lit/directives/style-map.js";const s=o`
+import{css as t,html as o,LitElement as e,nothing as i}from"lit";import{property as n,state as r,customElement as s}from"lit/decorators.js";import{styleMap as c}from"lit/directives/style-map.js";const a=t`
   :host {
     display: inline-block;
   }
@@ -26,27 +26,27 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
   }
 
   .popconfirm-icon--warning {
-    color: var(--nuraly-color-warning);
+    color: #f1c21b;
   }
 
   .popconfirm-icon--question {
-    color: var(--nuraly-color-info);
+    color: #0043ce;
   }
 
   .popconfirm-icon--info {
-    color: var(--nuraly-color-info);
+    color: #0043ce;
   }
 
   .popconfirm-icon--error {
-    color: var(--nuraly-color-error);
+    color: #dc2626;
   }
 
   .popconfirm-icon--success {
-    color: var(--nuraly-color-success);
+    color: #198038;
   }
 
   .popconfirm-icon--custom {
-    color: var(--nuraly-popconfirm-icon-color, var(--nuraly-color-text));
+    color: #161616;
   }
 
   .popconfirm-text {
@@ -57,16 +57,16 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
   }
 
   .popconfirm-title {
-    color: var(--nuraly-color-text);
-    font-size: var(--nuraly-font-size-base);
+    color: #161616;
+    font-size: 1rem;
     font-weight: 600;
     line-height: 1.5;
     margin: 0;
   }
 
   .popconfirm-description {
-    color: var(--nuraly-color-text-secondary);
-    font-size: var(--nuraly-font-size-sm);
+    color: #525252;
+    font-size: 0.875rem;
     line-height: 1.5;
     margin: 0;
   }
@@ -80,8 +80,8 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
 
   .popconfirm-button {
     padding: 4px 15px;
-    font-size: var(--nuraly-font-size-sm);
-    border-radius: var(--nuraly-border-radius);
+    font-size: 0.875rem;
+    border-radius: 6px;
     border: 1px solid transparent;
     cursor: pointer;
     transition: all 0.2s;
@@ -92,68 +92,68 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
   }
 
   .popconfirm-button:focus-visible {
-    outline: 2px solid var(--nuraly-color-primary);
+    outline: 2px solid #7c3aed;
     outline-offset: 2px;
   }
 
   .popconfirm-button--cancel {
-    background: var(--nuraly-button-default-background);
-    color: var(--nuraly-button-default-text-color);
-    border-color: var(--nuraly-button-default-border-color);
+    background: #ffffff;
+    color: #161616;
+    border-color: #e0e0e0;
   }
 
   .popconfirm-button--cancel:hover:not(:disabled) {
-    background: var(--nuraly-button-default-hover-background);
-    color: var(--nuraly-button-default-hover-text-color);
-    border-color: var(--nuraly-button-default-hover-border-color);
+    background: #f4f4f4;
+    color: #161616;
+    border-color: #c6c6c6;
   }
 
   .popconfirm-button--ok-primary {
-    background: var(--nuraly-button-primary-background);
-    color: var(--nuraly-button-primary-text-color);
-    border-color: var(--nuraly-button-primary-border-color);
+    background: #7c3aed;
+    color: #ffffff;
+    border-color: #7c3aed;
   }
 
   .popconfirm-button--ok-primary:hover:not(:disabled) {
-    background: var(--nuraly-button-primary-hover-background);
-    color: var(--nuraly-button-primary-hover-text-color);
-    border-color: var(--nuraly-button-primary-hover-border-color);
+    background: #6d28d9;
+    color: #ffffff;
+    border-color: #6d28d9;
   }
 
   .popconfirm-button--ok-danger {
-    background: var(--nuraly-button-danger-background);
-    color: var(--nuraly-button-danger-text-color);
-    border-color: var(--nuraly-button-danger-border-color);
+    background: #dc2626;
+    color: #ffffff;
+    border-color: #dc2626;
   }
 
   .popconfirm-button--ok-danger:hover:not(:disabled) {
-    background: var(--nuraly-button-danger-hover-background);
-    color: var(--nuraly-button-danger-hover-text-color);
-    border-color: var(--nuraly-button-danger-hover-border-color);
+    background: #b91c1c;
+    color: #ffffff;
+    border-color: #b91c1c;
   }
 
   .popconfirm-button--ok-secondary {
-    background: var(--nuraly-button-secondary-background);
-    color: var(--nuraly-button-secondary-text-color);
-    border-color: var(--nuraly-button-secondary-border-color);
+    background: transparent;
+    color: #7c3aed;
+    border-color: #7c3aed;
   }
 
   .popconfirm-button--ok-secondary:hover:not(:disabled) {
-    background: var(--nuraly-button-secondary-hover-background);
-    color: var(--nuraly-button-secondary-hover-text-color);
-    border-color: var(--nuraly-button-secondary-hover-border-color);
+    background: #f4f0fd;
+    color: #6d28d9;
+    border-color: #6d28d9;
   }
 
   .popconfirm-button--ok-default {
-    background: var(--nuraly-button-default-background);
-    color: var(--nuraly-button-default-text-color);
-    border-color: var(--nuraly-button-default-border-color);
+    background: #ffffff;
+    color: #161616;
+    border-color: #e0e0e0;
   }
 
   .popconfirm-button--ok-default:hover:not(:disabled) {
-    background: var(--nuraly-button-default-hover-background);
-    color: var(--nuraly-button-default-hover-text-color);
-    border-color: var(--nuraly-button-default-hover-border-color);
+    background: #f4f4f4;
+    color: #161616;
+    border-color: #c6c6c6;
   }
 
   .popconfirm-button:disabled {
@@ -207,29 +207,43 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var p=function(o,r,n,t){for(var i,e=arguments.length,a=e<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,n):t,c=o.length-1;c>=0;c--)(i=o[c])&&(a=(e<3?i(a):e>3?i(r,n,a):i(r,n))||a);return e>3&&a&&Object.defineProperty(r,n,a),a},d=function(o,r,n,t){return new(n||(n=Promise))(function(i,e){function a(o){try{l(t.next(o))}catch(o){e(o)}}function c(o){try{l(t.throw(o))}catch(o){e(o)}}function l(o){var r;o.done?i(o.value):(r=o.value,r instanceof n?r:new n(function(o){o(r)})).then(a,c)}l((t=t.apply(o,r||[])).next())})};let u=class extends(c(r)){constructor(){super(...arguments),this.requiredComponents=["nr-dropdown","nr-icon","nr-button","nr-label"],this.title="",this.description="",this.okText="OK",this.cancelText="Cancel",this.okType="primary",this.showCancel=!0,this.icon="exclamation-circle",this.iconColor="",this.placement="top",this.trigger="click",this.disabled=!1,this.arrow=!0,this.open=!1,this.okLoading=!1,this._boundHandleOutsideClick=null,this._boundHandleKeydown=null,this.handleTriggerClick=o=>{this.disabled||(o.stopPropagation(),this.open?this.closePopconfirm():this.openPopconfirm())},this.handleConfirm=o=>d(this,void 0,void 0,function*(){o.stopPropagation();const r=new CustomEvent("nr-confirm",{bubbles:!0,composed:!0,cancelable:!0,detail:{originalEvent:o}});if(this.dispatchEvent(r)&&!r.defaultPrevented){const r=this.onConfirm;if(r&&"function"==typeof r){const n=r(o);if(n&&"function"==typeof n.then){this.okLoading=!0;try{yield n,this.closePopconfirm()}catch(o){console.error("Confirmation failed:",o)}finally{this.okLoading=!1}return}}this.closePopconfirm()}}),this.handleCancel=o=>{o.stopPropagation(),this.dispatchEvent(new CustomEvent("nr-cancel",{bubbles:!0,composed:!0,detail:{originalEvent:o}})),this.closePopconfirm()}}get dropdownElement(){var o;return null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector("nr-dropdown")}connectedCallback(){super.connectedCallback(),this._boundHandleOutsideClick=this.handleOutsideClick.bind(this),this._boundHandleKeydown=this.handleKeydown.bind(this),document.addEventListener("click",this._boundHandleOutsideClick,!0),document.addEventListener("keydown",this._boundHandleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this._boundHandleOutsideClick&&document.removeEventListener("click",this._boundHandleOutsideClick,!0),this._boundHandleKeydown&&document.removeEventListener("keydown",this._boundHandleKeydown)}openPopconfirm(){this.open=!0,this.dropdownElement&&this.dropdownElement.show(),this.dispatchEvent(new CustomEvent("nr-open-change",{bubbles:!0,composed:!0,detail:{open:!0}}))}handleOutsideClick(o){if(!this.open)return;o.composedPath().includes(this)||this.closePopconfirm()}handleKeydown(o){"Escape"===o.key&&this.open&&this.closePopconfirm()}closePopconfirm(){this.open=!1,this.dropdownElement&&this.dropdownElement.hide(),this.dispatchEvent(new CustomEvent("nr-open-change",{bubbles:!0,composed:!0,detail:{open:!1}}))}getIconColor(){return this.iconColor?this.iconColor:""}getIconClass(){const o={"exclamation-circle":"warning","question-circle":"question","info-circle":"info","close-circle":"error","check-circle":"success"};return this.iconColor?"custom":o[this.icon]||"warning"}renderContent(){const o=this.getIconClass(),r=this.getIconColor();return n`
-      <div class="popconfirm-content">
-        <div class="popconfirm-message">
+ */,l=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,o,e;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(o=this.designSystemObserver)||void 0===o||o.disconnect(),null===(e=this.mediaQuery)||void 0===e||e.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,o;const e=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return e||((null===(o=window.matchMedia)||void 0===o?void 0:o.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const o=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===o?o:"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 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)},p=t=>class extends t{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(d())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(!d())return!0;let o=!0;for(const e of this.requiredComponents)if(!this.isComponentAvailable(e)){o=!1;const i=new Error(`Required component "${e}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(e,i):console.error(i.message)}return o}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 o=this.requiredComponents.indexOf(t);o>-1&&this.requiredComponents.splice(o,1)}},f=t=>class extends t{dispatchCustomEvent(t,o){this.dispatchEvent(new CustomEvent(t,{detail:o,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,o){var e;const i=Object.assign(Object.assign({},o),{timestamp:Date.now(),componentName:(null===(e=this.tagName)||void 0===e?void 0:e.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,i)}dispatchInputEvent(t,o){const e=Object.assign({target:o.target||this,value:o.value,originalEvent:o.originalEvent},o);this.dispatchCustomEvent(t,e)}dispatchFocusEvent(t,o){const e=Object.assign({target:o.target||this,value:o.value,focused:o.focused,cursorPosition:o.cursorPosition,selectedText:o.selectedText},o);this.dispatchCustomEvent(t,e)}dispatchValidationEvent(t,o){var e;const i=Object.assign({target:o.target||this,value:o.value,isValid:null!==(e=o.isValid)&&void 0!==e&&e,error:o.error},o);this.dispatchCustomEvent(t,i)}dispatchActionEvent(t,o){const e=Object.assign({target:o.target||this,action:o.action,previousValue:o.previousValue,newValue:o.newValue},o);this.dispatchCustomEvent(t,e)}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}},h=new Set,m=new Map;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const u=t=>{class o 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,o=this.tagName.toLowerCase(),e=t.styles;if(e){const t=b(e);t&&function(t,o,e){var i;if(!m.has(t)){const e=new CSSStyleSheet;e.replaceSync(o),m.set(t,e)}const n=m.get(t),r=`doc:${t}`;if(h.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,n],h.add(r)),e){let o=e;for(;o;){const e=o.getRootNode();if(!(e instanceof ShadowRoot))break;{const r=`shadow:${((null===(i=e.host)||void 0===i?void 0:i.tagName)||"").toLowerCase()}:${t}`;h.has(r)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,n],h.add(r)),o=e.host}}}}(o,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(o=>o instanceof Element&&o.getAttribute("slot")===t):[]}}return o.useShadowDom=!1,o},g=t=>p(l(f(u(t))));function b(t){return Array.isArray(t)?t.map(t=>b(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
+ */var v=function(t,o,e,i){for(var n,r=arguments.length,s=r<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i,c=t.length-1;c>=0;c--)(n=t[c])&&(s=(r<3?n(s):r>3?n(o,e,s):n(o,e))||s);return r>3&&s&&Object.defineProperty(o,e,s),s},x=function(t,o,e,i){return new(e||(e=Promise))(function(n,r){function s(t){try{a(i.next(t))}catch(t){r(t)}}function c(t){try{a(i.throw(t))}catch(t){r(t)}}function a(t){var o;t.done?n(t.value):(o=t.value,o instanceof e?o:new e(function(t){t(o)})).then(s,c)}a((i=i.apply(t,o||[])).next())})};let y=class extends(g(e)){constructor(){super(...arguments),this.requiredComponents=["nr-dropdown","nr-icon","nr-button","nr-label"],this.title="",this.description="",this.okText="OK",this.cancelText="Cancel",this.okType="primary",this.showCancel=!0,this.icon="exclamation-circle",this.iconColor="",this.placement="top",this.trigger="click",this.disabled=!1,this.arrow=!0,this.open=!1,this.okLoading=!1,this._boundHandleOutsideClick=null,this._boundHandleKeydown=null,this.handleTriggerClick=t=>{this.disabled||(t.stopPropagation(),this.open?this.closePopconfirm():this.openPopconfirm())},this.handleConfirm=t=>x(this,void 0,void 0,function*(){t.stopPropagation();const o=new CustomEvent("nr-confirm",{bubbles:!0,composed:!0,cancelable:!0,detail:{originalEvent:t}});if(this.dispatchEvent(o)&&!o.defaultPrevented){const o=this.onConfirm;if(o&&"function"==typeof o){const e=o(t);if(e&&"function"==typeof e.then){this.okLoading=!0;try{yield e,this.closePopconfirm()}catch(t){console.error("Confirmation failed:",t)}finally{this.okLoading=!1}return}}this.closePopconfirm()}}),this.handleCancel=t=>{t.stopPropagation(),this.dispatchEvent(new CustomEvent("nr-cancel",{bubbles:!0,composed:!0,detail:{originalEvent:t}})),this.closePopconfirm()}}get dropdownElement(){var t;return null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("nr-dropdown")}connectedCallback(){super.connectedCallback(),this._boundHandleOutsideClick=this.handleOutsideClick.bind(this),this._boundHandleKeydown=this.handleKeydown.bind(this),document.addEventListener("click",this._boundHandleOutsideClick,!0),document.addEventListener("keydown",this._boundHandleKeydown)}disconnectedCallback(){super.disconnectedCallback(),this._boundHandleOutsideClick&&document.removeEventListener("click",this._boundHandleOutsideClick,!0),this._boundHandleKeydown&&document.removeEventListener("keydown",this._boundHandleKeydown)}openPopconfirm(){this.open=!0,this.dropdownElement&&this.dropdownElement.show(),this.dispatchEvent(new CustomEvent("nr-open-change",{bubbles:!0,composed:!0,detail:{open:!0}}))}handleOutsideClick(t){if(!this.open)return;t.composedPath().includes(this)||this.closePopconfirm()}handleKeydown(t){"Escape"===t.key&&this.open&&this.closePopconfirm()}closePopconfirm(){this.open=!1,this.dropdownElement&&this.dropdownElement.hide(),this.dispatchEvent(new CustomEvent("nr-open-change",{bubbles:!0,composed:!0,detail:{open:!1}}))}getIconColor(){return this.iconColor?this.iconColor:""}getIconClass(){const t={"exclamation-circle":"warning","question-circle":"question","info-circle":"info","close-circle":"error","check-circle":"success"};return this.iconColor?"custom":t[this.icon]||"warning"}renderContent(){const t=this.getIconClass(),e=this.getIconColor();return o`
+      <div class="popconfirm-content" part="content">
+        <div class="popconfirm-message" part="message">
           <div
-            class="popconfirm-icon popconfirm-icon--${o}"
-            style=${r?`color: ${r}`:""}>
+            class="popconfirm-icon popconfirm-icon--${t}"
+            part="icon"
+            style=${e?`color: ${e}`:""}>
             <nr-icon name=${this.icon}></nr-icon>
           </div>
-          <div class="popconfirm-text">
-            ${this.title?n`<nr-label class="popconfirm-title" size="medium">${this.title}</nr-label>`:""}
-            ${this.description?n`<nr-label class="popconfirm-description" size="small" variant="secondary">${this.description}</nr-label>`:""}
+          <div class="popconfirm-text" part="text">
+            ${this.title?o`<nr-label class="popconfirm-title" size="medium">${this.title}</nr-label>`:""}
+            ${this.description?o`<nr-label class="popconfirm-description" size="small" variant="secondary">${this.description}</nr-label>`:""}
           </div>
         </div>
-        <div class="popconfirm-buttons">
-          ${this.showCancel?n`
+        <div class="popconfirm-buttons" part="buttons">
+          ${this.showCancel?o`
                 <nr-button
                   size="small"
+                  part="cancel-button"
                   @click=${this.handleCancel}>
                   ${this.cancelText}
                 </nr-button>
               `:""}
           <nr-button
             size="small"
+            part="confirm-button"
             type=${"danger"===this.okType?"danger":"primary"===this.okType?"primary":"default"}
             ?loading=${this.okLoading}
             ?disabled=${this.okLoading}
@@ -238,7 +252,7 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
           </nr-button>
         </div>
       </div>
-    `}render(){return n`
+    `}render(){return o`
       <nr-dropdown
         .open=${this.open}
         .placement=${this.placement}
@@ -247,12 +261,12 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
         ?arrow=${this.arrow}
         .closeOnOutsideClick=${!1}
         .closeOnEscape=${!1}>
-        <div slot="trigger" @click=${this.handleTriggerClick}>
+        <div slot="trigger" part="trigger" @click=${this.handleTriggerClick}>
           <slot name="trigger"></slot>
         </div>
         <div slot="content">${this.renderContent()}</div>
       </nr-dropdown>
-    `}};u.styles=s,p([i({type:String})],u.prototype,"title",void 0),p([i({type:String})],u.prototype,"description",void 0),p([i({type:String,attribute:"ok-text"})],u.prototype,"okText",void 0),p([i({type:String,attribute:"cancel-text"})],u.prototype,"cancelText",void 0),p([i({type:String,attribute:"ok-type"})],u.prototype,"okType",void 0),p([i({type:Boolean,attribute:"show-cancel"})],u.prototype,"showCancel",void 0),p([i({type:String})],u.prototype,"icon",void 0),p([i({type:String,attribute:"icon-color"})],u.prototype,"iconColor",void 0),p([i({type:String})],u.prototype,"placement",void 0),p([i({type:String})],u.prototype,"trigger",void 0),p([i({type:Boolean})],u.prototype,"disabled",void 0),p([i({type:Boolean})],u.prototype,"arrow",void 0),p([i({type:Boolean,reflect:!0})],u.prototype,"open",void 0),p([e()],u.prototype,"okLoading",void 0),u=p([a("nr-popconfirm")],u);const f=o`
+    `}};y.useShadowDom=!0,y.styles=a,v([n({type:String})],y.prototype,"title",void 0),v([n({type:String})],y.prototype,"description",void 0),v([n({type:String,attribute:"ok-text"})],y.prototype,"okText",void 0),v([n({type:String,attribute:"cancel-text"})],y.prototype,"cancelText",void 0),v([n({type:String,attribute:"ok-type"})],y.prototype,"okType",void 0),v([n({type:Boolean,attribute:"show-cancel"})],y.prototype,"showCancel",void 0),v([n({type:String})],y.prototype,"icon",void 0),v([n({type:String,attribute:"icon-color"})],y.prototype,"iconColor",void 0),v([n({type:String})],y.prototype,"placement",void 0),v([n({type:String})],y.prototype,"trigger",void 0),v([n({type:Boolean})],y.prototype,"disabled",void 0),v([n({type:Boolean})],y.prototype,"arrow",void 0),v([n({type:Boolean,reflect:!0})],y.prototype,"open",void 0),v([r()],y.prototype,"okLoading",void 0),y=v([s("nr-popconfirm")],y);const w=t`
   :host {
     display: block;
   }
@@ -264,16 +278,16 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: var(--nuraly-z-index-popconfirm, 10000);
+    z-index: 10000;
   }
 
   .popconfirm-manager__item {
     position: fixed;
     pointer-events: auto;
-    background: var(--nuraly-color-dropdown-background, #ffffff);
-    border: 1px solid var(--nuraly-color-dropdown-border, #e0e0e0);
-    border-radius: var(--nuraly-border-radius-lg, 8px);
-    box-shadow: var(--nuraly-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
     min-width: 240px;
     max-width: 320px;
     animation: popconfirm-manager-fade-in 0.15s ease-out;
@@ -311,23 +325,23 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
   }
 
   .popconfirm-manager__icon--warning {
-    color: var(--nuraly-color-warning, #faad14);
+    color: #f1c21b;
   }
 
   .popconfirm-manager__icon--question {
-    color: var(--nuraly-color-info, #1890ff);
+    color: #0043ce;
   }
 
   .popconfirm-manager__icon--info {
-    color: var(--nuraly-color-info, #1890ff);
+    color: #0043ce;
   }
 
   .popconfirm-manager__icon--error {
-    color: var(--nuraly-color-error, #ff4d4f);
+    color: #ff4d4f;
   }
 
   .popconfirm-manager__icon--success {
-    color: var(--nuraly-color-success, #52c41a);
+    color: #198038;
   }
 
   .popconfirm-manager__icon--custom {
@@ -342,16 +356,16 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
   }
 
   .popconfirm-manager__title {
-    color: var(--nuraly-color-text, #262626);
-    font-size: var(--nuraly-font-size-base, 14px);
+    color: #161616;
+    font-size: 1rem;
     font-weight: 600;
     line-height: 1.5;
     margin: 0;
   }
 
   .popconfirm-manager__description {
-    color: var(--nuraly-color-text-secondary, #666666);
-    font-size: var(--nuraly-font-size-sm, 12px);
+    color: #525252;
+    font-size: 0.875rem;
     line-height: 1.5;
     margin: 0;
   }
@@ -371,8 +385,8 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
     top: -6px;
     width: 12px;
     height: 12px;
-    background: var(--nuraly-color-dropdown-background, #ffffff);
-    border: 1px solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
     border-right: none;
     border-bottom: none;
     transform: rotate(45deg);
@@ -391,48 +405,48 @@ import{css as o,LitElement as r,html as n,nothing as t}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var m,h=function(o,r,n,t){for(var i,e=arguments.length,a=e<3?r:null===t?t=Object.getOwnPropertyDescriptor(r,n):t,c=o.length-1;c>=0;c--)(i=o[c])&&(a=(e<3?i(a):e>3?i(r,n,a):i(r,n))||a);return e>3&&a&&Object.defineProperty(r,n,a),a},b=function(o,r,n,t){return new(n||(n=Promise))(function(i,e){function a(o){try{l(t.next(o))}catch(o){e(o)}}function c(o){try{l(t.throw(o))}catch(o){e(o)}}function l(o){var r;o.done?i(o.value):(r=o.value,r instanceof n?r:new n(function(o){o(r)})).then(a,c)}l((t=t.apply(o,r||[])).next())})};let v=m=class extends(c(r)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button","nr-label"],this.items=[],this._boundHandleOutsideClick=null,this._boundHandleKeydown=null,this._showTimestamp=0}connectedCallback(){super.connectedCallback(),m._instance=this,this._boundHandleOutsideClick=this.handleOutsideClick.bind(this),this._boundHandleKeydown=this.handleKeydown.bind(this),document.addEventListener("click",this._boundHandleOutsideClick,!0),document.addEventListener("keydown",this._boundHandleKeydown)}disconnectedCallback(){super.disconnectedCallback(),m._instance=null,this._boundHandleOutsideClick&&document.removeEventListener("click",this._boundHandleOutsideClick,!0),this._boundHandleKeydown&&document.removeEventListener("keydown",this._boundHandleKeydown)}static getInstance(){return m._instance}static confirm(o,r){return b(this,void 0,void 0,function*(){const n=m.getInstance();return n?new Promise(t=>{n.show(Object.assign(Object.assign({},o),{onConfirm:()=>b(this,void 0,void 0,function*(){var r;yield null===(r=o.onConfirm)||void 0===r?void 0:r.call(o),t(!0)}),onCancel:()=>{var r;null===(r=o.onCancel)||void 0===r||r.call(o),t(!1)}}),r)}):(console.warn("NrPopconfirmManager: No instance found. Add <nr-popconfirm-manager> to your app."),!1)})}show(o,r){const n=this.generateId(),t={id:n,config:o,position:this.adjustPosition(r),loading:!1};return this._showTimestamp=Date.now(),this.items=[t],console.log("[nr-popconfirm-manager] show() called, items:",this.items),this.requestUpdate(),n}close(o){this.items=this.items.filter(r=>r.id!==o)}closeAll(){this.items=[]}handleConfirm(o,r){return b(this,void 0,void 0,function*(){r.stopPropagation();const n=new CustomEvent("nr-popconfirm-confirm",{bubbles:!0,composed:!0,detail:{id:o.id,config:o.config}});if(this.dispatchEvent(n),o.config.onConfirm){const r=o.config.onConfirm();if(r&&"function"==typeof r.then){o.loading=!0,this.requestUpdate();try{yield r}catch(o){console.error("Popconfirm confirmation failed:",o)}finally{o.loading=!1}}}this.close(o.id)})}handleCancel(o,r){var n,t;r.stopPropagation();const i=new CustomEvent("nr-popconfirm-cancel",{bubbles:!0,composed:!0,detail:{id:o.id,config:o.config}});this.dispatchEvent(i),null===(t=(n=o.config).onCancel)||void 0===t||t.call(n),this.close(o.id)}handleOutsideClick(o){var r;if(0===this.items.length)return;if(Date.now()-this._showTimestamp<100)return;const n=o.composedPath(),t=null===(r=this.shadowRoot)||void 0===r?void 0:r.querySelector(".popconfirm-manager__item");t&&!n.includes(t)&&(this.items.forEach(o=>{var r,n;null===(n=(r=o.config).onCancel)||void 0===n||n.call(r)}),this.closeAll())}handleKeydown(o){"Escape"===o.key&&this.items.length>0&&(this.items.forEach(o=>{var r,n;null===(n=(r=o.config).onCancel)||void 0===n||n.call(r)}),this.closeAll())}adjustPosition(o){const r=16,n=window.innerWidth,t=window.innerHeight;let i=o.x,e=o.y;return i+280>n-r&&(i=n-280-r),i<r&&(i=r),e+120>t-r&&(e=o.y-120-8),e<r&&(e=r),{x:i,y:e}}generateId(){return`popconfirm-${crypto.randomUUID()}`}getIconClass(o){return{"exclamation-circle":"warning","question-circle":"question","info-circle":"info","close-circle":"error","check-circle":"success"}[o||""]||"warning"}renderItem(o){const{config:r,position:i}=o,e=r.icon||"exclamation-circle",a=r.iconColor?"custom":this.getIconClass(e),c=!1!==r.showCancel,s={left:`${i.x}px`,top:`${i.y}px`},p=r.iconColor?{color:r.iconColor}:{};return n`
+ */;var k,_=function(t,o,e,i){for(var n,r=arguments.length,s=r<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i,c=t.length-1;c>=0;c--)(n=t[c])&&(s=(r<3?n(s):r>3?n(o,e,s):n(o,e))||s);return r>3&&s&&Object.defineProperty(o,e,s),s},$=function(t,o,e,i){return new(e||(e=Promise))(function(n,r){function s(t){try{a(i.next(t))}catch(t){r(t)}}function c(t){try{a(i.throw(t))}catch(t){r(t)}}function a(t){var o;t.done?n(t.value):(o=t.value,o instanceof e?o:new e(function(t){t(o)})).then(s,c)}a((i=i.apply(t,o||[])).next())})};let C=k=class extends(g(e)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-button","nr-label"],this.items=[],this._boundHandleOutsideClick=null,this._boundHandleKeydown=null,this._showTimestamp=0}connectedCallback(){super.connectedCallback(),k._instance=this,this._boundHandleOutsideClick=this.handleOutsideClick.bind(this),this._boundHandleKeydown=this.handleKeydown.bind(this),document.addEventListener("click",this._boundHandleOutsideClick,!0),document.addEventListener("keydown",this._boundHandleKeydown)}disconnectedCallback(){super.disconnectedCallback(),k._instance=null,this._boundHandleOutsideClick&&document.removeEventListener("click",this._boundHandleOutsideClick,!0),this._boundHandleKeydown&&document.removeEventListener("keydown",this._boundHandleKeydown)}static getInstance(){return k._instance}static confirm(t,o){return $(this,void 0,void 0,function*(){const e=k.getInstance();return e?new Promise(i=>{e.show(Object.assign(Object.assign({},t),{onConfirm:()=>$(this,void 0,void 0,function*(){var o;yield null===(o=t.onConfirm)||void 0===o?void 0:o.call(t),i(!0)}),onCancel:()=>{var o;null===(o=t.onCancel)||void 0===o||o.call(t),i(!1)}}),o)}):(console.warn("NrPopconfirmManager: No instance found. Add <nr-popconfirm-manager> to your app."),!1)})}show(t,o){const e=this.generateId(),i={id:e,config:t,position:this.adjustPosition(o),loading:!1};return this._showTimestamp=Date.now(),this.items=[i],console.log("[nr-popconfirm-manager] show() called, items:",this.items),this.requestUpdate(),e}close(t){this.items=this.items.filter(o=>o.id!==t)}closeAll(){this.items=[]}handleConfirm(t,o){return $(this,void 0,void 0,function*(){o.stopPropagation();const e=new CustomEvent("nr-popconfirm-confirm",{bubbles:!0,composed:!0,detail:{id:t.id,config:t.config}});if(this.dispatchEvent(e),t.config.onConfirm){const o=t.config.onConfirm();if(o&&"function"==typeof o.then){t.loading=!0,this.requestUpdate();try{yield o}catch(t){console.error("Popconfirm confirmation failed:",t)}finally{t.loading=!1}}}this.close(t.id)})}handleCancel(t,o){var e,i;o.stopPropagation();const n=new CustomEvent("nr-popconfirm-cancel",{bubbles:!0,composed:!0,detail:{id:t.id,config:t.config}});this.dispatchEvent(n),null===(i=(e=t.config).onCancel)||void 0===i||i.call(e),this.close(t.id)}handleOutsideClick(t){var o;if(0===this.items.length)return;if(Date.now()-this._showTimestamp<100)return;const e=t.composedPath(),i=null===(o=this.shadowRoot)||void 0===o?void 0:o.querySelector(".popconfirm-manager__item");i&&!e.includes(i)&&(this.items.forEach(t=>{var o,e;null===(e=(o=t.config).onCancel)||void 0===e||e.call(o)}),this.closeAll())}handleKeydown(t){"Escape"===t.key&&this.items.length>0&&(this.items.forEach(t=>{var o,e;null===(e=(o=t.config).onCancel)||void 0===e||e.call(o)}),this.closeAll())}adjustPosition(t){const o=16,e=window.innerWidth,i=window.innerHeight;let n=t.x,r=t.y;return n+280>e-o&&(n=e-280-o),n<o&&(n=o),r+120>i-o&&(r=t.y-120-8),r<o&&(r=o),{x:n,y:r}}generateId(){return`popconfirm-${crypto.randomUUID()}`}getIconClass(t){return{"exclamation-circle":"warning","question-circle":"question","info-circle":"info","close-circle":"error","check-circle":"success"}[t||""]||"warning"}renderItem(t){const{config:e,position:n}=t,r=e.icon||"exclamation-circle",s=e.iconColor?"custom":this.getIconClass(r),a=!1!==e.showCancel,l={left:`${n.x}px`,top:`${n.y}px`},d=e.iconColor?{color:e.iconColor}:{};return o`
       <div
         class="popconfirm-manager__item"
-        style=${l(s)}
-        @click=${o=>o.stopPropagation()}
+        style=${c(l)}
+        @click=${t=>t.stopPropagation()}
       >
         <div class="popconfirm-manager__content">
           <div class="popconfirm-manager__message">
             <div
-              class="popconfirm-manager__icon popconfirm-manager__icon--${a}"
-              style=${l(p)}
+              class="popconfirm-manager__icon popconfirm-manager__icon--${s}"
+              style=${c(d)}
             >
-              <nr-icon name=${e}></nr-icon>
+              <nr-icon name=${r}></nr-icon>
             </div>
             <div class="popconfirm-manager__text">
-              ${r.title?n`<nr-label class="popconfirm-manager__title" size="medium">${r.title}</nr-label>`:t}
-              ${r.description?n`<nr-label class="popconfirm-manager__description" size="small" variant="secondary">${r.description}</nr-label>`:t}
+              ${e.title?o`<nr-label class="popconfirm-manager__title" size="medium">${e.title}</nr-label>`:i}
+              ${e.description?o`<nr-label class="popconfirm-manager__description" size="small" variant="secondary">${e.description}</nr-label>`:i}
             </div>
           </div>
           <div class="popconfirm-manager__buttons">
-            ${c?n`
+            ${a?o`
                   <nr-button
                     size="small"
-                    @click=${r=>this.handleCancel(o,r)}
+                    @click=${o=>this.handleCancel(t,o)}
                   >
-                    ${r.cancelText||"Cancel"}
+                    ${e.cancelText||"Cancel"}
                   </nr-button>
-                `:t}
+                `:i}
             <nr-button
               size="small"
-              type=${"danger"===r.okType?"danger":"primary"===r.okType?"primary":"default"}
-              ?loading=${o.loading}
-              ?disabled=${o.loading}
-              @click=${r=>this.handleConfirm(o,r)}
+              type=${"danger"===e.okType?"danger":"primary"===e.okType?"primary":"default"}
+              ?loading=${t.loading}
+              ?disabled=${t.loading}
+              @click=${o=>this.handleConfirm(t,o)}
             >
-              ${r.okText||"OK"}
+              ${e.okText||"OK"}
             </nr-button>
           </div>
         </div>
       </div>
-    `}render(){return 0===this.items.length?t:n`
+    `}render(){return 0===this.items.length?i:o`
       <div class="popconfirm-manager">
-        ${this.items.map(o=>this.renderItem(o))}
+        ${this.items.map(t=>this.renderItem(t))}
       </div>
-    `}};v.styles=f,v._instance=null,h([e()],v.prototype,"items",void 0),v=m=h([a("nr-popconfirm-manager")],v);export{u as NrPopconfirmElement,v as NrPopconfirmManagerElement};
+    `}};C.useShadowDom=!0,C.styles=w,C._instance=null,_([r()],C.prototype,"items",void 0),C=k=_([s("nr-popconfirm-manager")],C);export{y as NrPopconfirmElement,C as NrPopconfirmManagerElement};

package/dist/src/components/popconfirm/popconfirm-manager.component.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement, nothing } from 'lit';
 import { PopconfirmShowConfig, PopconfirmPosition } from './popconfirm.types.js';
-declare const NrPopconfirmManagerElement_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 NrPopconfirmManagerElement_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;
 /**
  * # PopconfirmManager Component
  *
@@ -52,6 +52,7 @@ declare const NrPopconfirmManagerElement_base: (new (...args: any[]) => import("
  * @fires nr-popconfirm-cancel - Fired when user cancels
  */
 export declare class NrPopconfirmManagerElement extends NrPopconfirmManagerElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     /** Active popconfirm items */

package/dist/src/components/popconfirm/popconfirm-manager.component.js

@@ -359,6 +359,7 @@ let NrPopconfirmManagerElement = NrPopconfirmManagerElement_1 = class NrPopconfi
     `;
     }
 };
+NrPopconfirmManagerElement.useShadowDom = true;
 NrPopconfirmManagerElement.styles = popconfirmManagerStyles;
 /** Static instance for global access */
 NrPopconfirmManagerElement._instance = null;

package/dist/src/components/popconfirm/popconfirm-manager.style.js

@@ -11,16 +11,16 @@ export const popconfirmManagerStyles = css `
     width: 100%;
     height: 100%;
     pointer-events: none;
-    z-index: var(--nuraly-z-index-popconfirm, 10000);
+    z-index: 10000;
   }
 
   .popconfirm-manager__item {
     position: fixed;
     pointer-events: auto;
-    background: var(--nuraly-color-dropdown-background, #ffffff);
-    border: 1px solid var(--nuraly-color-dropdown-border, #e0e0e0);
-    border-radius: var(--nuraly-border-radius-lg, 8px);
-    box-shadow: var(--nuraly-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
     min-width: 240px;
     max-width: 320px;
     animation: popconfirm-manager-fade-in 0.15s ease-out;
@@ -58,23 +58,23 @@ export const popconfirmManagerStyles = css `
   }
 
   .popconfirm-manager__icon--warning {
-    color: var(--nuraly-color-warning, #faad14);
+    color: #f1c21b;
   }
 
   .popconfirm-manager__icon--question {
-    color: var(--nuraly-color-info, #1890ff);
+    color: #0043ce;
   }
 
   .popconfirm-manager__icon--info {
-    color: var(--nuraly-color-info, #1890ff);
+    color: #0043ce;
   }
 
   .popconfirm-manager__icon--error {
-    color: var(--nuraly-color-error, #ff4d4f);
+    color: #ff4d4f;
   }
 
   .popconfirm-manager__icon--success {
-    color: var(--nuraly-color-success, #52c41a);
+    color: #198038;
   }
 
   .popconfirm-manager__icon--custom {
@@ -89,16 +89,16 @@ export const popconfirmManagerStyles = css `
   }
 
   .popconfirm-manager__title {
-    color: var(--nuraly-color-text, #262626);
-    font-size: var(--nuraly-font-size-base, 14px);
+    color: #161616;
+    font-size: 1rem;
     font-weight: 600;
     line-height: 1.5;
     margin: 0;
   }
 
   .popconfirm-manager__description {
-    color: var(--nuraly-color-text-secondary, #666666);
-    font-size: var(--nuraly-font-size-sm, 12px);
+    color: #525252;
+    font-size: 0.875rem;
     line-height: 1.5;
     margin: 0;
   }
@@ -118,8 +118,8 @@ export const popconfirmManagerStyles = css `
     top: -6px;
     width: 12px;
     height: 12px;
-    background: var(--nuraly-color-dropdown-background, #ffffff);
-    border: 1px solid var(--nuraly-color-dropdown-border, #e0e0e0);
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
     border-right: none;
     border-bottom: none;
     transform: rotate(45deg);

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { PopconfirmPlacement, PopconfirmTrigger, PopconfirmButtonType, PopconfirmIcon } from './popconfirm.types.js';
-declare const NrPopconfirmElement_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 NrPopconfirmElement_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;
 /**
  * # Popconfirm Component
  *
@@ -59,6 +59,7 @@ declare const NrPopconfirmElement_base: (new (...args: any[]) => import("@nuraly
  * @cssproperty --nuraly-popconfirm-icon-color - Custom icon color
  */
 export declare class NrPopconfirmElement extends NrPopconfirmElement_base {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     /**