@keenmate/web-multiselect 1.2.0 → 1.4.0

package/README.md

@@ -1504,6 +1504,64 @@ interface MultiSelectOption {
 
 The component uses Shadow DOM for style encapsulation, but exposes CSS custom properties (CSS variables) that you can override to customize the appearance.
 
+### Theme Designer
+
+The easiest way to customize the appearance of this component is using the **KeenMate Theme Designer** at:
+
+**[theme-designer.keenmate.dev](https://theme-designer.keenmate.dev)**
+
+#### How It Works
+
+1. **Choose 3 base colors** - background, text, and accent
+2. **Preview changes live** - see your theme applied instantly
+3. **Fine-tune individual variables** - lock specific values while adjusting others
+4. **Export your theme** - copy CSS, JSON, or SCSS to your project
+
+#### CSS Variable Layers
+
+KeenMate components support a **two-layer theming architecture**:
+
+**Standalone Mode (Simple)** - Just override the component-specific variables you need:
+
+```css
+:root {
+  --ms-accent-color: #your-brand-color;
+  --ms-primary-bg: #your-background;
+  --ms-text-primary: #your-text-color;
+}
+```
+
+**Cascading Mode (Multi-Component)** - When using multiple KeenMate components, you can define a shared base layer:
+
+```css
+:root {
+  /* Base layer - single source of truth */
+  --base-accent-color: #3b82f6;
+  --base-primary-bg: #ffffff;
+  --base-text-primary: #111827;
+
+  /* Components reference base layer */
+  --ms-accent-color: var(--base-accent-color);
+  --drp-accent-color: var(--base-accent-color);
+}
+```
+
+Change `--base-accent-color` once → all components update automatically.
+
+#### Unified Variable Naming
+
+All KeenMate components follow a consistent naming convention for **Tier 1 variables** (core theming):
+
+| Purpose | web-multiselect | web-daterangepicker |
+|---------|-----------------|---------------------|
+| Brand color | `--ms-accent-color` | `--drp-accent-color` |
+| Background | `--ms-primary-bg` | `--drp-primary-bg` |
+| Text color | `--ms-text-primary` | `--drp-text-primary` |
+| Text on accent | `--ms-text-on-accent` | `--drp-text-on-accent` |
+| Border color | `--ms-border-color` | `--drp-border-color` |
+
+Learn the pattern once, apply it across all components.
+
 ### CSS Variables (No Build System Required)
 
 You can customize the component using CSS variables even with just a `<script>` tag:
@@ -1602,7 +1660,14 @@ For the complete list of all available CSS variables, see:
 | `--ms-option-padding-v` | `0.5rem` | Option vertical padding |
 | `--ms-option-padding-h` | `0.75rem` | Option horizontal padding |
 | `--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) |
+| `--ms-option-color-matched` | `inherit` | Matched option text color |
 
 #### Badges
 
@@ -1621,6 +1686,31 @@ For the complete list of all available CSS variables, see:
 | `--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-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-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 |
+
+#### Scrollbar
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--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-border-radius` | `4px` | Thumb border radius |
 
 #### Counter (in input)