snice 2.5.4 → 3.1.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 {\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: var(--snice-select-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}";
 
 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;