snice 2.5.4 → 3.2.0

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

@@ -1,8 +1,8 @@
 import { __runInitializers, __esDecorate } from 'tslib';
-import { element, property, query, queryAll, ready, dispose, on, watch, dispatch } from 'snice';
+import { element, property, query, queryAll, render, styles, ready, dispose, watch, dispatch, html, css } from 'snice';
 import './snice-option.js';
 
-var css = ":host {\n  display: inline-block;\n  font-family: var(--snice-font-family);\n  position: relative;\n  width: 100%;\n  max-width: 18.75rem; /* 300px */\n}\n\n[hidden] {\n  display: none !important;\n}\n\n/* Hide empty image tags */\nimg[src=\"\"] {\n  display: none;\n}\n\n.select-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n/* Label */\n.select-label {\n  display: block;\n  margin-bottom: 0.25rem; /* 4px */\n  color: var(--snice-color-text);\n  font-weight: 500;\n}\n\n.select-label--small {\n  font-size: var(--snice-font-size-sm);\n}\n\n.select-label--medium {\n  font-size: var(--snice-font-size-md);\n}\n\n.select-label--large {\n  font-size: var(--snice-font-size-lg);\n}\n\n.select-label--required::after {\n  content: ' *';\n  color: var(--snice-color-danger);\n}\n\n/* Select trigger button */\n.select-trigger {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background: var(--snice-color-background);\n  border: 1px solid var(--snice-color-border);\n  border-radius: var(--snice-border-radius-md);\n  cursor: pointer;\n  transition: all var(--snice-transition-fast) ease;\n  position: relative;\n  text-align: left;\n  font-family: inherit;\n  color: var(--snice-color-text);\n}\n\n.select-trigger--small {\n  padding: 0.375rem 2rem 0.375rem 0.625rem; /* 6px 32px 6px 10px */\n  font-size: var(--snice-font-size-sm);\n  min-height: 2rem; /* 32px */\n}\n\n.select-trigger--medium {\n  padding: 0.5rem 2.25rem 0.5rem 0.75rem; /* 8px 36px 8px 12px */\n  font-size: var(--snice-font-size-md);\n  min-height: 2.5rem; /* 40px */\n}\n\n.select-trigger--large {\n  padding: 0.625rem 2.5rem 0.625rem 0.875rem; /* 10px 40px 10px 14px */\n  font-size: var(--snice-font-size-lg);\n  min-height: 3rem; /* 48px */\n}\n\n.select-trigger:hover:not(.select-trigger--disabled) {\n  border-color: var(--snice-color-border-hover);\n}\n\n.select-trigger:focus-visible {\n  outline: 2px solid var(--snice-color-primary);\n  outline-offset: 2px;\n  border-color: var(--snice-color-primary);\n}\n\n.select-trigger--open {\n  border-color: var(--snice-color-primary);\n}\n\n.select-trigger--disabled {\n  background: var(--snice-color-background-secondary);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.select-trigger--readonly {\n  background: var(--snice-color-background-secondary);\n  cursor: default;\n}\n\n.select-trigger--invalid {\n  border-color: var(--snice-color-danger);\n}\n\n/* Placeholder */\n.select-placeholder {\n  color: var(--snice-color-text-secondary);\n}\n\n/* Selected value display */\n.select-value {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.select-value--single {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem; /* 8px */\n}\n\n.select-value-icon {\n  width: 1rem; /* 16px */\n  height: 1rem; /* 16px */\n  object-fit: contain;\n  flex-shrink: 0;\n}\n\n.select-value--multiple {\n  display: flex;\n  gap: 0.25rem; /* 4px */\n  flex-wrap: wrap;\n}\n\n.select-tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem; /* 4px */\n  padding: 0.125rem 0.375rem; /* 2px 6px */\n  background: var(--snice-color-primary-light);\n  color: var(--snice-color-primary);\n  border-radius: var(--snice-border-radius-sm);\n  font-size: var(--snice-font-size-xs);\n}\n\n.select-tag-icon {\n  width: 0.75rem; /* 12px */\n  height: 0.75rem; /* 12px */\n  object-fit: contain;\n  flex-shrink: 0;\n}\n\n.select-tag-remove {\n  cursor: pointer;\n  padding: 0;\n  background: none;\n  border: none;\n  color: inherit;\n  font-size: 0.75rem; /* 12px */\n  line-height: 1;\n}\n\n.select-tag-remove:hover {\n  opacity: 0.7;\n}\n\n/* Icons */\n.select-icons {\n  position: absolute;\n  right: 0.5rem; /* 8px */\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem; /* 4px */\n  pointer-events: none;\n  z-index: 1;\n}\n\n.select-clear {\n  padding: 2px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--snice-color-text-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--snice-border-radius-sm);\n  pointer-events: auto;\n}\n\n.select-clear:hover {\n  background: var(--snice-color-background-secondary);\n  color: var(--snice-color-text);\n}\n\n.select-arrow {\n  transition: transform var(--snice-transition-fast) ease;\n  color: var(--snice-color-text-secondary);\n  pointer-events: none;\n}\n\n.select-arrow--open {\n  transform: rotate(180deg);\n}\n\n/* Dropdown */\n.select-dropdown {\n  position: absolute;\n  top: 100%;\n  margin-top: 4px;\n  left: 0;\n  right: 0;\n  background: var(--snice-color-background);\n  border: 1px solid var(--snice-color-border);\n  border-radius: var(--snice-border-radius-md);\n  box-shadow: var(--snice-shadow-lg);\n  z-index: 1000;\n  opacity: 0;\n  transform: translateY(-8px) scaleY(0.95);\n  transform-origin: top;\n  pointer-events: none;\n  transition: opacity var(--snice-transition-fast) ease,\n              transform var(--snice-transition-fast) ease;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.select-dropdown--open {\n  opacity: 1;\n  transform: translateY(0) scaleY(1);\n  pointer-events: auto;\n}\n\n/* Search input */\n.select-search {\n  padding: 8px;\n  border-bottom: 1px solid var(--snice-color-border);\n  flex-shrink: 0;\n}\n\n.select-search-input {\n  width: 100%;\n  padding: 6px 10px;\n  background: var(--snice-color-background);\n  border: 1px solid var(--snice-color-border);\n  border-radius: var(--snice-border-radius-sm);\n  font-size: var(--snice-font-size-sm);\n  font-family: inherit;\n  color: var(--snice-color-text);\n  box-sizing: border-box;\n}\n\n.select-search-input:focus {\n  outline: none;\n  border-color: var(--snice-color-primary);\n}\n\n/* Options list */\n.select-options {\n  max-height: 200px;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 4px;\n  scrollbar-gutter: stable;\n}\n\n/* Custom scrollbar styling for better appearance */\n.select-options::-webkit-scrollbar {\n  width: 8px;\n}\n\n.select-options::-webkit-scrollbar-track {\n  background: var(--snice-color-background-secondary);\n  border-radius: 4px;\n  margin: 4px 0;\n}\n\n.select-options::-webkit-scrollbar-thumb {\n  background: var(--snice-color-border);\n  border-radius: 4px;\n  border: 2px solid var(--snice-color-background);\n}\n\n.select-options::-webkit-scrollbar-thumb:hover {\n  background: var(--snice-color-border-hover);\n}\n\n/* Firefox scrollbar styling */\n.select-options {\n  scrollbar-width: thin;\n  scrollbar-color: var(--snice-color-border) var(--snice-color-background-secondary);\n}\n\n.select-option {\n  padding: 8px 12px;\n  cursor: pointer;\n  border-radius: var(--snice-border-radius-sm);\n  transition: background var(--snice-transition-fast) ease;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.select-option:hover:not(.select-option--disabled) {\n  background: var(--snice-color-background-secondary);\n}\n\n.select-option--selected {\n  background: var(--snice-color-primary-light);\n  color: var(--snice-color-primary);\n  font-weight: 500;\n}\n\n.select-option--focused {\n  background: var(--snice-color-background-secondary);\n  outline: 2px solid var(--snice-color-primary);\n  outline-offset: -2px;\n}\n\n.select-option--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Option icon */\n.select-option-icon {\n  width: 16px;\n  height: 16px;\n  object-fit: contain;\n  flex-shrink: 0;\n}\n\n.select-option-check {\n  width: 16px;\n  height: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.select-option-label {\n  flex: 1;\n}\n\n/* No options message */\n.select-no-options {\n  padding: 16px;\n  text-align: center;\n  color: var(--snice-color-text-secondary);\n  font-size: var(--snice-font-size-sm);\n}\n\n/* Native select (hidden) */\n.select-native {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n  width: 0;\n  height: 0;\n}\n\n/* Scrollbar styling */\n.select-options::-webkit-scrollbar {\n  width: 6px;\n}\n\n.select-options::-webkit-scrollbar-track {\n  background: var(--snice-color-background-secondary);\n  border-radius: 3px;\n}\n\n.select-options::-webkit-scrollbar-thumb {\n  background: var(--snice-color-border);\n  border-radius: 3px;\n}\n\n.select-options::-webkit-scrollbar-thumb:hover {\n  background: var(--snice-color-border-hover);\n}";
+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);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);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);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)}";
 
 let SniceSelect = (() => {
     let _classDecorators = [element('snice-select')];
@@ -86,30 +86,14 @@ let SniceSelect = (() => {
     let _optionElements_decorators;
     let _optionElements_initializers = [];
     let _optionElements_extraInitializers = [];
+    let _renderContent_decorators;
+    let _componentStyles_decorators;
     let _init_decorators;
     let _cleanup_decorators;
-    let _handleTriggerOpen_decorators;
-    let _handleSearchEscape_decorators;
-    let _handleSearchArrowDown_decorators;
-    let _handleSearchArrowUp_decorators;
-    let _handleSearchEnter_decorators;
-    let _handleTriggerClick_decorators;
-    let _handleClearClick_decorators;
-    let _handleTagRemove_decorators;
-    let _handleOptionsClick_decorators;
-    let _handleSearchInput_decorators;
     let _handleValueChange_decorators;
     let _handleDisabledChange_decorators;
-    let _handleReadonlyChange_decorators;
-    let _handleInvalidChange_decorators;
     let _handleOpenChange_decorators;
-    let _handleLabelChange_decorators;
-    let _handlePlaceholderChange_decorators;
-    let _handleRequiredChange_decorators;
-    let _handleMultipleChange_decorators;
-    let _handleNameChange_decorators;
-    let _handleClearableChange_decorators;
-    let _handleSearchableChange_decorators;
+    let _handleNativeSelectAttributeChange_decorators;
     let _dispatchChangeEvent_decorators;
     let _dispatchOpenEvent_decorators;
     let _dispatchCloseEvent_decorators;
@@ -175,57 +159,25 @@ let SniceSelect = (() => {
             _arrow_decorators = [query('.select-arrow')];
             _searchContainer_decorators = [query('.select-search')];
             _optionElements_decorators = [queryAll('.select-option')];
+            _renderContent_decorators = [render()];
+            _componentStyles_decorators = [styles()];
             _init_decorators = [ready()];
             _cleanup_decorators = [dispose()];
-            _handleTriggerOpen_decorators = [on(['keydown:Enter', 'keydown:Space', 'keydown:ArrowDown', 'keydown:ArrowUp'], '.select-trigger')];
-            _handleSearchEscape_decorators = [on('keydown:Escape', '.select-search-input')];
-            _handleSearchArrowDown_decorators = [on('keydown:ArrowDown', '.select-search-input')];
-            _handleSearchArrowUp_decorators = [on('keydown:ArrowUp', '.select-search-input')];
-            _handleSearchEnter_decorators = [on('keydown:Enter', '.select-search-input')];
-            _handleTriggerClick_decorators = [on('click', '.select-trigger')];
-            _handleClearClick_decorators = [on('click', '.select-clear', { preventDefault: true, stopPropagation: true })];
-            _handleTagRemove_decorators = [on('click', '.select-tag-remove')];
-            _handleOptionsClick_decorators = [on('click', '.select-options')];
-            _handleSearchInput_decorators = [on('input', '.select-search-input')];
             _handleValueChange_decorators = [watch('value')];
             _handleDisabledChange_decorators = [watch('disabled')];
-            _handleReadonlyChange_decorators = [watch('readonly')];
-            _handleInvalidChange_decorators = [watch('invalid')];
             _handleOpenChange_decorators = [watch('open')];
-            _handleLabelChange_decorators = [watch('label')];
-            _handlePlaceholderChange_decorators = [watch('placeholder')];
-            _handleRequiredChange_decorators = [watch('required')];
-            _handleMultipleChange_decorators = [watch('multiple')];
-            _handleNameChange_decorators = [watch('name')];
-            _handleClearableChange_decorators = [watch('clearable')];
-            _handleSearchableChange_decorators = [watch('searchable')];
+            _handleNativeSelectAttributeChange_decorators = [watch('multiple', 'name')];
             _dispatchChangeEvent_decorators = [dispatch('@snice/select-change', { bubbles: true, composed: true })];
             _dispatchOpenEvent_decorators = [dispatch('@snice/select-open', { bubbles: true, composed: true })];
             _dispatchCloseEvent_decorators = [dispatch('@snice/select-close', { bubbles: true, composed: true })];
+            __esDecorate(this, null, _renderContent_decorators, { kind: "method", name: "renderContent", static: false, private: false, access: { has: obj => "renderContent" in obj, get: obj => obj.renderContent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _componentStyles_decorators, { kind: "method", name: "componentStyles", static: false, private: false, access: { has: obj => "componentStyles" in obj, get: obj => obj.componentStyles }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _init_decorators, { kind: "method", name: "init", static: false, private: false, access: { has: obj => "init" in obj, get: obj => obj.init }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _cleanup_decorators, { kind: "method", name: "cleanup", static: false, private: false, access: { has: obj => "cleanup" in obj, get: obj => obj.cleanup }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleTriggerOpen_decorators, { kind: "method", name: "handleTriggerOpen", static: false, private: false, access: { has: obj => "handleTriggerOpen" in obj, get: obj => obj.handleTriggerOpen }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchEscape_decorators, { kind: "method", name: "handleSearchEscape", static: false, private: false, access: { has: obj => "handleSearchEscape" in obj, get: obj => obj.handleSearchEscape }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchArrowDown_decorators, { kind: "method", name: "handleSearchArrowDown", static: false, private: false, access: { has: obj => "handleSearchArrowDown" in obj, get: obj => obj.handleSearchArrowDown }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchArrowUp_decorators, { kind: "method", name: "handleSearchArrowUp", static: false, private: false, access: { has: obj => "handleSearchArrowUp" in obj, get: obj => obj.handleSearchArrowUp }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchEnter_decorators, { kind: "method", name: "handleSearchEnter", static: false, private: false, access: { has: obj => "handleSearchEnter" in obj, get: obj => obj.handleSearchEnter }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleTriggerClick_decorators, { kind: "method", name: "handleTriggerClick", static: false, private: false, access: { has: obj => "handleTriggerClick" in obj, get: obj => obj.handleTriggerClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleClearClick_decorators, { kind: "method", name: "handleClearClick", static: false, private: false, access: { has: obj => "handleClearClick" in obj, get: obj => obj.handleClearClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleTagRemove_decorators, { kind: "method", name: "handleTagRemove", static: false, private: false, access: { has: obj => "handleTagRemove" in obj, get: obj => obj.handleTagRemove }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleOptionsClick_decorators, { kind: "method", name: "handleOptionsClick", static: false, private: false, access: { has: obj => "handleOptionsClick" in obj, get: obj => obj.handleOptionsClick }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchInput_decorators, { kind: "method", name: "handleSearchInput", static: false, private: false, access: { has: obj => "handleSearchInput" in obj, get: obj => obj.handleSearchInput }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleValueChange_decorators, { kind: "method", name: "handleValueChange", static: false, private: false, access: { has: obj => "handleValueChange" in obj, get: obj => obj.handleValueChange }, metadata: _metadata }, null, _instanceExtraInitializers);
             __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, _handleReadonlyChange_decorators, { kind: "method", name: "handleReadonlyChange", static: false, private: false, access: { has: obj => "handleReadonlyChange" in obj, get: obj => obj.handleReadonlyChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleInvalidChange_decorators, { kind: "method", name: "handleInvalidChange", static: false, private: false, access: { has: obj => "handleInvalidChange" in obj, get: obj => obj.handleInvalidChange }, 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, _handleLabelChange_decorators, { kind: "method", name: "handleLabelChange", static: false, private: false, access: { has: obj => "handleLabelChange" in obj, get: obj => obj.handleLabelChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handlePlaceholderChange_decorators, { kind: "method", name: "handlePlaceholderChange", static: false, private: false, access: { has: obj => "handlePlaceholderChange" in obj, get: obj => obj.handlePlaceholderChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleRequiredChange_decorators, { kind: "method", name: "handleRequiredChange", static: false, private: false, access: { has: obj => "handleRequiredChange" in obj, get: obj => obj.handleRequiredChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleMultipleChange_decorators, { kind: "method", name: "handleMultipleChange", static: false, private: false, access: { has: obj => "handleMultipleChange" in obj, get: obj => obj.handleMultipleChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleNameChange_decorators, { kind: "method", name: "handleNameChange", static: false, private: false, access: { has: obj => "handleNameChange" in obj, get: obj => obj.handleNameChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleClearableChange_decorators, { kind: "method", name: "handleClearableChange", static: false, private: false, access: { has: obj => "handleClearableChange" in obj, get: obj => obj.handleClearableChange }, metadata: _metadata }, null, _instanceExtraInitializers);
-            __esDecorate(this, null, _handleSearchableChange_decorators, { kind: "method", name: "handleSearchableChange", static: false, private: false, access: { has: obj => "handleSearchableChange" in obj, get: obj => obj.handleSearchableChange }, 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);
@@ -259,28 +211,32 @@ let SniceSelect = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        html() {
-            // Initial render - options will be populated in @ready()
-            return /*html*/ `
+        renderContent() {
+            const labelClasses = `select-label select-label--${this.size} ${this.required ? 'select-label--required' : ''}`;
+            const triggerClasses = `select-trigger select-trigger--${this.size}`;
+            const searchHidden = !this.searchable;
+            return html `
       <div class="select-wrapper">
-        <label class="select-label select-label--${this.size} ${this.required ? 'select-label--required' : ''}" part="label" ${!this.label ? 'hidden' : ''}>
+        <label class="${labelClasses}" part="label" ?hidden="${!this.label}">
           ${this.label}
         </label>
-        
+
         <button
           type="button"
-          class="select-trigger select-trigger--${this.size}"
+          class="${triggerClasses}"
           aria-haspopup="listbox"
           aria-expanded="false"
           aria-label="${this.label || 'Select'}"
-          part="trigger">
-          
+          part="trigger"
+          @keydown="${(e) => this.handleTriggerOpen(e)}"
+          @click="${(e) => this.handleTriggerClick(e)}">
+
           <div class="select-value" part="value">
             <span class="select-placeholder">${this.placeholder}</span>
           </div>
-          
+
           <span class="select-icons">
-            <span class="select-clear" aria-label="Clear selection" style="display: none;">
+            <span class="select-clear" aria-label="Clear selection" style="display: none;" @click="${(e) => this.handleClearClick(e)}">
               <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                 <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"/>
               </svg>
@@ -292,26 +248,29 @@ let SniceSelect = (() => {
             </span>
           </span>
         </button>
-        
-        <div class="select-dropdown" 
-             role="listbox" 
+
+        <div class="select-dropdown"
+             role="listbox"
              aria-label="${this.label || 'Options'}"
-             part="dropdown">
-          
-          <div class="select-search" part="search" ${!this.searchable ? 'hidden' : ''}>
+             part="dropdown"
+             @click="${(e) => this.handleOptionsClick(e)}">
+
+          <div class="select-search" part="search" ?hidden="${searchHidden}">
             <input
               type="text"
               class="select-search-input"
               placeholder="Search..."
               aria-label="Search options"
-              part="search-input" />
+              part="search-input"
+              @keydown="${(e) => this.handleSearchKeydown(e)}"
+              @input="${(e) => this.handleSearchInput(e)}" />
           </div>
-          
+
           <div class="select-options" part="options">
             <!-- Options will be rendered in @ready() -->
           </div>
         </div>
-        
+
         <!-- Hidden native select for form submission -->
         <select
           class="select-native"
@@ -357,8 +316,8 @@ let SniceSelect = (() => {
       `;
             }).join('');
         }
-        css() {
-            return css;
+        componentStyles() {
+            return css `${cssContent}`;
         }
         init() {
             // Read options from child snice-option elements
@@ -487,31 +446,37 @@ let SniceSelect = (() => {
             });
         }
         handleTriggerOpen(e) {
-            e.preventDefault();
-            if (!this.open) {
-                this.openDropdown();
+            if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+                e.preventDefault();
+                if (!this.open) {
+                    this.openDropdown();
+                }
             }
         }
-        handleSearchEscape() {
-            this.closeDropdown();
-            this.trigger?.focus();
-        }
-        handleSearchArrowDown(e) {
-            e.preventDefault();
-            this.focusNextOption();
-        }
-        handleSearchArrowUp(e) {
-            e.preventDefault();
-            this.focusPreviousOption();
-        }
-        handleSearchEnter(e) {
-            e.preventDefault();
-            if (this.focusedIndex >= 0) {
-                const options = this.searchable ? this.filteredOptions : this.options;
-                const option = options[this.focusedIndex];
-                if (option && !option.disabled) {
-                    this.handleOptionSelect(option);
-                }
+        handleSearchKeydown(e) {
+            switch (e.key) {
+                case 'Escape':
+                    this.closeDropdown();
+                    this.trigger?.focus();
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.focusNextOption();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.focusPreviousOption();
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.focusedIndex >= 0) {
+                        const options = this.searchable ? this.filteredOptions : this.options;
+                        const option = options[this.focusedIndex];
+                        if (option && !option.disabled) {
+                            this.handleOptionSelect(option);
+                        }
+                    }
+                    break;
             }
         }
         focusNextOption() {
@@ -555,39 +520,43 @@ let SniceSelect = (() => {
                 });
             }
         }
-        handleTriggerClick(e) {
+        handleClearClick(e) {
+            e.preventDefault();
             e.stopPropagation();
-            // Don't toggle if clicking on the clear button or tag remove buttons
+            this.clear();
+        }
+        handleTriggerClick(e) {
             const target = e.target;
-            if (target.closest('.select-clear') || target.closest('.select-tag-remove')) {
+            // Don't toggle if clicking on the clear button
+            if (target.closest('.select-clear')) {
                 return;
             }
+            e.stopPropagation();
             if (!this.disabled && !this.readonly) {
                 this.toggleDropdown();
             }
         }
-        handleClearClick(_e) {
-            this.clear();
-        }
-        handleTagRemove(e) {
-            e.stopPropagation();
-            const target = e.target;
-            const value = target.getAttribute('data-value');
-            if (value && this.multiple) {
-                this.selectedValues.delete(value);
-                this.value = Array.from(this.selectedValues).join(',');
-                this.updateNativeSelect();
-                this.updateValueDisplay();
-                this.updateClearButton();
-                this.dispatchChangeEvent();
-            }
-        }
         handleOptionsClick(e) {
-            e.stopPropagation();
             const target = e.target;
+            // Handle tag remove click
+            if (target.closest('.select-tag-remove')) {
+                e.stopPropagation();
+                const removeBtn = target.closest('.select-tag-remove');
+                const value = removeBtn.getAttribute('data-value');
+                if (value && this.multiple) {
+                    this.selectedValues.delete(value);
+                    this.value = Array.from(this.selectedValues).join(',');
+                    this.updateNativeSelect();
+                    this.updateValueDisplay();
+                    this.updateClearButton();
+                    this.dispatchChangeEvent();
+                }
+                return;
+            }
             const optionEl = target.closest('.select-option');
             if (!optionEl)
                 return;
+            e.stopPropagation();
             const value = optionEl.getAttribute('data-value');
             if (!value)
                 return;
@@ -597,8 +566,8 @@ let SniceSelect = (() => {
             }
         }
         handleSearchInput(e) {
-            const target = e.target;
-            const searchTerm = target.value.toLowerCase();
+            const input = e.target;
+            const searchTerm = input.value.toLowerCase();
             if (searchTerm) {
                 this.filteredOptions = this.options.filter(opt => opt.label.toLowerCase().includes(searchTerm));
             }
@@ -640,24 +609,19 @@ let SniceSelect = (() => {
             this.updateTriggerState();
             this.updateNativeSelectAttributes();
             this.updateClearButton();
+            // Side effect: close dropdown when disabled
             if (this.disabled && this.open) {
                 this.closeDropdown();
             }
         }
-        handleReadonlyChange() {
-            this.updateTriggerState();
-            this.updateClearButton();
-        }
-        handleInvalidChange() {
-            this.updateTriggerState();
-        }
-        // Remove the @watch('options') since options are now read from children
         handleOpenChange() {
             this.updateDropdownState();
             this.updateTriggerState();
+            // Side effect: focus search input when opened
             if (this.open && this.searchable && this.searchInput) {
                 setTimeout(() => this.searchInput?.focus(), 100);
             }
+            // Side effect: reset search when closed
             if (!this.open) {
                 this.focusedIndex = -1;
                 if (this.searchInput) {
@@ -667,45 +631,9 @@ let SniceSelect = (() => {
                 }
             }
         }
-        handleLabelChange() {
-            if (this.labelElement) {
-                this.labelElement.textContent = this.label;
-                if (this.label) {
-                    this.labelElement.removeAttribute('hidden');
-                }
-                else {
-                    this.labelElement.setAttribute('hidden', '');
-                }
-            }
-        }
-        handlePlaceholderChange() {
-            this.updateValueDisplay();
-        }
-        handleRequiredChange() {
-            if (this.labelElement) {
-                this.labelElement.classList.toggle('select-label--required', this.required);
-            }
-            this.updateNativeSelectAttributes();
-        }
-        handleMultipleChange() {
-            this.updateNativeSelectAttributes();
-        }
-        handleNameChange() {
+        handleNativeSelectAttributeChange() {
             this.updateNativeSelectAttributes();
         }
-        handleClearableChange() {
-            this.updateClearButton();
-        }
-        handleSearchableChange() {
-            if (this.searchContainer) {
-                if (this.searchable) {
-                    this.searchContainer.removeAttribute('hidden');
-                }
-                else {
-                    this.searchContainer.setAttribute('hidden', '');
-                }
-            }
-        }
         updateValueDisplay() {
             if (!this.valueDisplay)
                 return;