@nuraly/runtime 0.1.7 → 0.1.8

package/components/ui/components/inputs/Form/Form.ts

@@ -0,0 +1,352 @@
+import { html, nothing, type PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
+import { $components } from '../../../../../redux/store/component/store.ts';
+import { BaseElementBlock } from "../../base/BaseElement.ts";
+import { ref } from "lit/directives/ref.js";
+import { formStyles } from "./Form.style.ts";
+import { setCurrentComponentIdAction } from '../../../../../redux/actions/component/setCurrentComponentIdAction.ts';
+import { renderComponent } from '../../../../../utils/render-util.ts';
+
+// Safely import @nuralyui/forms
+try {
+  await import("@nuralyui/forms");
+} catch (error) {
+  console.warn('[@nuralyui/forms] Package not found or failed to load.');
+}
+
+// Import icon and label for placeholder
+import "@nuralyui/icon";
+import "@nuralyui/label";
+
+/**
+ * Form block component that wraps nr-form and handles field registration
+ * across Shadow DOM boundaries using event-based communication.
+ */
+@customElement("form-block")
+export class FormBlock extends BaseElementBlock {
+  static styles = [formStyles];
+
+  @property({ type: Object })
+  component: ComponentElement;
+
+  @property({ type: Object })
+  item: any;
+
+  @state()
+  private _formElement: any = null;
+
+  @state()
+  private _registeredFields: Map<string, any> = new Map();
+
+  @state()
+  childrenComponents: ComponentElement[] = [];
+
+  private _fieldRegisterHandler = this._handleFieldRegister.bind(this);
+  private _fieldUnregisterHandler = this._handleFieldUnregister.bind(this);
+  private _fieldValueChangeHandler = this._handleFieldValueChange.bind(this);
+
+  constructor() {
+    super();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.updateChildrenComponents();
+
+    // Listen for field registration events from child input blocks
+    this.addEventListener('nr-field-register', this._fieldRegisterHandler as EventListener);
+    this.addEventListener('nr-field-unregister', this._fieldUnregisterHandler as EventListener);
+    this.addEventListener('nr-field-value-change', this._fieldValueChangeHandler as EventListener);
+  }
+
+  override willUpdate(changedProperties: Map<string, any>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("component")) {
+      this.updateChildrenComponents();
+    }
+  }
+
+  private updateChildrenComponents(): void {
+    this.childrenComponents = this.component?.childrenIds?.map((id) => {
+      return $components.get()[this.component?.application_id]?.find((component) => component.uuid === id);
+    }).filter(Boolean) ?? [];
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('nr-field-register', this._fieldRegisterHandler as EventListener);
+    this.removeEventListener('nr-field-unregister', this._fieldUnregisterHandler as EventListener);
+    this.removeEventListener('nr-field-value-change', this._fieldValueChangeHandler as EventListener);
+    this._registeredFields.clear();
+  }
+
+  protected override firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    // Get reference to the nr-form element
+    this._formElement = this.renderRoot.querySelector("nr-form");
+
+    // Register callbacks for input handlers
+    this.registerCallback("disabled", (value) => {
+      if (this._formElement) {
+        this._formElement.disabled = value;
+      }
+    });
+  }
+
+  /**
+   * Handle field registration from child input blocks
+   */
+  private _handleFieldRegister(event: CustomEvent) {
+    event.stopPropagation();
+
+    const { element, name, blockElement } = event.detail;
+
+    if (!name || !element) {
+      console.warn('[FormBlock] Field registration missing name or element');
+      return;
+    }
+
+    // Store the registration
+    this._registeredFields.set(name, { element, blockElement });
+
+    // Register with nr-form's validation controller if available
+    if (this._formElement?.validationController) {
+      try {
+        this._formElement.validationController.registerField(element);
+      } catch (error) {
+        console.warn('[FormBlock] Failed to register field with validation controller:', error);
+      }
+    }
+  }
+
+  /**
+   * Handle field unregistration when child input blocks are removed
+   */
+  private _handleFieldUnregister(event: CustomEvent) {
+    event.stopPropagation();
+
+    const { name } = event.detail;
+
+    if (name && this._registeredFields.has(name)) {
+      // Unregister from nr-form's validation controller
+      if (this._formElement?.validationController) {
+        try {
+          this._formElement.validationController.unregisterField(name);
+        } catch (error) {
+          console.warn('[FormBlock] Failed to unregister field:', error);
+        }
+      }
+      this._registeredFields.delete(name);
+    }
+  }
+
+  /**
+   * Handle field value changes for form data collection
+   */
+  private _handleFieldValueChange(event: CustomEvent) {
+    // Allow the event to propagate for potential parent handling
+    const { name, value } = event.detail;
+
+    if (name && this._registeredFields.has(name)) {
+      const fieldInfo = this._registeredFields.get(name);
+      fieldInfo.value = value;
+    }
+  }
+
+  /**
+   * Get all form field values
+   */
+  public getFieldsValue(): Record<string, any> {
+    if (this._formElement?.getFieldsValue) {
+      return this._formElement.getFieldsValue();
+    }
+
+    // Fallback: collect from registered fields
+    const values: Record<string, any> = {};
+    for (const [name, fieldInfo] of this._registeredFields) {
+      values[name] = fieldInfo.element?.value ?? fieldInfo.value;
+    }
+    return values;
+  }
+
+  /**
+   * Set form field values
+   */
+  public setFieldsValue(values: Record<string, any>): void {
+    if (this._formElement?.setFieldsValue) {
+      this._formElement.setFieldsValue(values);
+    }
+  }
+
+  /**
+   * Validate all form fields
+   */
+  public async validate(): Promise<boolean> {
+    if (this._formElement?.validate) {
+      return this._formElement.validate();
+    }
+    return true;
+  }
+
+  /**
+   * Submit the form programmatically
+   */
+  public async submit(customData?: Record<string, any>): Promise<void> {
+    if (this._formElement?.submit) {
+      await this._formElement.submit(customData);
+    }
+  }
+
+  /**
+   * Reset the form
+   */
+  public reset(): void {
+    if (this._formElement?.reset) {
+      this._formElement.reset();
+    }
+  }
+
+  /**
+   * Get form state summary
+   */
+  public getFormState(): any {
+    if (this._formElement?.getFormState) {
+      return this._formElement.getFormState();
+    }
+    return {
+      isValid: true,
+      isSubmitting: false,
+      hasErrors: false,
+      errorCount: 0,
+      fieldCount: this._registeredFields.size
+    };
+  }
+
+  /**
+   * Render placeholder when form is empty in editor mode
+   */
+  private renderPlaceholder() {
+    return html`
+      <div
+        class="form-placeholder"
+        @click="${() => setCurrentComponentIdAction(this.component?.uuid)}"
+      >
+        <nr-icon name="file-text"></nr-icon>
+        <nr-label>Add form fields to this form</nr-label>
+        <drag-wrapper
+          .where=${"inside"}
+          .message=${"Drop inside"}
+          .component=${{ ...this.component }}
+          .inputRef=${this.inputRef}
+          .isDragInitiator=${this.isDragInitiator}
+        >
+        </drag-wrapper>
+      </div>
+    `;
+  }
+
+  /**
+   * Render children components
+   */
+  private renderChildren() {
+    return renderComponent(
+      this.childrenComponents.map((component) => ({ ...component, item: this.item })),
+      this.item,
+      this.isViewMode,
+      { ...this.component, uniqueUUID: this.uniqueUUID }
+    );
+  }
+
+  override renderComponent() {
+    const inputStyles = this.getStyles();
+    const hasChildren = this.childrenComponents.length > 0;
+
+    // In view mode, always render the form with children (or empty)
+    if (this.isViewMode) {
+      return html`
+        <nr-form
+          ${ref(this.inputRef)}
+          class="${`drop-${this.component.uuid}`}"
+          style=${Object.entries(inputStyles).map(([k, v]) => `${k}:${v}`).join(';')}
+          .disabled=${this.inputHandlersValue?.disabled || false}
+          .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? false}
+          .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? true}
+          .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? true}
+          .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? false}
+          .action=${this.inputHandlersValue?.action ?? nothing}
+          .method=${this.inputHandlersValue?.method ?? 'POST'}
+          @nr-form-submit-success=${(e: CustomEvent) => {
+            this.executeEvent('onSubmitSuccess', e, {
+              formData: e.detail?.formData,
+              values: this.getFieldsValue()
+            });
+          }}
+          @nr-form-submit-error=${(e: CustomEvent) => {
+            this.executeEvent('onSubmitError', e, {
+              error: e.detail?.error
+            });
+          }}
+          @nr-form-validation-changed=${(e: CustomEvent) => {
+            this.executeEvent('onValidationChange', e, {
+              validationResult: e.detail?.validationResult
+            });
+          }}
+          @nr-form-field-changed=${(e: CustomEvent) => {
+            this.executeEvent('onFieldChange', e, {
+              field: e.detail?.field
+            });
+          }}
+          @nr-form-reset=${(e: CustomEvent) => {
+            this.executeEvent('onReset', e, {});
+          }}
+        >
+          ${hasChildren ? this.renderChildren() : nothing}
+        </nr-form>
+      `;
+    }
+
+    // In editor mode, show placeholder if empty
+    return html`
+      <nr-form
+        ${ref(this.inputRef)}
+        class="${`drop-${this.component.uuid}`}"
+        style=${Object.entries(inputStyles).map(([k, v]) => `${k}:${v}`).join(';')}
+        .disabled=${this.inputHandlersValue?.disabled || false}
+        .validateOnChange=${this.inputHandlersValue?.validateOnChange ?? false}
+        .validateOnBlur=${this.inputHandlersValue?.validateOnBlur ?? true}
+        .preventInvalidSubmission=${this.inputHandlersValue?.preventInvalidSubmission ?? true}
+        .resetOnSuccess=${this.inputHandlersValue?.resetOnSuccess ?? false}
+        .action=${this.inputHandlersValue?.action ?? nothing}
+        .method=${this.inputHandlersValue?.method ?? 'POST'}
+        @nr-form-submit-success=${(e: CustomEvent) => {
+          this.executeEvent('onSubmitSuccess', e, {
+            formData: e.detail?.formData,
+            values: this.getFieldsValue()
+          });
+        }}
+        @nr-form-submit-error=${(e: CustomEvent) => {
+          this.executeEvent('onSubmitError', e, {
+            error: e.detail?.error
+          });
+        }}
+        @nr-form-validation-changed=${(e: CustomEvent) => {
+          this.executeEvent('onValidationChange', e, {
+            validationResult: e.detail?.validationResult
+          });
+        }}
+        @nr-form-field-changed=${(e: CustomEvent) => {
+          this.executeEvent('onFieldChange', e, {
+            field: e.detail?.field
+          });
+        }}
+        @nr-form-reset=${(e: CustomEvent) => {
+          this.executeEvent('onReset', e, {});
+        }}
+      >
+        ${hasChildren ? this.renderChildren() : this.renderPlaceholder()}
+      </nr-form>
+    `;
+  }
+}

