@nuralyui/radio-group 0.0.10 → 0.0.11

package/bundle.js

@@ -1,19 +1,19 @@
-import{css as t,LitElement as r,html as i,nothing as o}from"lit";import{property as e,customElement as s}from"lit/decorators.js";import{choose as n}from"lit/directives/choose.js";import{classMap as a}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";import{throttle as d}from"@nuralyui/common/utils";
+import{css as t,LitElement as r,html as i,nothing as o}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{throttle as d}from"@nuralyui/common/utils";
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class u{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 i=new CustomEvent("nr-change",{detail:{value:t.value,option:t,oldValue:r},bubbles:!0,composed:!0});this.host.dispatchEvent(i)}}
+ */class u{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 i=new CustomEvent("nr-change",{detail:{value:t.value,option:t,oldValue:r},bubbles:!0,composed:!0});this.host.dispatchEvent(i)}}
 /**
  * @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 i=r.findIndex((t=>this.groupController.isOptionSelected(t)));switch(t.key){case"ArrowDown":case"ArrowRight":t.preventDefault(),this.selectNextOption(r,i);break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.selectPreviousOption(r,i);break;case" ":case"Enter":t.preventDefault(),-1===i&&this.selectFirstEnabledOption(r);break;case"Home":t.preventDefault(),this.selectFirstEnabledOption(r);break;case"End":t.preventDefault(),this.selectLastEnabledOption(r)}}selectNextOption(t,r){const i=-1===r?0:r+1;for(let r=0;r<t.length;r++){const o=t[(i+r)%t.length];if(!this.groupController.isOptionDisabled(o)){this.groupController.selectOption(o);break}}}selectPreviousOption(t,r){const i=-1===r?t.length-1:r-1;for(let r=0;r<t.length;r++){const o=t[(i-r+t.length)%t.length];if(!this.groupController.isOptionDisabled(o)){this.groupController.selectOption(o);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))),i=r[r.length-1];i&&this.groupController.selectOption(i)}}
+ */class h{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 i=r.findIndex(t=>this.groupController.isOptionSelected(t));switch(t.key){case"ArrowDown":case"ArrowRight":t.preventDefault(),this.selectNextOption(r,i);break;case"ArrowUp":case"ArrowLeft":t.preventDefault(),this.selectPreviousOption(r,i);break;case" ":case"Enter":t.preventDefault(),-1===i&&this.selectFirstEnabledOption(r);break;case"Home":t.preventDefault(),this.selectFirstEnabledOption(r);break;case"End":t.preventDefault(),this.selectLastEnabledOption(r)}}selectNextOption(t,r){const i=-1===r?0:r+1;for(let r=0;r<t.length;r++){const o=t[(i+r)%t.length];if(!this.groupController.isOptionDisabled(o)){this.groupController.selectOption(o);break}}}selectPreviousOption(t,r){const i=-1===r?t.length-1:r-1;for(let r=0;r<t.length;r++){const o=t[(i-r+t.length)%t.length];if(!this.groupController.isOptionDisabled(o)){this.groupController.selectOption(o);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)),i=r[r.length-1];i&&this.groupController.selectOption(i)}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class h{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 i=t.target;if(i&&i.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(i);-1!==r&&this.setFocusedOption(r)}}this.host.requestUpdate()}handleFocusOut(t){const r=t.relatedTarget,i=this.host;r&&i.contains(r)||(this._hasFocus=!1,this.host.requestUpdate())}focus(){const t=this.host.options,r=this.host.value,i=t.findIndex((t=>t.value===r));if(-1!==i)return void this.focusOptionAtIndex(i);const o=t.findIndex((t=>!t.disabled));-1!==o&&this.focusOptionAtIndex(o)}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 i=r.querySelectorAll('input[type="radio"]');if(i[t])return void i[t].focus();const o=r.querySelectorAll('nr-button[role="radio"]');o[t]&&o[t].focus()}updateTabIndices(t){const r=this.host.shadowRoot;if(!r)return;const i=this.host.options,o=this.host.value;let e=t;if(void 0===e){const t=i.findIndex((t=>t.value===o));e=-1!==t?t:i.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 c{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 i=t.target;if(i&&i.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(i);-1!==r&&this.setFocusedOption(r)}}this.host.requestUpdate()}handleFocusOut(t){const r=t.relatedTarget,i=this.host;r&&i.contains(r)||(this._hasFocus=!1,this.host.requestUpdate())}focus(){const t=this.host.options,r=this.host.value,i=t.findIndex(t=>t.value===r);if(-1!==i)return void this.focusOptionAtIndex(i);const o=t.findIndex(t=>!t.disabled);-1!==o&&this.focusOptionAtIndex(o)}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 i=r.querySelectorAll('input[type="radio"]');if(i[t])return void i[t].focus();const o=r.querySelectorAll('nr-button[role="radio"]');o[t]&&o[t].focus()}updateTabIndices(t){const r=this.host.shadowRoot;if(!r)return;const i=this.host.options,o=this.host.value;let e=t;if(void 0===e){const t=i.findIndex(t=>t.value===o);e=-1!==t?t:i.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()}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -23,7 +23,7 @@ import{css as t,LitElement as r,html as i,nothing as o}from"lit";import{property
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
- */class b{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=d(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.offsetHeight;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 i=this.parseDuration(r);setTimeout((()=>{t.style.animation=""}),i)}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 i=parseFloat(r[1]);return"s"===r[2]?1e3*i:i}triggerRipple(t){if(!this._rippleEnabled)return;const r=this.host.shadowRoot;if(!r)return;let i=null;i=t?r.querySelector(`input[type="radio"][value="${t}"]`):r.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 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 i=t.getBoundingClientRect(),o=Math.max(i.width,i.height);return r.style.width=`${o}px`,r.style.height=`${o}px`,r.style.left=-o/2+"px",r.style.top=-o/2+"px",r.style.transform="scale(0)",this.activeRipples.add(r),r}addRippleEffectToElement(t){this.addRippleToElement(t)}setRippleEnabled(t){this._rippleEnabled=t}}
+ */class b{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=d(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.offsetHeight;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 i=this.parseDuration(r);setTimeout(()=>{t.style.animation=""},i)}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 i=parseFloat(r[1]);return"s"===r[2]?1e3*i:i}triggerRipple(t){if(!this._rippleEnabled)return;const r=this.host.shadowRoot;if(!r)return;let i=null;i=t?r.querySelector(`input[type="radio"][value="${t}"]`):r.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 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 i=t.getBoundingClientRect(),o=Math.max(i.width,i.height);return r.style.width=`${o}px`,r.style.height=`${o}px`,r.style.left=-o/2+"px",r.style.top=-o/2+"px",r.style.transform="scale(0)",this.activeRipples.add(r),r}addRippleEffectToElement(t){this.addRippleToElement(t)}setRippleEnabled(t){this._rippleEnabled=t}}
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
@@ -185,6 +185,57 @@ import{css as t,LitElement as r,html as i,nothing as o}from"lit";import{property
     --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
   }
 
+  /* ========================================
+   * AUTO WIDTH STYLING
+   * ======================================== */
+
+  :host([auto-width]) .type-button nr-button {
+    --nuraly-button-min-width: 40px;
+    min-width: auto;
+    width: auto;
+  }
+
+  /* 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);
+  }
+
+  /* Icon-only buttons with auto-width should have minimal but adequate padding */
+  :host([auto-width]) .type-button nr-button.icon-only {
+    padding: 0.375rem; /* Even more minimal padding for icon-only */
+    min-width: auto;
+    width: auto;
+  }
+
+  :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 */
+    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);
+  }
+
+  /* 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));
+  }
+
+  /* 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);
+  }
+
+  /* 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));
+  }
+
   /* ========================================
    * SLOT-BASED RADIO STYLING
    * ======================================== */
