@smilodon/core 1.4.2 → 1.4.4

package/dist/index.umd.js

@@ -1502,10 +1502,15 @@
         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 {
@@ -1515,6 +1520,20 @@
       .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 {
@@ -1822,6 +1841,16 @@
      * 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 = {};
@@ -2295,6 +2324,9 @@
         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 {
@@ -2306,6 +2338,20 @@
         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 {
@@ -2463,6 +2509,19 @@
         .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 {
@@ -3078,6 +3137,10 @@
             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
@@ -3317,7 +3380,7 @@
         }
         set optionRenderer(renderer) {
             this._optionRenderer = renderer;
-            this._setGlobalStylesMirroring(Boolean(renderer));
+            this._setGlobalStylesMirroring(Boolean(renderer || this._classMap));
             this._renderOptions();
         }
         /**