package/components/ui/components/inputs/IconPicker/IconPicker.ts

@@ -4,9 +4,8 @@ import { customElement, property } from "lit/decorators.js";
 import { BaseElementBlock } from '../../base/BaseElement';
 import { styles } from "./IconPicker.style.ts";
 import { EMPTY_STRING } from '../../../../../utils/constants.ts';
-import { styleMap } from "lit/directives/style-map.js";
 import { ref } from "lit/directives/ref.js";
-// import "@nuralyui/iconpicker"; // TODO: Package doesn't exist, needs to be created or removed
+import "@nuralyui/iconpicker"; // TODO: Package doesn't exist, needs to be created or removed
 
 @customElement("icon-picker-block")
 export class IconPicker extends BaseElementBlock {
@@ -15,31 +14,36 @@ export class IconPicker extends BaseElementBlock {
   @property({ type: Object })
   component: ComponentElement;
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.registerCallback("value", () => {});
   }
 
   renderComponent() {
-    const iconPickerStyles = this.component?.style || {};
-    const size = (iconPickerStyles.size as 'small' | 'medium' | 'large') || 'medium';
+    const inputValue = this.inputHandlersValue.value ?? EMPTY_STRING;
+    const size = this.inputHandlersValue?.size || 'small';
+    const placement = this.inputHandlersValue?.placement || 'auto';
+    const trigger = this.inputHandlersValue?.trigger || 'manual';
+    const disabled = this.inputHandlersValue?.disable === 'disabled' || this.inputHandlersValue?.disable === true;
+    const readonly = this.inputHandlersValue?.readonly || false;
+    const placeholder = this.inputHandlersValue?.placeholder || 'Select icon';
+    const showSearch = this.inputHandlersValue?.showSearch !== false;
+    const showClear = this.inputHandlersValue?.showClear !== false;
+    const maxVisible = this.inputHandlersValue?.maxVisible || 500;
 
     return html`
       <nr-icon-picker
         ${ref(this.inputRef)}
-        style=${styleMap({
-          ...this.getStyles(),
-        })}
-        .value=${this.inputHandlersValue.value ?? EMPTY_STRING}
-        .disabled=${this.inputHandlersValue?.state === "disabled"}
-        .readonly=${this.inputHandlersValue?.readonly || false}
+        .value=${inputValue}
         .size=${size}
-        .placement=${this.inputHandlersValue?.placement || 'auto'}
-        .trigger=${this.inputHandlersValue?.trigger || 'manual'}
-        .placeholder=${this.inputHandlersValue?.placeholder || 'Select icon'}
-        .showSearch=${this.inputHandlersValue?.showSearch !== false}
-        .showClear=${this.inputHandlersValue?.showClear !== false}
-        .maxVisible=${this.inputHandlersValue?.maxVisible || 500}
+        .placement=${placement}
+        .trigger=${trigger}
+        .disabled=${disabled}
+        .readonly=${readonly}
+        .placeholder=${placeholder}
+        .showSearch=${showSearch}
+        .showClear=${showClear}
+        .maxVisible=${maxVisible}
         @nr-icon-picker-change=${(e: CustomEvent) => {
           this.executeEvent('onChange', e, { value: e.detail.value, icon: e.detail.icon });
         }}

package/components/ui/components/inputs/InsertDropdown/InsertDropdown.ts

@@ -1,25 +1,5 @@
 import { css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-
-// Safely import @nuralyui/button
-try {
-  await import("@nuralyui/button");
-} catch (error) {
-  console.warn('[@nuralyui/button] Package not found or failed to load.');
-}
-// Safely import @nuralyui/dropdown
-try {
-  await import("@nuralyui/dropdown");
-} catch (error) {
-  console.warn('[@nuralyui/dropdown] Package not found or failed to load.');
-}
-// Safely import @nuralyui/label
-try {
-  await import("@nuralyui/label");
-} catch (error) {
-  console.warn('[@nuralyui/label] Package not found or failed to load.');
-}
-
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { styleMap } from "lit/directives/style-map.js";

package/components/ui/components/inputs/NumberInput/NumberInput.ts

@@ -59,10 +59,6 @@ export class NumberInputBlock extends BaseElementBlock {
           .validateOnBlurInput=${this.inputHandlersValue?.validateOnBlur !== false}
           .hasFeedback=${this.inputHandlersValue?.hasFeedback || false}
           @nr-input=${(e) => {
-            console.log('[NumberInput] nr-input event:', {
-              value: e.detail.value,
-              oldValue: e.detail.oldValue
-            });
             this.executeEvent('onChange', e, {
               value: e.detail.value,
               oldValue: e.detail.oldValue

package/components/ui/components/inputs/RadioButton/Radio-button.ts

@@ -3,7 +3,7 @@ import { BaseElementBlock } from "../../base/BaseElement.ts";
 import type { ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-// import "@nuralyui/radio-group";
+import "@nuralyui/radio-group";
 
 @customElement("radio-button-block")
 export class RadioButtonBlock extends BaseElementBlock {
@@ -17,10 +17,10 @@ export class RadioButtonBlock extends BaseElementBlock {
   renderComponent() {
     const radioStyles = this.component?.style || {};
     
-    // Extract values from the handler structure [options, defaultValue, type]
-    const options = this.inputHandlersValue?.value?.[0] || [];
-    const defaultValue = this.inputHandlersValue?.value?.[1] || '';
-    const type = this.inputHandlersValue?.value?.[2] || 'default';
+    // Extract values from the handler structure (object format)
+    const options = this.inputHandlersValue?.value?.options || [];
+    const defaultValue = this.inputHandlersValue?.value?.currentValue ?? '';
+    const type = this.inputHandlersValue?.value?.type || 'default';
     
     // Get other properties
     const direction = this.inputHandlersValue?.direction || 'vertical';
@@ -49,19 +49,17 @@ export class RadioButtonBlock extends BaseElementBlock {
           ?required=${required}
           ?auto-width=${autoWidth}
           @nr-change=${(e: CustomEvent) => {
-            console.log('[RadioButton] nr-change event:', {
-              detail: e.detail,
-              value: e.detail.value,
-              option: e.detail.option,
-              oldValue: e.detail.oldValue
-            });
-            this.executeEvent('onChange', e, { 
+            this.executeEvent('onChange', e, {
               value: e.detail.value,
               option: e.detail.option,
               oldValue: e.detail.oldValue
             });
           }}
-        ></nr-radio-group>
+        >
+          <span slot="helper-text" style="display: block; margin-top: 4px;">
+            ${this.inputHandlersValue?.helper ?? ""}
+          </span>
+        </nr-radio-group>
       </span>
     `;
   }

package/components/ui/components/inputs/Select/Select.ts

@@ -3,10 +3,9 @@ import { customElement, property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
-import { executeHandler } from '../../../../../state/runtime-context.ts';
-import { getNestedAttribute } from '../../../../../utils/object.utils.ts';
 import { EMPTY_STRING } from '../../../../../utils/constants.ts';
 import { ref } from "lit/directives/ref.js";
+import "@nuralyui/select";
 
 
 @customElement("select-block")
@@ -19,47 +18,62 @@ export class SelectBlock extends BaseElementBlock {
     
   }
 
-  override async connectedCallback() {
-    await super.connectedCallback();
+  override connectedCallback() {
+    super.connectedCallback();
     this.registerCallback("value", (v) => {
       this.requestUpdate();
     });
   }
 
-  handleValueChange = (customEvent: CustomEvent) => {
-    if (this.component.event.changed) {
-      const optionValue = customEvent.detail.value ?? EMPTY_STRING;
-      executeHandler(this.component, getNestedAttribute(this.component, `event.changed`), {
-        value: optionValue
-      });
-    }
-  };
-
 override  renderComponent() {
 
     return html`
-    <span>
-      <nr-select  
+      <nr-select
             ${ref(this.inputRef)}
-            style=${styleMap({...this.getStyles(), 
-            "--nuraly-select-width" : this.getStyles()['--nuraly-select-width']  ?? this.getStyles().width    
-          })}
+            style=${styleMap({
+              ...this.getStyles(),
+              "--nuraly-select-width": (this.getStyles() as any)['--nuraly-select-width'] ?? this.getStyles().width
+            })}
                  ?multiple=${this.inputHandlersValue?.selectionMode === "multiple"}
                  ?searchable=${this.inputHandlersValue?.searchable ?? false}
+                 ?clearable=${this.inputHandlersValue?.clearable ?? false}
+                 ?required=${this.inputHandlersValue?.required ?? false}
+                 ?block=${this.inputHandlersValue?.block ?? false}
                  .options=${this.inputHandlersValue?.options  ?? []}
                  .value=${this.inputHandlersValue?.value ?? EMPTY_STRING}
-                 .placeholder=${this.inputHandlersValue.placeholder || "Select an option"}
-                 search-placeholder=${this.inputHandlersValue?.searchPlaceholder || "Search options..."}
+                 .placeholder=${this.inputHandlersValue?.placeholder || "Select an option"}
+                 .searchPlaceholder=${this.inputHandlersValue?.searchPlaceholder || "Search options..."}
                  .status=${this.inputHandlersValue?.state ?? nothing}
                  .size=${this.inputHandlersValue?.size ?? nothing}
-                 .disabled=${(this.inputHandlersValue.state == "disabled")}
-                 .type=${this.inputHandlersValue.type == "inline" ? "inline" : nothing}
-                 @nr-change=${this.handleValueChange}
+                 .disabled=${this.inputHandlersValue?.disabled ?? (this.inputHandlersValue.state == "disabled")}
+                 .type=${this.inputHandlersValue?.type || "default"}
+                 @nr-change=${(e: CustomEvent) => {
+                   this.executeEvent('onChange', e, {
+                     value: e.detail.value ?? EMPTY_STRING
+                   });
+                 }}
+                 @nr-focus=${(e: CustomEvent) => {
+                   this.executeEvent('onFocus', e);
+                 }}
+                 @nr-blur=${(e: CustomEvent) => {
+                   this.executeEvent('onBlur', e);
+                 }}
+                 @nr-dropdown-open=${(e: CustomEvent) => {
+                   this.executeEvent('onDropdownOpen', e);
+                 }}
+                 @nr-dropdown-close=${(e: CustomEvent) => {
+                   this.executeEvent('onDropdownClose', e);
+                 }}
+                 @nr-validation=${(e: CustomEvent) => {
+                   this.executeEvent('onValidation', e, {
+                     isValid: e.detail.isValid,
+                     message: e.detail.message
+                   });
+                 }}
       >
         <span slot="label">${this.inputHandlersValue.label ?? nothing}</span>
         <span slot="helper-text">${this.inputHandlersValue.helper ?? nothing}</span>
       </nr-select>
-        </span>
     `;
   }
 }

package/components/ui/components/inputs/TextInput/TextInput.ts

@@ -1,9 +1,9 @@
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { type ComponentElement } from '../../../../../redux/store/component/component.interface.ts';
 import { BaseElementBlock } from "../../base/BaseElement.ts";
 import { ref } from "lit/directives/ref.js";
+import { registerWithParentForm, unregisterFromParentForm, notifyFieldValueChange } from "../../base/FormRegisterable.ts";
 
 // Safely import @nuralyui/input
 try {
@@ -47,14 +47,24 @@ export class TextInputBlock extends BaseElementBlock {
       }
     });
 
-    // Récupération de l'élément input
+    // Get reference to the nr-input element
     this._inputElement = this.renderRoot.querySelector("nr-input");
+
+    // Register with parent form if this input has a name
+    if (this._inputElement && this.inputHandlersValue?.name) {
+      registerWithParentForm(this, this._inputElement);
+    }
   }
 
   override disconnectedCallback() {
     super.disconnectedCallback();
     if (this.unsubscribe) this.unsubscribe();
     if (this._focusResetTimeout) clearTimeout(this._focusResetTimeout);
+
+    // Unregister from parent form
+    if (this.inputHandlersValue?.name) {
+      unregisterFromParentForm(this);
+    }
   }
 
   private resetFocusAfterInactivity() {
@@ -74,14 +84,10 @@ export class TextInputBlock extends BaseElementBlock {
     return html`
         <nr-input
         ${ref(this.inputRef)}
-          style=${styleMap({...this.getStyles(),
-              "--nuraly-input-local-border-top-left-radius": inputStyles?.["border-top-left-radius"] ?? "",
-              "--nuraly-input-local-border-top-right-radius": inputStyles?.["border-top-right-radius"] ?? "",
-              "--nuraly-input-local-border-bottom-left-radius": inputStyles?.["border-bottom-left-radius"] ?? "",
-              "--nuraly-input-local-border-bottom-right-radius": inputStyles?.["border-bottom-right-radius"] ?? "",
-          })}
+     class="${`drop-${this.component.uuid}`}"
+         
           .value=${this.inputHandlersValue?.value ?? nothing}
-          .size=${size}
+          .size=${this.inputHandlersValue?.size ?? "medium"}
           .state=${this.inputHandlersValue.status ?? nothing}
           .type=${this.inputHandlersValue.type ?? nothing}
           .variant=${this.inputHandlersValue.variant ?? nothing}