@smilodon/core 1.4.2 → 1.4.4

package/README.md

@@ -560,6 +560,9 @@ enhanced-select {
   /* Selected state */
   --select-option-selected-bg: #e0e7ff;
   --select-option-selected-color: #4338ca;
+  --select-option-selected-border: 1px solid #4338ca;
+  --select-option-selected-hover-bg: #c7d2fe;
+  --select-option-selected-hover-border: 1px solid #3730a3;
   
   /* Active/focused state */
   --select-option-active-bg: #f3f4f6;
@@ -610,6 +613,9 @@ enhanced-select.dark-mode {
 --select-option-hover-color    /* Hover text color (#1f2937) */
 --select-option-selected-bg    /* Selected background (#e0e7ff) */
 --select-option-selected-color /* Selected text color (#4338ca) */
+--select-option-selected-border /* Selected border (inherits option border by default) */
+--select-option-selected-hover-bg /* Selected+hover background (inherits selected bg by default) */
+--select-option-selected-hover-border /* Selected+hover border (inherits selected border by default) */
 --select-option-active-bg      /* Active background (#f3f4f6) */
 --select-option-active-color   /* Active text color (#1f2937) */
 --select-dropdown-bg           /* Dropdown background (white) */

package/dist/index.cjs

@@ -1498,10 +1498,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 {
@@ -1511,6 +1516,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 {
@@ -1818,6 +1837,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 = {};
@@ -2291,6 +2320,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 {
@@ -2302,6 +2334,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 {
@@ -2459,6 +2505,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 {
@@ -3074,6 +3133,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
@@ -3313,7 +3376,7 @@ class EnhancedSelect extends HTMLElement {
     }
     set optionRenderer(renderer) {
         this._optionRenderer = renderer;
-        this._setGlobalStylesMirroring(Boolean(renderer));
+        this._setGlobalStylesMirroring(Boolean(renderer || this._classMap));
         this._renderOptions();
     }
     /**