@keenmate/web-multiselect 1.5.1 → 1.6.1

package/README.md

@@ -129,6 +129,7 @@ multiselect.setSelected(['js', 'ts']);
 | `loading-message` | `string` | `'Loading...'` | Message while loading async data |
 | `min-search-length` | `number` | `0` | Minimum search length for async |
 | `keep-options-on-search` | `boolean` | `true` | Keep initial options visible when searchCallback is active (hybrid search) |
+| `should-keep-search-on-close` | `boolean` | `true` | Preserve search text and filtered results when dropdown closes |
 | `sticky-actions` | `boolean` | `true` | Keep action buttons fixed at top while scrolling |
 | `actions-layout` | `'nowrap' \| 'wrap'` | `'nowrap'` | Layout mode for action buttons: 'nowrap' (single row) or 'wrap' (multi-row) |
 | `lock-placement` | `boolean` | `true` | Lock dropdown placement after first open to prevent flipping |
@@ -932,21 +933,21 @@ Then style with CSS:
 ```css
 /* Target specific badges with custom classes */
 .badge-urgent {
-  --ms-badge-text-bg: #fee2e2;
+  --ms-badge-text-background: #fee2e2;
   --ms-badge-text-color: #dc2626;
-  --ms-badge-remove-bg: #dc2626;
+  --ms-badge-remove-background: #dc2626;
 }
 
 .badge-normal {
-  --ms-badge-text-bg: #dbeafe;
+  --ms-badge-text-background: #dbeafe;
   --ms-badge-text-color: #2563eb;
-  --ms-badge-remove-bg: #2563eb;
+  --ms-badge-remove-background: #2563eb;
 }
 
 .badge-low {
-  --ms-badge-text-bg: #d1fae5;
+  --ms-badge-text-background: #d1fae5;
   --ms-badge-text-color: #059669;
-  --ms-badge-remove-bg: #059669;
+  --ms-badge-remove-background: #059669;
 }
 ```
 
