@smilodon/core 1.4.3 → 1.4.4

package/dist/index.js

@@ -1496,10 +1496,15 @@ class SelectOption extends HTMLElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 8px 12px;
+        padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
         user-select: none;
-        transition: background-color 0.2s ease;
+        transition: var(--select-option-transition, background-color 0.2s ease);
+        border: var(--select-option-border, none);
+        border-bottom: var(--select-option-border-bottom, none);
+        border-radius: var(--select-option-border-radius, 0);
+        box-shadow: var(--select-option-shadow, none);
+        transform: var(--select-option-transform, none);
       }
       
       .option-container:hover {
@@ -1509,6 +1514,20 @@ class SelectOption extends HTMLElement {
       .option-container.selected {
         background-color: var(--select-option-selected-bg, #e3f2fd);
         color: var(--select-option-selected-color, #1976d2);
+        border: var(--select-option-selected-border, var(--select-option-border, none));
+        border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
+        border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
+        box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
+        transform: var(--select-option-selected-transform, var(--select-option-transform, none));
+      }
+
+      .option-container.selected:hover {
+        background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e3f2fd));
+        color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #1976d2));
+        border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
+        border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
+        box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
+        transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
       }
       
       .option-container.active {
@@ -1816,6 +1835,16 @@ if (!customElements.get('select-option')) {
  * server-side selection, and full customization
  */
 class EnhancedSelect extends HTMLElement {
+    get classMap() {
+        return this._classMap;
+    }
+    set classMap(map) {
+        this._classMap = map;
+        this._setGlobalStylesMirroring(Boolean(this._optionRenderer || map));
+        if (!this.isConnected)
+            return;
+        this._renderOptions();
+    }
     constructor() {
         super();
         this._pageCache = {};
@@ -2289,6 +2318,9 @@ class EnhancedSelect extends HTMLElement {
         line-height: var(--select-option-line-height, 1.5);
         border: var(--select-option-border, none);
         border-bottom: var(--select-option-border-bottom, none);
+        border-radius: var(--select-option-border-radius, 0);
+        box-shadow: var(--select-option-shadow, none);
+        transform: var(--select-option-transform, none);
       }
 
       .option:hover {
@@ -2300,6 +2332,20 @@ class EnhancedSelect extends HTMLElement {
         background-color: var(--select-option-selected-bg, #e0e7ff);
         color: var(--select-option-selected-color, #4338ca);
         font-weight: var(--select-option-selected-weight, 500);
+        border: var(--select-option-selected-border, var(--select-option-border, none));
+        border-bottom: var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none));
+        border-radius: var(--select-option-selected-border-radius, var(--select-option-border-radius, 0));
+        box-shadow: var(--select-option-selected-shadow, var(--select-option-shadow, none));
+        transform: var(--select-option-selected-transform, var(--select-option-transform, none));
+      }
+
+      .option.selected:hover {
+        background-color: var(--select-option-selected-hover-bg, var(--select-option-selected-bg, #e0e7ff));
+        color: var(--select-option-selected-hover-color, var(--select-option-selected-color, #4338ca));
+        border: var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)));
+        border-bottom: var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
+        box-shadow: var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
+        transform: var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
       }
 
       .option.active {
@@ -2457,6 +2503,19 @@ class EnhancedSelect extends HTMLElement {
         .option.selected {
           background-color: var(--select-dark-option-selected-bg, #3730a3);
           color: var(--select-dark-option-selected-text, #e0e7ff);
+          border: var(--select-dark-option-selected-border, var(--select-option-selected-border, var(--select-option-border, none)));
+          border-bottom: var(--select-dark-option-selected-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)));
+          box-shadow: var(--select-dark-option-selected-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)));
+          transform: var(--select-dark-option-selected-transform, var(--select-option-selected-transform, var(--select-option-transform, none)));
+        }
+
+        .option.selected:hover {
+          background-color: var(--select-dark-option-selected-hover-bg, var(--select-dark-option-selected-bg, #3730a3));
+          color: var(--select-dark-option-selected-hover-color, var(--select-dark-option-selected-text, #e0e7ff));
+          border: var(--select-dark-option-selected-hover-border, var(--select-dark-option-selected-border, var(--select-option-selected-hover-border, var(--select-option-selected-border, var(--select-option-border, none)))));
+          border-bottom: var(--select-dark-option-selected-hover-border-bottom, var(--select-dark-option-selected-border-bottom, var(--select-option-selected-hover-border-bottom, var(--select-option-selected-border-bottom, var(--select-option-border-bottom, none)))));
+          box-shadow: var(--select-dark-option-selected-hover-shadow, var(--select-dark-option-selected-shadow, var(--select-option-selected-hover-shadow, var(--select-option-selected-shadow, var(--select-option-shadow, none)))));
+          transform: var(--select-dark-option-selected-hover-transform, var(--select-dark-option-selected-transform, var(--select-option-selected-hover-transform, var(--select-option-selected-transform, var(--select-option-transform, none)))));
         }
         
         .option.active {
@@ -3072,6 +3131,10 @@ class EnhancedSelect extends HTMLElement {
         const item = this._state.loadedItems[index];
         if (!item)
             return;
+        // Keep active/focus styling aligned with the most recently interacted option.
+        // Without this, a previously selected item may retain active classes/styles
+        // after selecting a different option.
+        this._state.activeIndex = index;
         const isCurrentlySelected = this._state.selectedIndices.has(index);
         if (this._config.selection.mode === 'single') {
             // Single select: clear previous and select new
@@ -3311,7 +3374,7 @@ class EnhancedSelect extends HTMLElement {
     }
     set optionRenderer(renderer) {
         this._optionRenderer = renderer;
-        this._setGlobalStylesMirroring(Boolean(renderer));
+        this._setGlobalStylesMirroring(Boolean(renderer || this._classMap));
         this._renderOptions();
     }
     /**