@@ -216,21 +267,44 @@ import{css as t,LitElement as r,html as i,nothing as o}from"lit";import{property
   .slot-container.selected .slot-wrapper {
     background-color: var(--nuraly-radio-group-slot-selected-bg);
   }
-`;var g,v,f,m,$;!function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(g||(g={})),function(t){t.Left="left",t.Right="right"}(v||(v={})),function(t){t.Default="default",t.Button="button",t.Slot="slot"}(f||(f={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(m||(m={})),function(t){t.Default="default",t.Solid="solid"}($||($={}));
+
+  /* ========================================
+   * HELPER TEXT SLOT STYLING
+   * ======================================== */
+
+  ::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));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: 1.4;
+    display: block;
+  }
+`;var g,m,v,f,w;!function(t){t.Horizontal="horizontal",t.Vertical="vertical"}(g||(g={})),function(t){t.Left="left",t.Right="right"}(m||(m={})),function(t){t.Default="default",t.Button="button",t.Slot="slot",t.ButtonSlot="button-slot"}(v||(v={})),function(t){t.Small="small",t.Medium="medium",t.Large="large"}(f||(f={})),function(t){t.Default="default",t.Solid="solid"}(w||(w={}));
 /**
  * @license
  * Copyright 2023 Nuraly, Laabidi Aymen
  * SPDX-License-Identifier: MIT
  */
-var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,i):o,a=t.length-1;a>=0;a--)(e=t[a])&&(n=(s<3?e(n):s>3?e(r,i,n):e(r,i))||n);return s>3&&n&&Object.defineProperty(r,i,n),n};let w=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.groupController=new u(this),this.keyboardController=new c(this,this.groupController),this.focusController=new h(this),this.validationController=new p(this),this.rippleController=new b(this)}get selectedOption(){return this.groupController.getSelectedOption()}isOptionSelected(t){return this.groupController.isOptionSelected(t)}isOptionDisabled(t){return this.groupController.isOptionDisabled(t)}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 i`
+var x=function(t,r,i,o){for(var e,n=arguments.length,a=n<3?r:null===o?o=Object.getOwnPropertyDescriptor(r,i):o,s=t.length-1;s>=0;s--)(e=t[s])&&(a=(n<3?e(a):n>3?e(r,i,a):e(r,i))||a);return n>3&&a&&Object.defineProperty(r,i,a),a};let $=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=v.Default,this.required=!1,this.disabled=!1,this.size="medium",this.position="left",this.autoWidth=!1,this.helper="",this.groupController=new u(this),this.keyboardController=new h(this,this.groupController),this.focusController=new c(this),this.validationController=new p(this),this.rippleController=new b(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 i`
       <div 
         role="radiogroup" 
         aria-labelledby="radio-group-label"
         class="radio-group ${this.direction}"
       >
-        ${this.options.map(((t,r)=>i`
+        ${this.options.map((t,r)=>i`
             <div
-              class="${a({"radio-wrapper":!0,error:"error"===t.state,warning:"warning"===t.state,[t.className||""]:Boolean(t.className)})}"
+              class="${s({"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||""}"
@@ -254,7 +328,7 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
                     <span>${t.message}</span>
                   </div>`:o}
             </div>
-          `))}
+          `)}
       </div>
     `}renderOptionsWithButtons(){return i`
       <div 
@@ -263,14 +337,15 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
         aria-labelledby="radio-group-label"
         @keydown="${this.handleKeyDown}"
       >
-        ${this.options.map(((t,r)=>i`
+        ${this.options.map((t,r)=>{const e=this.isOptionSelected(t),n=[e?"selected":"",this.isOptionIconOnly(t)&&this.autoWidth?"icon-only":""].filter(Boolean).join(" ");return i`
             <nr-button
-              class="${this.isOptionSelected(t)?"selected":""}"
-              type="${this.isOptionSelected(t)?"primary":"default"}"
+              class="${n}"
+              type="${e?"primary":"default"}"
+              size="${this.size}"
               role="radio"
-              aria-checked="${this.isOptionSelected(t)}"
+              aria-checked="${e}"
               aria-describedby="${t.state&&t.message?`${t.value}-message`:o}"
-              tabindex="${this.isOptionSelected(t)?"0":"-1"}"
+              tabindex="${e?"0":"-1"}"
               .icon="${t.icon?[t.icon]:[]}"
               .disabled="${this.isOptionDisabled(t)}"
               @click="${()=>this.handleSelectionChange(t)}"
@@ -282,7 +357,7 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
                   <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
                   <span>${t.message}</span>
                 </div>`:o}
-          `))}
+          `})}
       </div>
     `}renderOptionsWithSlots(){return i`
       <div 
@@ -290,9 +365,9 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
         aria-labelledby="radio-group-label"
         class="radio-group slot-group ${this.direction}"
       >
-        ${this.options.map(((t,r)=>i`
+        ${this.options.map((t,r)=>i`
             <div
-              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)})}"
+              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)})}"
               data-theme="${this.currentTheme}"
               style="${t.style||""}"
               title="${t.title||""}"
@@ -320,7 +395,7 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
                     <span>${t.message}</span>
                   </div>`:o}
             </div>
-          `))}
+          `)}
       </div>
     `}renderButtonsWithSlots(){return i`
       <div 
@@ -329,7 +404,7 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
         aria-labelledby="radio-group-label"
         @keydown="${this.handleKeyDown}"
       >
-        ${this.options.map(((t,r)=>i`
+        ${this.options.map((t,r)=>i`
             <nr-button
               class="${this.isOptionSelected(t)?"selected":""}"
               type="${this.isOptionSelected(t)?"primary":"default"}"
@@ -347,6 +422,9 @@ var x=function(t,r,i,o){for(var e,s=arguments.length,n=s<3?r:null===o?o=Object.g
                   <nr-icon name="${"error"===t.state?"exclamation-circle":"warning"}"></nr-icon>
                   <span>${t.message}</span>
                 </div>`:o}
-          `))}
+          `)}
       </div>
-    `}render(){return i`${n(this.type,[[f.Default,()=>this.renderOptionDefault()],[f.Button,()=>this.renderOptionsWithButtons()],[f.Slot,()=>this.renderOptionsWithSlots()],["button-slot",()=>this.renderButtonsWithSlots()]])} `}};w.styles=y,x([e({type:Array})],w.prototype,"options",void 0),x([e({type:String,attribute:"default-value"})],w.prototype,"defaultValue",void 0),x([e({type:String})],w.prototype,"value",void 0),x([e({type:String})],w.prototype,"name",void 0),x([e({type:String})],w.prototype,"direction",void 0),x([e({type:String})],w.prototype,"type",void 0),x([e({type:Boolean})],w.prototype,"required",void 0),x([e({type:Boolean})],w.prototype,"disabled",void 0),x([e({type:String})],w.prototype,"size",void 0),x([e({type:String})],w.prototype,"position",void 0),w=x([s("nr-radio-group")],w);export{w as NrRadioGroupElement,g as RadioButtonDirection,v as RadioButtonPosition,m as RadioButtonSize,f as RadioButtonType,$ as RadioButtonVariant};
+    `}render(){return i`
+      ${a(this.type,[[v.Default,()=>this.renderOptionDefault()],[v.Button,()=>this.renderOptionsWithButtons()],[v.Slot,()=>this.renderOptionsWithSlots()],[v.ButtonSlot,()=>this.renderButtonsWithSlots()]])}
+      <slot name="helper-text"></slot>
+    `}};$.styles=y,x([e({type:Array})],$.prototype,"options",void 0),x([e({type:String,attribute:"default-value"})],$.prototype,"defaultValue",void 0),x([e({type:String})],$.prototype,"value",void 0),x([e({type:String})],$.prototype,"name",void 0),x([e({type:String})],$.prototype,"direction",void 0),x([e({type:String})],$.prototype,"type",void 0),x([e({type:Boolean})],$.prototype,"required",void 0),x([e({type:Boolean})],$.prototype,"disabled",void 0),x([e({type:String})],$.prototype,"size",void 0),x([e({type:String})],$.prototype,"position",void 0),x([e({type:Boolean,attribute:"auto-width"})],$.prototype,"autoWidth",void 0),x([e({type:String})],$.prototype,"helper",void 0),$=x([n("nr-radio-group")],$);export{$ as NrRadioGroupElement,g as RadioButtonDirection,m as RadioButtonPosition,f as RadioButtonSize,v as RadioButtonType,w as RadioButtonVariant};

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './radio-group.component.js';\nexport * from './radio-group.types.js';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './radio-group.component.js';\nexport * from './radio-group.types.js';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/radio-group",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "description": "",
     "main": "index.js",
     "type": "module",

package/radio-group.component.d.ts

