@keenmate/web-multiselect 2.0.0-rc12 → 2.0.1

package/README.md

@@ -1,186 +1,201 @@
-# @keenmate/web-multiselect
-
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
-[![npm version](https://img.shields.io/npm/v/@keenmate/web-multiselect.svg)](https://www.npmjs.com/package/@keenmate/web-multiselect)
-
-> A lightweight, themeable multi-select web component with typeahead search, RTL support, rich content, and full keyboard navigation.
-
-## What is it
-
-`@keenmate/web-multiselect` is a custom element (`<web-multiselect>`) that turns a list of options into a searchable, themeable multi-select dropdown. Framework-agnostic — works in React, Vue, Svelte, Blazor, plain HTML.
-
-Reads `--base-*` variables from the page if [`@keenmate/theme-designer`](https://theme-designer.keenmate.dev) is present, falls back to sensible OS-aware defaults otherwise, and ships with first-class dark-mode and per-instance theming.
-
-**Headline features:**
-
-- Declarative `<option>` / `<optgroup>` markup — no JavaScript required for simple cases.
-- Virtual scrolling for 10,000+ option datasets (25× faster opening, 99.8% memory reduction).
-- Filter or navigate search modes; async / hybrid search.
-- Five badge display modes (pills, count, compact, partial, none) with positioning on any side.
-- Full keyboard navigation, RTL language support, badge tooltips.
-- Custom rendering callbacks for options, badges, and group headers.
-- Form integration via standard hidden inputs (FormData-compatible).
-
-## What's New in v2.0.0-rc12
-
-- **`overlay-group` — one overlay open at a time, across components.** The dropdown now joins a cross-component single-active-overlay group (core `registerOverlay`): opening it dismisses every other participating overlay — other multiselects, datepickers, or any external popover that fires the `km-overlay-activated` document event — and it closes itself when another overlay in its group opens. The new `overlay-group` attribute/property scopes this to a named group (same group = coordinate, different groups = independent, unset = the default ungrouped pool). Outside-click dismissal is unchanged and always on; this only governs the open-broadcast. Fixes the old behavior where two multiselects could sit open simultaneously.
-
-- **Icon glyphs now flow from the shared `--base-icon-*` contract.** The four `--ms-icon-*` glyphs with a shared counterpart (chevron, field-clear, badge-remove, search) are wired through the `@keenmate/base-css-variables` layer, so a single `--base-icon-*` override re-skins that affordance across every KeenMate component at once — matching how the ~95 other `--ms-*` tokens already fall back to `--base-*`. The toggle/pager chevron now flows from `--base-icon-chevron` (a Lucide angle that keeps the previous optical size); field-clear, badge-remove, and search follow their base equivalents. Each keeps its inline Lucide SVG as the standalone fallback, so default appearance is unchanged when no base layer is loaded.
-
-- **`--ms-toggle-rotate-closed` / `--ms-toggle-rotate-open` — themeable chevron rotation.** The toggle rotates the *directional* base chevron into place (defaults `90deg` closed → down, `-90deg` open → up). A theme that supplies a **pre-oriented** glyph (one that already points down) can now opt out: set both to `0deg` for a static icon, or `0deg` / `180deg` for a down-glyph that flips up on open — without touching the base contract. The new Material Design card in `examples-theming.html` demonstrates the pairing.
-
-- **`--ms-fullscreen-nav-btn-icon` — the pager glyph is now independent.** The fullscreen match-navigator's prev/next buttons previously masked the shared `--ms-icon-chevron`, so a theme that repointed the base chevron at a pre-oriented toggle glyph would leak it into the pager (which rotates its source ±90° and expects a right-pointing chevron). The pager now reads its own token, defaulting to `--ms-icon-chevron` — nothing changes by default, but a theme can diverge the pager glyph on its own.
-
-- **More tokens flow from `--base-*` for dark-mode fidelity.** A follow-up audit wired five more `--ms-*` tokens that hardcoded a value where a dedicated `--base-*` counterpart exists: disabled-input background and dropdown box-shadow are now `light-dark()`-aware (they no longer stay light on dark themes), the field-clear color/hover knobs gain dedicated base hooks, and the snappy easing matches the base standard curve. All keep their prior value as the standalone fallback; transition *durations* and the z-index stack are deliberately left local.
-
-- **Dropdown / selected-items popover no longer render 2px wider than the field.** Both panels size from `--ms-input-current-width` (the field wrapper's border-box `offsetWidth`) but were themselves `content-box`, so each added its own 1px border on top and overhung the input it anchors to. Both now use `box-sizing: border-box`, so their outer width matches the field exactly.
-
-## What's New in v2.0.0-rc11
-
-- **Imperative open/close API — drive the dropdown from code.** The `<web-multiselect>` element and the underlying `WebMultiSelect` now expose `open()`, `close()`, `toggle()`, and a read/write `isOpen` property, mirroring the calendar API in web-daterangepicker. Each element method flushes pending property writes first (the same contract as `getSelected()`/`setSelected()`), so `el.options = data; el.open()` works with no `await` in between. Calling `open()` from your own button's click handler now opens *and stays open* — previously the same click bubbled to the outside-click listener and re-closed it. See the new `examples-data-api.html` §API07 demo.
-
-- **Inline clear (✕) button — wipe the whole selection from inside the input.** A new opt-in `show-clear` attribute renders a small ✕ at the input's trailing edge that appears only while something is selected. Clicking it clears the selection and any search text, fires a single `change`, refocuses the input, and closes the selected-items popover if it was open — without popping the dropdown open. It's drawn as a themeable CSS mask icon (`--ms-input-clear-*`, whose corner radius follows `--ms-border-radius`). See the new `examples-basic.html` §BU01b demo.
-
-- **Input decorations rebuilt as a flex "field shell" — no more overlap or text bleed.** `.ms__input-wrapper` is now the bordered field (border, background, radius, focus ring via `:focus-within`), with the `<input>`, the `[N]` counter, the ✕ clear, and the chevron as real flex children in a spaced row. Previously each was absolutely pinned by a hard-coded inset, so `show-counter` + `show-clear` collided and long text could slide under the icons. Now they space themselves via `--ms-input-gap`, long text clips cleanly inside the input's own box, and RTL mirroring falls out of the flex direction for free. Several obsolete positioning vars were removed (`--ms-input-padding`, `--ms-input-padding-right`, `--ms-toggle-right`, `--ms-counter-offset`, `--ms-input-clear-inset`, `--ms-input-clear-gutter`, `--ms-transform-center-y`).
-
-- **Selected-items popover now lines up with the field.** `--ms-selected-popover-width` used to default to a fixed 32rem independent of the control, which looked detached under a wide field; it now defaults to `var(--ms-input-current-width)`, so the popover and the dropdown both track the field width and align under it. Set `selected-popover-width` (or the CSS var) to a fixed length to restore the old constant-width behavior.
-
-- **Toggle chevron is now a crisp icon, not a text character.** The dropdown indicator renders the shared `--ms-icon-chevron` glyph through a CSS mask — consistent with the ✕, count-clear, and badge-remove icons — instead of the Unicode `▼`, so it no longer depends on font rendering and themes uniformly via `--ms-toggle-icon-color` / `--ms-toggle-icon-size`. It still points down when closed and rotates up when open.
-
-## Demos & docs
-
-- 🚀 [Live demo](https://web-multiselect.keenmate.dev)
-- 📘 [Usage / API reference](./docs/usage.md) — attributes, properties, methods, events.
-- 🎨 [Theming](./docs/theming.md) — `--ms-*` variables, dark mode, cascade layers, Theme Designer integration.
-- 📚 [Examples / cookbook](./docs/examples.md) — rich content, async search, virtual scroll, custom rendering, forms.
-- ♿ [Accessibility](./docs/accessibility.md) — keyboard model, ARIA labels, focus behavior.
-
-## Install
-
-```bash
-npm install @keenmate/web-multiselect
-```
-
-## Quick start
-
-**Declarative — no JavaScript required:**
-
-```html
-<script type="module">
-  import '@keenmate/web-multiselect';
-</script>
-
-<web-multiselect placeholder="Pick a country">
-  <option value="cz">Czech Republic</option>
-  <option value="sk">Slovakia</option>
-  <option value="at">Austria</option>
-</web-multiselect>
-```
-
-**Programmatic — dynamic data + events:**
-
-```html
-<web-multiselect id="picker" search-placeholder="Search…"></web-multiselect>
-
-<script type="module">
-  import '@keenmate/web-multiselect';
-
-  const picker = document.getElementById('picker');
-  picker.options = [
-    { value: 'js', label: 'JavaScript', icon: '🟨' },
-    { value: 'ts', label: 'TypeScript', icon: '🔷' },
-    { value: 'py', label: 'Python', icon: '🐍' }
-  ];
-
-  picker.addEventListener('change', (e) => {
-    console.log('Selected:', e.detail.selectedValues);
-  });
-</script>
-```
-
-See [docs/usage.md](./docs/usage.md) for the full API and [docs/examples.md](./docs/examples.md) for advanced patterns (async data, virtual scrolling, custom rendering, form integration).
-
-## Editor IntelliSense
-
-The package ships editor metadata so you get autocomplete and hover docs for the
-element's attributes, events, and all `--ms-*` CSS custom properties. All of it is
-generated from the component's source on every build, so it never drifts.
-
-- **JetBrains** (WebStorm / IntelliJ) — works automatically. The IDE discovers
-  `web-types.json` via the `web-types` field in `package.json`; no setup needed.
-- **VS Code** — the data files ship but VS Code doesn't auto-discover them from a
-  dependency, so point your workspace at them once in `.vscode/settings.json`:
-
-  ```json
-  {
-    "html.customData": [
-      "./node_modules/@keenmate/web-multiselect/vscode.html-custom-data.json"
-    ],
-    "css.customData": [
-      "./node_modules/@keenmate/web-multiselect/vscode.css-custom-data.json"
-    ]
-  }
-  ```
-
-  `html.customData` powers tag/attribute completion on `<web-multiselect>`;
-  `css.customData` powers completion for the `--ms-*` theming variables. Reload
-  the window after adding them.
-
-## Browser support
-
-Modern evergreen browsers — anything with native `customElements`, Shadow DOM, and CSS `@layer` support:
-
-- Chrome / Edge 99+
-- Firefox 97+
-- Safari 15.4+
-
-No polyfills are shipped. SSR-safe: the module imports without crashing in Node, but renders only after hydration in the browser.
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start dev server (HMR)
-npm run dev
-
-# Build for production
-npm run build
-
-# Create package tarball
-npm run package
-
-# Run tests
-npm run test:unit   # Vitest (happy-dom) — fast logic checks
-npm run test:e2e    # Playwright (browser) — interaction/visual
-npm test            # both
-```
-
-## Code structure
-
-Follows the BlissFramework four-layer web-component layout:
-
-| Layer | File | Role |
-|-------|------|------|
-| Element | `src/web-component.ts` | `MultiSelectElement` — custom-element I/O wrapper, `ATTRIBUTE_TABLE`-driven |
-| Logic | `src/multiselect.ts` | `WebMultiSelect<T>` — framework-agnostic core |
-| Service | `src/tooltip.ts`, `src/virtual-scroll.ts` | single-purpose helpers (`Tooltip`, `VirtualScroll`) |
-| Side | `src/types.ts`, `src/logger.ts`, `src/vendor/` | types, logging, vendored deps |
-
-Two deviations from the canonical shape, both intentional:
-
-- **`MultiSelectElement extends BaseElement`, not `HTMLElement` directly.** `BaseElement` is a local `const` resolving to `HTMLElement` in the browser and to a stub class under SSR (`typeof HTMLElement === 'undefined'`), so importing the module in Node doesn't throw. A literal `grep "extends HTMLElement"` structure check will not match here by design.
-- **`src/vite-env.d.ts`** is a standard Vite ambient-types file, not part of the four-layer model.
-
-## License
-
-MIT — see [LICENSE](./LICENSE).
-
-## Built with BlissFramework
-
-Follows the [BlissFramework component guidelines](https://blissframework.dev/) for structure, theming, color-scheme, and accessibility. Per-check verifications run via `/validate-web-component`.
-
-## Credits
-
-Created by [Keenmate](https://github.com/keenmate) as part of the Pure Admin design system.
+# @keenmate/web-multiselect
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![npm version](https://img.shields.io/npm/v/@keenmate/web-multiselect.svg)](https://www.npmjs.com/package/@keenmate/web-multiselect)
+
+> A lightweight, themeable multi-select web component with typeahead search, RTL support, rich content, and full keyboard navigation.
+
+## What is it
+
+`@keenmate/web-multiselect` is a custom element (`<web-multiselect>`) that turns a list of options into a searchable, themeable multi-select dropdown. Framework-agnostic — works in React, Vue, Svelte, Blazor, plain HTML.
+
+Reads `--base-*` variables from the page if [`@keenmate/theme-designer`](https://theme-designer.keenmate.dev) is present, falls back to sensible OS-aware defaults otherwise, and ships with first-class dark-mode and per-instance theming.
+
+**Headline features:**
+
+- Declarative `<option>` / `<optgroup>` markup — no JavaScript required for simple cases.
+- Virtual scrolling for 10,000+ option datasets (25× faster opening, 99.8% memory reduction).
+- Filter or navigate search modes; async / hybrid search.
+- Five badge display modes (pills, count, compact, partial, none) with positioning on any side.
+- Full keyboard navigation, RTL language support, badge tooltips.
+- Custom rendering callbacks for options, badges, and group headers.
+- Form integration via standard hidden inputs (FormData-compatible).
+
+## What's New in v2.0.1
+
+- **Single-select — re-clicking the selected option no longer clears the field** — In a `multiple="false"` picker, clicking or pressing Enter on the option that's already selected used to toggle it off and empty the control. Because a single-select row shows no checkbox, there was no cue you were un-picking, so a confirming click read as an accidental wipe. It's now a no-op that simply closes the dropdown, keeping the value selected; clearing stays the dedicated ✕ button's job (`show-clear`). Multi-select toggle-off and single-select replacement are untouched.
+- **Checkbox tick now sizes from the shared `--base-icon-check-size` token** — The selected-row checkmark was masked at `contain` (≈100% of the box), which only looked right when the glyph carried its own viewBox padding; a theme swapping `--base-icon-check` for an edge-to-edge glyph (e.g. a star) rendered it oversized, and it didn't match pure-admin's `.pa-checkbox`. It now reads `var(--base-icon-check-size, 68%)` — the exact knob pure-admin uses — so the mark renders identically in both and a theme can rescale it once for every component. The indeterminate dash inherits the same mask box. The default Lucide check shrinks slightly (≈100% → 68%) to match; that's intended.
+- **Build-time variable-manifest validator** — A new `scripts/check-variable-manifest.mjs` step (wired into `npm run build` as `check:vars`) diffs the `--ms-*` declared and `--base-*` consumed across `src/css/**` against `component-variables.manifest.json` and fails the build on dead or missing entries. This closes the silent-drift gap behind the generated IDE autocomplete and theme-designer surfaces, which are all derived from that manifest.
+- **Manifest drift cleanup** — Removed 24 inert entries the manifest still advertised (the commented-out `--ms-input-size-*` size-preset surface and five positioning vars dropped in the rc11 field-shell rework) and added the missing `--base-icon-plus` / `--base-icon-add` glyphs, so autocomplete no longer offers non-functional knobs and now covers the "add new" prompt icons.
+
+## What's New in v2.0.0
+
+- **"Add new" creation mode — the picker doubles as a creation tool.** Turn on `allow-add-new`
+  and a search with no matches shows a clickable "Add new …" prompt (label via `add-new-text` /
+  `getAddNewTextCallback`). Choosing it (click, Enter, or arrow-to-focus) fires a new bubbling
+  `add` event; `addNewCallback` creates the option and is **async and cancelable** (return
+  `null`/`undefined` to abort after a confirm dialog or server round-trip) and may return a
+  **rich option** that renders like any other. While it runs the prompt shows a spinner +
+  `add-new-pending-text`. Creation also works with no callback — handle it entirely off the `add`
+  event. See `examples-events-callbacks.html` §EV4b/EV4c.
+
+- **Scroll-to imperative API — jump to any option or group.** New `scrollToIndex()` /
+  `scrollToValue()` / `scrollToGroup()` on the element and picker bring a row into view — pair with
+  `open()` for an "open + jump" gesture. Mode-aware (virtual scroll, tree, mobile fullscreen sheet),
+  they align to the top by default (`{ block: 'center' }` to center) and return `false` when the
+  target isn't in the current filtered list. A companion public `clearSearch()` reveals a
+  filtered-out option so you can then scroll to it, plus a `searchText` getter and a `search(term)`
+  method to read and programmatically drive the query. See §BU06b, §VS03, §TR09b.
+
+- **Checkbox check/dash + filter funnel now flow from the shared `--base-icon-*` contract.** The
+  checkmark and indeterminate dash are now `currentColor` mask glyphs (not CSS-border shapes) reading
+  `--base-icon-check` / `--base-icon-indeterminate`, and the search-mode funnel reads
+  `--base-icon-filter` — so one base override reskins them across every Keenmate component. Inline
+  Lucide fallbacks keep the default look unchanged.
+
+- **`--ms-rem` now bridges to the shared `--base-rem` knob.** The global sizing unit resolves
+  `var(--base-rem, 10px)`, so a theme that sets `--base-rem` rescales the whole component from one
+  variable (the `10px` fallback and per-instance overrides still work with no base layer loaded).
+
+- **Fixed: the count-chip clear ✕ and popover close ✕ vanished on hover.** Both derived their hover
+  background *and* glyph colour from the same accent, so the ✕ melted into its own hover state
+  (fully invisible on near-white accents like Minimal dark). They now fill with a solid accent
+  background and flip the glyph to the on-accent colour, matching the badge remove button.
+
+## Demos & docs
+
+- 🚀 [Live demo](https://web-multiselect.keenmate.dev)
+- 📘 [Usage / API reference](./docs/usage.md) — attributes, properties, methods, events.
+- 🎨 [Theming](./docs/theming.md) — `--ms-*` variables, dark mode, cascade layers, Theme Designer integration.
+- 📚 [Examples / cookbook](./docs/examples.md) — rich content, async search, virtual scroll, custom rendering, forms.
+- ♿ [Accessibility](./docs/accessibility.md) — keyboard model, ARIA labels, focus behavior.
+
+## Install
+
+```bash
+npm install @keenmate/web-multiselect
+```
+
+## Quick start
+
+**Declarative — no JavaScript required:**
+
+```html
+<script type="module">
+  import '@keenmate/web-multiselect';
+</script>
+
+<web-multiselect placeholder="Pick a country">
+  <option value="cz">Czech Republic</option>
+  <option value="sk">Slovakia</option>
+  <option value="at">Austria</option>
+</web-multiselect>
+```
+
+**Programmatic — dynamic data + events:**
+
+```html
+<web-multiselect id="picker" search-placeholder="Search…"></web-multiselect>
+
+<script type="module">
+  import '@keenmate/web-multiselect';
+
+  const picker = document.getElementById('picker');
+  picker.options = [
+    { value: 'js', label: 'JavaScript', icon: '🟨' },
+    { value: 'ts', label: 'TypeScript', icon: '🔷' },
+    { value: 'py', label: 'Python', icon: '🐍' }
+  ];
+
+  picker.addEventListener('change', (e) => {
+    console.log('Selected:', e.detail.selectedValues);
+  });
+</script>
+```
+
+See [docs/usage.md](./docs/usage.md) for the full API and [docs/examples.md](./docs/examples.md) for advanced patterns (async data, virtual scrolling, custom rendering, form integration).
+
+## Editor IntelliSense
+
+The package ships editor metadata so you get autocomplete and hover docs for the
+element's attributes, events, and all `--ms-*` CSS custom properties. All of it is
+generated from the component's source on every build, so it never drifts.
+
+- **JetBrains** (WebStorm / IntelliJ) — works automatically. The IDE discovers
+  `web-types.json` via the `web-types` field in `package.json`; no setup needed.
+- **VS Code** — the data files ship but VS Code doesn't auto-discover them from a
+  dependency, so point your workspace at them once in `.vscode/settings.json`:
+
+  ```json
+  {
+    "html.customData": [
+      "./node_modules/@keenmate/web-multiselect/vscode.html-custom-data.json"
+    ],
+    "css.customData": [
+      "./node_modules/@keenmate/web-multiselect/vscode.css-custom-data.json"
+    ]
+  }
+  ```
+
+  `html.customData` powers tag/attribute completion on `<web-multiselect>`;
+  `css.customData` powers completion for the `--ms-*` theming variables. Reload
+  the window after adding them.
+
+## Browser support
+
+Modern evergreen browsers — anything with native `customElements`, Shadow DOM, and CSS `@layer` support:
+
+- Chrome / Edge 99+
+- Firefox 97+
+- Safari 15.4+
+
+No polyfills are shipped. SSR-safe: the module imports without crashing in Node, but renders only after hydration in the browser.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server (HMR)
+npm run dev
+
+# Build for production
+npm run build
+
+# Create package tarball
+npm run package
+
+# Run tests
+npm run test:unit   # Vitest (happy-dom) — fast logic checks
+npm run test:e2e    # Playwright (browser) — interaction/visual
+npm test            # both
+```
+
+## Code structure
+
+Follows the BlissFramework four-layer web-component layout:
+
+| Layer | File | Role |
+|-------|------|------|
+| Element | `src/web-component.ts` | `MultiSelectElement` — custom-element I/O wrapper, `ATTRIBUTE_TABLE`-driven |
+| Logic | `src/multiselect.ts` | `WebMultiSelect<T>` — framework-agnostic core |
+| Service | `src/tooltip.ts`, `src/virtual-scroll.ts` | single-purpose helpers (`Tooltip`, `VirtualScroll`) |
+| Side | `src/types.ts`, `src/logger.ts`, `src/vendor/` | types, logging, vendored deps |
+
+Two deviations from the canonical shape, both intentional:
+
+- **`MultiSelectElement extends BaseElement`, not `HTMLElement` directly.** `BaseElement` is a local `const` resolving to `HTMLElement` in the browser and to a stub class under SSR (`typeof HTMLElement === 'undefined'`), so importing the module in Node doesn't throw. A literal `grep "extends HTMLElement"` structure check will not match here by design.
+- **`src/vite-env.d.ts`** is a standard Vite ambient-types file, not part of the four-layer model.
+
+## License
+
+MIT — see [LICENSE](./LICENSE).
+
+## Built with BlissFramework
+
+Follows the [BlissFramework component guidelines](https://blissframework.dev/) for structure, theming, color-scheme, and accessibility. Per-check verifications run via `/validate-web-component`.
+
+## Credits
+
+Created by [Keenmate](https://github.com/keenmate) as part of the Pure Admin design system.

package/component-variables.manifest.json

@@ -49,11 +49,29 @@
     { "name": "base-border-radius-sm", "required": false, "usage": "Small radius (badges, buttons)" },
     { "name": "base-border-radius-md", "required": false, "usage": "Medium radius (input)" },
     { "name": "base-border-radius-lg", "required": false, "usage": "Large radius (dropdown)" },
-    { "name": "base-input-size-xs-height", "required": false, "usage": "Extra small input height (multiplier)" },
-    { "name": "base-input-size-sm-height", "required": false, "usage": "Small input height (multiplier)" },
-    { "name": "base-input-size-md-height", "required": false, "usage": "Medium input height (multiplier)" },
-    { "name": "base-input-size-lg-height", "required": false, "usage": "Large input height (multiplier)" },
-    { "name": "base-input-size-xl-height", "required": false, "usage": "Extra large input height (multiplier)" }
+    { "name": "base-input-size-md-height", "required": false, "usage": "Medium input height multiplier (consumed by --ms-input-height)" },
+    { "name": "base-rem", "required": false, "usage": "Global sizing unit — drives --ms-rem (falls back to 10px); scales the whole component" },
+    { "name": "base-ease-standard", "required": false, "usage": "Standard easing curve (drives --ms-easing-snappy)" },
+    { "name": "base-checkbox-border-color", "required": false, "usage": "Option checkbox border color" },
+    { "name": "base-input-clear-color", "required": false, "usage": "Inline field-clear (✕) icon color" },
+    { "name": "base-input-clear-bg-hover", "required": false, "usage": "Inline field-clear (✕) hover background" },
+    { "name": "base-icon-chevron", "required": false, "usage": "Shared chevron glyph (toggle indicator + fullscreen pager); inline Lucide SVG fallback" },
+    { "name": "base-icon-clear", "required": false, "usage": "Inline field-clear (✕) glyph; falls back to --ms-icon-remove" },
+    { "name": "base-icon-remove", "required": false, "usage": "Badge-remove glyph; falls back to base-icon-close then inline Lucide SVG" },
+    { "name": "base-icon-close", "required": false, "usage": "Generic close glyph (fallback for badge-remove)" },
+    { "name": "base-icon-search", "required": false, "usage": "Search glyph; inline Lucide SVG fallback" },
+    { "name": "base-icon-filter", "required": false, "usage": "Funnel/filter glyph (fullscreen search-mode toggle); chained by --ms-icon-filter; inline Lucide SVG fallback" },
+    { "name": "base-icon-plus", "required": false, "usage": "Plus glyph for the \"add new\" empty-state prompt; chained by --ms-icon-add-new; falls back to base-icon-add then inline Lucide SVG" },
+    { "name": "base-icon-add", "required": false, "usage": "Alternate add glyph (fallback for base-icon-plus in the \"add new\" prompt)" },
+    { "name": "base-icon-check", "required": false, "usage": "Checkbox/option checkmark glyph; chained by --ms-icon-check; inline Lucide SVG fallback" },
+    { "name": "base-icon-check-size", "required": false, "usage": "mask-size for the checkbox glyph inside its box (shared with pure-admin's .pa-checkbox); default 68%. Also sizes the indeterminate dash (shares the mask box)" },
+    { "name": "base-icon-indeterminate", "required": false, "usage": "Tri-state (partial) checkbox dash glyph; chained by --ms-icon-indeterminate; inline Lucide SVG fallback" },
+    { "name": "base-danger-bg", "required": false, "usage": "Error message background" },
+    { "name": "base-danger-color", "required": false, "usage": "Error message text color" },
+    { "name": "base-warning-bg", "required": false, "usage": "Warning message background" },
+    { "name": "base-warning-color", "required": false, "usage": "Warning message text color" },
+    { "name": "base-success-bg", "required": false, "usage": "Success message background" },
+    { "name": "base-success-color", "required": false, "usage": "Success message text color" }
   ],
   "componentVariables": [
     { "name": "ms-rem", "category": "sizing", "usage": "Base sizing unit for proportional scaling (default: 10px)" },
@@ -85,41 +103,17 @@
     { "name": "ms-input-border-focus", "category": "input", "usage": "Input border when focused" },
     { "name": "ms-input-placeholder-color", "category": "input", "usage": "Placeholder text color" },
     { "name": "ms-input-bg-disabled", "category": "input", "usage": "Disabled input background" },
-    { "name": "ms-input-padding", "category": "input", "usage": "Input padding" },
-    { "name": "ms-input-padding-right", "category": "input", "usage": "Input right padding (for toggle)" },
     { "name": "ms-input-height", "category": "input", "usage": "Input height" },
     { "name": "ms-input-font-size", "category": "input", "usage": "Input font size" },
     { "name": "ms-input-border-width", "category": "input", "usage": "Input border width" },
     { "name": "ms-input-border-radius", "category": "input", "usage": "Input border radius" },
     { "name": "ms-input-text", "category": "input", "usage": "Input text color" },
 
-    { "name": "ms-input-size-xs-font", "category": "input-size", "usage": "XS size font" },
-    { "name": "ms-input-size-xs-padding-v", "category": "input-size", "usage": "XS vertical padding" },
-    { "name": "ms-input-size-xs-padding-h", "category": "input-size", "usage": "XS horizontal padding" },
-    { "name": "ms-input-size-xs-height", "category": "input-size", "usage": "XS input height" },
-    { "name": "ms-input-size-sm-font", "category": "input-size", "usage": "SM size font" },
-    { "name": "ms-input-size-sm-padding-v", "category": "input-size", "usage": "SM vertical padding" },
-    { "name": "ms-input-size-sm-padding-h", "category": "input-size", "usage": "SM horizontal padding" },
-    { "name": "ms-input-size-sm-height", "category": "input-size", "usage": "SM input height" },
-    { "name": "ms-input-size-md-font", "category": "input-size", "usage": "MD size font" },
-    { "name": "ms-input-size-md-padding-v", "category": "input-size", "usage": "MD vertical padding" },
-    { "name": "ms-input-size-md-padding-h", "category": "input-size", "usage": "MD horizontal padding" },
-    { "name": "ms-input-size-md-height", "category": "input-size", "usage": "MD input height" },
-    { "name": "ms-input-size-lg-font", "category": "input-size", "usage": "LG size font" },
-    { "name": "ms-input-size-lg-padding-v", "category": "input-size", "usage": "LG vertical padding" },
-    { "name": "ms-input-size-lg-padding-h", "category": "input-size", "usage": "LG horizontal padding" },
-    { "name": "ms-input-size-lg-height", "category": "input-size", "usage": "LG input height" },
-    { "name": "ms-input-size-xl-font", "category": "input-size", "usage": "XL size font" },
-    { "name": "ms-input-size-xl-padding-v", "category": "input-size", "usage": "XL vertical padding" },
-    { "name": "ms-input-size-xl-padding-h", "category": "input-size", "usage": "XL horizontal padding" },
-    { "name": "ms-input-size-xl-height", "category": "input-size", "usage": "XL input height" },
 
-    { "name": "ms-toggle-right", "category": "toggle", "usage": "Toggle icon right position" },
     { "name": "ms-toggle-color", "category": "toggle", "usage": "Toggle icon color" },
     { "name": "ms-toggle-icon-color", "category": "toggle", "usage": "Toggle icon color (semantic)" },
     { "name": "ms-toggle-icon-color-open", "category": "toggle", "usage": "Toggle icon color when open" },
 
-    { "name": "ms-counter-offset", "category": "counter", "usage": "Counter badge offset" },
     { "name": "ms-counter-padding", "category": "counter", "usage": "Counter badge padding" },
     { "name": "ms-counter-bg", "category": "counter", "usage": "Counter badge background" },
     { "name": "ms-counter-color", "category": "counter", "usage": "Counter badge text color" },
@@ -280,6 +274,9 @@
     { "name": "ms-badge-remove-bg-hover", "category": "badge", "usage": "Badge remove button hover background" },
     { "name": "ms-badge-remove-box-shadow-focus", "category": "badge", "usage": "Badge remove button focus shadow" },
     { "name": "ms-icon-remove", "category": "badge", "usage": "Remove icon as CSS url() to a mask-friendly SVG; color comes from currentColor" },
+    { "name": "ms-icon-filter", "category": "icon", "usage": "Funnel glyph (fullscreen search-mode toggle); chains to --base-icon-filter" },
+    { "name": "ms-icon-check", "category": "checkbox", "usage": "Checkmark glyph (mask) for a checked checkbox/option; chains to --base-icon-check" },
+    { "name": "ms-icon-indeterminate", "category": "checkbox", "usage": "Dash glyph (mask) for a tri-state/partial checkbox; chains to --base-icon-indeterminate" },
     { "name": "ms-badge-counter-bg", "category": "badge", "usage": "Counter badge background" },
     { "name": "ms-badge-counter-border", "category": "badge", "usage": "Counter badge border" },
     { "name": "ms-badge-counter-border-color", "category": "badge", "usage": "Counter badge border color" },
@@ -404,7 +401,6 @@
     { "name": "ms-debug-stats-border-radius", "category": "debug", "usage": "Debug stats nested panel corner radius" },
     { "name": "ms-debug-bullet-color", "category": "debug", "usage": "Debug stat bullet marker color" },
 
-    { "name": "ms-transform-center-y", "category": "transform", "usage": "Center Y transform" },
     { "name": "ms-transform-rotate-180", "category": "transform", "usage": "180 degree rotation" },
     { "name": "ms-transform-scale-hover", "category": "transform", "usage": "Hover scale transform" },
     { "name": "ms-transform-scale-active", "category": "transform", "usage": "Active scale transform" },