snice 4.14.0 → 4.16.0

package/dist/cdn/sankey/snice-sankey.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/sankey/snice-sankey.min.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.

package/dist/cdn/select/README.md

@@ -11,8 +11,8 @@ CDN build of the Snice select component. Requires the Snice runtime (`snice-runt
 ```
 
 ## Size
-- Minified: 32.2 KB
-- Gzipped: 7.7 KB
+- Minified: 30.8 KB
+- Gzipped: 7.4 KB
 
 ## Bundled Components
 This CDN build includes the following child components:

package/dist/cdn/select/snice-select.js

@@ -1,5 +1,5 @@
 /*!
- * snice v4.13.0
+ * snice v4.15.0
  * Imperative TypeScript framework for building vanilla web components with decorators, differential rendering, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -157,7 +157,7 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
   var cssContent = ":host{display:inline-block;font-family:var(--snice-font-family);position:relative;width:100%;max-width:18.75rem}[hidden]{display:none!important}img[src=\"\"]{display:none}.select-wrapper{position:relative;width:100%}.select-label{display:block;margin-bottom:.25rem;color:var(--snice-color-text);font-weight:500}.select-label--small{font-size:var(--snice-font-size-sm)}.select-label--medium{font-size:var(--snice-font-size-md)}.select-label--large{font-size:var(--snice-font-size-lg)}.select-label--required::after{content:' *';color:var(--snice-color-danger)}.select-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--snice-color-background-input);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);cursor:pointer;transition:all var(--snice-transition-fast) ease;position:relative;text-align:left;font-family:inherit;color:var(--snice-color-text)}.select-trigger--small{padding:.375rem 2rem .375rem .625rem;font-size:var(--snice-font-size-sm);min-height:2rem}.select-trigger--medium{padding:.5rem 2.25rem .5rem .75rem;font-size:var(--snice-font-size-md);min-height:var(--snice-select-min-height,2.5rem)}.select-trigger--large{padding:.625rem 2.5rem .625rem .875rem;font-size:var(--snice-font-size-lg);min-height:3rem}.select-trigger:hover:not(.select-trigger--disabled){border-color:var(--snice-color-border-hover)}.select-trigger:focus-visible{outline:2px solid var(--snice-color-primary);outline-offset:2px;border-color:var(--snice-color-primary)}.select-trigger--open{border-color:var(--snice-color-primary)}.select-trigger--disabled{background:var(--snice-color-background-secondary);cursor:not-allowed;opacity:.6}.select-trigger--readonly{background:var(--snice-color-background-secondary);cursor:default}.select-trigger--invalid{border-color:var(--snice-color-danger)}.select-placeholder{color:var(--snice-color-text-secondary)}.select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-value--single{display:flex;align-items:center;gap:.5rem}.select-value-icon{width:1rem;height:1rem;object-fit:contain;flex-shrink:0}.select-value--multiple{display:flex;gap:.25rem;flex-wrap:wrap}.select-tag{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .375rem;background:var(--snice-color-primary-light);color:var(--snice-color-primary);border-radius:var(--snice-border-radius-sm);font-size:var(--snice-font-size-xs)}.select-tag-icon{width:.75rem;height:.75rem;object-fit:contain;flex-shrink:0}.select-tag-remove{cursor:pointer;padding:0;background:0 0;border:none;color:inherit;font-size:.75rem;line-height:1}.select-tag-remove:hover{opacity:.7}.select-icons{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem;pointer-events:none;z-index:1}.select-clear{padding:2px;background:0 0;border:none;cursor:pointer;color:var(--snice-color-text-secondary);display:flex;align-items:center;justify-content:center;border-radius:var(--snice-border-radius-sm);pointer-events:auto}.select-clear:hover{background:var(--snice-color-background-secondary);color:var(--snice-color-text)}.select-arrow{transition:transform var(--snice-transition-fast) ease;color:var(--snice-color-text-secondary);pointer-events:none}.select-arrow--open{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;margin-top:4px;left:0;right:0;background:var(--snice-color-background-element);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-md);box-shadow:var(--snice-shadow-lg);z-index:1000;opacity:0;transform:translateY(-8px) scaleY(.95);transform-origin:top;pointer-events:none;transition:opacity var(--snice-transition-fast) ease,transform var(--snice-transition-fast) ease;display:flex;flex-direction:column;overflow:hidden}.select-dropdown--open{opacity:1;transform:translateY(0) scaleY(1);pointer-events:auto}.select-search{padding:8px;border-bottom:1px solid var(--snice-color-border);flex-shrink:0}.select-search-input{width:100%;padding:6px 10px;background:var(--snice-color-background-input);border:1px solid var(--snice-color-border);border-radius:var(--snice-border-radius-sm);font-size:var(--snice-font-size-sm);font-family:inherit;color:var(--snice-color-text);box-sizing:border-box}.select-search-input:focus{outline:0;border-color:var(--snice-color-primary)}.select-options{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:4px;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:var(--snice-color-border) var(--snice-color-background-secondary)}.select-options::-webkit-scrollbar-track{background:var(--snice-color-background-secondary);margin:4px 0}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border);border:2px solid var(--snice-color-background)}.select-option{padding:8px 12px;cursor:pointer;border-radius:var(--snice-border-radius-sm);transition:background var(--snice-transition-fast) ease;display:flex;align-items:center;gap:8px}.select-option:hover:not(.select-option--disabled){background:var(--snice-color-background-secondary)}.select-option--selected{background:var(--snice-color-primary-light);color:var(--snice-color-primary);font-weight:500}.select-option--focused{background:var(--snice-color-background-secondary);outline:2px solid var(--snice-color-primary);outline-offset:-2px}.select-option--disabled{opacity:.5;cursor:not-allowed}.select-option-icon{width:16px;height:16px;object-fit:contain;flex-shrink:0}.select-option-check{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.select-option-label{flex:1}.select-no-options{padding:16px;text-align:center;color:var(--snice-color-text-secondary);font-size:var(--snice-font-size-sm)}.select-native{position:absolute;opacity:0;pointer-events:none;width:0;height:0}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:var(--snice-color-background-secondary);border-radius:3px}.select-options::-webkit-scrollbar-thumb{background:var(--snice-color-border);border-radius:3px}.select-options::-webkit-scrollbar-thumb:hover{background:var(--snice-color-border-hover)}.select-trigger--loading{cursor:wait;opacity:.7}.select-spinner{display:inline-block;width:14px;height:14px;margin-right:4px}.select-spinner::after{content:'';display:block;width:100%;height:100%;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}";
 
   (() => {
-      let _classDecorators = [snice.element('snice-select')];
+      let _classDecorators = [snice.element('snice-select', { formAssociated: true })];
       let _classDescriptor;
       let _classExtraInitializers = [];
       let _classThis;
@@ -226,9 +226,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       let _optionsList_decorators;
       let _optionsList_initializers = [];
       let _optionsList_extraInitializers = [];
-      let _nativeSelect_decorators;
-      let _nativeSelect_initializers = [];
-      let _nativeSelect_extraInitializers = [];
       let _clearButton_decorators;
       let _clearButton_initializers = [];
       let _clearButton_extraInitializers = [];
@@ -249,46 +246,11 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
       let _handleDisabledChange_decorators;
       let _handleLoadingChange_decorators;
       let _handleOpenChange_decorators;
-      let _handleNativeSelectAttributeChange_decorators;
       let _dispatchChangeEvent_decorators;
       let _dispatchOpenEvent_decorators;
       let _dispatchCloseEvent_decorators;
       (class extends _classSuper {
           static { _classThis = this; }
-          constructor() {
-              super(...arguments);
-              this.disabled = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _disabled_initializers, false));
-              this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
-              this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
-              this.readonly = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _readonly_initializers, false));
-              this.loading = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _loading_initializers, false));
-              this.multiple = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _multiple_initializers, false));
-              this.searchable = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _searchable_initializers, false));
-              this.clearable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _clearable_initializers, false));
-              this.open = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _open_initializers, false));
-              this.size = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
-              this.name = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _name_initializers, ''));
-              this.value = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''));
-              this.label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, ''));
-              this.placeholder = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _placeholder_initializers, 'Select an option'));
-              this.maxHeight = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _maxHeight_initializers, '200px'));
-              // Options will be read from child snice-option elements
-              this.options = (__runInitializers(this, _maxHeight_extraInitializers), []);
-              this.trigger = __runInitializers(this, _trigger_initializers, void 0);
-              this.dropdown = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _dropdown_initializers, void 0));
-              this.valueDisplay = (__runInitializers(this, _dropdown_extraInitializers), __runInitializers(this, _valueDisplay_initializers, void 0));
-              this.labelElement = (__runInitializers(this, _valueDisplay_extraInitializers), __runInitializers(this, _labelElement_initializers, void 0));
-              this.searchInput = (__runInitializers(this, _labelElement_extraInitializers), __runInitializers(this, _searchInput_initializers, void 0));
-              this.optionsList = (__runInitializers(this, _searchInput_extraInitializers), __runInitializers(this, _optionsList_initializers, void 0));
-              this.nativeSelect = (__runInitializers(this, _optionsList_extraInitializers), __runInitializers(this, _nativeSelect_initializers, void 0));
-              this.clearButton = (__runInitializers(this, _nativeSelect_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
-              this.arrow = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _arrow_initializers, void 0));
-              this.searchContainer = (__runInitializers(this, _arrow_extraInitializers), __runInitializers(this, _searchContainer_initializers, void 0));
-              this.optionElements = (__runInitializers(this, _searchContainer_extraInitializers), __runInitializers(this, _optionElements_initializers, void 0));
-              this.filteredOptions = (__runInitializers(this, _optionElements_extraInitializers), []);
-              this.selectedValues = new Set();
-              this.focusedIndex = -1;
-          }
           static {
               const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
               _disabled_decorators = [snice.property({ type: Boolean, })];
@@ -312,7 +274,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _labelElement_decorators = [snice.query('.select-label')];
               _searchInput_decorators = [snice.query('.select-search-input')];
               _optionsList_decorators = [snice.query('.select-options')];
-              _nativeSelect_decorators = [snice.query('.select-native')];
               _clearButton_decorators = [snice.query('.select-clear')];
               _arrow_decorators = [snice.query('.select-arrow')];
               _searchContainer_decorators = [snice.query('.select-search')];
@@ -325,7 +286,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               _handleDisabledChange_decorators = [snice.watch('disabled')];
               _handleLoadingChange_decorators = [snice.watch('loading')];
               _handleOpenChange_decorators = [snice.watch('open')];
-              _handleNativeSelectAttributeChange_decorators = [snice.watch('multiple', 'name')];
               _dispatchChangeEvent_decorators = [snice.dispatch('select-change', { bubbles: true, composed: true })];
               _dispatchOpenEvent_decorators = [snice.dispatch('select-open', { bubbles: true, composed: true })];
               _dispatchCloseEvent_decorators = [snice.dispatch('select-close', { bubbles: true, composed: true })];
@@ -337,7 +297,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               __esDecorate(this, null, _handleDisabledChange_decorators, { kind: "method", name: "handleDisabledChange", static: false, private: false, access: { has: obj => "handleDisabledChange" in obj, get: obj => obj.handleDisabledChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleLoadingChange_decorators, { kind: "method", name: "handleLoadingChange", static: false, private: false, access: { has: obj => "handleLoadingChange" in obj, get: obj => obj.handleLoadingChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _handleOpenChange_decorators, { kind: "method", name: "handleOpenChange", static: false, private: false, access: { has: obj => "handleOpenChange" in obj, get: obj => obj.handleOpenChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-              __esDecorate(this, null, _handleNativeSelectAttributeChange_decorators, { kind: "method", name: "handleNativeSelectAttributeChange", static: false, private: false, access: { has: obj => "handleNativeSelectAttributeChange" in obj, get: obj => obj.handleNativeSelectAttributeChange }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchChangeEvent_decorators, { kind: "method", name: "dispatchChangeEvent", static: false, private: false, access: { has: obj => "dispatchChangeEvent" in obj, get: obj => obj.dispatchChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchOpenEvent_decorators, { kind: "method", name: "dispatchOpenEvent", static: false, private: false, access: { has: obj => "dispatchOpenEvent" in obj, get: obj => obj.dispatchOpenEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
               __esDecorate(this, null, _dispatchCloseEvent_decorators, { kind: "method", name: "dispatchCloseEvent", static: false, private: false, access: { has: obj => "dispatchCloseEvent" in obj, get: obj => obj.dispatchCloseEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -362,7 +321,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               __esDecorate(null, null, _labelElement_decorators, { kind: "field", name: "labelElement", static: false, private: false, access: { has: obj => "labelElement" in obj, get: obj => obj.labelElement, set: (obj, value) => { obj.labelElement = value; } }, metadata: _metadata }, _labelElement_initializers, _labelElement_extraInitializers);
               __esDecorate(null, null, _searchInput_decorators, { kind: "field", name: "searchInput", static: false, private: false, access: { has: obj => "searchInput" in obj, get: obj => obj.searchInput, set: (obj, value) => { obj.searchInput = value; } }, metadata: _metadata }, _searchInput_initializers, _searchInput_extraInitializers);
               __esDecorate(null, null, _optionsList_decorators, { kind: "field", name: "optionsList", static: false, private: false, access: { has: obj => "optionsList" in obj, get: obj => obj.optionsList, set: (obj, value) => { obj.optionsList = value; } }, metadata: _metadata }, _optionsList_initializers, _optionsList_extraInitializers);
-              __esDecorate(null, null, _nativeSelect_decorators, { kind: "field", name: "nativeSelect", static: false, private: false, access: { has: obj => "nativeSelect" in obj, get: obj => obj.nativeSelect, set: (obj, value) => { obj.nativeSelect = value; } }, metadata: _metadata }, _nativeSelect_initializers, _nativeSelect_extraInitializers);
               __esDecorate(null, null, _clearButton_decorators, { kind: "field", name: "clearButton", static: false, private: false, access: { has: obj => "clearButton" in obj, get: obj => obj.clearButton, set: (obj, value) => { obj.clearButton = value; } }, metadata: _metadata }, _clearButton_initializers, _clearButton_extraInitializers);
               __esDecorate(null, null, _arrow_decorators, { kind: "field", name: "arrow", static: false, private: false, access: { has: obj => "arrow" in obj, get: obj => obj.arrow, set: (obj, value) => { obj.arrow = value; } }, metadata: _metadata }, _arrow_initializers, _arrow_extraInitializers);
               __esDecorate(null, null, _searchContainer_decorators, { kind: "field", name: "searchContainer", static: false, private: false, access: { has: obj => "searchContainer" in obj, get: obj => obj.searchContainer, set: (obj, value) => { obj.searchContainer = value; } }, metadata: _metadata }, _searchContainer_initializers, _searchContainer_extraInitializers);
@@ -372,6 +330,43 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
               __runInitializers(_classThis, _classExtraInitializers);
           }
+          constructor() {
+              super();
+              this.internals = __runInitializers(this, _instanceExtraInitializers);
+              this.disabled = __runInitializers(this, _disabled_initializers, false);
+              this.required = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _required_initializers, false));
+              this.invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+              this.readonly = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+              this.loading = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _loading_initializers, false));
+              this.multiple = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _multiple_initializers, false));
+              this.searchable = (__runInitializers(this, _multiple_extraInitializers), __runInitializers(this, _searchable_initializers, false));
+              this.clearable = (__runInitializers(this, _searchable_extraInitializers), __runInitializers(this, _clearable_initializers, false));
+              this.open = (__runInitializers(this, _clearable_extraInitializers), __runInitializers(this, _open_initializers, false));
+              this.size = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _size_initializers, 'medium'));
+              this.name = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _name_initializers, ''));
+              this.value = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''));
+              this.label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, ''));
+              this.placeholder = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _placeholder_initializers, 'Select an option'));
+              this.maxHeight = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _maxHeight_initializers, '200px'));
+              // Options will be read from child snice-option elements
+              this.options = (__runInitializers(this, _maxHeight_extraInitializers), []);
+              this.trigger = __runInitializers(this, _trigger_initializers, void 0);
+              this.dropdown = (__runInitializers(this, _trigger_extraInitializers), __runInitializers(this, _dropdown_initializers, void 0));
+              this.valueDisplay = (__runInitializers(this, _dropdown_extraInitializers), __runInitializers(this, _valueDisplay_initializers, void 0));
+              this.labelElement = (__runInitializers(this, _valueDisplay_extraInitializers), __runInitializers(this, _labelElement_initializers, void 0));
+              this.searchInput = (__runInitializers(this, _labelElement_extraInitializers), __runInitializers(this, _searchInput_initializers, void 0));
+              this.optionsList = (__runInitializers(this, _searchInput_extraInitializers), __runInitializers(this, _optionsList_initializers, void 0));
+              this.clearButton = (__runInitializers(this, _optionsList_extraInitializers), __runInitializers(this, _clearButton_initializers, void 0));
+              this.arrow = (__runInitializers(this, _clearButton_extraInitializers), __runInitializers(this, _arrow_initializers, void 0));
+              this.searchContainer = (__runInitializers(this, _arrow_extraInitializers), __runInitializers(this, _searchContainer_initializers, void 0));
+              this.optionElements = (__runInitializers(this, _searchContainer_extraInitializers), __runInitializers(this, _optionElements_initializers, void 0));
+              this.filteredOptions = (__runInitializers(this, _optionElements_extraInitializers), []);
+              this.selectedValues = new Set();
+              this.focusedIndex = -1;
+              if (typeof this.attachInternals == 'function') {
+                  this.internals = this.attachInternals();
+              }
+          }
           render() {
               const labelClasses = `select-label select-label--${this.size} ${this.required ? 'select-label--required' : ''}`;
               const triggerClasses = `select-trigger select-trigger--${this.size} ${this.loading ? 'select-trigger--loading' : ''}`;
@@ -437,14 +432,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           </div>
         </div>
 
-        <!-- Hidden native select for form submission -->
-        <select
-          class="select-native"
-          name="${this.name || ''}"
-          tabindex="-1"
-          aria-hidden="true">
-          <!-- Options will be added in @ready() -->
-        </select>
       </div>
     `;
           }
@@ -494,16 +481,18 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               }
               // Initialize filtered options
               this.filteredOptions = [...this.options];
+              // Set initial form value
+              if (this.internals) {
+                  this.internals.setFormValue(this.value);
+              }
               // Wait for @query decorators to populate shadow DOM elements
               requestAnimationFrame(() => {
                   requestAnimationFrame(() => {
                       // Set initial imperative state
                       this.updateTriggerState();
                       this.updateDropdownState();
-                      this.updateNativeSelectAttributes();
                       // Now that we have options, update everything
                       this.updateDropdownContent();
-                      this.updateNativeSelect();
                       this.updateValueDisplay();
                       this.updateClearButton();
                   });
@@ -593,7 +582,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               if (relevant) {
                   this.readOptionsFromChildren();
                   this.filteredOptions = [...this.options];
-                  this.updateNativeSelect();
                   this.updateValueDisplay();
                   this.updateClearButton();
                   this.updateDropdownContent();
@@ -717,7 +705,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   if (value && this.multiple) {
                       this.selectedValues.delete(value);
                       this.value = Array.from(this.selectedValues).join(',');
-                      this.updateNativeSelect();
                       this.updateValueDisplay();
                       this.updateClearButton();
                       this.dispatchChangeEvent();
@@ -763,7 +750,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   this.value = option.value;
                   this.closeDropdown();
               }
-              this.updateNativeSelect();
               this.updateValueDisplay();
               this.updateClearButton();
               this.dispatchChangeEvent(option);
@@ -772,13 +758,14 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               if (this.multiple) {
                   this.selectedValues = new Set(this.value ? this.value.split(',').map(v => v.trim()) : []);
               }
-              this.updateNativeSelect();
               this.updateValueDisplay();
               this.updateClearButton();
+              if (this.internals) {
+                  this.internals.setFormValue(this.value);
+              }
           }
           handleDisabledChange() {
               this.updateTriggerState();
-              this.updateNativeSelectAttributes();
               this.updateClearButton();
               // Side effect: close dropdown when disabled
               if (this.disabled && this.open) {
@@ -787,7 +774,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
           }
           handleLoadingChange() {
               this.updateTriggerState();
-              this.updateNativeSelectAttributes();
               this.updateClearButton();
               // Side effect: close dropdown when loading
               if (this.loading && this.open) {
@@ -811,9 +797,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   }
               }
           }
-          handleNativeSelectAttributeChange() {
-              this.updateNativeSelectAttributes();
-          }
           updateValueDisplay() {
               if (!this.valueDisplay)
                   return;
@@ -856,21 +839,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   return;
               this.optionsList.innerHTML = this.renderOptions();
           }
-          updateNativeSelect() {
-              if (!this.nativeSelect)
-                  return;
-              // Clear and rebuild options
-              this.nativeSelect.innerHTML = '';
-              this.options.forEach(opt => {
-                  const option = document.createElement('option');
-                  option.value = opt.value;
-                  option.textContent = opt.label;
-                  option.selected = this.multiple ?
-                      this.selectedValues.has(opt.value) :
-                      opt.value === this.value;
-                  this.nativeSelect.appendChild(option);
-              });
-          }
           dispatchChangeEvent(option) {
               return {
                   value: this.multiple ? Array.from(this.selectedValues) : this.value,
@@ -902,7 +870,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
               else {
                   this.value = '';
               }
-              this.updateNativeSelect();
               this.updateValueDisplay();
               this.updateClearButton();
               this.dispatchChangeEvent();
@@ -952,19 +919,6 @@ if(typeof globalThis.Snice==="undefined"){console.warn("[snice] snice-runtime.mi
                   this.arrow.classList.toggle('select-arrow--open', this.open);
               }
           }
-          updateNativeSelectAttributes() {
-              if (!this.nativeSelect)
-                  return;
-              this.nativeSelect.disabled = this.disabled || this.loading;
-              this.nativeSelect.required = this.required;
-              this.nativeSelect.multiple = this.multiple;
-              if (this.name) {
-                  this.nativeSelect.name = this.name;
-              }
-              else {
-                  this.nativeSelect.removeAttribute('name');
-              }
-          }
       });
       return _classThis;
   })();