@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -305,25 +305,27 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
         const iconClass = this.getIconClass();
         const iconColor = this.getIconColor();
         return html `
-      <div class="popconfirm-content">
-        <div class="popconfirm-message">
+      <div class="popconfirm-content" part="content">
+        <div class="popconfirm-message" part="message">
           <div
             class="popconfirm-icon popconfirm-icon--${iconClass}"
+            part="icon"
             style=${iconColor ? `color: ${iconColor}` : ''}>
             <nr-icon name=${this.icon}></nr-icon>
           </div>
-          <div class="popconfirm-text">
+          <div class="popconfirm-text" part="text">
             ${this.title ? html `<nr-label class="popconfirm-title" size="medium">${this.title}</nr-label>` : ''}
             ${this.description
             ? html `<nr-label class="popconfirm-description" size="small" variant="secondary">${this.description}</nr-label>`
             : ''}
           </div>
         </div>
-        <div class="popconfirm-buttons">
+        <div class="popconfirm-buttons" part="buttons">
           ${this.showCancel
             ? html `
                 <nr-button
                   size="small"
+                  part="cancel-button"
                   @click=${this.handleCancel}>
                   ${this.cancelText}
                 </nr-button>
@@ -331,6 +333,7 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
             : ''}
           <nr-button
             size="small"
+            part="confirm-button"
             type=${this.okType === 'danger' ? 'danger' : this.okType === 'primary' ? 'primary' : 'default'}
             ?loading=${this.okLoading}
             ?disabled=${this.okLoading}
@@ -351,7 +354,7 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
         ?arrow=${this.arrow}
         .closeOnOutsideClick=${false}
         .closeOnEscape=${false}>