@@ -993,21 +994,21 @@ select.getBadgeClassCallback = (item) => {
 // Inject CSS into Shadow DOM to style those classes
 select.customStylesCallback = () => `
   .badge-urgent {
-    --ms-badge-text-bg: #fee2e2;
+    --ms-badge-text-background: #fee2e2;
     --ms-badge-text-color: #dc2626;
-    --ms-badge-remove-bg: #dc2626;
+    --ms-badge-remove-background: #dc2626;
   }
 
   .badge-normal {
-    --ms-badge-text-bg: #dbeafe;
+    --ms-badge-text-background: #dbeafe;
     --ms-badge-text-color: #2563eb;
-    --ms-badge-remove-bg: #2563eb;
+    --ms-badge-remove-background: #2563eb;
   }
 
   .badge-low {
-    --ms-badge-text-bg: #d1fae5;
+    --ms-badge-text-background: #d1fae5;
     --ms-badge-text-color: #059669;
-    --ms-badge-remove-bg: #059669;
+    --ms-badge-remove-background: #059669;
   }
 `;
 ```
@@ -1533,12 +1534,32 @@ web-multiselect.large { --ms-rem: 12px; }
 
 **Fine-grained Control:**
 Override individual sizing variables for specific adjustments:
-- `--ms-input-height` - Input field height
+- `--ms-input-height` - Input field height (default: 35px)
 - `--ms-input-font-size` - Input font size
 - `--ms-input-padding` - Input padding
 - `--ms-badge-height` - Badge height
 - `--ms-option-height` - Option height in dropdown
 
+**Input Size Variants:**
+Five size variants for consistent input sizing across KeenMate components:
+
+| Size | Variable | Height | Base Variable |
+|------|----------|--------|---------------|
+| XS | `--ms-input-size-xs-height` | 31px | `--base-input-size-xs-height` |
+| SM | `--ms-input-size-sm-height` | 33px | `--base-input-size-sm-height` |
+| MD | `--ms-input-size-md-height` | 35px | `--base-input-size-md-height` |
+| LG | `--ms-input-size-lg-height` | 38px | `--base-input-size-lg-height` |
+| XL | `--ms-input-size-xl-height` | 41px | `--base-input-size-xl-height` |
+
+Heights reference `--base-input-size-*-height` from the [Theme Designer](https://theme-designer.keenmate.dev), ensuring consistent input heights across all KeenMate components.
+
+```css
+/* Set consistent input heights across all components */
+:root {
+  --base-input-size-md-height: 4.0;  /* All components: 40px at 10px rem */
+}
+```
+
 ### Theme Designer
 
 The easiest way to customize the appearance of this component is using the **KeenMate Theme Designer** at:
@@ -1605,7 +1626,7 @@ You can customize the component using CSS variables even with just a `<script>`
 <style>
   /* Override tooltip appearance */
   web-multiselect {
-    --ms-tooltip-bg: #1f2937;
+    --ms-tooltip-background: #1f2937;
     --ms-tooltip-color: #f9fafb;
     --ms-tooltip-padding: 0.625rem 0.875rem;
     --ms-tooltip-border-radius: 0.5rem;
@@ -1656,8 +1677,7 @@ All CSS custom properties are now defined at the `:host` level in the compiled C
 ```
 
 For the complete list of all available CSS variables, see:
-- [_css-variables.scss](./src/scss/_css-variables.scss) - All 150+ CSS custom properties at `:host` level
-- [_variables.scss](./src/scss/_variables.scss) - Foundation SCSS variables (colors, spacing, typography)
+- [_variables.css](./src/css/_variables.css) - All 150+ CSS custom properties at `:host` level
 
 #### Colors
 
@@ -1674,7 +1694,7 @@ For the complete list of all available CSS variables, see:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--ms-input-bg` | `#ffffff` | Input background |
+| `--ms-input-background` | `var(--base-input-background, #ffffff)` | Input background |
 | `--ms-input-text` | `#111827` | Input text color |
 | `--ms-input-border` | `#d1d5db` | Input border color |
 | `--ms-input-focus-border-color` | `#3b82f6` | Border color when focused |
@@ -1688,8 +1708,8 @@ For the complete list of all available CSS variables, see:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--ms-dropdown-bg` | `#ffffff` | Dropdown background |
-| `--ms-dropdown-border` | `#e5e7eb` | Dropdown border color |
+| `--ms-dropdown-background` | `var(--base-dropdown-background, #ffffff)` | Dropdown background |
+| `--ms-dropdown-border` | `var(--ms-border-color)` | Dropdown border color |
 | `--ms-dropdown-shadow` | (box shadow) | Dropdown shadow |
 | `--ms-dropdown-max-height` | `20rem` | Max height of dropdown |
 | `--ms-option-padding-v` | `0.5rem` | Option vertical padding |
@@ -1697,8 +1717,6 @@ For the complete list of all available CSS variables, see:
 | `--ms-option-hover-bg` | `#f9fafb` | Option background on hover |
 | `--ms-option-color-hover` | `inherit` | Option text color on hover |
 | `--ms-option-bg-selected` | (rgba accent) | Selected option background |
-| `--ms-option-color-selected` | `inherit` | Selected option text color |
-| `--ms-option-color-selected-hover` | (inherits selected) | Text color when hovering selected option |
 | `--ms-option-bg-focused` | `#f9fafb` | Focused option background (keyboard) |
 | `--ms-option-color-focused` | `inherit` | Focused option text color |
 | `--ms-option-bg-matched` | (accent 8%) | Matched option background (navigate mode) |
@@ -1708,34 +1726,34 @@ For the complete list of all available CSS variables, see:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--ms-badge-text-bg` | `#eff6ff` | Badge background color |
-| `--ms-badge-text-color` | `#3b82f6` | Badge text color |
+| `--ms-badge-text-background` | `var(--ms-accent-color-light)` | Badge background color |
+| `--ms-badge-text-color` | `var(--ms-accent-color)` | Badge text color |
 | `--ms-badge-gap` | `0.5rem` | Gap between badges |
 | `--ms-badge-height` | `1.5rem` | Height of badges |
 | `--ms-badge-font-size` | `0.75rem` | Badge font size |
 | `--ms-badge-border-radius` | `0.375rem` | Badge border radius |
-| `--ms-badge-remove-bg` | `#3b82f6` | Remove button background |
-| `--ms-badge-remove-color` | `#ffffff` | Remove button color |
-| `--ms-badge-counter-text-bg` | `#d1d5db` | BadgeCounter text background ("+X more") |
-| `--ms-badge-counter-text-color` | `#6b7280` | BadgeCounter text color |
-| `--ms-badge-counter-remove-bg` | `#6b7280` | BadgeCounter remove button background |
-| `--ms-badge-counter-remove-color` | `#ffffff` | BadgeCounter remove button color |
-| `--ms-badge-counter-border` | `1px solid #e5e7eb` | BadgeCounter border |
+| `--ms-badge-remove-background` | `var(--ms-accent-color)` | Remove button background |
+| `--ms-badge-remove-color` | `var(--ms-text-on-accent)` | Remove button color |
+| `--ms-badge-counter-text-background` | `var(--ms-primary-bg)` | BadgeCounter text background ("+X more") |
+| `--ms-badge-counter-text-color` | `var(--ms-text-color-3)` | BadgeCounter text color |
+| `--ms-badge-counter-remove-background` | `var(--ms-text-color-3)` | BadgeCounter remove button background |
+| `--ms-badge-counter-remove-color` | `var(--ms-text-on-accent)` | BadgeCounter remove button color |
+| `--ms-badge-counter-border` | `1px solid var(--ms-border-color)` | BadgeCounter border |
 | `--ms-badge-border` | `none` | Badge border (e.g., `1px solid #3b82f6`) |
 
 #### Checkboxes
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--ms-checkbox-bg` | `#ffffff` | Checkbox background |
-| `--ms-checkbox-border` | `1px solid #d1d5db` | Checkbox border |
+| `--ms-checkbox-bg` | `var(--ms-input-background)` | Checkbox background |
+| `--ms-checkbox-border` | `1px solid var(--ms-border-color)` | Checkbox border |
 | `--ms-checkbox-border-radius` | `0.3rem` | Checkbox border radius |
-| `--ms-checkbox-checked-bg` | (accent color) | Background when checked |
-| `--ms-checkbox-checked-border` | `1px solid (accent)` | Border when checked |
-| `--ms-checkbox-checkmark-color` | `#ffffff` | Checkmark color |
-| `--ms-checkbox-hover-border-color` | (accent color) | Border on hover |
-| `--ms-checkbox-disabled-bg` | `#f3f4f6` | Disabled background |
-| `--ms-checkbox-disabled-border` | `1px solid #e5e7eb` | Disabled border |
+| `--ms-checkbox-checked-bg` | `var(--ms-accent-color)` | Background when checked |
+| `--ms-checkbox-checked-border` | `1px solid var(--ms-accent-color)` | Border when checked |
+| `--ms-checkbox-checkmark-color` | `var(--ms-text-on-accent)` | Checkmark color |
+| `--ms-checkbox-hover-border-color` | `var(--ms-accent-color)` | Border on hover |
+| `--ms-checkbox-disabled-bg` | `var(--ms-primary-bg)` | Disabled background |
+| `--ms-checkbox-disabled-border` | `1px solid var(--ms-border-color)` | Disabled border |
 
 #### Scrollbar
 
@@ -1743,8 +1761,8 @@ For the complete list of all available CSS variables, see:
 |----------|---------|-------------|
 | `--ms-scrollbar-width` | `8px` | Scrollbar width |
 | `--ms-scrollbar-track-bg` | `transparent` | Track background |
-| `--ms-scrollbar-thumb-bg` | `#d1d5db` | Thumb color |
-| `--ms-scrollbar-thumb-bg-hover` | `#6b7280` | Thumb hover color |
+| `--ms-scrollbar-thumb-bg` | `var(--ms-border-color)` | Thumb color |
+| `--ms-scrollbar-thumb-bg-hover` | `var(--ms-text-color-3)` | Thumb hover color |
 | `--ms-scrollbar-thumb-border-radius` | `4px` | Thumb border radius |
 
 #### Counter (in input)
@@ -1760,8 +1778,8 @@ For the complete list of all available CSS variables, see:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `--ms-tooltip-bg` | `#333` | Tooltip background color |
-| `--ms-tooltip-color` | `#fff` | Tooltip text color |
+| `--ms-tooltip-background` | `var(--base-tooltip-background, #333333)` | Tooltip background color |
+| `--ms-tooltip-color` | `var(--ms-tooltip-text-color)` | Tooltip text color |
 | `--ms-tooltip-padding` | `0.5rem 0.75rem` | Tooltip padding |
 | `--ms-tooltip-border-radius` | `0.375rem` | Tooltip border radius |
 | `--ms-tooltip-font-size` | `0.875rem` | Tooltip font size |
@@ -1790,17 +1808,18 @@ For the complete list of all available CSS variables, see:
 | `--ms-shadow-xl` | (box shadow) | Extra large shadow |
 | `--ms-disabled-opacity` | `0.5` | Opacity for disabled state |
 
-### Advanced: Custom SCSS
+### Advanced: Direct CSS Import
 
-For users with a build system, you can import and customize the SCSS:
+For users who want to import the raw CSS source files:
+
+```css
+/* Import component CSS directly */
+@import '@keenmate/web-multiselect/css';
 
-```scss
-// Import and override SCSS variables
-@use '@keenmate/web-multiselect/scss' with (
-  $ms-accent-color: #10b981,
-  $ms-border-radius: 0.5rem,
-  $ms-font-size-base: 1rem
-);
+/* Or import individual partials */
+@import '@keenmate/web-multiselect/src/css/_variables.css';
+@import '@keenmate/web-multiselect/src/css/_base.css';
+/* ... etc */
 ```
 
 ## Browser Support