@@ -32,9 +32,22 @@ declare const NrRadioGroupElement_base: (new (...args: any[]) => import("@nuraly
  *   default-value="option1"
  *   direction="horizontal">
  * </nr-radio-group>
+ *
+ * <!-- Button style with auto-width -->
+ * <nr-radio-group
+ *   type="button"
+ *   auto-width
+ *   .options='[
+ *     { value: "yes", label: "Yes" },
+ *     { value: "no", label: "No" },
+ *     { value: "maybe", label: "Maybe" }
+ *   ]'>
+ * </nr-radio-group>
  * ```
  *
  * @fires nr-change - Dispatched when the selected option changes
+ *
+ * @slot helper-text - Helper text displayed below the radio group
  */
 export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
     static styles: import("lit").CSSResult;
@@ -49,6 +62,8 @@ export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
     disabled: boolean;
     size: 'small' | 'medium' | 'large';
     position: 'left' | 'right';
+    autoWidth: boolean;
+    helper: string;
     private groupController;
     private keyboardController;
     private focusController;
@@ -66,6 +81,10 @@ export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
      * Check if an option is disabled - DELEGATES to controller
      */
     isOptionDisabled(option: RadioButtonOption): boolean;
+    /**
+     * Check if an option is icon-only (has icon but no meaningful label)
+     */
+    isOptionIconOnly(option: RadioButtonOption): boolean;
     /**
      * Handle option selection change - DELEGATES to controller
      */
@@ -140,7 +159,7 @@ export declare class NrRadioGroupElement extends NrRadioGroupElement_base {
      * Render button style with slots
      */
     private renderButtonsWithSlots;
-    protected render(): import("lit").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
 }
 export {};
 //# sourceMappingURL=radio-group.component.d.ts.map

package/radio-group.component.js

@@ -43,9 +43,22 @@ import { RadioButtonType } from './radio-group.types.js';
  *   default-value="option1"
  *   direction="horizontal">
  * </nr-radio-group>
+ *
+ * <!-- Button style with auto-width -->
+ * <nr-radio-group
+ *   type="button"
+ *   auto-width
+ *   .options='[
+ *     { value: "yes", label: "Yes" },
+ *     { value: "no", label: "No" },
+ *     { value: "maybe", label: "Maybe" }
+ *   ]'>
+ * </nr-radio-group>
  * ```
  *
  * @fires nr-change - Dispatched when the selected option changes
+ *
+ * @slot helper-text - Helper text displayed below the radio group
  */
 let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
@@ -62,6 +75,8 @@ let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(Li
         this.disabled = false;
         this.size = 'medium';
         this.position = 'left';
+        this.autoWidth = false;
+        this.helper = '';
         // Reactive Controllers - PROPERLY implemented now
         this.groupController = new RadioGroupController(this);
         // @ts-ignore - Controller handles events through listeners, doesn't need direct reference
@@ -89,6 +104,12 @@ let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(Li
     isOptionDisabled(option) {
         return this.groupController.isOptionDisabled(option);
     }
+    /**
+     * Check if an option is icon-only (has icon but no meaningful label)
+     */
+    isOptionIconOnly(option) {
+        return !!(option.icon && (!option.label || option.label.trim() === ''));
+    }
     /**
      * Handle option selection change - DELEGATES to controller
      */
@@ -235,14 +256,22 @@ let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(Li
         aria-labelledby="radio-group-label"
         @keydown="${this.handleKeyDown}"
       >
-        ${this.options.map((option, index) => html `
+        ${this.options.map((option, index) => {
+            const isSelected = this.isOptionSelected(option);
+            const isIconOnly = this.isOptionIconOnly(option);
+            const classes = [
+                isSelected ? 'selected' : '',
+                isIconOnly && this.autoWidth ? 'icon-only' : ''
+            ].filter(Boolean).join(' ');
+            return html `
             <nr-button
-              class="${this.isOptionSelected(option) ? 'selected' : ''}"
-              type="${this.isOptionSelected(option) ? "primary" /* ButtonType.Primary */ : "default" /* ButtonType.Default */}"
+              class="${classes}"
+              type="${isSelected ? "primary" /* ButtonType.Primary */ : "default" /* ButtonType.Default */}"
+              size="${this.size}"
               role="radio"
-              aria-checked="${this.isOptionSelected(option)}"
+              aria-checked="${isSelected}"
               aria-describedby="${option.state && option.message ? `${option.value}-message` : nothing}"
-              tabindex="${this.isOptionSelected(option) ? '0' : '-1'}"
+              tabindex="${isSelected ? '0' : '-1'}"
               .icon="${option.icon ? [option.icon] : []}"
               .disabled="${this.isOptionDisabled(option)}"
               @click="${() => this.handleSelectionChange(option)}"
@@ -251,12 +280,13 @@ let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(Li
               ${option.label}
             </nr-button>
             ${option.state && option.message
-            ? html `<div class="message-container" id="${option.value}-message">
+                ? html `<div class="message-container" id="${option.value}-message">
                   <nr-icon name="${option.state === 'error' ? 'exclamation-circle' : 'warning'}"></nr-icon>
                   <span>${option.message}</span>
                 </div>`
-            : nothing}
-          `)}
+                : nothing}
+          `;
+        })}
       </div>
     `;
     }
@@ -352,12 +382,15 @@ let NrRadioGroupElement = class NrRadioGroupElement extends NuralyUIBaseMixin(Li
     `;
     }
     render() {
-        return html `${choose(this.type, [
+        return html `
+      ${choose(this.type, [
             [RadioButtonType.Default, () => this.renderOptionDefault()],
             [RadioButtonType.Button, () => this.renderOptionsWithButtons()],
             [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],
-            ['button-slot', () => this.renderButtonsWithSlots()], // Special case for button with slots
-        ])} `;
+            [RadioButtonType.ButtonSlot, () => this.renderButtonsWithSlots()], // Special case for button with slots
+        ])}
+      <slot name="helper-text"></slot>
+    `;
     }
 };
 NrRadioGroupElement.styles = styles;
@@ -391,6 +424,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], NrRadioGroupElement.prototype, "position", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'auto-width' })
+], NrRadioGroupElement.prototype, "autoWidth", void 0);
+__decorate([
+    property({ type: String })
+], NrRadioGroupElement.prototype, "helper", void 0);
 NrRadioGroupElement = __decorate([
     customElement('nr-radio-group')
 ], NrRadioGroupElement);

package/radio-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n  RadioGroupController,\n  RadioKeyboardController,\n  RadioFocusController,\n  RadioValidationController,\n  RadioRippleController\n} from './controllers/index.js';\nimport { styles } from './radio-group.style.js';\nimport { RadioButtonType, RadioButtonOption } from './radio-group.types.js';\nimport { ButtonType } from '../button/button.types.js';\n\n/**\n * A radio button group component using Reactive Controllers architecture.\n * \n * Supports multiple display modes:\n * - Default: Traditional radio buttons with labels\n * - Button: Button-style radio group\n * - Slot: Custom HTML content with radio selection\n * \n * Features:\n * - Theme-aware styling with light/dark mode support\n * - Keyboard navigation (arrow keys, space, enter)\n * - Accessibility compliance\n * - Form validation and integration\n * - Ripple effects on interaction\n * - Modular controller-based architecture\n * \n * @example\n * ```html\n * <nr-radio-group\n *   .options='[\n *     { value: \"option1\", label: \"Option 1\" },\n *     { value: \"option2\", label: \"Option 2\" }\n *   ]'\n *   default-value=\"option1\"\n *   direction=\"horizontal\">\n * </nr-radio-group>\n * ```\n * \n * @fires nr-change - Dispatched when the selected option changes\n */\n@customElement('nr-radio-group')\nexport class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon', 'nr-radio'];\n\n  // Properties\n  @property({ type: Array }) options: RadioButtonOption[] = [];\n  @property({ type: String, attribute: 'default-value' }) defaultValue: string = '';\n  @property({ type: String }) value: string = '';\n  @property({ type: String }) name: string = 'radioGroup';\n  @property({ type: String }) direction: 'horizontal' | 'vertical' = 'vertical';\n  @property({ type: String }) type: RadioButtonType = RadioButtonType.Default;\n  @property({ type: Boolean }) required: boolean = false;\n  @property({ type: Boolean }) disabled: boolean = false;\n  @property({ type: String }) size: 'small' | 'medium' | 'large' = 'medium';\n  @property({ type: String }) position: 'left' | 'right' = 'left';\n\n  // Reactive Controllers - PROPERLY implemented now\n  private groupController = new RadioGroupController(this);\n  // @ts-ignore - Controller handles events through listeners, doesn't need direct reference\n  private keyboardController = new RadioKeyboardController(this, this.groupController);\n  // Additional controllers for full functionality\n  private focusController = new RadioFocusController(this);\n  private validationController = new RadioValidationController(this);\n  private rippleController = new RadioRippleController(this);\n\n  /**\n   * Get the currently selected option - DELEGATES to controller\n   */\n  get selectedOption(): RadioButtonOption | undefined {\n    return this.groupController.getSelectedOption();\n  }\n\n  /**\n   * Check if an option is selected - DELEGATES to controller\n   */\n  isOptionSelected(option: RadioButtonOption): boolean {\n    return this.groupController.isOptionSelected(option);\n  }\n\n  /**\n   * Check if an option is disabled - DELEGATES to controller\n   */\n  isOptionDisabled(option: RadioButtonOption): boolean {\n    return this.groupController.isOptionDisabled(option);\n  }\n\n  /**\n   * Handle option selection change - DELEGATES to controller\n   */\n  handleSelectionChange(option: RadioButtonOption): void {\n    this.groupController.selectOption(option);\n  }\n\n  /**\n   * Set focused option by index - DELEGATES to controller\n   */\n  setFocusedOption(index: number): void {\n    this.focusController.setFocusedOption(index);\n  }\n\n  /**\n   * Handle keyboard events - DELEGATES to controller\n   */\n  handleKeyDown(_event: KeyboardEvent): void {\n    // Controller handles keyboard navigation automatically via event listeners\n    // This method exists for template compatibility but delegates to controller\n  }\n\n  /**\n   * Add ripple effect on radio input click - DELEGATES to controller\n   */\n  addRippleEffect(event: Event): void {\n    this.rippleController.addRippleEffect(event);\n  }\n\n  /**\n   * Validate the radio group - DELEGATES to controller\n   */\n  validate(): boolean {\n    return this.validationController.validate();\n  }\n\n  /**\n   * Get validation message - DELEGATES to controller\n   */\n  get validationMessage(): string {\n    return this.validationController.validationMessage;\n  }\n\n  /**\n   * Check if the radio group is valid - DELEGATES to controller\n   */\n  get isValid(): boolean {\n    return this.validationController.isValid;\n  }\n\n  /**\n   * Get form data for form submission - DELEGATES to controller\n   */\n  getFormData(): { [key: string]: string } {\n    return this.validationController.getFormData();\n  }\n\n  /**\n   * Reset the radio group - DELEGATES to controller\n   */\n  reset(): void {\n    this.validationController.reset();\n  }\n\n  /**\n   * FormData integration for native form submission - DELEGATES to controller\n   */\n  get formData(): FormData | null {\n    return this.validationController.getFormDataObject();\n  }\n\n  /**\n   * Check form validity (required for HTML5 form validation)\n   */\n  checkValidity(): boolean {\n    return this.validate();\n  }\n\n  /**\n   * Report form validity (required for HTML5 form validation) - DELEGATES to controller\n   */\n  reportValidity(): boolean {\n    return this.validationController.reportValidity();\n  }\n\n  /**\n   * Programmatically focus the radio group - DELEGATES to controller\n   */\n  override focus(): void {\n    this.focusController.focus();\n  }\n\n  /**\n   * Programmatically blur the radio group - DELEGATES to controller\n   */\n  override blur(): void {\n    this.focusController.blur();\n  }\n\n  /**\n   * Render default radio button style using nr-radio component\n   */\n  private renderOptionDefault() {\n    return html`\n      <div \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        class=\"radio-group ${this.direction}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <div\n              class=\"${classMap({\n                'radio-wrapper': true,\n                error: option.state === 'error',\n                warning: option.state === 'warning',\n                [option.className || '']: Boolean(option.className)\n              })}\"\n              data-theme=\"${this.currentTheme}\"\n              style=\"${option.style || ''}\"\n              title=\"${option.title || ''}\"\n            >\n              <nr-radio\n                id=\"${option.id || option.value}\"\n                name=\"${this.name}\"\n                value=\"${option.value}\"\n                size=\"${this.size}\"\n                ?checked=\"${this.isOptionSelected(option)}\"\n                ?disabled=\"${this.isOptionDisabled(option) || this.disabled}\"\n                ?required=\"${this.required}\"\n                tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n                @change=\"${(e: Event) => { \n                  this.addRippleEffect(e); \n                  this.handleSelectionChange(option); \n                }}\"\n                @focus=\"${() => this.setFocusedOption(index)}\"\n              >\n                ${option.label}\n              </nr-radio>\n              ${option.state && option.message\n                ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                    <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                    <span>${option.message}</span>\n                  </div>`\n                : nothing}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button style radio group\n   */\n  private renderOptionsWithButtons() {\n    return html`\n      <div \n        class=\"type-button\" \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        @keydown=\"${this.handleKeyDown}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <nr-button\n              class=\"${this.isOptionSelected(option) ? 'selected' : ''}\"\n              type=\"${this.isOptionSelected(option) ? ButtonType.Primary : ButtonType.Default}\"\n              role=\"radio\"\n              aria-checked=\"${this.isOptionSelected(option)}\"\n              aria-describedby=\"${option.state && option.message ? `${option.value}-message` : nothing}\"\n              tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n              .icon=\"${option.icon ? [option.icon] : []}\"\n              .disabled=\"${this.isOptionDisabled(option)}\"\n              @click=\"${() => this.handleSelectionChange(option)}\"\n              @focus=\"${() => this.setFocusedOption(index)}\"\n            >\n              ${option.label}\n            </nr-button>\n            ${option.state && option.message\n              ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                  <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                  <span>${option.message}</span>\n                </div>`\n              : nothing}\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render slot-based radio group (for custom HTML content) using nr-radio\n   */\n  private renderOptionsWithSlots() {\n    return html`\n      <div \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        class=\"radio-group slot-group ${this.direction}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <div\n              class=\"${classMap({\n                'radio-wrapper': true,\n                'slot-container': true,\n                error: option.state === 'error',\n                warning: option.state === 'warning',\n                selected: this.isOptionSelected(option),\n                [option.className || '']: Boolean(option.className)\n              })}\"\n              data-theme=\"${this.currentTheme}\"\n              style=\"${option.style || ''}\"\n              title=\"${option.title || ''}\"\n            >\n              <div class=\"slot-wrapper\" @click=\"${() => this.handleSelectionChange(option)}\">\n                <nr-radio\n                  id=\"${option.id || option.value}\"\n                  name=\"${this.name}\"\n                  value=\"${option.value}\"\n                  size=\"${this.size}\"\n                  ?checked=\"${this.isOptionSelected(option)}\"\n                  ?disabled=\"${this.isOptionDisabled(option) || this.disabled}\"\n                  ?required=\"${this.required}\"\n                  tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n                  @change=\"${(e: Event) => { \n                    this.addRippleEffect(e); \n                    this.handleSelectionChange(option); \n                  }}\"\n                  @focus=\"${() => this.setFocusedOption(index)}\"\n                >\n                </nr-radio>\n                <div class=\"slot-content\">\n                  <slot name=\"${option.value}\"></slot>\n                </div>\n              </div>\n              ${option.state && option.message\n                ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                    <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                    <span>${option.message}</span>\n                  </div>`\n                : nothing}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button style with slots\n   */\n  private renderButtonsWithSlots() {\n    return html`\n      <div \n        class=\"type-button\" \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        @keydown=\"${this.handleKeyDown}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <nr-button\n              class=\"${this.isOptionSelected(option) ? 'selected' : ''}\"\n              type=\"${this.isOptionSelected(option) ? ButtonType.Primary : ButtonType.Default}\"\n              role=\"radio\"\n              aria-checked=\"${this.isOptionSelected(option)}\"\n              aria-describedby=\"${option.state && option.message ? `${option.value}-message` : nothing}\"\n              tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n              .disabled=\"${this.isOptionDisabled(option)}\"\n              @click=\"${() => this.handleSelectionChange(option)}\"\n              @focus=\"${() => this.setFocusedOption(index)}\"\n            >\n              <slot name=\"${option.value}\" slot=\"default\"></slot>\n            </nr-button>\n            ${option.state && option.message\n              ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                  <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                  <span>${option.message}</span>\n                </div>`\n              : nothing}\n          `\n        )}\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`${choose(this.type, [\n      [RadioButtonType.Default, () => this.renderOptionDefault()],\n      [RadioButtonType.Button, () => this.renderOptionsWithButtons()],\n      [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],\n      ['button-slot', () => this.renderButtonsWithSlots()], // Special case for button with slots\n    ])} `;\n  }\n}\n"]}
+{"version":3,"file":"radio-group.component.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { choose } from 'lit/directives/choose.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport {\n  RadioGroupController,\n  RadioKeyboardController,\n  RadioFocusController,\n  RadioValidationController,\n  RadioRippleController\n} from './controllers/index.js';\nimport { styles } from './radio-group.style.js';\nimport { RadioButtonType, RadioButtonOption } from './radio-group.types.js';\nimport { ButtonType } from '../button/button.types.js';\n\n/**\n * A radio button group component using Reactive Controllers architecture.\n * \n * Supports multiple display modes:\n * - Default: Traditional radio buttons with labels\n * - Button: Button-style radio group\n * - Slot: Custom HTML content with radio selection\n * \n * Features:\n * - Theme-aware styling with light/dark mode support\n * - Keyboard navigation (arrow keys, space, enter)\n * - Accessibility compliance\n * - Form validation and integration\n * - Ripple effects on interaction\n * - Modular controller-based architecture\n * \n * @example\n * ```html\n * <nr-radio-group\n *   .options='[\n *     { value: \"option1\", label: \"Option 1\" },\n *     { value: \"option2\", label: \"Option 2\" }\n *   ]'\n *   default-value=\"option1\"\n *   direction=\"horizontal\">\n * </nr-radio-group>\n * \n * <!-- Button style with auto-width -->\n * <nr-radio-group\n *   type=\"button\"\n *   auto-width\n *   .options='[\n *     { value: \"yes\", label: \"Yes\" },\n *     { value: \"no\", label: \"No\" },\n *     { value: \"maybe\", label: \"Maybe\" }\n *   ]'>\n * </nr-radio-group>\n * ```\n * \n * @fires nr-change - Dispatched when the selected option changes\n * \n * @slot helper-text - Helper text displayed below the radio group\n */\n@customElement('nr-radio-group')\nexport class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon', 'nr-radio'];\n\n  // Properties\n  @property({ type: Array }) options: RadioButtonOption[] = [];\n  @property({ type: String, attribute: 'default-value' }) defaultValue: string = '';\n  @property({ type: String }) value: string = '';\n  @property({ type: String }) name: string = 'radioGroup';\n  @property({ type: String }) direction: 'horizontal' | 'vertical' = 'vertical';\n  @property({ type: String }) type: RadioButtonType = RadioButtonType.Default;\n  @property({ type: Boolean }) required: boolean = false;\n  @property({ type: Boolean }) disabled: boolean = false;\n  @property({ type: String }) size: 'small' | 'medium' | 'large' = 'medium';\n  @property({ type: String }) position: 'left' | 'right' = 'left';\n  @property({ type: Boolean, attribute: 'auto-width' }) autoWidth: boolean = false;\n  @property({ type: String }) helper: string = '';\n\n  // Reactive Controllers - PROPERLY implemented now\n  private groupController = new RadioGroupController(this);\n  // @ts-ignore - Controller handles events through listeners, doesn't need direct reference\n  private keyboardController = new RadioKeyboardController(this, this.groupController);\n  // Additional controllers for full functionality\n  private focusController = new RadioFocusController(this);\n  private validationController = new RadioValidationController(this);\n  private rippleController = new RadioRippleController(this);\n\n  /**\n   * Get the currently selected option - DELEGATES to controller\n   */\n  get selectedOption(): RadioButtonOption | undefined {\n    return this.groupController.getSelectedOption();\n  }\n\n  /**\n   * Check if an option is selected - DELEGATES to controller\n   */\n  isOptionSelected(option: RadioButtonOption): boolean {\n    return this.groupController.isOptionSelected(option);\n  }\n\n  /**\n   * Check if an option is disabled - DELEGATES to controller\n   */\n  isOptionDisabled(option: RadioButtonOption): boolean {\n    return this.groupController.isOptionDisabled(option);\n  }\n\n  /**\n   * Check if an option is icon-only (has icon but no meaningful label)\n   */\n  isOptionIconOnly(option: RadioButtonOption): boolean {\n    return !!(option.icon && (!option.label || option.label.trim() === ''));\n  }\n\n  /**\n   * Handle option selection change - DELEGATES to controller\n   */\n  handleSelectionChange(option: RadioButtonOption): void {\n    this.groupController.selectOption(option);\n  }\n\n  /**\n   * Set focused option by index - DELEGATES to controller\n   */\n  setFocusedOption(index: number): void {\n    this.focusController.setFocusedOption(index);\n  }\n\n  /**\n   * Handle keyboard events - DELEGATES to controller\n   */\n  handleKeyDown(_event: KeyboardEvent): void {\n    // Controller handles keyboard navigation automatically via event listeners\n    // This method exists for template compatibility but delegates to controller\n  }\n\n  /**\n   * Add ripple effect on radio input click - DELEGATES to controller\n   */\n  addRippleEffect(event: Event): void {\n    this.rippleController.addRippleEffect(event);\n  }\n\n  /**\n   * Validate the radio group - DELEGATES to controller\n   */\n  validate(): boolean {\n    return this.validationController.validate();\n  }\n\n  /**\n   * Get validation message - DELEGATES to controller\n   */\n  get validationMessage(): string {\n    return this.validationController.validationMessage;\n  }\n\n  /**\n   * Check if the radio group is valid - DELEGATES to controller\n   */\n  get isValid(): boolean {\n    return this.validationController.isValid;\n  }\n\n  /**\n   * Get form data for form submission - DELEGATES to controller\n   */\n  getFormData(): { [key: string]: string } {\n    return this.validationController.getFormData();\n  }\n\n  /**\n   * Reset the radio group - DELEGATES to controller\n   */\n  reset(): void {\n    this.validationController.reset();\n  }\n\n  /**\n   * FormData integration for native form submission - DELEGATES to controller\n   */\n  get formData(): FormData | null {\n    return this.validationController.getFormDataObject();\n  }\n\n  /**\n   * Check form validity (required for HTML5 form validation)\n   */\n  checkValidity(): boolean {\n    return this.validate();\n  }\n\n  /**\n   * Report form validity (required for HTML5 form validation) - DELEGATES to controller\n   */\n  reportValidity(): boolean {\n    return this.validationController.reportValidity();\n  }\n\n  /**\n   * Programmatically focus the radio group - DELEGATES to controller\n   */\n  override focus(): void {\n    this.focusController.focus();\n  }\n\n  /**\n   * Programmatically blur the radio group - DELEGATES to controller\n   */\n  override blur(): void {\n    this.focusController.blur();\n  }\n\n  /**\n   * Render default radio button style using nr-radio component\n   */\n  private renderOptionDefault() {\n    return html`\n      <div \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        class=\"radio-group ${this.direction}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <div\n              class=\"${classMap({\n                'radio-wrapper': true,\n                error: option.state === 'error',\n                warning: option.state === 'warning',\n                [option.className || '']: Boolean(option.className)\n              })}\"\n              data-theme=\"${this.currentTheme}\"\n              style=\"${option.style || ''}\"\n              title=\"${option.title || ''}\"\n            >\n              <nr-radio\n                id=\"${option.id || option.value}\"\n                name=\"${this.name}\"\n                value=\"${option.value}\"\n                size=\"${this.size}\"\n                ?checked=\"${this.isOptionSelected(option)}\"\n                ?disabled=\"${this.isOptionDisabled(option) || this.disabled}\"\n                ?required=\"${this.required}\"\n                tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n                @change=\"${(e: Event) => { \n                  this.addRippleEffect(e); \n                  this.handleSelectionChange(option); \n                }}\"\n                @focus=\"${() => this.setFocusedOption(index)}\"\n              >\n                ${option.label}\n              </nr-radio>\n              ${option.state && option.message\n                ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                    <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                    <span>${option.message}</span>\n                  </div>`\n                : nothing}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button style radio group\n   */\n  private renderOptionsWithButtons() {\n    return html`\n      <div \n        class=\"type-button\" \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        @keydown=\"${this.handleKeyDown}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => {\n            const isSelected = this.isOptionSelected(option);\n            const isIconOnly = this.isOptionIconOnly(option);\n            const classes = [\n              isSelected ? 'selected' : '',\n              isIconOnly && this.autoWidth ? 'icon-only' : ''\n            ].filter(Boolean).join(' ');\n\n            return html`\n            <nr-button\n              class=\"${classes}\"\n              type=\"${isSelected ? ButtonType.Primary : ButtonType.Default}\"\n              size=\"${this.size}\"\n              role=\"radio\"\n              aria-checked=\"${isSelected}\"\n              aria-describedby=\"${option.state && option.message ? `${option.value}-message` : nothing}\"\n              tabindex=\"${isSelected ? '0' : '-1'}\"\n              .icon=\"${option.icon ? [option.icon] : []}\"\n              .disabled=\"${this.isOptionDisabled(option)}\"\n              @click=\"${() => this.handleSelectionChange(option)}\"\n              @focus=\"${() => this.setFocusedOption(index)}\"\n            >\n              ${option.label}\n            </nr-button>\n            ${option.state && option.message\n              ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                  <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                  <span>${option.message}</span>\n                </div>`\n              : nothing}\n          `}\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render slot-based radio group (for custom HTML content) using nr-radio\n   */\n  private renderOptionsWithSlots() {\n    return html`\n      <div \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        class=\"radio-group slot-group ${this.direction}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <div\n              class=\"${classMap({\n                'radio-wrapper': true,\n                'slot-container': true,\n                error: option.state === 'error',\n                warning: option.state === 'warning',\n                selected: this.isOptionSelected(option),\n                [option.className || '']: Boolean(option.className)\n              })}\"\n              data-theme=\"${this.currentTheme}\"\n              style=\"${option.style || ''}\"\n              title=\"${option.title || ''}\"\n            >\n              <div class=\"slot-wrapper\" @click=\"${() => this.handleSelectionChange(option)}\">\n                <nr-radio\n                  id=\"${option.id || option.value}\"\n                  name=\"${this.name}\"\n                  value=\"${option.value}\"\n                  size=\"${this.size}\"\n                  ?checked=\"${this.isOptionSelected(option)}\"\n                  ?disabled=\"${this.isOptionDisabled(option) || this.disabled}\"\n                  ?required=\"${this.required}\"\n                  tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n                  @change=\"${(e: Event) => { \n                    this.addRippleEffect(e); \n                    this.handleSelectionChange(option); \n                  }}\"\n                  @focus=\"${() => this.setFocusedOption(index)}\"\n                >\n                </nr-radio>\n                <div class=\"slot-content\">\n                  <slot name=\"${option.value}\"></slot>\n                </div>\n              </div>\n              ${option.state && option.message\n                ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                    <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                    <span>${option.message}</span>\n                  </div>`\n                : nothing}\n            </div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render button style with slots\n   */\n  private renderButtonsWithSlots() {\n    return html`\n      <div \n        class=\"type-button\" \n        role=\"radiogroup\" \n        aria-labelledby=\"radio-group-label\"\n        @keydown=\"${this.handleKeyDown}\"\n      >\n        ${this.options.map(\n          (option: RadioButtonOption, index: number) => html`\n            <nr-button\n              class=\"${this.isOptionSelected(option) ? 'selected' : ''}\"\n              type=\"${this.isOptionSelected(option) ? ButtonType.Primary : ButtonType.Default}\"\n              role=\"radio\"\n              aria-checked=\"${this.isOptionSelected(option)}\"\n              aria-describedby=\"${option.state && option.message ? `${option.value}-message` : nothing}\"\n              tabindex=\"${this.isOptionSelected(option) ? '0' : '-1'}\"\n              .disabled=\"${this.isOptionDisabled(option)}\"\n              @click=\"${() => this.handleSelectionChange(option)}\"\n              @focus=\"${() => this.setFocusedOption(index)}\"\n            >\n              <slot name=\"${option.value}\" slot=\"default\"></slot>\n            </nr-button>\n            ${option.state && option.message\n              ? html`<div class=\"message-container\" id=\"${option.value}-message\">\n                  <nr-icon name=\"${option.state === 'error' ? 'exclamation-circle' : 'warning'}\"></nr-icon>\n                  <span>${option.message}</span>\n                </div>`\n              : nothing}\n          `\n        )}\n      </div>\n    `;\n  }\n\n  protected override render() {\n    return html`\n      ${choose(this.type, [\n        [RadioButtonType.Default, () => this.renderOptionDefault()],\n        [RadioButtonType.Button, () => this.renderOptionsWithButtons()],\n        [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],\n        [RadioButtonType.ButtonSlot, () => this.renderButtonsWithSlots()], // Special case for button with slots\n      ])}\n      <slot name=\"helper-text\"></slot>\n    `;\n  }\n}\n"]}

package/radio-group.style.js

@@ -161,6 +161,57 @@ export const styles = css `
     --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));
   }
 
+  /* ========================================
+   * AUTO WIDTH STYLING
+   * ======================================== */
+
+  :host([auto-width]) .type-button nr-button {
+    --nuraly-button-min-width: 40px;
+    min-width: auto;
+    width: auto;
+  }
+
+  /* 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);
+  }
+
+  /* Icon-only buttons with auto-width should have minimal but adequate padding */
+  :host([auto-width]) .type-button nr-button.icon-only {
+    padding: 0.375rem; /* Even more minimal padding for icon-only */
+    min-width: auto;
+    width: auto;
+  }
+
+  :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 */
+    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);
+  }
+
+  /* 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));
+  }
+
+  /* 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);
+  }
+
+  /* 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));
+  }
+
   /* ========================================
    * SLOT-BASED RADIO STYLING
    * ======================================== */
@@ -192,5 +243,28 @@ export const styles = css `
   .slot-container.selected .slot-wrapper {
     background-color: var(--nuraly-radio-group-slot-selected-bg);
   }
+
+  /* ========================================
+   * HELPER TEXT SLOT STYLING
+   * ======================================== */
+
+  ::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));
+    
+    /* Prevent text overflow and ensure proper wrapping without affecting parent width */
+    word-wrap: break-word;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    white-space: normal;
+    max-width: 100%;
+    width: 0;
+    min-width: 100%;
+    box-sizing: border-box;
+    line-height: 1.4;
+    display: block;
+  }
 `;
 //# sourceMappingURL=radio-group.style.js.map

package/radio-group.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.style.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    /* ========================================\n     * CSS CUSTOM PROPERTIES - RADIO GROUP\n     * ======================================== */\n    \n    /* Group Layout */\n    --nuraly-radio-group-gap: 12px;\n    --nuraly-radio-group-horizontal-gap: 16px;\n\n    /* Colors - Error/Warning states */\n    --nuraly-radio-group-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);\n    --nuraly-radio-group-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);\n    --nuraly-radio-group-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);\n    --nuraly-radio-group-warning-text-color: var(--nuraly-color-radio-warning-text, #f59e0b);\n\n    /* Typography */\n    --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);\n    --nuraly-radio-group-message-font-size: var(--nuraly-font-size-radio-message, 12px);\n\n    /* Button type styling */\n    --nuraly-radio-group-button-border-radius: 4px;\n    --nuraly-radio-group-button-hover-color: var(--nuraly-color-radio-border-hover, #7c3aed);\n\n    /* Slot container styling */\n    --nuraly-radio-group-slot-hover-bg: rgba(124, 58, 237, 0.04);\n    --nuraly-radio-group-slot-selected-bg: rgba(124, 58, 237, 0.08);\n    --nuraly-radio-group-slot-border-radius: 6px;\n\n    /* ========================================\n     * COMPONENT STYLES\n     * ======================================== */\n    \n    width: fit-content;\n    display: block;\n    font-family: var(--nuraly-radio-group-font-family);\n  }\n\n  /* ========================================\n   * RADIO GROUP LAYOUT\n   * ======================================== */\n\n  .radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nuraly-radio-group-gap);\n  }\n\n  .radio-group.horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: var(--nuraly-radio-group-horizontal-gap);\n  }\n\n  .radio-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  /* ========================================\n   * MESSAGE CONTAINERS (Error/Warning)\n   * ======================================== */\n\n  .radio-wrapper .message-container {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: var(--nuraly-radio-group-message-font-size);\n    padding-left: 28px; /* Align with radio label */\n  }\n\n  nr-icon {\n    display: flex;\n  }\n\n  .radio-wrapper.error nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-group-error-icon-color);\n  }\n\n  .radio-wrapper.warning nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-group-warning-icon-color);\n  }\n\n  .radio-wrapper.error .message-container {\n    color: var(--nuraly-radio-group-error-text-color);\n  }\n\n  .radio-wrapper.warning .message-container {\n    color: var(--nuraly-radio-group-warning-text-color);\n  }\n\n  /* ========================================\n   * BUTTON TYPE STYLING\n   * ======================================== */\n\n  .type-button {\n    display: inline-flex;\n    gap: 0px;\n  }\n\n  /* Button border radius for first and last child */\n  .type-button :first-child {\n    --nuraly-button-border-top-left-radius: var(--nuraly-radio-group-button-border-radius);\n    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-group-button-border-radius);\n  }\n\n  .type-button :last-child {\n    --nuraly-button-border-top-right-radius: var(--nuraly-radio-group-button-border-radius);\n    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-group-button-border-radius);\n  }\n\n  .type-button nr-button:not(:last-child) {\n    margin-right: -1px;\n  }\n\n  .type-button nr-button {\n    position: relative;\n    z-index: 1;\n  }\n\n  .type-button nr-button[type=\"default\"]:hover {\n    --nuraly-button-color: var(--nuraly-radio-group-button-hover-color);\n    --nuraly-button-border-color: var(--nuraly-radio-group-button-hover-color);\n    z-index: 2;\n  }\n\n  .type-button nr-button[type=\"primary\"] {\n    z-index: 1;\n    position: relative;\n  }\n\n  /* Disabled button states */\n  .type-button nr-button[disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .type-button nr-button[disabled]:hover {\n    z-index: auto;\n    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));\n    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));\n    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] {\n    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));\n    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));\n    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] nr-icon {\n    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  /* ========================================\n   * SLOT-BASED RADIO STYLING\n   * ======================================== */\n\n  .slot-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    padding: 8px;\n    border-radius: var(--nuraly-radio-group-slot-border-radius);\n  }\n\n  .slot-wrapper:hover {\n    background-color: var(--nuraly-radio-group-slot-hover-bg);\n  }\n\n  .slot-wrapper nr-radio {\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .slot-wrapper .slot-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .slot-container.selected .slot-wrapper {\n    background-color: var(--nuraly-radio-group-slot-selected-bg);\n  }\n`;\n"]}
+{"version":3,"file":"radio-group.style.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsQxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    /* ========================================\n     * CSS CUSTOM PROPERTIES - RADIO GROUP\n     * ======================================== */\n    \n    /* Group Layout */\n    --nuraly-radio-group-gap: 12px;\n    --nuraly-radio-group-horizontal-gap: 16px;\n\n    /* Colors - Error/Warning states */\n    --nuraly-radio-group-error-icon-color: var(--nuraly-color-radio-error-icon, #ef4444);\n    --nuraly-radio-group-error-text-color: var(--nuraly-color-radio-error-text, #ef4444);\n    --nuraly-radio-group-warning-icon-color: var(--nuraly-color-radio-warning-icon, #f59e0b);\n    --nuraly-radio-group-warning-text-color: var(--nuraly-color-radio-warning-text, #f59e0b);\n\n    /* Typography */\n    --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);\n    --nuraly-radio-group-message-font-size: var(--nuraly-font-size-radio-message, 12px);\n\n    /* Button type styling */\n    --nuraly-radio-group-button-border-radius: 4px;\n    --nuraly-radio-group-button-hover-color: var(--nuraly-color-radio-border-hover, #7c3aed);\n\n    /* Slot container styling */\n    --nuraly-radio-group-slot-hover-bg: rgba(124, 58, 237, 0.04);\n    --nuraly-radio-group-slot-selected-bg: rgba(124, 58, 237, 0.08);\n    --nuraly-radio-group-slot-border-radius: 6px;\n\n    /* ========================================\n     * COMPONENT STYLES\n     * ======================================== */\n    \n    width: fit-content;\n    display: block;\n    font-family: var(--nuraly-radio-group-font-family);\n  }\n\n  /* ========================================\n   * RADIO GROUP LAYOUT\n   * ======================================== */\n\n  .radio-group {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nuraly-radio-group-gap);\n  }\n\n  .radio-group.horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: var(--nuraly-radio-group-horizontal-gap);\n  }\n\n  .radio-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n  }\n\n  /* ========================================\n   * MESSAGE CONTAINERS (Error/Warning)\n   * ======================================== */\n\n  .radio-wrapper .message-container {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: var(--nuraly-radio-group-message-font-size);\n    padding-left: 28px; /* Align with radio label */\n  }\n\n  nr-icon {\n    display: flex;\n  }\n\n  .radio-wrapper.error nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-group-error-icon-color);\n  }\n\n  .radio-wrapper.warning nr-icon {\n    --nuraly-icon-color: var(--nuraly-radio-group-warning-icon-color);\n  }\n\n  .radio-wrapper.error .message-container {\n    color: var(--nuraly-radio-group-error-text-color);\n  }\n\n  .radio-wrapper.warning .message-container {\n    color: var(--nuraly-radio-group-warning-text-color);\n  }\n\n  /* ========================================\n   * BUTTON TYPE STYLING\n   * ======================================== */\n\n  .type-button {\n    display: inline-flex;\n    gap: 0px;\n  }\n\n  /* Button border radius for first and last child */\n  .type-button :first-child {\n    --nuraly-button-border-top-left-radius: var(--nuraly-radio-group-button-border-radius);\n    --nuraly-button-border-bottom-left-radius: var(--nuraly-radio-group-button-border-radius);\n  }\n\n  .type-button :last-child {\n    --nuraly-button-border-top-right-radius: var(--nuraly-radio-group-button-border-radius);\n    --nuraly-button-border-bottom-right-radius: var(--nuraly-radio-group-button-border-radius);\n  }\n\n  .type-button nr-button:not(:last-child) {\n    margin-right: -1px;\n  }\n\n  .type-button nr-button {\n    position: relative;\n    z-index: 1;\n  }\n\n  .type-button nr-button[type=\"default\"]:hover {\n    --nuraly-button-color: var(--nuraly-radio-group-button-hover-color);\n    --nuraly-button-border-color: var(--nuraly-radio-group-button-hover-color);\n    z-index: 2;\n  }\n\n  .type-button nr-button[type=\"primary\"] {\n    z-index: 1;\n    position: relative;\n  }\n\n  /* Disabled button states */\n  .type-button nr-button[disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .type-button nr-button[disabled]:hover {\n    z-index: auto;\n    --nuraly-button-border-color: var(--nuraly-button-disabled-border-color, var(--nuraly-button-local-disabled-border-color));\n    --nuraly-button-background-color: var(--nuraly-button-disabled-background-color, var(--nuraly-button-local-disabled-background-color));\n    --nuraly-button-color: var(--nuraly-button-disabled-text-color, var(--nuraly-button-local-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] {\n    --nuraly-button-background-color: var(--nuraly-button-primary-disabled-background-color, var(--nuraly-button-local-primary-disabled-background-color));\n    --nuraly-button-border-color: var(--nuraly-button-primary-disabled-border-color, var(--nuraly-button-local-primary-disabled-border-color));\n    --nuraly-button-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  .type-button nr-button[type=\"primary\"][disabled] nr-icon {\n    --nuraly-icon-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n    --nuraly-icon-local-color: var(--nuraly-button-primary-disabled-text-color, var(--nuraly-button-local-primary-disabled-text-color));\n  }\n\n  /* ========================================\n   * AUTO WIDTH STYLING\n   * ======================================== */\n\n  :host([auto-width]) .type-button nr-button {\n    --nuraly-button-min-width: 40px;\n    min-width: auto;\n    width: auto;\n  }\n\n  /* Ensure minimum padding for auto-width buttons to prevent them from becoming too small */\n  :host([auto-width]) .type-button nr-button button {\n    min-width: auto;\n    padding-left: max(var(--nuraly-spacing-2), 0.5rem);\n    padding-right: max(var(--nuraly-spacing-2), 0.5rem);\n  }\n\n  /* Icon-only buttons with auto-width should have minimal but adequate padding */\n  :host([auto-width]) .type-button nr-button.icon-only {\n    padding: 0.375rem; /* Even more minimal padding for icon-only */\n    min-width: auto;\n    width: auto;\n  }\n\n  :host([auto-width]) .type-button nr-button.icon-only button {\n    padding: max(0.375rem, var(--nuraly-spacing-2)); /* Ensure minimum 6px padding for icon-only */\n    min-width: auto;\n  }\n\n  /* For small size buttons, use proportionally smaller but still adequate padding */\n  :host([auto-width]) .type-button nr-button[size=\"small\"] button {\n    padding-left: max(var(--nuraly-spacing-1-5), 0.375rem);\n    padding-right: max(var(--nuraly-spacing-1-5), 0.375rem);\n  }\n\n  /* For small size icon-only buttons, use even less but still minimum padding */\n  :host([auto-width]) .type-button nr-button.icon-only[size=\"small\"] button {\n    padding: max(0.25rem, var(--nuraly-spacing-1-5));\n  }\n\n  /* For large size buttons, maintain larger minimum padding */\n  :host([auto-width]) .type-button nr-button[size=\"large\"] button {\n    padding-left: max(var(--nuraly-spacing-4), 0.75rem);\n    padding-right: max(var(--nuraly-spacing-4), 0.75rem);\n  }\n\n  /* For large size icon-only buttons, use proportionally larger padding */\n  :host([auto-width]) .type-button nr-button.icon-only[size=\"large\"] button {\n    padding: max(0.5rem, var(--nuraly-spacing-3));\n  }\n\n  /* ========================================\n   * SLOT-BASED RADIO STYLING\n   * ======================================== */\n\n  .slot-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    padding: 8px;\n    border-radius: var(--nuraly-radio-group-slot-border-radius);\n  }\n\n  .slot-wrapper:hover {\n    background-color: var(--nuraly-radio-group-slot-hover-bg);\n  }\n\n  .slot-wrapper nr-radio {\n    flex-shrink: 0;\n    margin-top: 2px;\n  }\n\n  .slot-wrapper .slot-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  .slot-container.selected .slot-wrapper {\n    background-color: var(--nuraly-radio-group-slot-selected-bg);\n  }\n\n  /* ========================================\n   * HELPER TEXT SLOT STYLING\n   * ======================================== */\n\n  ::slotted([slot='helper-text']) {\n    color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color, #8c8c8c));\n    font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size, 12px));\n    padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top, 4px));\n    \n    /* Prevent text overflow and ensure proper wrapping without affecting parent width */\n    word-wrap: break-word;\n    word-break: break-word;\n    overflow-wrap: break-word;\n    hyphens: auto;\n    white-space: normal;\n    max-width: 100%;\n    width: 0;\n    min-width: 100%;\n    box-sizing: border-box;\n    line-height: 1.4;\n    display: block;\n  }\n`;\n"]}

