@nuraly/runtime 0.1.7 → 0.1.9

package/components/ui/components/utility/Handlers/Handlers.ts

@@ -6,14 +6,6 @@ import { styleMap } from "lit/directives/style-map.js";
 import { executeHandler } from '../../../../../state/runtime-context.ts';
 import { eventDispatcher } from '../../../../../utils/change-detection.ts';
 
-// Safely import @nuralyui/select
-try {
-  await import("@nuralyui/select");
-} catch (error) {
-  console.warn('[@nuralyui/select] Package not found or failed to load.');
-}
-
-
 @customElement("handler-block")
 export class HandlerBlock extends BaseElementBlock {
   static styles = [
@@ -31,16 +23,16 @@ constructor() {
   super();
 
   eventDispatcher.onAny( ()=>{
-   this.traitInputsHandlers()
+   this.refreshInputs()
   } );
- 
+
 }
 
 
   handleCodeChange = (e: CustomEvent, eventName: string) => {
     executeHandler(this.component,
       /* js */`
-            const selectedComponent = Utils.first(Vars.selectedComponents);
+            const selectedComponent = Utils.first($selectedComponents);
               updateEvent(selectedComponent, "${eventName}", EventData.value )
        
         `, {
@@ -52,12 +44,12 @@ constructor() {
     
     executeHandler(this.component,
       /* js */ `
-        const selectedComponent = Utils.first(Vars.selectedComponents);
+        const selectedComponent = Utils.first($selectedComponents);
               updateEvent(selectedComponent, "${eventName}", "" )
         `, {
         value: ""
       });
-        this.traitInputsHandlers();
+        this.refreshInputs();
         this.requestUpdate( )
   };
 
@@ -65,10 +57,10 @@ constructor() {
     executeHandler(this.component,
       /* js */ `
         try{
-          const selectedComponent = Utils.first(Vars.selectedComponents);
+          const selectedComponent = Utils.first($selectedComponents);
               updateEvent(selectedComponent, "${eventName}", null )
         }catch(error){
-            console.log(error);
+            console.error(error);
         }
         `, {});
   };
@@ -89,7 +81,9 @@ constructor() {
     return html`
       <nr-dropdown
         placement="bottom-start"
-        trigger="click">
+        trigger="click"
+        position-strategy="fixed"
+        min-width="624px">
         <nr-button
           slot="trigger"
           style=${styleMap({
@@ -107,7 +101,7 @@ constructor() {
           iconPosition=${!this.inputHandlersValue?.triggerText ? "left" : "right"}
         >${this.inputHandlersValue?.triggerText ?? ""}
         </nr-button>
-        <div slot="content" style="padding: 12px; min-width: 400px;">
+        <div slot="content" style="padding: 12px; min-width: 700px;">
           ${this.renderCodeEditorTemplate(eventName, eventValue)}
         </div>
       </nr-dropdown>
@@ -145,6 +139,7 @@ constructor() {
         "--nuraly-button-border-bottom": "none"
       })}
               .icon=${["plus"]}
+              size="small"
               class="unit"
             >${this.inputHandlersValue?.triggerText ?? ""}
             </nr-button>
@@ -177,6 +172,7 @@ constructor() {
                   <nr-label>${eventName}</nr-label>
                   <div style="display: flex; align-items: center; gap: 8px;">
                     <nr-button
+                    class="unit"
                       style=${styleMap({
           "--nuraly-button-text-color": "#b8b8b8",
           "--nuraly-button-height": "39px",
@@ -189,6 +185,7 @@ constructor() {
         })}
                       .icon=${["trash"]}
                       class="unit"
+                      class="unit"
                       @click=${() => {
           this.removeHandler(eventName);
           this.requestUpdate();

package/components/ui/components/utility/ValidationRules/ValidationRules.ts

@@ -0,0 +1,440 @@
+import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { BaseElementBlock } from '../../base/BaseElement';
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+
+// ValidationRule interface matching nr-input's expected format
+interface ValidationRule {
+  name?: string; // Custom name for the rule
+  type?: 'string' | 'number' | 'boolean' | 'method' | 'regexp' | 'integer' | 'float' | 'array' | 'object' | 'enum' | 'date' | 'url' | 'hex' | 'email';
+  required?: boolean;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  min?: number;
+  max?: number;
+  message?: string;
+  warningOnly?: boolean;
+}
+
+// Rule presets matching nr-input's VALIDATION_RULES
+const RULE_PRESETS = {
+  required: (): ValidationRule => ({
+    required: true,
+    message: 'This field is required'
+  }),
+  email: (): ValidationRule => ({
+    type: 'email',
+    message: 'Please enter a valid email address'
+  }),
+  url: (): ValidationRule => ({
+    type: 'url',
+    message: 'Please enter a valid URL'
+  }),
+  phone: (): ValidationRule => ({
+    pattern: '^[\\+]?[1-9][\\d]{0,15}$',
+    message: 'Please enter a valid phone number'
+  }),
+  minLength: (value: number = 1): ValidationRule => ({
+    minLength: value,
+    message: `Minimum length is ${value} characters`
+  }),
+  maxLength: (value: number = 100): ValidationRule => ({
+    maxLength: value,
+    message: `Maximum length is ${value} characters`
+  }),
+  min: (value: number = 0): ValidationRule => ({
+    type: 'number',
+    min: value,
+    message: `Minimum value is ${value}`
+  }),
+  max: (value: number = 100): ValidationRule => ({
+    type: 'number',
+    max: value,
+    message: `Maximum value is ${value}`
+  }),
+  alphanumeric: (): ValidationRule => ({
+    pattern: '^[a-zA-Z0-9]+$',
+    message: 'Only letters and numbers allowed'
+  }),
+  numeric: (): ValidationRule => ({
+    pattern: '^\\d+$',
+    message: 'Only numbers allowed'
+  }),
+  strongPassword: (): ValidationRule => ({
+    pattern: '^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$',
+    message: 'Password must contain at least 8 characters, including uppercase, lowercase, number and special character'
+  }),
+};
+
+type RulePresetKey = keyof typeof RULE_PRESETS;
+
+@customElement("validation-rules-display")
+export class ValidationRulesDisplay extends BaseElementBlock {
+  static override styles = [
+    css`
+      :host {
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        font-size: 12px;
+        min-height: 0;
+        flex-shrink: 0;
+      }
+
+      .validation-container {
+        padding: 8px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .section {
+        margin-bottom: 12px;
+      }
+
+      .section-title {
+        font-size: 10px;
+        font-weight: 600;
+        color: var(--nuraly-text-secondary, #888);
+        text-transform: uppercase;
+        margin-bottom: 8px;
+        letter-spacing: 0.5px;
+      }
+
+      .preset-buttons {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+
+      .preset-buttons nr-button {
+        --nuraly-button-height: 24px;
+        --nuraly-button-font-size: 10px;
+        --nuraly-button-padding-horizontal: 8px;
+        --nuraly-button-padding-small: 5px;
+      }
+
+      .rules-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .rule-item {
+        padding: 10px;
+        background: var(--nuraly-bg-secondary, #f5f5f5);
+        border-radius: 6px;
+        border: 1px solid var(--nuraly-border, #e0e0e0);
+      }
+
+      .rule-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+      }
+
+      .rule-type-badge {
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--nuraly-primary, #4a9eff);
+        background: var(--nuraly-primary-light, #e6f0ff);
+        padding: 3px 8px;
+        border-radius: 4px;
+      }
+
+      .rule-actions {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .warning-toggle {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 10px;
+        color: var(--nuraly-text-tertiary, #888);
+        cursor: pointer;
+      }
+
+      .warning-toggle input {
+        width: 14px;
+        height: 14px;
+        cursor: pointer;
+      }
+
+      .delete-btn {
+      }
+
+      .rule-fields {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .rule-field {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .rule-field-label {
+        font-size: 10px;
+        color: var(--nuraly-text-tertiary, #888);
+        min-width: 50px;
+        text-transform: uppercase;
+      }
+
+      nr-input {
+        flex: 1;
+        --nuraly-spacing-input-height: 24px;
+        --nuraly-font-size-input: 10px;
+        --nuraly-font-size-input-placeholder: 10px;
+        --nuraly-color-input-background: var(--validation-input-bg, white);
+        --nuraly-color-input-inner-background: var(--validation-input-bg, white);
+      }
+
+      nr-input.small {
+        width: 70px;
+        flex: none;
+      }
+
+      nr-checkbox {
+        --nuraly-checkbox-size: 14px;
+      }
+
+      .empty-state {
+        text-align: center;
+        padding: 16px;
+        color: var(--nuraly-text-tertiary, #888);
+        font-size: 11px;
+        background: var(--nuraly-bg-secondary, #f5f5f5);
+        border-radius: 4px;
+        margin-bottom: 12px;
+      }
+
+      .divider {
+        height: 1px;
+        background: var(--nuraly-border, #e0e0e0);
+        margin: 12px 0;
+      }
+    `,
+  ];
+
+  @property({ type: Object })
+  component: ComponentElement;
+
+  private emitRulesChange(rules: ValidationRule[]) {
+    this.executeEvent("onChange", new CustomEvent('change'), {
+      property: 'rules',
+      type: 'array',
+      value: rules,
+    });
+
+    // Optimistically update local state for immediate UI feedback
+    if (this.inputHandlersValue?.value) {
+      this.inputHandlersValue = {
+        ...this.inputHandlersValue,
+        value: { ...this.inputHandlersValue.value, rules }
+      };
+    } else {
+      this.inputHandlersValue = { ...this.inputHandlersValue, rules };
+    }
+    this.requestUpdate();
+  }
+
+  private getRulesFromHandlers(): ValidationRule[] {
+    const handlers = this.inputHandlersValue;
+    if (handlers?.value?.rules) {
+      return handlers.value.rules;
+    }
+    if (handlers?.rules) {
+      return handlers.rules;
+    }
+    return [];
+  }
+
+  private addRule(presetKey: RulePresetKey) {
+    const currentRules = this.getRulesFromHandlers();
+    const presetFn = RULE_PRESETS[presetKey];
+    const newRule = presetFn();
+    this.emitRulesChange([...currentRules, newRule]);
+  }
+
+  private addCustomPattern() {
+    const currentRules = this.getRulesFromHandlers();
+    const newRule: ValidationRule = {
+      name: 'custom',
+      pattern: '',
+      message: 'Invalid format'
+    };
+    this.emitRulesChange([...currentRules, newRule]);
+  }
+
+  private handleNameChange(index: number, name: string) {
+    this.updateRule(index, { name });
+  }
+
+  private removeRule(index: number) {
+    const currentRules = [...this.getRulesFromHandlers()];
+    currentRules.splice(index, 1);
+    this.emitRulesChange(currentRules);
+  }
+
+  private updateRule(index: number, updates: Partial<ValidationRule>) {
+    const currentRules = [...this.getRulesFromHandlers()];
+    currentRules[index] = { ...currentRules[index], ...updates };
+    this.emitRulesChange(currentRules);
+  }
+
+  private getRuleType(rule: ValidationRule): string {
+    // Use custom name if available
+    if (rule.name) return rule.name;
+    if (rule.required) return 'required';
+    if (rule.type === 'email') return 'email';
+    if (rule.type === 'url') return 'url';
+    if (rule.minLength !== undefined) return 'minLength';
+    if (rule.maxLength !== undefined) return 'maxLength';
+    if (rule.min !== undefined) return 'min';
+    if (rule.max !== undefined) return 'max';
+    if (rule.pattern) return 'pattern';
+    return 'custom';
+  }
+
+  private isCustomPatternRule(rule: ValidationRule): boolean {
+    // A rule is a custom pattern if it has a name and pattern fields
+    return rule.name !== undefined && rule.pattern !== undefined;
+  }
+
+  private getEditableValue(rule: ValidationRule): { key: string; value: any; type: 'number' | 'text' } | null {
+    if (rule.minLength !== undefined) return { key: 'minLength', value: rule.minLength, type: 'number' };
+    if (rule.maxLength !== undefined) return { key: 'maxLength', value: rule.maxLength, type: 'number' };
+    if (rule.min !== undefined) return { key: 'min', value: rule.min, type: 'number' };
+    if (rule.max !== undefined) return { key: 'max', value: rule.max, type: 'number' };
+    if (rule.pattern !== undefined) return { key: 'pattern', value: rule.pattern, type: 'text' };
+    return null;
+  }
+
+  private handleValueChange(index: number, key: string, value: string, type: 'number' | 'text') {
+    const parsedValue = type === 'number' ? (value ? parseInt(value, 10) : 0) : value;
+    this.updateRule(index, { [key]: parsedValue });
+  }
+
+  private handleMessageChange(index: number, message: string) {
+    this.updateRule(index, { message });
+  }
+
+  private handleWarningToggle(index: number, warningOnly: boolean) {
+    this.updateRule(index, { warningOnly });
+  }
+
+  private renderRuleItem(rule: ValidationRule, index: number) {
+    const ruleType = this.getRuleType(rule);
+    const editableValue = this.getEditableValue(rule);
+    const isCustomPattern = this.isCustomPatternRule(rule);
+
+    return html`
+      <div class="rule-item">
+        <div class="rule-header">
+          <span class="rule-type-badge">${ruleType}</span>
+          <div class="rule-actions">
+            <label class="warning-toggle">
+              <nr-checkbox
+                size="small"
+                .checked=${rule.warningOnly || false}
+                @nr-change=${(e: CustomEvent) => this.handleWarningToggle(index, e.detail?.checked || false)}
+              ></nr-checkbox>
+              Warning only
+            </label>
+            <nr-button class="delete-btn" type="text" size="small" @click=${() => this.removeRule(index)}>×</nr-button>
+          </div>
+        </div>
+        <div class="rule-fields">
+          ${isCustomPattern ? html`
+            <div class="rule-field">
+              <span class="rule-field-label">Name</span>
+              <nr-input
+                size="small"
+                .value=${rule.name || ''}
+                placeholder="Rule name"
+                @nr-input=${(e: CustomEvent) => this.handleNameChange(index, e.detail?.value || '')}
+              ></nr-input>
+            </div>
+            <div class="rule-field">
+              <span class="rule-field-label">Pattern</span>
+              <nr-input
+                size="small"
+                .value=${rule.pattern || ''}
+                placeholder="^[a-z]+$"
+                @nr-input=${(e: CustomEvent) => this.handleValueChange(index, 'pattern', e.detail?.value || '', 'text')}
+              ></nr-input>
+            </div>
+          ` : editableValue ? html`
+            <div class="rule-field">
+              <span class="rule-field-label">Value</span>
+              <nr-input
+                type=${editableValue.type}
+                size="small"
+                class=${editableValue.type === 'text' ? '' : 'small'}
+                .value=${String(editableValue.value)}
+                @nr-input=${(e: CustomEvent) => this.handleValueChange(index, editableValue.key, e.detail?.value || '', editableValue.type)}
+              ></nr-input>
+            </div>
+          ` : nothing}
+          <div class="rule-field">
+            <span class="rule-field-label">Message</span>
+            <nr-input
+              size="small"
+              .value=${rule.message || ''}
+              placeholder="Validation message"
+              @nr-input=${(e: CustomEvent) => this.handleMessageChange(index, e.detail?.value || '')}
+            ></nr-input>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  override renderComponent() {
+    const rules: ValidationRule[] = this.getRulesFromHandlers();
+
+    return html`
+      <div class="validation-container">
+        <!-- Current Rules -->
+        <div class="section">
+          <div class="section-title">Validation Rules</div>
+          ${rules.length > 0 ? html`
+            <div class="rules-list">
+              ${rules.map((rule, index) => this.renderRuleItem(rule, index))}
+            </div>
+          ` : html`
+            <div class="empty-state">No validation rules configured</div>
+          `}
+        </div>
+
+        <div class="divider"></div>
+
+        <!-- Add Rules -->
+        <div class="section">
+          <div class="section-title">Add Rule</div>
+          <div class="preset-buttons">
+            <nr-button dashed size="small" @click=${() => this.addRule('required')}>+ required</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('email')}>+ email</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('url')}>+ url</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('phone')}>+ phone</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('minLength')}>+ minLength</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('maxLength')}>+ maxLength</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('min')}>+ min</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('max')}>+ max</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('alphanumeric')}>+ alphanumeric</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('numeric')}>+ numeric</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addRule('strongPassword')}>+ strongPassword</nr-button>
+            <nr-button dashed size="small" @click=${() => this.addCustomPattern()}>+ custom pattern</nr-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/components/ui/components/wrappers/GenerikWrapper/DragWrapper/DragWrapper.ts

@@ -129,6 +129,7 @@ export class DragWrapper extends LitElement {
       } else {
         this.draggingSituation = false;
         this.draggingComponentInfo = null;
+        this.resetDropZones();
       }
     });
   }

package/components/ui/components/wrappers/GenerikWrapper/GenerikWrapper.ts

@@ -10,9 +10,7 @@ import { $context, getVar, setVar } from '../../../../../redux/store/context.ts'
 import styles from "./GenerikWrapper.style.ts";
 
 import "./DragWrapper/DragWrapper.ts";
-import "./ResizeWrapper/ResizeWrapper.ts";
 import "./QuickActionWrapper/QuickActionWrapper.ts";
-import "../ComponentTitle/ComponentTitle.ts";
 import { setDraggingComponentInfo } from '../../../../../redux/actions/component/setDraggingComponentInfo.ts';
 import { updateComponentAttributes } from '../../../../../redux/actions/component/updateComponentAttributes.ts';
 import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
@@ -54,8 +52,6 @@ export class GenerikComponentWrapper extends LitElement {
 
     $environment.subscribe((environment: Environment) => {
       this.environmentMode = environment.mode;
-      this.wrapperStyle =
-        environment.mode === ViewMode.Edit ? {  } : {};
     });
     $hoveredComponent.subscribe((hoveredComponent: ComponentElement) => {
       this.hoveredComponent = hoveredComponent;
@@ -113,11 +109,6 @@ export class GenerikComponentWrapper extends LitElement {
 
   override connectedCallback() {
     super.connectedCallback();
-    // Find the closest parent "generik-component-wrapper"
-    const closestWrapper = this.closest("generik-component-wrapper");
-    if (closestWrapper) {
-    } else {
-    }
   }
 
   render() {
@@ -127,14 +118,6 @@ export class GenerikComponentWrapper extends LitElement {
 
         }
       </style>
-      <resize-wrapper
-        .isSelected=${this.currentSelection.includes(this.component.uuid)}
-        .component=${{ ...this.component }}
-        .selectedComponent=${{ ...this.selectedComponent }}
-        .hoveredComponent=${{ ...this.hoveredComponent }}
-        .inputRef=${this.inputRef}
-      >
-      </resize-wrapper>
 
         <drag-wrapper
           .component=${{ ...this.component }}
@@ -169,13 +152,7 @@ export class GenerikComponentWrapper extends LitElement {
               </div>
               <slot></slot>
             </div>
-            <component-title
-              @dragInit=${(e) => (this.isDragInitiator = e.detail.value)}
-              .component=${{ ...this.component }}
-              .selectedComponent=${{ ...this.selectedComponent }}
-              .hoveredComponent=${{ ...this.hoveredComponent }}
-
-            ></component-title>
+         
           </span>
         </drag-wrapper>
     `;

package/components/ui/nuraly-ui/src/components/badge/badge.style.ts

@@ -31,11 +31,12 @@ export const styles = css`
 
   /* Main badge indicator (count or dot) */
   .badge-indicator {
-    position: absolute;
+    /* position: absolute; */
     top: 0;
     right: 0;
-    transform: translate(50%, -50%);
-    transform-origin: 100% 0%;
+    /* Temporarily disabled for demo - positions badge at exact corner */
+    /* transform: translate(50%, -50%); */
+    /* transform-origin: 100% 0%; */
     z-index: var(--nuraly-badge-indicator-z-index, auto);
     display: inline-flex;
     align-items: center;

package/components/ui/nuraly-ui/src/components/datepicker/datepicker.component.ts

@@ -122,6 +122,7 @@ export class HyDatePickerElement extends NuralyUIBaseMixin(LitElement) implement
   @property({ type: String }) placement: DatePickerPlacement = DatePickerPlacement.Auto;
   @property({ type: String }) label = '';
   @property({ type: String }) helper = '';
+  @property({ type: String }) placeholder = '';
   @property({ type: String }) state: DatePickerState | INPUT_STATE = INPUT_STATE.Default;
   @property({ type: Boolean, attribute: 'use-select-dropdowns' }) useSelectDropdowns = false;
 
@@ -482,6 +483,7 @@ export class HyDatePickerElement extends NuralyUIBaseMixin(LitElement) implement
           id="${INPUT_FIELD_ID}"
           .type="${this.INPUT_TYPE}"
           .value="${this.inputFieldValue}"
+          .placeholder="${this.placeholder}"
           .size="${this.size}"
           .state="${this.state}"
           .disabled="${this.disabled}"

package/components/ui/nuraly-ui/src/components/radio-group/radio-group.component.ts

@@ -61,6 +61,8 @@ import { ButtonType } from '../button/button.types.js';
  * ```
  * 
  * @fires nr-change - Dispatched when the selected option changes
+ * 
+ * @slot helper-text - Helper text displayed below the radio group
  */
 @customElement('nr-radio-group')
 export class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
@@ -80,6 +82,7 @@ export class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
   @property({ type: String }) size: 'small' | 'medium' | 'large' = 'medium';
   @property({ type: String }) position: 'left' | 'right' = 'left';
   @property({ type: Boolean, attribute: 'auto-width' }) autoWidth: boolean = false;
+  @property({ type: String }) helper: string = '';
 
   // Reactive Controllers - PROPERLY implemented now
   private groupController = new RadioGroupController(this);
@@ -416,11 +419,14 @@ export class NrRadioGroupElement extends NuralyUIBaseMixin(LitElement) {
   }
 
   protected override render() {
-    return html`${choose(this.type, [
-      [RadioButtonType.Default, () => this.renderOptionDefault()],
-      [RadioButtonType.Button, () => this.renderOptionsWithButtons()],
-      [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],
-      [RadioButtonType.ButtonSlot, () => this.renderButtonsWithSlots()], // Special case for button with slots
-    ])} `;
+    return html`
+      ${choose(this.type, [
+        [RadioButtonType.Default, () => this.renderOptionDefault()],
+        [RadioButtonType.Button, () => this.renderOptionsWithButtons()],
+        [RadioButtonType.Slot, () => this.renderOptionsWithSlots()],
+        [RadioButtonType.ButtonSlot, () => this.renderButtonsWithSlots()], // Special case for button with slots
+      ])}
+      <slot name="helper-text"></slot>
+    `;
   }
 }