@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -1,34 +1,66 @@
-import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property as e,customElement as n}from"lit/decorators.js";import{choose as a}from"lit/directives/choose.js";import{classMap as s}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{BaseValidationController as d}from"@nuralyui/common/controllers";import{throttle as u}from"@nuralyui/common/utils";
+import{css as t,html as e,nothing as i,LitElement as s}from"lit";import{property as o,customElement as r}from"lit/decorators.js";import{choose as n}from"lit/directives/choose.js";import{classMap as a}from"lit/directives/class-map.js";import"lit/directives/if-defined.js";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class h{constructor(t){this.host=t,t.addController(this)}hostConnected(){if(this.host.defaultValue&&!this.host.value){const t=this.host.options.find(t=>t.value===this.host.defaultValue);t&&!this.isOptionDisabled(t)&&this.selectOption(t)}}hostDisconnected(){}selectOption(t){if(this.isOptionDisabled(t))return;const r=this.host.value;this.host.value=t.value,this.dispatchChangeEvent(t,r),this.host.requestUpdate()}getSelectedOption(){return this.host.options.find(t=>t.value===this.host.value)}isOptionSelected(t){return t.value===this.host.value}isOptionDisabled(t){return this.host.disabled||Boolean(t.disabled)}getFormData(){return this.host.name?{[this.host.name]:this.host.value}:{}}reset(){this.host.value=this.host.defaultValue||"",this.host.requestUpdate()}getSelectedValue(){return this.host.value}dispatchChangeEvent(t,r){const o=new CustomEvent("nr-change",{detail:{value:t.value,option:t,oldValue:r},bubbles:!0,composed:!0});this.host.dispatchEvent(o)}}
+ */const 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,e,i;super.disconnectedCallback(),null===(t=this.themeObserver)||void 0===t||t.disconnect(),null===(e=this.designSystemObserver)||void 0===e||e.disconnect(),null===(i=this.mediaQuery)||void 0===i||i.removeEventListener("change",this.handleSystemThemeChange)}get currentTheme(){var t,e;const i=(null===(t=this.closest("[data-theme]"))||void 0===t?void 0:t.getAttribute("data-theme"))||document.documentElement.getAttribute("data-theme");return i||((null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(prefers-color-scheme: dark)").matches)?"dark":"light")}get currentDesignSystem(){var t;const e=(null===(t=this.closest("[design-system]"))||void 0===t?void 0:t.getAttribute("design-system"))||document.documentElement.getAttribute("design-system");return"carbon"===e?e:"default"}setupThemeObserver(){this.themeObserver=new MutationObserver(()=>{this.requestUpdate()}),this.themeObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]})}setupDesignSystemObserver(){this.designSystemObserver=new MutationObserver(()=>{this.requestUpdate()}),this.designSystemObserver.observe(document.documentElement,{attributes:!0,attributeFilter:["design-system"]})}setupSystemThemeListener(){window.matchMedia&&(this.mediaQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.mediaQuery.addEventListener("change",this.handleSystemThemeChange))}},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)},h=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 e=!0;for(const i of this.requiredComponents)if(!this.isComponentAvailable(i)){e=!1;const s=new Error(`Required component "${i}" is not registered. Please import and register the component before using ${this.tagName.toLowerCase()}.`);t?t(i,s):console.error(s.message)}return e}isComponentAvailable(t){return!!customElements.get(t)}getMissingDependencies(){return this.requiredComponents.filter(t=>!this.isComponentAvailable(t))}areDependenciesAvailable(){return this.requiredComponents.every(t=>this.isComponentAvailable(t))}addRequiredComponent(t){this.requiredComponents.includes(t)||this.requiredComponents.push(t)}removeRequiredComponent(t){const e=this.requiredComponents.indexOf(t);e>-1&&this.requiredComponents.splice(e,1)}},u=t=>class extends t{dispatchCustomEvent(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}dispatchEventWithMetadata(t,e){var i;const s=Object.assign(Object.assign({},e),{timestamp:Date.now(),componentName:(null===(i=this.tagName)||void 0===i?void 0:i.toLowerCase())||"unknown"});this.dispatchCustomEvent(t,s)}dispatchInputEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,originalEvent:e.originalEvent},e);this.dispatchCustomEvent(t,i)}dispatchFocusEvent(t,e){const i=Object.assign({target:e.target||this,value:e.value,focused:e.focused,cursorPosition:e.cursorPosition,selectedText:e.selectedText},e);this.dispatchCustomEvent(t,i)}dispatchValidationEvent(t,e){var i;const s=Object.assign({target:e.target||this,value:e.value,isValid:null!==(i=e.isValid)&&void 0!==i&&i,error:e.error},e);this.dispatchCustomEvent(t,s)}dispatchActionEvent(t,e){const i=Object.assign({target:e.target||this,action:e.action,previousValue:e.previousValue,newValue:e.newValue},e);this.dispatchCustomEvent(t,i)}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}},c=new Set,p=new Map;
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class c{constructor(t,r){this.groupController=r,this.host=t,this.boundKeyDownHandler=this.handleKeyDown.bind(this),t.addController(this)}hostConnected(){this.host.addEventListener("keydown",this.boundKeyDownHandler)}hostDisconnected(){this.host.removeEventListener("keydown",this.boundKeyDownHandler)}handleKeyDown(t){const r=this.host.options;if(!r||0===r.length)return;const o=r.findIndex(t=>this.groupController.isOptionSelected(t));switch(t.key){case"ArrowDown":case"ArrowRight":t.preventDefault(),this.selectNextOption(r,o);break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.selectPreviousOption(r,o);break;case" ":case"Enter":t.preventDefault(),-1===o&&this.selectFirstEnabledOption(r);break;case"Home":t.preventDefault(),this.selectFirstEnabledOption(r);break;case"End":t.preventDefault(),this.selectLastEnabledOption(r)}}selectNextOption(t,r){const o=-1===r?0:r+1;for(let r=0;r<t.length;r++){const i=t[(o+r)%t.length];if(!this.groupController.isOptionDisabled(i)){this.groupController.selectOption(i);break}}}selectPreviousOption(t,r){const o=-1===r?t.length-1:r-1;for(let r=0;r<t.length;r++){const i=t[(o-r+t.length)%t.length];if(!this.groupController.isOptionDisabled(i)){this.groupController.selectOption(i);break}}}selectFirstEnabledOption(t){const r=t.find(t=>!this.groupController.isOptionDisabled(t));r&&this.groupController.selectOption(r)}selectLastEnabledOption(t){const r=t.filter(t=>!this.groupController.isOptionDisabled(t)),o=r[r.length-1];o&&this.groupController.selectOption(o)}}
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+const b=t=>{class e extends t{constructor(){super(...arguments),this.t=null}createRenderRoot(){return this.constructor.useShadowDom?super.createRenderRoot():this}connectedCallback(){const t=this.constructor.useShadowDom;if(!t&&null===this.t)for(this.t=[];this.firstChild;)this.t.push(this.removeChild(this.firstChild));if(super.connectedCallback(),!t){const t=this.constructor,e=this.tagName.toLowerCase(),i=t.styles;if(i){const t=m(i);t&&function(t,e,i){var s;if(!p.has(t)){const i=new CSSStyleSheet;i.replaceSync(e),p.set(t,i)}const o=p.get(t),r=`doc:${t}`;if(c.has(r)||(document.adoptedStyleSheets=[...document.adoptedStyleSheets,o],c.add(r)),i){let e=i;for(;e;){const i=e.getRootNode();if(!(i instanceof ShadowRoot))break;{const r=`shadow:${((null===(s=i.host)||void 0===s?void 0:s.tagName)||"").toLowerCase()}:${t}`;c.has(r)||(i.adoptedStyleSheets=[...i.adoptedStyleSheets,o],c.add(r)),e=i.host}}}}(e,t,this)}}}get lightChildren(){return this.t?this.t.filter(t=>!(t instanceof Element&&t.hasAttribute("slot"))):[]}lightChildrenNamed(t){return this.t?this.t.filter(e=>e instanceof Element&&e.getAttribute("slot")===t):[]}}return e.useShadowDom=!1,e};function m(t){return Array.isArray(t)?t.map(t=>m(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
- */class p{constructor(t){this._focusedIndex=-1,this._hasFocus=!1,this.host=t,this.boundFocusInHandler=this.handleFocusIn.bind(this),this.boundFocusOutHandler=this.handleFocusOut.bind(this),t.addController(this)}hostConnected(){this.host.addEventListener("focusin",this.boundFocusInHandler),this.host.addEventListener("focusout",this.boundFocusOutHandler)}hostDisconnected(){this.host.removeEventListener("focusin",this.boundFocusInHandler),this.host.removeEventListener("focusout",this.boundFocusOutHandler)}get focusedIndex(){return this._focusedIndex}get hasFocus(){return this._hasFocus}setFocusedOption(t){const r=this._focusedIndex;this._focusedIndex=t,r!==t&&this.host.requestUpdate()}getFocusedIndex(){return this._focusedIndex}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.host.requestUpdate()}handleFocusIn(t){var r;this._hasFocus=!0;const o=t.target;if(o&&o.matches('input[type="radio"], nr-button[role="radio"]')){const t=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelectorAll('input[type="radio"], nr-button[role="radio"]');if(t){const r=Array.from(t).indexOf(o);-1!==r&&this.setFocusedOption(r)}}this.host.requestUpdate()}handleFocusOut(t){const r=t.relatedTarget,o=this.host;r&&o.contains(r)||(this._hasFocus=!1,this.host.requestUpdate())}focus(){const t=this.host.options,r=this.host.value,o=t.findIndex(t=>t.value===r);if(-1!==o)return void this.focusOptionAtIndex(o);const i=t.findIndex(t=>!t.disabled);-1!==i&&this.focusOptionAtIndex(i)}blur(){const t=this.host.shadowRoot;if(!t)return;const r=t.querySelector('input[type="radio"]:focus, nr-button[role="radio"]:focus');r&&"function"==typeof r.blur&&r.blur()}focusOptionAtIndex(t){const r=this.host.shadowRoot;if(!r)return;this.updateTabIndices(t);const o=r.querySelectorAll('input[type="radio"]');if(o[t])return void o[t].focus();const i=r.querySelectorAll('nr-button[role="radio"]');i[t]&&i[t].focus()}updateTabIndices(t){const r=this.host.shadowRoot;if(!r)return;const o=this.host.options,i=this.host.value;let e=t;if(void 0===e){const t=o.findIndex(t=>t.value===i);e=-1!==t?t:o.findIndex(t=>!t.disabled)}r.querySelectorAll('input[type="radio"]').forEach((t,r)=>{t.tabIndex=r===e?0:-1});r.querySelectorAll('nr-button[role="radio"]').forEach((t,r)=>{t.tabIndex=r===e?0:-1})}hostUpdated(){this.updateTabIndices()}}
+ */class g{constructor(t){this.host=t,t.addController(this)}hostConnected(){if(this.host.defaultValue&&!this.host.value){const t=this.host.options.find(t=>t.value===this.host.defaultValue);t&&!this.isOptionDisabled(t)&&this.selectOption(t)}}hostDisconnected(){}selectOption(t){if(this.isOptionDisabled(t))return;const e=this.host.value;this.host.value=t.value,this.dispatchChangeEvent(t,e),this.host.requestUpdate()}getSelectedOption(){return this.host.options.find(t=>t.value===this.host.value)}isOptionSelected(t){return t.value===this.host.value}isOptionDisabled(t){return this.host.disabled||Boolean(t.disabled)}getFormData(){return this.host.name?{[this.host.name]:this.host.value}:{}}reset(){this.host.value=this.host.defaultValue||"",this.host.requestUpdate()}getSelectedValue(){return this.host.value}dispatchChangeEvent(t,e){const i=new CustomEvent("nr-change",{detail:{value:t.value,option:t,oldValue:e},bubbles:!0,composed:!0});this.host.dispatchEvent(i)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class b extends d{validate(){const t=this.host.required,r=this.host.value;return t&&!r?(this._isValid=!1,this._validationMessage="Please select an option",this.requestUpdate(),!1):(this._isValid=!0,this._validationMessage="",this.requestUpdate(),!0)}setCustomValidity(t){this._isValid=!t,this._validationMessage=t,this.requestUpdate()}getFormData(){const t=this.host.name,r=this.host.value;return t?{[t]:r}:{}}reportValidity(){const t=this.validate();if(!t){const t=new CustomEvent("invalid",{detail:{message:this._validationMessage},bubbles:!0,composed:!0});this._host.dispatchEvent(t)}return t}reset(){this.clearValidation()}getFormDataObject(){const t=this.host.name,r=this.host.value;if(!t||!r)return null;const o=new FormData;return o.append(t,r),o}validateOnChange(){this._isValid||this.validate()}}
+ */class f{constructor(t,e){this.groupController=e,this.host=t,this.boundKeyDownHandler=this.handleKeyDown.bind(this),t.addController(this)}hostConnected(){this.host.addEventListener("keydown",this.boundKeyDownHandler)}hostDisconnected(){this.host.removeEventListener("keydown",this.boundKeyDownHandler)}handleKeyDown(t){const e=this.host.options;if(!e||0===e.length)return;const i=e.findIndex(t=>this.groupController.isOptionSelected(t));switch(t.key){case"ArrowDown":case"ArrowRight":t.preventDefault(),this.selectNextOption(e,i);break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.selectPreviousOption(e,i);break;case" ":case"Enter":t.preventDefault(),-1===i&&this.selectFirstEnabledOption(e);break;case"Home":t.preventDefault(),this.selectFirstEnabledOption(e);break;case"End":t.preventDefault(),this.selectLastEnabledOption(e)}}selectNextOption(t,e){const i=-1===e?0:e+1;for(let e=0;e<t.length;e++){const s=t[(i+e)%t.length];if(!this.groupController.isOptionDisabled(s)){this.groupController.selectOption(s);break}}}selectPreviousOption(t,e){const i=-1===e?t.length-1:e-1;for(let e=0;e<t.length;e++){const s=t[(i-e+t.length)%t.length];if(!this.groupController.isOptionDisabled(s)){this.groupController.selectOption(s);break}}}selectFirstEnabledOption(t){const e=t.find(t=>!this.groupController.isOptionDisabled(t));e&&this.groupController.selectOption(e)}selectLastEnabledOption(t){const e=t.filter(t=>!this.groupController.isOptionDisabled(t)),i=e[e.length-1];i&&this.groupController.selectOption(i)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class y{constructor(t){this._rippleEnabled=!0,this.activeRipples=new Set,this.ripplePool=[],this.host=t,this.boundClickHandler=this.handleClick.bind(this),t.addController(this);const r=this.addRippleEffect.bind(this);this.addRippleEffect=u(r,16)}hostConnected(){this.host.addEventListener("click",this.boundClickHandler)}hostDisconnected(){this.host.removeEventListener("click",this.boundClickHandler)}get rippleEnabled(){return this._rippleEnabled}set rippleEnabled(t){this._rippleEnabled=t}handleClick(t){if(!this._rippleEnabled)return;const r=t.target;r&&r.matches('input[type="radio"]')&&this.addRippleToElement(r),r&&r.matches('nr-button[role="radio"]')&&this.addButtonRippleEffect(r)}addRippleEffect(t){const r=t.target;r&&this.addRippleToElement(r)}addRippleToElement(t){t.style.animation="none",t.getAnimations();const r=getComputedStyle(t).getPropertyValue("--nuraly-radio-ripple-duration")||getComputedStyle(t).getPropertyValue("--nuraly-radio-local-ripple-duration")||"300ms";t.style.animation=`radioRipple ${r} ease-out`;const o=this.parseDuration(r);setTimeout(()=>{t.style.animation=""},o)}addButtonRippleEffect(t){const r=this.createRippleElement(t);r&&(t.appendChild(r),setTimeout(()=>{r.parentNode&&r.parentNode.removeChild(r)},600))}createRippleElement(t){const r=this.getRippleElement(t);return r.style.animation="radioRippleSpread 600ms ease-out",r}parseDuration(t){const r=t.match(/^([\d.]+)(s|ms)$/);if(!r)return 300;const o=Number.parseFloat(r[1]);return"s"===r[2]?1e3*o:o}triggerRipple(t){if(!this._rippleEnabled)return;const r=this.host.shadowRoot;if(!r)return;let o=null;o=t?r.querySelector(`input[type="radio"][value="${t}"]`):r.querySelector('input[type="radio"]:checked'),o&&this.addRippleToElement(o)}disableRipple(){this._rippleEnabled=!1}enableRipple(){this._rippleEnabled=!0}clearRipples(){this.activeRipples.forEach(t=>{t.parentNode&&t.parentNode.removeChild(t),this.ripplePool.length<10&&(t.style.animation="",t.style.transform="scale(0)",this.ripplePool.push(t))}),this.activeRipples.clear();const t=this.host.shadowRoot;if(t){t.querySelectorAll('input[type="radio"]').forEach(t=>{t.style.animation=""})}}getRippleElement(t){let r=this.ripplePool.pop();r||(r=document.createElement("span"),r.className="radio-ripple",r.style.position="absolute",r.style.borderRadius="50%",r.style.background="currentColor",r.style.opacity="0.1",r.style.pointerEvents="none");const o=t.getBoundingClientRect(),i=Math.max(o.width,o.height);return r.style.width=`${i}px`,r.style.height=`${i}px`,r.style.left=-i/2+"px",r.style.top=-i/2+"px",r.style.transform="scale(0)",this.activeRipples.add(r),r}addRippleEffectToElement(t){this.addRippleToElement(t)}setRippleEnabled(t){this._rippleEnabled=t}}
+ */class y{constructor(t){this._focusedIndex=-1,this._hasFocus=!1,this.host=t,this.boundFocusInHandler=this.handleFocusIn.bind(this),this.boundFocusOutHandler=this.handleFocusOut.bind(this),t.addController(this)}hostConnected(){this.host.addEventListener("focusin",this.boundFocusInHandler),this.host.addEventListener("focusout",this.boundFocusOutHandler)}hostDisconnected(){this.host.removeEventListener("focusin",this.boundFocusInHandler),this.host.removeEventListener("focusout",this.boundFocusOutHandler)}get focusedIndex(){return this._focusedIndex}get hasFocus(){return this._hasFocus}setFocusedOption(t){const e=this._focusedIndex;this._focusedIndex=t,e!==t&&this.host.requestUpdate()}getFocusedIndex(){return this._focusedIndex}clearFocus(){this._focusedIndex=-1,this._hasFocus=!1,this.host.requestUpdate()}handleFocusIn(t){var e;this._hasFocus=!0;const i=t.target;if(i&&i.matches('input[type="radio"], nr-button[role="radio"]')){const t=null===(e=this.host.shadowRoot)||void 0===e?void 0:e.querySelectorAll('input[type="radio"], nr-button[role="radio"]');if(t){const e=Array.from(t).indexOf(i);-1!==e&&this.setFocusedOption(e)}}this.host.requestUpdate()}handleFocusOut(t){const e=t.relatedTarget,i=this.host;e&&i.contains(e)||(this._hasFocus=!1,this.host.requestUpdate())}focus(){const t=this.host.options,e=this.host.value,i=t.findIndex(t=>t.value===e);if(-1!==i)return void this.focusOptionAtIndex(i);const s=t.findIndex(t=>!t.disabled);-1!==s&&this.focusOptionAtIndex(s)}blur(){const t=this.host.shadowRoot;if(!t)return;const e=t.querySelector('input[type="radio"]:focus, nr-button[role="radio"]:focus');e&&"function"==typeof e.blur&&e.blur()}focusOptionAtIndex(t){const e=this.host.shadowRoot;if(!e)return;this.updateTabIndices(t);const i=e.querySelectorAll('input[type="radio"]');if(i[t])return void i[t].focus();const s=e.querySelectorAll('nr-button[role="radio"]');s[t]&&s[t].focus()}updateTabIndices(t){const e=this.host.shadowRoot;if(!e)return;const i=this.host.options,s=this.host.value;let o=t;if(void 0===o){const t=i.findIndex(t=>t.value===s);o=-1!==t?t:i.findIndex(t=>!t.disabled)}e.querySelectorAll('input[type="radio"]').forEach((t,e)=>{t.tabIndex=e===o?0:-1});e.querySelectorAll('nr-button[role="radio"]').forEach((t,e)=>{t.tabIndex=e===o?0:-1})}hostUpdated(){this.updateTabIndices()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */const g=t`
+ */class v{constructor(t){this._host=t,t.addController(this)}get host(){return this._host}hostConnected(){}hostDisconnected(){}hostUpdate(){}hostUpdated(){}requestUpdate(){try{this._host.requestUpdate()}catch(t){this.handleError(t,"requestUpdate")}}dispatchEvent(t){try{return this._host.dispatchEvent(t)}catch(t){return this.handleError(t,"dispatchEvent"),!1}}handleError(t,e){console.error(`[${this.constructor.name}] Error in ${e}:`,t);try{this._host.dispatchEvent(new CustomEvent("nr-controller-error",{detail:{error:t.message,context:e,controller:this.constructor.name},bubbles:!0,composed:!0}))}catch(t){}}safeExecute(t,e,i){try{return t()}catch(t){return this.handleError(t,e),i}}debounce(t,e){let i;const s=(...s)=>{void 0!==i&&clearTimeout(i),i=setTimeout(()=>{i=void 0,t.apply(this,s)},e)};return s.cancel=()=>{void 0!==i&&(clearTimeout(i),i=void 0)},s}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class w extends v{constructor(){super(...arguments),this._isValid=!0,this._validationMessage="",this._validationState="pristine",this._rules=[]}get isValid(){return this._isValid}get validationMessage(){return this._validationMessage}get validationState(){return this._validationState}addRule(t){this._rules.push(t),this.requestUpdate()}removeRule(t){this._rules=this._rules.filter(e=>!t(e)),this.requestUpdate()}clearRules(){this._rules=[],this.clearValidation()}clearValidation(){this._isValid=!0,this._validationMessage="",this._validationState="pristine",this.requestUpdate(),this.dispatchValidationEvent()}checkValidity(){return this.validate()}reportValidity(){const t=this.checkValidity();return t||this.dispatchValidationEvent(),t}dispatchValidationEvent(){this.dispatchEvent(new CustomEvent("nr-validation",{detail:{isValid:this._isValid,validationMessage:this._validationMessage,validationState:this._validationState},bubbles:!0,composed:!0}))}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */class $ extends w{validate(){const t=this.host.required,e=this.host.value;return t&&!e?(this._isValid=!1,this._validationMessage="Please select an option",this.requestUpdate(),!1):(this._isValid=!0,this._validationMessage="",this.requestUpdate(),!0)}setCustomValidity(t){this._isValid=!t,this._validationMessage=t,this.requestUpdate()}getFormData(){const t=this.host.name,e=this.host.value;return t?{[t]:e}:{}}reportValidity(){const t=this.validate();if(!t){const t=new CustomEvent("invalid",{detail:{message:this._validationMessage},bubbles:!0,composed:!0});this._host.dispatchEvent(t)}return t}reset(){this.clearValidation()}getFormDataObject(){const t=this.host.name,e=this.host.value;if(!t||!e)return null;const i=new FormData;return i.append(t,e),i}validateOnChange(){this._isValid||this.validate()}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+class x{constructor(t){this._rippleEnabled=!0,this.activeRipples=new Set,this.ripplePool=[],this.host=t,this.boundClickHandler=this.handleClick.bind(this),t.addController(this);const e=this.addRippleEffect.bind(this);this.addRippleEffect=function(t,e){let i;return function(...s){i||(t.apply(this,s),i=!0,setTimeout(()=>i=!1,e))}}(e,16)}hostConnected(){this.host.addEventListener("click",this.boundClickHandler)}hostDisconnected(){this.host.removeEventListener("click",this.boundClickHandler)}get rippleEnabled(){return this._rippleEnabled}set rippleEnabled(t){this._rippleEnabled=t}handleClick(t){if(!this._rippleEnabled)return;const e=t.target;e&&e.matches('input[type="radio"]')&&this.addRippleToElement(e),e&&e.matches('nr-button[role="radio"]')&&this.addButtonRippleEffect(e)}addRippleEffect(t){const e=t.target;e&&this.addRippleToElement(e)}addRippleToElement(t){t.style.animation="none",t.getAnimations();const e=getComputedStyle(t).getPropertyValue("--nuraly-radio-ripple-duration")||getComputedStyle(t).getPropertyValue("--nuraly-radio-local-ripple-duration")||"300ms";t.style.animation=`radioRipple ${e} ease-out`;const i=this.parseDuration(e);setTimeout(()=>{t.style.animation=""},i)}addButtonRippleEffect(t){const e=this.createRippleElement(t);e&&(t.appendChild(e),setTimeout(()=>{e.parentNode&&e.parentNode.removeChild(e)},600))}createRippleElement(t){const e=this.getRippleElement(t);return e.style.animation="radioRippleSpread 600ms ease-out",e}parseDuration(t){const e=t.match(/^([\d.]+)(s|ms)$/);if(!e)return 300;const i=Number.parseFloat(e[1]);return"s"===e[2]?1e3*i:i}triggerRipple(t){if(!this._rippleEnabled)return;const e=this.host.shadowRoot;if(!e)return;let i=null;i=t?e.querySelector(`input[type="radio"][value="${t}"]`):e.querySelector('input[type="radio"]:checked'),i&&this.addRippleToElement(i)}disableRipple(){this._rippleEnabled=!1}enableRipple(){this._rippleEnabled=!0}clearRipples(){this.activeRipples.forEach(t=>{t.parentNode&&t.parentNode.removeChild(t),this.ripplePool.length<10&&(t.style.animation="",t.style.transform="scale(0)",this.ripplePool.push(t))}),this.activeRipples.clear();const t=this.host.shadowRoot;if(t){t.querySelectorAll('input[type="radio"]').forEach(t=>{t.style.animation=""})}}getRippleElement(t){let e=this.ripplePool.pop();e||(e=document.createElement("span"),e.className="radio-ripple",e.style.position="absolute",e.style.borderRadius="50%",e.style.background="currentColor",e.style.opacity="0.1",e.style.pointerEvents="none");const i=t.getBoundingClientRect(),s=Math.max(i.width,i.height);return e.style.width=`${s}px`,e.style.height=`${s}px`,e.style.left=-s/2+"px",e.style.top=-s/2+"px",e.style.transform="scale(0)",this.activeRipples.add(e),e}addRippleEffectToElement(t){this.addRippleToElement(t)}setRippleEnabled(t){this._rippleEnabled=t}}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */const E=t`
   :host {
     /* ========================================
      * CSS CUSTOM PROPERTIES - RADIO GROUP
@@ -39,18 +71,18 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
     --nuraly-radio-group-horizontal-gap: 16px;
 
     /* Colors - Error/Warning states */
-    --nuraly-radio-group-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);
-    --nuraly-radio-group-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);
-    --nuraly-radio-group-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);
-    --nuraly-radio-group-warning-text-color: var(--nuraly-color-radio-warning-text, #f59e0b);
+    --nuraly-radio-group-error-icon-color: #ef4444;
+    --nuraly-radio-group-error-text-color: #ef4444;
+    --nuraly-radio-group-warning-icon-color: #f59e0b;
+    --nuraly-radio-group-warning-text-color: #f59e0b;
 
     /* Typography */
-    --nuraly-radio-group-font-family: var(--nuraly-font-family-radio, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
-    --nuraly-radio-group-message-font-size: var(--nuraly-font-size-radio-message, 12px);
+    --nuraly-radio-group-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+    --nuraly-radio-group-message-font-size: 12px;
 
     /* Button type styling */
     --nuraly-radio-group-button-border-radius: 4px;
-    --nuraly-radio-group-button-hover-color: var(--nuraly-color-radio-border-hover, #7c3aed);
+    --nuraly-radio-group-button-hover-color: #7c3aed;
 
     /* Slot container styling */
     --nuraly-radio-group-slot-hover-bg: rgba(124, 58, 237, 0.04);
@@ -63,7 +95,7 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
     
     width: fit-content;
     display: block;
-    font-family: var(--nuraly-radio-group-font-family);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
   }
 
   /* ========================================
@@ -73,13 +105,13 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
   .radio-group {
     display: flex;
     flex-direction: column;
-    gap: var(--nuraly-radio-group-gap);
+    gap: 12px;
   }
 
   .radio-group.horizontal {
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--nuraly-radio-group-horizontal-gap);
+    gap: 16px;
   }
 
   .radio-wrapper {
@@ -96,7 +128,7 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
     display: flex;
     align-items: center;
     gap: 6px;
-    font-size: var(--nuraly-radio-group-message-font-size);
+    font-size: 12px;
     padding-left: 28px; /* Align with radio label */
   }
 
@@ -105,19 +137,19 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
   }
 
   .radio-wrapper.error nr-icon {
-    --nuraly-icon-color: var(--nuraly-radio-group-error-icon-color);
+    --nuraly-icon-color: #ef4444;
   }
 
   .radio-wrapper.warning nr-icon {
-    --nuraly-icon-color: var(--nuraly-radio-group-warning-icon-color);
+    --nuraly-icon-color: #f59e0b;
   }
 
   .radio-wrapper.error .message-container {
-    color: var(--nuraly-radio-group-error-text-color);
+    color: #ef4444;
   }
 
   .radio-wrapper.warning .message-container {
-    color: var(--nuraly-radio-group-warning-text-color);
+    color: #f59e0b;
   }
 
   /* ========================================
@@ -131,13 +163,13 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
 
   /* Button border radius for first and last child */
   .type-button :first-child {
-    --nuraly-button-border-top-left-radius: var(--nuraly-radio-group-button-border-radius);
-    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-group-button-border-radius);
+    --nuraly-button-border-top-left-radius: 4px;
+    --nuraly-button-border-bottom-left-radius: 4px;
   }
 
   .type-button :last-child {
-    --nuraly-button-border-top-right-radius: var(--nuraly-radio-group-button-border-radius);
-    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-group-button-border-radius);
+    --nuraly-button-border-top-right-radius: 4px;
+    --nuraly-button-border-bottom-right-radius: 4px;
   }
 
   .type-button nr-button:not(:last-child) {
@@ -150,8 +182,8 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
   }
 
   .type-button nr-button[type="default"]:hover {
-    --nuraly-button-color: var(--nuraly-radio-group-button-hover-color);
-    --nuraly-button-border-color: var(--nuraly-radio-group-button-hover-color);
+    --nuraly-button-color: #7c3aed;
+    --nuraly-button-border-color: #7c3aed;
     z-index: 2;
   }
 
@@ -169,20 +201,20 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
 
   .type-button nr-button[disabled]:hover {
     z-index: auto;
-    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));
-    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));
-    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));
+    --nuraly-button-border-color: #c6c6c6;
+    --nuraly-button-background-color: #f4f4f4;
+    --nuraly-button-color: #c6c6c6;
   }
 
   .type-button nr-button[type="primary"][disabled] {
-    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));
-    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));
-    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+    --nuraly-button-background-color: #c6c6c6;
+    --nuraly-button-border-color: #c6c6c6;
+    --nuraly-button-color: #ffffff;
   }
 
   .type-button nr-button[type="primary"][disabled] nr-icon {
-    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
-    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
+    --nuraly-icon-color: #ffffff;
+    --nuraly-icon-local-color: #ffffff;
   }
 
   /* ========================================
@@ -198,8 +230,8 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
   /* Ensure minimum padding for auto-width buttons to prevent them from becoming too small */
   :host([auto-width]) .type-button nr-button button {
     min-width: auto;
-    padding-left: max(var(--nuraly-spacing-2), 0.5rem);
-    padding-right: max(var(--nuraly-spacing-2), 0.5rem);
+    padding-left: max(0.5rem, 0.5rem);
+    padding-right: max(0.5rem, 0.5rem);
   }
 
   /* Icon-only buttons with auto-width should have minimal but adequate padding */
