@keenmate/web-multiselect 1.0.0-rc05 → 1.0.0-rc06

package/README.md

@@ -750,15 +750,32 @@ You can customize the component using CSS variables even with just a `<script>`
 
 ### Available CSS Variables
 
-The component exposes 200+ SCSS variables as CSS custom properties with fallbacks. Below are the **50+ most commonly customized variables** organized by category.
-
-For the complete list of all available CSS variables, see the SCSS source files:
-- [_variables.scss](./src/scss/_variables.scss) - Foundation variables (colors, spacing, typography)
-- [_input-dropdown.scss](./src/scss/_input-dropdown.scss) - Input and dropdown styles
-- [_pills-display.scss](./src/scss/_pills-display.scss) - Pills and count display
-- [_options.scss](./src/scss/_options.scss) - Options and groups
-- [_tooltip.scss](./src/scss/_tooltip.scss) - Tooltip styles
-- [_rtl.scss](./src/scss/_rtl.scss) - RTL overrides
+The component exposes **150+ CSS custom properties** defined at the `:host` level, making them inspectable and overridable. Below are the **50+ most commonly customized variables** organized by category.
+
+#### Inspecting Variables in DevTools
+
+All CSS custom properties are now defined at the `:host` level in the compiled CSS, making them visible in browser DevTools:
+
+1. Open DevTools (F12) and select the `<multi-select>` element
+2. In the **Styles** panel, look for the `:host` selector
+3. You'll see all 150+ variables with their default values
+4. Edit values live to preview changes instantly
+
+**CSS variables work with Shadow DOM** because they inherit through the shadow boundary. This means you can customize the component from outside:
+
+```html
+<style>
+  /* These variables will penetrate into the Shadow DOM */
+  multi-select {
+    --ml-accent-color: #10b981;  /* Changes primary color */
+    --ml-input-border-radius: 0.5rem;  /* Rounds input corners */
+  }
+</style>
+```
+
+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)
 
 #### Colors