-        <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>
@@ -359,6 +362,7 @@ let NrPopconfirmElement = class NrPopconfirmElement extends NuralyUIBaseMixin(Li
     `;
     }
 };
+NrPopconfirmElement.useShadowDom = true;
 NrPopconfirmElement.styles = styles;
 __decorate([
     property({ type: String })

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

@@ -27,27 +27,27 @@ export const styles = css `
   }
 
   .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 {
@@ -58,16 +58,16 @@ export const styles = css `
   }
 
   .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;
   }
@@ -81,8 +81,8 @@ export const styles = css `
 
   .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;
@@ -93,68 +93,68 @@ export const styles = css `
   }
 
   .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 {

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

@@ -1,16 +1,16 @@
-import{css as i,LitElement as r,html as e}from"lit";import{property as a,query as o,customElement as l}from"lit/decorators.js";import{NuralyUIBaseMixin as t}from"@nuralyui/common/mixins";
+import{css as e,html as t,LitElement as i}from"lit";import{property as s,customElement as o}from"lit/decorators.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const s=i`
+ */const r=e`
   :host {
     display: inline-flex;
     align-items: center;
     cursor: pointer;
     user-select: none;
     position: relative;
-    font-family: var(--nuraly-font-family-radio, var(--nuraly-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   }
 
   :host([disabled]) {
@@ -21,7 +21,7 @@ import{css as i,LitElement as r,html as e}from"lit";import{property as a,query a
   .radio-wrapper {
     display: inline-flex;
     align-items: center;
-    gap: var(--nuraly-radio-gap, 8px);
+    gap: 8px;
   }
 
   .radio-input {
@@ -37,127 +37,97 @@ import{css as i,LitElement as r,html as e}from"lit";import{property as a,query a
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--nuraly-border-radius-radio, 50%);
-    border: var(--nuraly-border-width-radio, 2px) solid var(--nuraly-color-radio-border, #d9d9d9);
-    background: var(--nuraly-color-radio-background, #ffffff);
+    border-radius: 50%;
+    border: 2px solid #d9d9d9;
+    background: #ffffff;
     transition: all 0.2s ease;
     flex-shrink: 0;
   }
 
   /* Size variants */
-  :host([size="small"]) .radio-circle {
-    width: var(--nuraly-size-radio-small, 16px);
-    height: var(--nuraly-size-radio-small, 16px);
-  }
-
+  :host([size="small"]) .radio-circle { width: 16px; height: 16px; }
   :host([size="medium"]) .radio-circle,
-  :host(:not([size])) .radio-circle {
-    width: var(--nuraly-size-radio-medium, 20px);
-    height: var(--nuraly-size-radio-medium, 20px);
-  }
-
-  :host([size="large"]) .radio-circle {
-    width: var(--nuraly-size-radio-large, 24px);
-    height: var(--nuraly-size-radio-large, 24px);
-  }
+  :host(:not([size])) .radio-circle { width: 20px; height: 20px; }
+  :host([size="large"]) .radio-circle { width: 24px; height: 24px; }
 
   .radio-circle::after {
     content: '';
     display: block;
-    border-radius: var(--nuraly-border-radius-radio-dot, 50%);
-    background: var(--nuraly-color-radio-dot, #1677ff);
+    border-radius: 50%;
+    background: #1677ff;
     transform: scale(0);
     transition: transform 0.2s ease;
   }
 
-  :host([size="small"]) .radio-circle::after {
-    width: 8px;
-    height: 8px;
-  }
-
+  :host([size="small"]) .radio-circle::after { width: 8px; height: 8px; }
   :host([size="medium"]) .radio-circle::after,
-  :host(:not([size])) .radio-circle::after {
-    width: 10px;
-    height: 10px;
-  }
+  :host(:not([size])) .radio-circle::after { width: 10px; height: 10px; }
+  :host([size="large"]) .radio-circle::after { width: 12px; height: 12px; }
 
-  :host([size="large"]) .radio-circle::after {
-    width: 12px;
-    height: 12px;
-  }
+  /* Checked */
+  :host([checked]) .radio-circle { border-color: #1677ff; }
+  :host([checked]) .radio-circle::after { transform: scale(1); }
 
-  /* Checked state */
-  :host([checked]) .radio-circle {
-    border-color: var(--nuraly-color-radio-checked-border, #1677ff);
-  }
-
-  :host([checked]) .radio-circle::after {
-    transform: scale(1);
-  }
-
-  /* Focus state */
+  /* Focus */
   .radio-input:focus-visible + .radio-circle {
-    outline: 2px solid var(--nuraly-color-radio-border-focus, #1677ff);
+    outline: 2px solid #1677ff;
     outline-offset: 2px;
   }
 
-  /* Hover state */
-  :host(:not([disabled]):hover) .radio-circle {
-    border-color: var(--nuraly-color-radio-border-hover, #1677ff);
-  }
+  /* Hover */
+  :host(:not([disabled])):hover .radio-circle { border-color: #1677ff; }
 
-  /* Disabled state */
+  /* Disabled */
   :host([disabled]) .radio-circle {
-    background: var(--nuraly-color-radio-disabled-background, #f5f5f5);
-    border-color: var(--nuraly-color-radio-disabled-border, #d9d9d9);
+    background: #f5f5f5;
+    border-color: #d9d9d9;
   }
+  :host([disabled][checked]) .radio-circle::after { background: #bfbfbf; }
 
-  :host([disabled][checked]) .radio-circle::after {
-    background: var(--nuraly-color-radio-disabled-dot, #bfbfbf);
-  }
-
-  /* Label - using nr-label component */
+  /* Label */
   .radio-label {
     display: inline-block;
     line-height: 1.5;
   }
 
-  nr-label.radio-label {
-    --nuraly-label-color: var(--nuraly-color-radio-label, #262626);
-    --nuraly-label-font-size: var(--nuraly-font-size-radio-label, 14px);
-  }
-
   /* Size-based label font sizes */
-  :host([size="small"]) nr-label.radio-label {
-    --nuraly-label-font-size: var(--nuraly-font-size-small, 12px);
-  }
+  :host([size="small"]) .radio-label { font-size: 12px; }
+  :host([size="medium"]) .radio-label,
+  :host(:not([size])) .radio-label { font-size: 14px; }
+  :host([size="large"]) .radio-label { font-size: 16px; }
 
-  :host([size="medium"]) nr-label.radio-label,
-  :host(:not([size])) nr-label.radio-label {
-    --nuraly-label-font-size: var(--nuraly-font-size-body, 14px);
-  }
-
-  :host([size="large"]) nr-label.radio-label {
-    --nuraly-label-font-size: var(--nuraly-font-size-large, 16px);
-  }
-
-  :host([disabled]) nr-label.radio-label {
-    --nuraly-label-color: var(--nuraly-color-radio-disabled-text, #bfbfbf);
-  }
+  :host([disabled]) .radio-label { color: #bfbfbf; }
 `
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */;var d;!function(i){i.Small="small",i.Medium="medium",i.Large="large"}(d||(d={}));
+ */;var n;!function(e){e.Small="small",e.Medium="medium",e.Large="large"}(n||(n={}));
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const a=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))}},l=()=>{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)},d=e=>class extends e{constructor(){super(...arguments),this.requiredComponents=[]}validateDependencies(){if(l())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(!l())return!0;let t=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){t=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);e?e(i,s):console.error(s.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)}},c=e=>class extends e{dispatchCustomEvent(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(e,t){var i;const s=Object.assign(Object.assign({},t),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(e,s)}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 s=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,s)}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}},h=new Set,u=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var n,c=function(i,r,e,a){for(var o,l=arguments.length,t=l<3?r:null===a?a=Object.getOwnPropertyDescriptor(r,e):a,s=i.length-1;s>=0;s--)(o=i[s])&&(t=(l<3?o(t):l>3?o(r,e,t):o(r,e))||t);return l>3&&t&&Object.defineProperty(r,e,t),t};let h=n=class extends(t(r)){constructor(){super(...arguments),this.requiredComponents=["nr-label"],this.checked=!1,this.disabled=!1,this.size=d.Medium,this.name="",this.value="",this.id="",this.tabIndex=0,this.required=!1,this._handleClick=i=>{if(this.disabled)return i.preventDefault(),void i.stopPropagation();this.checked||(this.checked=!0,this._uncheckSiblings(),this._dispatchChangeEvent())},this._handleInputChange=i=>{i.stopPropagation(),this.disabled||(this.checked=this.inputElement.checked,this.checked&&(this._uncheckSiblings(),this._dispatchChangeEvent()))},this._handleFocus=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0}))},this._handleBlur=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}_uncheckSiblings(){if(!this.name)return;this.getRootNode().querySelectorAll(`nr-radio[name="${this.name}"]`).forEach(i=>{i!==this&&i instanceof n&&(i.checked=!1)})}_dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("nr-change",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}focus(){var i;null===(i=this.inputElement)||void 0===i||i.focus()}blur(){var i;null===(i=this.inputElement)||void 0===i||i.blur()}render(){return e`
-      <div class="radio-wrapper" data-theme="${this.currentTheme}" data-size="${this.size}">
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const p=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=f(i);e&&function(e,t,i){var s;if(!u.has(e)){const i=new CSSStyleSheet;i.replaceSync(t),u.set(e,i)}const o=u.get(e),r=`doc:${e}`;if(h.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],h.add(r)),i){let t=i;for(;t;){const i=t.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${e}`;h.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,o],h.add(r)),t=i.host}}}}(t,e,this)}}}get lightChildren(){return this.t?this.t.filter(e=>!(e instanceof Element&&e.hasAttribute("slot"))):[]}lightChildrenNamed(e){return this.t?this.t.filter(t=>t instanceof Element&&t.getAttribute("slot")===e):[]}}return t.useShadowDom=!1,t};function f(e){return Array.isArray(e)?e.map(e=>f(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
+ */var b,m=function(e,t,i,s){for(var o,r=arguments.length,n=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s,a=e.length-1;a>=0;a--)(o=e[a])&&(n=(r<3?o(n):r>3?o(t,i,n):o(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};let v=b=class extends((e=>d(a(c(p(e)))))(i)){constructor(){super(...arguments),this.requiredComponents=["nr-label"],this.checked=!1,this.disabled=!1,this.size=n.Medium,this.name="",this.value="",this.id="",this.tabIndex=0,this.required=!1,this._handleClick=e=>{if(this.disabled)return e.preventDefault(),void e.stopPropagation();this.checked||(this.checked=!0,this._uncheckSiblings(),this._dispatchChangeEvent())},this._handleInputChange=e=>{var t,i;e.stopPropagation(),this.disabled||(this.checked=null!==(i=null===(t=this.inputElement)||void 0===t?void 0:t.checked)&&void 0!==i&&i,this.checked&&(this._uncheckSiblings(),this._dispatchChangeEvent()))},this._handleFocus=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-focus",{bubbles:!0,composed:!0}))},this._handleBlur=()=>{this.disabled||this.dispatchEvent(new CustomEvent("nr-blur",{bubbles:!0,composed:!0}))}}get inputElement(){return this.renderRoot.querySelector("input")}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this._handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this._handleClick)}_uncheckSiblings(){if(!this.name)return;this.getRootNode().querySelectorAll(`nr-radio[name="${this.name}"]`).forEach(e=>{e!==this&&e instanceof b&&(e.checked=!1)})}_dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("nr-change",{detail:{value:this.value,checked:this.checked},bubbles:!0,composed:!0}))}focus(){var e;null===(e=this.inputElement)||void 0===e||e.focus()}blur(){var e;null===(e=this.inputElement)||void 0===e||e.blur()}render(){return t`
+      <div part="wrapper" class="radio-wrapper" data-size="${this.size}">
         <input
+          part="input"
           type="radio"
           class="radio-input"
           .checked=${this.checked}
@@ -172,9 +142,9 @@ var n,c=function(i,r,e,a){for(var o,l=arguments.length,t=l<3?r:null===a?a=Object
           aria-checked=${this.checked}
           aria-disabled=${this.disabled}
         />
-        <span class="radio-circle"></span>
-        <nr-label class="radio-label" data-theme="${this.currentTheme}">
+        <span part="circle" class="radio-circle"></span>
+        <span part="label" class="radio-label">
           <slot></slot>
-        </nr-label>
+        </span>
       </div>
-    `}};h.styles=s,c([a({type:Boolean,reflect:!0})],h.prototype,"checked",void 0),c([a({type:Boolean,reflect:!0})],h.prototype,"disabled",void 0),c([a({reflect:!0})],h.prototype,"size",void 0),c([a({type:String})],h.prototype,"name",void 0),c([a({type:String})],h.prototype,"value",void 0),c([a({type:String})],h.prototype,"id",void 0),c([a({type:Number})],h.prototype,"tabIndex",void 0),c([a({type:Boolean})],h.prototype,"required",void 0),c([o("input")],h.prototype,"inputElement",void 0),h=n=c([l("nr-radio")],h);export{h as NrRadioElement,d as RadioSize};
+    `}};v.styles=r,v.useShadowDom=!0,m([s({type:Boolean,reflect:!0})],v.prototype,"checked",void 0),m([s({type:Boolean,reflect:!0})],v.prototype,"disabled",void 0),m([s({reflect:!0})],v.prototype,"size",void 0),m([s({type:String})],v.prototype,"name",void 0),m([s({type:String})],v.prototype,"value",void 0),m([s({type:String})],v.prototype,"id",void 0),m([s({type:Number})],v.prototype,"tabIndex",void 0),m([s({type:Boolean})],v.prototype,"required",void 0),v=b=m([o("nr-radio")],v);export{v as NrRadioElement,n as RadioSize};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { RadioSize } from './radio.types.js';
-declare const NrRadioElement_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 NrRadioElement_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;
 /**
  * A simple radio button component that can be used standalone or within a form.
  * For grouped radio buttons with more features, use nr-radio-group instead.
@@ -22,9 +22,15 @@ declare const NrRadioElement_base: (new (...args: any[]) => import("@nuralyui/co
  * @fires nr-blur - Dispatched when the radio button loses focus
  *
  * @slot default - Radio button label content
+ *
+ * @csspart wrapper - The root wrapper div containing the input, circle, and label
+ * @csspart input - The native radio input element
+ * @csspart circle - The visual custom radio circle indicator
+ * @csspart label - The span wrapping the slot label text
  */
 export declare class NrRadioElement extends NrRadioElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     /** Whether the radio button is checked */
     checked: boolean;
@@ -42,7 +48,7 @@ export declare class NrRadioElement extends NrRadioElement_base {
     tabIndex: number;
     /** Whether the radio button is required */
     required: boolean;
-    private inputElement;
+    private get inputElement();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _handleClick;

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

@@ -11,7 +11,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var NrRadioElement_1;
 import { LitElement, html } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './radio.style.js';
 import { RadioSize } from './radio.types.js';
 import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
@@ -31,6 +31,11 @@ import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
  * @fires nr-blur - Dispatched when the radio button loses focus
  *
  * @slot default - Radio button label content
+ *
+ * @csspart wrapper - The root wrapper div containing the input, circle, and label
+ * @csspart input - The native radio input element
+ * @csspart circle - The visual custom radio circle indicator
+ * @csspart label - The span wrapping the slot label text
  */
 let NrRadioElement = NrRadioElement_1 = class NrRadioElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -65,10 +70,11 @@ let NrRadioElement = NrRadioElement_1 = class NrRadioElement extends NuralyUIBas
             }
         };
         this._handleInputChange = (e) => {
+            var _a, _b;
             e.stopPropagation();
             if (this.disabled)
                 return;
-            this.checked = this.inputElement.checked;
+            this.checked = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false;
             if (this.checked) {
                 this._uncheckSiblings();
                 this._dispatchChangeEvent();
@@ -85,6 +91,9 @@ let NrRadioElement = NrRadioElement_1 = class NrRadioElement extends NuralyUIBas
             this.dispatchEvent(new CustomEvent('nr-blur', { bubbles: true, composed: true }));
         };
     }
+    get inputElement() {
+        return this.renderRoot.querySelector('input');
+    }
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('click', this._handleClick);
@@ -128,8 +137,9 @@ let NrRadioElement = NrRadioElement_1 = class NrRadioElement extends NuralyUIBas
     }
     render() {
         return html `
-      <div class="radio-wrapper" data-theme="${this.currentTheme}" data-size="${this.size}">
+      <div part="wrapper" class="radio-wrapper" data-size="${this.size}">
         <input
+          part="input"
           type="radio"
           class="radio-input"
           .checked=${this.checked}
@@ -144,15 +154,16 @@ let NrRadioElement = NrRadioElement_1 = class NrRadioElement extends NuralyUIBas
           aria-checked=${this.checked}
           aria-disabled=${this.disabled}
         />
-        <span class="radio-circle"></span>
-        <nr-label class="radio-label" data-theme="${this.currentTheme}">
+        <span part="circle" class="radio-circle"></span>
+        <span part="label" class="radio-label">
           <slot></slot>
-        </nr-label>
+        </span>
       </div>
     `;
     }
 };
 NrRadioElement.styles = styles;
+NrRadioElement.useShadowDom = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NrRadioElement.prototype, "checked", void 0);
@@ -177,9 +188,6 @@ __decorate([
 __decorate([
     property({ type: Boolean })
 ], NrRadioElement.prototype, "required", void 0);
-__decorate([
-    query('input')
-], NrRadioElement.prototype, "inputElement", void 0);
 NrRadioElement = NrRadioElement_1 = __decorate([
     customElement('nr-radio')
 ], NrRadioElement);