@@ -210,30 +242,30 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
   }
 
   :host([auto-width]) .type-button nr-button.icon-only button {
-    padding: max(0.375rem, var(--nuraly-spacing-2)); /* Ensure minimum 6px padding for icon-only */
+    padding: max(0.375rem, 0.5rem); /* Ensure minimum 6px padding for icon-only */
     min-width: auto;
   }
 
   /* For small size buttons, use proportionally smaller but still adequate padding */
   :host([auto-width]) .type-button nr-button[size="small"] button {
-    padding-left: max(var(--nuraly-spacing-1-5), 0.375rem);
-    padding-right: max(var(--nuraly-spacing-1-5), 0.375rem);
+    padding-left: max(0.375rem, 0.375rem);
+    padding-right: max(0.375rem, 0.375rem);
   }
 
   /* For small size icon-only buttons, use even less but still minimum padding */
   :host([auto-width]) .type-button nr-button.icon-only[size="small"] button {
-    padding: max(0.25rem, var(--nuraly-spacing-1-5));
+    padding: max(0.25rem, 0.375rem);
   }
 
   /* For large size buttons, maintain larger minimum padding */
   :host([auto-width]) .type-button nr-button[size="large"] button {
-    padding-left: max(var(--nuraly-spacing-4), 0.75rem);
-    padding-right: max(var(--nuraly-spacing-4), 0.75rem);
+    padding-left: max(1rem, 0.75rem);
+    padding-right: max(1rem, 0.75rem);
   }
 
   /* For large size icon-only buttons, use proportionally larger padding */
   :host([auto-width]) .type-button nr-button.icon-only[size="large"] button {
-    padding: max(0.5rem, var(--nuraly-spacing-3));
+    padding: max(0.5rem, 0.75rem);
   }
 
   /* ========================================
@@ -247,11 +279,11 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
     cursor: pointer;
     transition: all 0.2s ease;
     padding: 8px;
-    border-radius: var(--nuraly-radio-group-slot-border-radius);
+    border-radius: 6px;
   }
 
   .slot-wrapper:hover {
-    background-color: var(--nuraly-radio-group-slot-hover-bg);
+    background-color: rgba(124, 58, 237, 0.04);
   }
 
   .slot-wrapper nr-radio {
@@ -265,7 +297,7 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
   }
 
   .slot-container.selected .slot-wrapper {
-    background-color: var(--nuraly-radio-group-slot-selected-bg);
+    background-color: rgba(124, 58, 237, 0.08);
   }
 
   /* ========================================
@@ -273,9 +305,9 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
    * ======================================== */
 
   ::slotted([slot='helper-text']) {
-    color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color, #8c8c8c));
-    font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size, 12px));
-    padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top, 4px));
+    color: #8c8c8c;
+    font-size: 12px;
+    padding-top: 4px;
     
     /* Prevent text overflow and ensure proper wrapping without affecting parent width */
     word-wrap: break-word;