package/radio-group.types.d.ts

@@ -10,6 +10,7 @@ export declare type RadioButtonOption = {
     style?: string;
     title?: string;
     id?: string;
+    autoWidth?: boolean;
 };
 export declare type RadioButtonState = 'error' | 'warning';
 export declare enum RadioButtonDirection {
@@ -23,7 +24,8 @@ export declare enum RadioButtonPosition {
 export declare enum RadioButtonType {
     Default = "default",
     Button = "button",
-    Slot = "slot"
+    Slot = "slot",
+    ButtonSlot = "button-slot"
 }
 export declare enum RadioButtonSize {
     Small = "small",

package/radio-group.types.js

@@ -13,6 +13,7 @@ export var RadioButtonType;
     RadioButtonType["Default"] = "default";
     RadioButtonType["Button"] = "button";
     RadioButtonType["Slot"] = "slot";
+    RadioButtonType["ButtonSlot"] = "button-slot";
 })(RadioButtonType || (RadioButtonType = {}));
 export var RadioButtonSize;
 (function (RadioButtonSize) {

package/radio-group.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.types.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.types.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;IAC9B,iDAAyB,CAAA;IACzB,6CAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,oCAAiB,CAAA;IACjB,gCAAa,CAAA;AACf,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;AACjB,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B","sourcesContent":["export type RadioButtonOption = {\n  value: string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  state?: RadioButtonState;\n  message?: string;\n  htmlContent?: string; // Support for HTML content instead of plain label\n  className?: string; // Custom CSS class for the option\n  style?: string; // Inline styles for the option\n  title?: string; // Tooltip text\n  id?: string; // Custom ID for the option\n};\n\nexport type RadioButtonState = 'error' | 'warning';\n\nexport enum RadioButtonDirection {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\nexport enum RadioButtonPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum RadioButtonType {\n  Default = 'default',\n  Button = 'button',\n  Slot = 'slot',\n}\n\nexport enum RadioButtonSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\nexport enum RadioButtonVariant {\n  Default = 'default',\n  Solid = 'solid',\n}\n"]}
+{"version":3,"file":"radio-group.types.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio-group.types.ts"],"names":[],"mappings":"AAiBA,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;IAC9B,iDAAyB,CAAA;IACzB,6CAAqB,CAAA;AACvB,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B;AAED,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,oCAAa,CAAA;IACb,sCAAe,CAAA;AACjB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B;AAED,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,sCAAmB,CAAA;IACnB,oCAAiB,CAAA;IACjB,gCAAa,CAAA;IACb,6CAA0B,CAAA;AAC5B,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAN,IAAY,eAIX;AAJD,WAAY,eAAe;IACzB,kCAAe,CAAA;IACf,oCAAiB,CAAA;IACjB,kCAAe,CAAA;AACjB,CAAC,EAJW,eAAe,KAAf,eAAe,QAI1B;AAED,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B","sourcesContent":["export type RadioButtonOption = {\n  value: string;\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  state?: RadioButtonState;\n  message?: string;\n  htmlContent?: string; // Support for HTML content instead of plain label\n  className?: string; // Custom CSS class for the option\n  style?: string; // Inline styles for the option\n  title?: string; // Tooltip text\n  id?: string; // Custom ID for the option\n  autoWidth?: boolean; // Override global auto-width setting for this specific option\n};\n\nexport type RadioButtonState = 'error' | 'warning';\n\nexport enum RadioButtonDirection {\n  Horizontal = 'horizontal',\n  Vertical = 'vertical',\n}\n\nexport enum RadioButtonPosition {\n  Left = 'left',\n  Right = 'right',\n}\n\nexport enum RadioButtonType {\n  Default = 'default',\n  Button = 'button',\n  Slot = 'slot',\n  ButtonSlot = 'button-slot',\n}\n\nexport enum RadioButtonSize {\n  Small = 'small',\n  Medium = 'medium',\n  Large = 'large',\n}\n\nexport enum RadioButtonVariant {\n  Default = 'default',\n  Solid = 'solid',\n}\n"]}

package/radio.constant.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.constant.js","sourceRoot":"","sources":["../../../src/components/radio-group/radio.constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const EMPTY_STRING = '';\n"]}
+{"version":3,"file":"radio.constant.js","sourceRoot":"","sources":["../../../../src/components/radio-group/radio.constant.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["export const EMPTY_STRING = '';\n"]}

package/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/radio-group/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,WAAW;KACvB;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrRadioGroupElement } from './radio-group.component.js';\n\nexport const NrRadioGroup = createComponent({\n  tagName: 'nr-radio-group',\n  elementClass: NrRadioGroupElement,\n  react: React,\n  events: {\n    onChanged: 'nr-change'\n  }\n});\n"]}
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/radio-group/react.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE,MAAM,CAAC,MAAM,YAAY,GAAG,eAAe,CAAC;IAC1C,OAAO,EAAE,gBAAgB;IACzB,YAAY,EAAE,mBAAmB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,SAAS,EAAE,WAAW;KACvB;CACF,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Google Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrRadioGroupElement } from './radio-group.component.js';\n\nexport const NrRadioGroup = createComponent({\n  tagName: 'nr-radio-group',\n  elementClass: NrRadioGroupElement,\n  react: React,\n  events: {\n    onChanged: 'nr-change'\n  }\n});\n"]}