@smilodon/core 1.4.10 → 1.4.11

package/dist/index.js

@@ -1532,6 +1532,8 @@ class SelectOption extends HTMLElement {
         padding: var(--select-option-padding, 8px 12px);
         cursor: pointer;
         user-select: none;
+        color: var(--select-option-color, var(--select-text-color, #1f2937));
+        background: var(--select-option-bg, var(--select-dropdown-bg, var(--select-bg, white)));
         transition: var(--select-option-transition, background-color 0.2s ease);
         border: var(--select-option-border, none);
         border-bottom: var(--select-option-border-bottom, none);
@@ -1576,9 +1578,20 @@ class SelectOption extends HTMLElement {
       
       .option-content {
         flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        overflow: var(--select-option-content-overflow, hidden);
+        text-overflow: var(--select-option-content-text-overflow, ellipsis);
+        white-space: var(--select-option-content-white-space, nowrap);
+      }
+
+      .checkmark-icon {
+        display: none;
+        margin-left: var(--select-checkmark-margin-left, 8px);
+        color: var(--select-checkmark-color, currentColor);
+      }
+
+      :host([aria-selected="true"]) .checkmark-icon,
+      .option-container.selected .checkmark-icon {
+        display: inline-flex;
       }
       
       .remove-button {
@@ -1706,16 +1719,6 @@ class SelectOption extends HTMLElement {
             <path d="M4 8.5L6.5 11L12 5.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
           </svg>
         `;
-            // Visibility control via CSS or inline style
-            // We set it to display: none unless selected.
-            // User can override this behavior via part styling if they want transitions
-            if (!selected) {
-                checkmark.style.display = 'none';
-            }
-            else {
-                checkmark.style.marginLeft = '8px';
-                checkmark.style.color = 'currentColor';
-            }
             this._container.appendChild(checkmark);
         }
         // Data Attributes Contract on Host
@@ -1953,7 +1956,6 @@ class EnhancedSelect extends HTMLElement {
         // Angular's rendering seems to not apply :host styles correctly in some cases
         // Must be done in connectedCallback when element is attached to DOM
         this.style.display = 'block';
-        this.style.width = '100%';
         if (this._optionRenderer) {
             this._setGlobalStylesMirroring(true);
         }
@@ -2196,7 +2198,8 @@ class EnhancedSelect extends HTMLElement {
       :host {
         display: block;
         position: relative;
-        width: 100%;
+        width: var(--select-width, 100%);
+        height: var(--select-height, auto);
       }
       
       .select-container {
@@ -2212,6 +2215,7 @@ class EnhancedSelect extends HTMLElement {
         flex-wrap: wrap;
         gap: var(--select-input-gap, 6px);
         padding: var(--select-input-padding, 6px 52px 6px 8px);
+        height: var(--select-input-height, auto);
         min-height: var(--select-input-min-height, 44px);
         max-height: var(--select-input-max-height, 160px);
         overflow-y: var(--select-input-overflow-y, auto);
@@ -2233,17 +2237,17 @@ class EnhancedSelect extends HTMLElement {
         content: '';
         position: absolute;
         top: 50%;
-        right: var(--select-separator-position, 40px);
+        right: var(--select-separator-position, var(--select-seperator-position, 40px));
         transform: translateY(-50%);
-        width: var(--select-separator-width, 1px);
-        height: var(--select-separator-height, 60%);
-        background: var(--select-separator-bg, var(--select-separator-gradient, linear-gradient(
+        width: var(--select-separator-width, var(--select-seperator-width, 1px));
+        height: var(--select-separator-height, var(--select-seperator-height, 60%));
+        background: var(--select-separator-bg, var(--select-seperator-bg, var(--select-separator-gradient, var(--select-seperator-gradient, linear-gradient(
           to bottom,
           transparent 0%,
           rgba(0, 0, 0, 0.1) 20%,
           rgba(0, 0, 0, 0.1) 80%,
           transparent 100%
-        )));
+        ))));
         pointer-events: none;
         z-index: 1;
       }
@@ -2270,7 +2274,7 @@ class EnhancedSelect extends HTMLElement {
       }
 
       .input-container.has-clear-control::after {
-        right: var(--select-separator-position-with-clear, 72px);
+        right: var(--select-separator-position-with-clear, var(--select-seperator-position-with-clear, 72px));
       }
 
       .dropdown-arrow-container.with-clear-control {
@@ -2348,6 +2352,7 @@ class EnhancedSelect extends HTMLElement {
       
       .select-input {
         flex: 1;
+        width: var(--select-input-width, auto);
         min-width: var(--select-input-min-width, 120px);
         padding: var(--select-input-field-padding, 4px);
         border: none;
@@ -2442,6 +2447,7 @@ class EnhancedSelect extends HTMLElement {
         font-weight: var(--select-group-header-weight, 600);
         color: var(--select-group-header-color, #6b7280);
         background-color: var(--select-group-header-bg, #f3f4f6);
+        text-align: var(--select-group-header-text-align, left);
         font-size: var(--select-group-header-font-size, 12px);
         text-transform: var(--select-group-header-text-transform, uppercase);
         letter-spacing: var(--select-group-header-letter-spacing, 0.05em);
@@ -2626,10 +2632,25 @@ class EnhancedSelect extends HTMLElement {
       
       /* Dark mode - Opt-in via class, data attribute, or ancestor context */
       :host(.dark-mode),
+      :host([dark-mode]),
+      :host([darkmode]),
       :host([data-theme="dark"]),
+      :host([theme="dark"]),
       :host-context(.dark-mode),
       :host-context(.dark),
-      :host-context([data-theme="dark"]) {
+      :host-context([dark-mode]),
+      :host-context([darkmode]),
+      :host-context([data-theme="dark"]),
+      :host-context([theme="dark"]) {
+        /* map dark tokens to base option tokens so nested <select-option>
+           components also pick up dark mode via inherited CSS variables */
+        --select-option-bg: var(--select-dark-option-bg, #1f2937);
+        --select-option-color: var(--select-dark-option-color, #f9fafb);
+        --select-option-hover-bg: var(--select-dark-option-hover-bg, #374151);
+        --select-option-hover-color: var(--select-dark-option-hover-color, #f9fafb);
+        --select-option-selected-bg: var(--select-dark-option-selected-bg, #3730a3);
+        --select-option-selected-color: var(--select-dark-option-selected-text, #e0e7ff);
+
         .input-container {
           background: var(--select-dark-bg, #1f2937);
           border-color: var(--select-dark-border, #4b5563);
@@ -2682,6 +2703,8 @@ class EnhancedSelect extends HTMLElement {
         
         .option.active:not(.selected) {
           background-color: var(--select-dark-option-active-bg, #374151);
+          color: var(--select-dark-option-active-color, #f9fafb);
+          outline: var(--select-dark-option-active-outline, 2px solid rgba(129, 140, 248, 0.55));
         }
 
         /* Group header in dark mode */
@@ -2689,9 +2712,6 @@ class EnhancedSelect extends HTMLElement {
           color: var(--select-dark-group-header-color, var(--select-group-header-color, #6b7280));
           background-color: var(--select-dark-group-header-bg, var(--select-group-header-bg, #374151));
         }
-          color: var(--select-dark-option-active-color, #f9fafb);
-          outline: var(--select-dark-option-active-outline, 2px solid rgba(129, 140, 248, 0.55));
-        }
 
         .option.selected.active {
           background-color: var(--select-dark-option-selected-active-bg, var(--select-dark-option-selected-bg, #3730a3));
@@ -2813,7 +2833,13 @@ class EnhancedSelect extends HTMLElement {
                 this._handleOpen();
             }
             else {
-                // clicking the input while open should close the dropdown too
+                // Keep open while interacting directly with the input so users can
+                // place cursor/type without accidental collapse.
+                if (target === this._input) {
+                    this._input.focus();
+                    return;
+                }
+                // clicking other parts of the input container while open toggles close
                 this._handleClose();
             }
             // Focus the input (do not prevent default behavior)