@@ -290,21 +322,22 @@ import{css as t,LitElement as r,html as o,nothing as i}from"lit";import{property
     line-height: 1.4;
     display: block;
   }
-`;var m,v,f,w,x;!function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(m||(m={})),function(t){t.Left="left",t.Right="right"}(v||(v={})),function(t){t.Default="default",t.Button="button",t.Slot="slot",t.ButtonSlot="button-slot"}(f||(f={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(w||(w={})),function(t){t.Default="default",t.Solid="solid"}(x||(x={}));
+`;var S,O,k,R,C;!function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(S||(S={})),function(t){t.Left="left",t.Right="right"}(O||(O={})),function(t){t.Default="default",t.Button="button",t.Slot="slot",t.ButtonSlot="button-slot"}(k||(k={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(R||(R={})),function(t){t.Default="default",t.Solid="solid"}(C||(C={}));
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var $=function(t,r,o,i){for(var e,n=arguments.length,a=n<3?r:null===i?i=Object.getOwnPropertyDescriptor(r,o):i,s=t.length-1;s>=0;s--)(e=t[s])&&(a=(n<3?e(a):n>3?e(r,o,a):e(r,o))||a);return n>3&&a&&Object.defineProperty(r,o,a),a};let O=class extends(l(r)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-radio"],this.options=[],this.defaultValue="",this.value="",this.name="radioGroup",this.direction="vertical",this.type=f.Default,this.required=!1,this.disabled=!1,this.size="medium",this.position="left",this.autoWidth=!1,this.helper="",this.groupController=new h(this),this.keyboardController=new c(this,this.groupController),this.focusController=new p(this),this.validationController=new b(this),this.rippleController=new y(this)}get selectedOption(){return this.groupController.getSelectedOption()}isOptionSelected(t){return this.groupController.isOptionSelected(t)}isOptionDisabled(t){return this.groupController.isOptionDisabled(t)}isOptionIconOnly(t){return!(!t.icon||t.label&&""!==t.label.trim())}handleSelectionChange(t){this.groupController.selectOption(t)}setFocusedOption(t){this.focusController.setFocusedOption(t)}handleKeyDown(t){}addRippleEffect(t){this.rippleController.addRippleEffect(t)}validate(){return this.validationController.validate()}get validationMessage(){return this.validationController.validationMessage}get isValid(){return this.validationController.isValid}getFormData(){return this.validationController.getFormData()}reset(){this.validationController.reset()}get formData(){return this.validationController.getFormDataObject()}checkValidity(){return this.validate()}reportValidity(){return this.validationController.reportValidity()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}renderOptionDefault(){return o`
-      <div 
-        role="radiogroup" 
+var T=function(t,e,i,s){for(var o,r=arguments.length,n=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,a=t.length-1;a>=0;a--)(o=t[a])&&(n=(r<3?o(n):r>3?o(e,i,n):o(e,i))||n);return r>3&&n&&Object.defineProperty(e,i,n),n};let D=class extends((t=>h(l(u(b(t)))))(s)){constructor(){super(...arguments),this.requiredComponents=["nr-icon","nr-radio"],this.options=[],this.defaultValue="",this.value="",this.name="radioGroup",this.direction="vertical",this.type=k.Default,this.required=!1,this.disabled=!1,this.size="medium",this.position="left",this.autoWidth=!1,this.helper="",this.groupController=new g(this),this.keyboardController=new f(this,this.groupController),this.focusController=new y(this),this.validationController=new $(this),this.rippleController=new x(this)}get selectedOption(){return this.groupController.getSelectedOption()}isOptionSelected(t){return this.groupController.isOptionSelected(t)}isOptionDisabled(t){return this.groupController.isOptionDisabled(t)}isOptionIconOnly(t){return!(!t.icon||t.label&&""!==t.label.trim())}handleSelectionChange(t){this.groupController.selectOption(t)}setFocusedOption(t){this.focusController.setFocusedOption(t)}handleKeyDown(t){}addRippleEffect(t){this.rippleController.addRippleEffect(t)}validate(){return this.validationController.validate()}get validationMessage(){return this.validationController.validationMessage}get isValid(){return this.validationController.isValid}getFormData(){return this.validationController.getFormData()}reset(){this.validationController.reset()}get formData(){return this.validationController.getFormDataObject()}checkValidity(){return this.validate()}reportValidity(){return this.validationController.reportValidity()}focus(){this.focusController.focus()}blur(){this.focusController.blur()}renderOptionDefault(){return e`
+      <div
+        role="radiogroup"
         aria-labelledby="radio-group-label"
         class="radio-group ${this.direction}"
+        part="radio-group"
       >
-        ${this.options.map((t,r)=>o`
+        ${this.options.map((t,s)=>e`
             <div
-              class="${s({"radio-wrapper":!0,error:"error"===t.state,warning:"warning"===t.state,[t.className||""]:Boolean(t.className)})}"
+              class="${a({"radio-wrapper":!0,error:"error"===t.state,warning:"warning"===t.state,[t.className||""]:Boolean(t.className)})}"
               data-theme="${this.currentTheme}"
               style="${t.style||""}"
               title="${t.title||""}"
@@ -318,56 +351,58 @@ var $=function(t,r,o,i){for(var e,n=arguments.length,a=n<3?r:null===i?i=Object.g
                 ?disabled="${this.isOptionDisabled(t)||this.disabled}"
                 ?required="${this.required}"
                 tabindex="${this.isOptionSelected(t)?"0":"-1"}"
-                @change="${r=>{this.addRippleEffect(r),this.handleSelectionChange(t)}}"
-                @focus="${()=>this.setFocusedOption(r)}"
+                @change="${e=>{this.addRippleEffect(e),this.handleSelectionChange(t)}}"
+                @focus="${()=>this.setFocusedOption(s)}"
               >
                 ${t.label}
               </nr-radio>
-              ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+              ${t.state&&t.message?e`<div class="message-container" id="${t.value}-message">
                     <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
                     <span>${t.message}</span>
                   </div>`:i}
             </div>
           `)}
       </div>
-    `}renderOptionsWithButtons(){return o`
-      <div 
-        class="type-button" 
-        role="radiogroup" 
+    `}renderOptionsWithButtons(){return e`
+      <div
+        class="type-button"
+        role="radiogroup"
         aria-labelledby="radio-group-label"
+        part="type-button"
         @keydown="${this.handleKeyDown}"
       >
-        ${this.options.map((t,r)=>{const e=this.isOptionSelected(t),n=[e?"selected":"",this.isOptionIconOnly(t)&&this.autoWidth?"icon-only":""].filter(Boolean).join(" ");return o`
+        ${this.options.map((t,s)=>{const o=this.isOptionSelected(t),r=[o?"selected":"",this.isOptionIconOnly(t)&&this.autoWidth?"icon-only":""].filter(Boolean).join(" ");return e`
             <nr-button
-              class="${n}"
-              type="${e?"primary":"default"}"
+              class="${r}"
+              type="${o?"primary":"default"}"
               size="${this.size}"
               role="radio"
-              aria-checked="${e}"
+              aria-checked="${o}"
               aria-describedby="${t.state&&t.message?`${t.value}-message`:i}"
-              tabindex="${e?"0":"-1"}"
+              tabindex="${o?"0":"-1"}"
               .icon="${t.icon?[t.icon]:[]}"
               .disabled="${this.isOptionDisabled(t)}"
               @click="${()=>this.handleSelectionChange(t)}"
-              @focus="${()=>this.setFocusedOption(r)}"
+              @focus="${()=>this.setFocusedOption(s)}"
             >
               ${t.label}
             </nr-button>
-            ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+            ${t.state&&t.message?e`<div class="message-container" id="${t.value}-message">
                   <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
                   <span>${t.message}</span>
                 </div>`:i}
           `})}
       </div>
-    `}renderOptionsWithSlots(){return o`
-      <div 
-        role="radiogroup" 
+    `}renderOptionsWithSlots(){return e`
+      <div
+        role="radiogroup"
         aria-labelledby="radio-group-label"
         class="radio-group slot-group ${this.direction}"
+        part="radio-group"
       >
-        ${this.options.map((t,r)=>o`
+        ${this.options.map((t,s)=>e`
             <div
-              class="${s({"radio-wrapper":!0,"slot-container":!0,error:"error"===t.state,warning:"warning"===t.state,selected:this.isOptionSelected(t),[t.className||""]:Boolean(t.className)})}"
+              class="${a({"radio-wrapper":!0,"slot-container":!0,error:"error"===t.state,warning:"warning"===t.state,selected:this.isOptionSelected(t),[t.className||""]:Boolean(t.className)})}"
               data-theme="${this.currentTheme}"
               style="${t.style||""}"
               title="${t.title||""}"
@@ -382,29 +417,30 @@ var $=function(t,r,o,i){for(var e,n=arguments.length,a=n<3?r:null===i?i=Object.g
                   ?disabled="${this.isOptionDisabled(t)||this.disabled}"
                   ?required="${this.required}"
                   tabindex="${this.isOptionSelected(t)?"0":"-1"}"
-                  @change="${r=>{this.addRippleEffect(r),this.handleSelectionChange(t)}}"
-                  @focus="${()=>this.setFocusedOption(r)}"
+                  @change="${e=>{this.addRippleEffect(e),this.handleSelectionChange(t)}}"
+                  @focus="${()=>this.setFocusedOption(s)}"
                 >
                 </nr-radio>
                 <div class="slot-content">
                   <slot name="${t.value}"></slot>
                 </div>
               </div>
-              ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+              ${t.state&&t.message?e`<div class="message-container" id="${t.value}-message">
                     <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
                     <span>${t.message}</span>
                   </div>`:i}
             </div>
           `)}
       </div>
-    `}renderButtonsWithSlots(){return o`
-      <div 
-        class="type-button" 
-        role="radiogroup" 
+    `}renderButtonsWithSlots(){return e`
+      <div
+        class="type-button"
+        role="radiogroup"
         aria-labelledby="radio-group-label"
+        part="type-button"
         @keydown="${this.handleKeyDown}"
       >
-        ${this.options.map((t,r)=>o`
+        ${this.options.map((t,s)=>e`
             <nr-button
               class="${this.isOptionSelected(t)?"selected":""}"
               type="${this.isOptionSelected(t)?"primary":"default"}"
@@ -414,17 +450,17 @@ var $=function(t,r,o,i){for(var e,n=arguments.length,a=n<3?r:null===i?i=Object.g
               tabindex="${this.isOptionSelected(t)?"0":"-1"}"
               .disabled="${this.isOptionDisabled(t)}"
               @click="${()=>this.handleSelectionChange(t)}"
-              @focus="${()=>this.setFocusedOption(r)}"
+              @focus="${()=>this.setFocusedOption(s)}"
             >
               <slot name="${t.value}" slot="default"></slot>
             </nr-button>
-            ${t.state&&t.message?o`<div class="message-container" id="${t.value}-message">
+            ${t.state&&t.message?e`<div class="message-container" id="${t.value}-message">
                   <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
                   <span>${t.message}</span>
                 </div>`:i}
           `)}
       </div>
-    `}render(){return o`
-      ${a(this.type,[[f.Default,()=>this.renderOptionDefault()],[f.Button,()=>this.renderOptionsWithButtons()],[f.Slot,()=>this.renderOptionsWithSlots()],[f.ButtonSlot,()=>this.renderButtonsWithSlots()]])}
+    `}render(){return e`
+      ${n(this.type,[[k.Default,()=>this.renderOptionDefault()],[k.Button,()=>this.renderOptionsWithButtons()],[k.Slot,()=>this.renderOptionsWithSlots()],[k.ButtonSlot,()=>this.renderButtonsWithSlots()]])}
       <slot name="helper-text"></slot>
-    `}};O.styles=g,$([e({type:Array})],O.prototype,"options",void 0),$([e({type:String,attribute:"default-value"})],O.prototype,"defaultValue",void 0),$([e({type:String})],O.prototype,"value",void 0),$([e({type:String})],O.prototype,"name",void 0),$([e({type:String})],O.prototype,"direction",void 0),$([e({type:String})],O.prototype,"type",void 0),$([e({type:Boolean})],O.prototype,"required",void 0),$([e({type:Boolean})],O.prototype,"disabled",void 0),$([e({type:String})],O.prototype,"size",void 0),$([e({type:String})],O.prototype,"position",void 0),$([e({type:Boolean,attribute:"auto-width"})],O.prototype,"autoWidth",void 0),$([e({type:String})],O.prototype,"helper",void 0),O=$([n("nr-radio-group")],O);export{O as NrRadioGroupElement,m as RadioButtonDirection,v as RadioButtonPosition,w as RadioButtonSize,f as RadioButtonType,x as RadioButtonVariant};
+    `}};D.styles=E,D.useShadowDom=!0,T([o({type:Array})],D.prototype,"options",void 0),T([o({type:String,attribute:"default-value"})],D.prototype,"defaultValue",void 0),T([o({type:String})],D.prototype,"value",void 0),T([o({type:String})],D.prototype,"name",void 0),T([o({type:String})],D.prototype,"direction",void 0),T([o({type:String})],D.prototype,"type",void 0),T([o({type:Boolean})],D.prototype,"required",void 0),T([o({type:Boolean})],D.prototype,"disabled",void 0),T([o({type:String})],D.prototype,"size",void 0),T([o({type:String})],D.prototype,"position",void 0),T([o({type:Boolean,attribute:"auto-width"})],D.prototype,"autoWidth",void 0),T([o({type:String})],D.prototype,"helper",void 0),D=T([r("nr-radio-group")],D);export{D as NrRadioGroupElement,S as RadioButtonDirection,O as RadioButtonPosition,R as RadioButtonSize,k as RadioButtonType,C as RadioButtonVariant};

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

@@ -5,7 +5,7 @@
  */
 import { LitElement } from 'lit';
 import { RadioButtonType, RadioButtonOption } from './radio-group.types.js';
-declare const NrRadioGroupElement_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 NrRadioGroupElement_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 radio button group component using Reactive Controllers architecture.
  *
@@ -48,9 +48,13 @@ declare const NrRadioGroupElement_base: (new (...args: any[]) => import("@nuraly
  * @fires nr-change - Dispatched when the selected option changes
  *
  * @slot helper-text - Helper text displayed below the radio group
+ *
+ * @csspart radio-group - The default radio group container
+ * @csspart type-button - The button-style radio group container
  */
 export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     requiredComponents: string[];
     options: RadioButtonOption[];
     defaultValue: string;