npm - @keenmate/web-multiselect - Versions diffs - 2.0.0 → 2.1.0 - Mend

@keenmate/web-multiselect 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/README.md +172 -208
package/component-variables.manifest.json +5 -30
package/custom-elements.json +86 -103
package/dist/index.d.ts +28 -0
package/dist/multiselect.js +859 -804
package/dist/multiselect.umd.js +11 -11
package/dist/style.css +1 -1
package/docs/examples.md +69 -0
package/docs/theming.md +7 -7
package/docs/usage.md +4 -0
package/package.json +5 -3
package/src/css/base.css +10 -0
package/src/css/options.css +9 -4
package/src/css/variables.css +969 -964
package/vscode.css-custom-data.json +5 -125
package/vscode.html-custom-data.json +6 -1
package/web-types.json +33 -84

package/src/css/variables.css CHANGED Viewed

@@ -1,964 +1,969 @@
-/* ==============================================================================
-   CSS CUSTOM PROPERTIES (:host level)
-   ==============================================================================
-   This file defines all CSS custom properties at the :host level, making them:
-   - Inspectable in browser DevTools
-   - Overridable from outside Shadow DOM
-   - Self-documenting in compiled CSS
-   Usage from outside Shadow DOM:
-     multi-select {
-       --ms-accent-color: #10b981;
-       --ms-input-border-radius: 0.5rem;
-     }
-   ============================================================================== */
-:host {
-  /* Block layout — the wrapper-host pattern paints chrome via .ms__input,
-     but :host still needs an explicit display so consumers placing the
-     element in inline contexts see the expected layout. */
-  display: block;
-  /* ==========================================================================
-     COLOR SCHEME
-     ==========================================================================
-     `color-scheme` is INHERITED on this element — we deliberately do NOT
-     declare it on `:host`. Reason: every hardcoded color fallback below is
-     wrapped in `light-dark(<light>, <dark>)`, which picks one of the two
-     based on the host's used color-scheme. Declaring `color-scheme: light dark`
-     here would *override* whatever the consumer's app declared on <html>,
-     <body>, or an ancestor — flipping forced-dark apps back to "follow OS",
-     and breaking visual coherence with the surrounding page.
-     By letting it inherit:
-       - dhl-style apps that set `body { color-scheme: dark }` propagate it
-         into our shadow DOM unchanged, and `light-dark()` resolves to dark.
-       - apps that set `html { color-scheme: light dark }` get OS-preference
-         switching, end-to-end.
-       - apps that declare nothing get the historical default (light), same
-         as before this fallback set was introduced — no behavior change.
-     Consumers who want explicit per-multiselect control can still set
-     `style="color-scheme: dark"` on the <web-multiselect> element.
-     ========================================================================== */
-  /* ==========================================================================
-     BASE SIZING UNIT
-     ==========================================================================
-     All sizing values are based on this unit for consistent scaling.
-     Bridges to the shared --base-rem knob so a theme scales every KeenMate
-     component from one variable; falls back to 10px when no base layer is loaded.
-     Default: 10px produces standard pixel values
-     Pure Admin: Set --base-rem to 1rem (inherits from html { font-size: 10px })
-     Custom: Set --base-rem (or --ms-rem for this component only) to scale all sizes */
-  --ms-rem: var(--base-rem, 10px);
-  /* ==========================================================================
-     FONT FAMILY (set at :host so all shadow DOM content inherits)
-     ========================================================================== */
-  font-family: var(--ms-font-family, var(--base-font-family, inherit));
-  /* ==========================================================================
-     COLORS & THEME
-     ==========================================================================
-     Color variables follow this priority chain:
-       1. External override: --ms-accent-color: #custom
-       2. Base theme value: var(--base-accent-color)
-       3. Hardcoded default fallback */
-  /* Accent Colors */
-  --ms-accent-color: var(--base-accent-color, #3b82f6);
-  --ms-accent-color-hover: var(--base-accent-color-hover, #2563eb);
-  --ms-accent-color-active: var(--base-accent-color-active, #1d4ed8);
-  /* Accent Color Light Variants (for backgrounds)
-     Dark variants are muted dark-blue tints that read like "accent-tinted dark surface" rather than
-     "near-white", keeping badge / +X more / popover-header backgrounds visible on a dark page. */
-  --ms-accent-color-light: var(--base-accent-color-light, light-dark(#eff6ff, #1e3a5f));
-  --ms-accent-color-light-hover: var(--base-accent-color-light-hover, light-dark(#e0f2fe, #264a73));
-  /* Text Color Levels (FluentUI-style hierarchy)
-     Light mode = the original dark-on-light palette (#111827 → #a0a3a9).
-     Dark mode  = the same hierarchy inverted (#f5f5f5 → #737373) so heading/body/secondary/disabled
-     keep the same relative contrast steps. text-color-on-accent stays white in both modes — the
-     accent color is the same blue in both, and white-on-blue reads in both. */
-  --ms-text-color-1: var(--base-text-color-1, light-dark(#111827, #f5f5f5));
-  --ms-text-color-2: var(--base-text-color-2, light-dark(#353b47, #d4d4d4));
-  --ms-text-color-3: var(--base-text-color-3, light-dark(#6b7280, #a3a3a3));
-  --ms-text-color-4: var(--base-text-color-4, light-dark(#a0a3a9, #737373));
-  --ms-text-color-on-accent: var(--base-text-color-on-accent, #ffffff);
-  /* Legacy aliases (for backward compatibility) */
-  --ms-text-primary: var(--ms-text-color-1);
-  --ms-text-secondary: var(--ms-text-color-3);
-  /* Background Colors
-     --ms-primary-bg paints hover/focus states (option hover, action-button hover, counter
-     hover, etc.); --ms-primary-bg-hover is one step stronger (selected-active, counter badge).
-     The color-mix fallback keeps the hover visible on dark themes — a flat var(--base-main-bg)
-     substrate used to make hover collapse onto the panel background. */
-  --ms-primary-bg: var(--base-hover-bg, color-mix(in srgb, var(--ms-text-color-1) 8%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));
-  --ms-primary-bg-hover: var(--base-active-bg, color-mix(in srgb, var(--ms-text-color-1) 14%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));
-  /* Border Base Variables */
-  /* Default border colour. The previous fallbacks (#e5e7eb light / #3a3a3a dark) were very
-     low contrast against white / near-black surfaces — the 1px input/panel edge nearly
-     vanished, especially on phones. Bumped to a clearly-visible gray on each side (still
-     soft, not harsh). Consumers with `--base-border-color` set are unaffected. */
-  --ms-border-color: var(--base-border-color, light-dark(#cbd5e1, #52525b));
-  --ms-border: var(--base-border, 1px solid var(--ms-border-color));
-  /* ==========================================================================
-     SEMANTIC VARIABLES - Component-Specific Theming
-     ==========================================================================
-     Pattern: --ms-{component}-{property}-{state}
-     Example: --ms-input-bg, --ms-option-text-color-hover */
-  /* Input Component Semantic Variables */
-  --ms-input-bg: var(--base-input-bg, light-dark(#ffffff, #1a1a1a));
-  --ms-input-color: var(--base-input-color, var(--ms-text-color-1));
-  --ms-input-border: var(--base-input-border, 1px solid var(--ms-border-color));
-  --ms-input-border-hover: var(--base-input-border-hover, 1px solid var(--ms-accent-color));
-  --ms-input-border-focus: var(--base-input-border-focus, 1px solid var(--ms-accent-color));
-  --ms-input-placeholder-color: var(--base-input-placeholder-color, var(--ms-text-color-4));
-  --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
-  /* Toggle Icon Semantic Variables */
-  --ms-toggle-icon-color: var(--ms-text-color-3);
-  --ms-toggle-icon-color-open: var(--ms-text-color-3);
-  --ms-toggle-icon-size: calc(1.6 * var(--ms-rem));
-  /* Toggle chevron rotation, closed vs open. Defaults orient the directional right-pointing
-     --base-icon-chevron (90° → points down when closed, -90° → up when open). Override BOTH
-     when a theme supplies a PRE-ORIENTED chevron glyph: `0deg` / `0deg` for a static glyph,
-     or `0deg` / `180deg` for a down-glyph that flips up on open. */
-  --ms-toggle-rotate-closed: 90deg;
-  --ms-toggle-rotate-open: -90deg;
-  /* Counter Badge (in Input) Semantic Variables */
-  --ms-counter-badge-bg: var(--ms-accent-color);
-  --ms-counter-badge-bg-hover: var(--ms-accent-color-hover);
-  --ms-counter-badge-color: var(--ms-text-color-on-accent);
-  /* Floating Hint Semantic Variables */
-  --ms-hint-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
-  --ms-hint-color: var(--ms-text-color-4);
-  --ms-hint-border-color: var(--ms-border-color);
-  /* Dropdown Semantic Variables */
-  --ms-dropdown-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a)));
-  --ms-dropdown-text-color: var(--ms-text-color-1);
-  --ms-dropdown-border-color: var(--ms-border-color);
-  --ms-dropdown-box-shadow-semantic: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
-  /* Dropdown Actions Semantic Variables */
-  --ms-actions-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
-  --ms-actions-border-color: var(--ms-border-color);
-  /* Action Button Semantic Variables */
-  --ms-action-button-bg: transparent;
-  --ms-action-button-bg-hover: var(--ms-primary-bg);
-  --ms-action-button-border-color: var(--ms-border-color);
-  --ms-action-button-border-color-hover: var(--ms-accent-color);
-  --ms-action-button-color: var(--ms-text-color-1);
-  /* Group Semantic Variables */
-  --ms-group-border-color: var(--ms-border-color);
-  --ms-group-label-color: var(--ms-text-color-3);
-  /* Option Semantic Variables */
-  --ms-option-text-color: var(--ms-text-color-1);
-  --ms-option-bg: transparent;
-  --ms-option-bg-hover: var(--ms-primary-bg);
-  --ms-option-color-hover: inherit;
-  --ms-option-bg-focused: var(--ms-primary-bg);
-  --ms-option-color-focused: inherit;
-  --ms-option-outline-color-focused: var(--ms-accent-color);
-  --ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
-  --ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
-  --ms-option-color-matched: inherit;
-  --ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
-  /* Option Content Semantic Variables */
-  --ms-option-title-color: var(--ms-text-color-1);
-  --ms-option-subtitle-color: var(--ms-text-color-3);
-  --ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
-  --ms-option-mark-color: inherit;
-  /* Empty/Loading State Semantic Variables */
-  --ms-empty-color: var(--ms-text-color-3);
-  --ms-loading-color: var(--ms-text-color-3);
-  /* Badge Semantic Variables */
-  --ms-badge-bg: var(--ms-accent-color-light);
-  /* Hover DEEPENS the badge's OWN rest background toward its OWN text colour.
-     Deliberately self-referential: NOT --base-hover-bg (a generic surface token →
-     accent pill flipped near-white in dark/neon), and NOT --ms-accent-color-light-hover
-     (a separate accent-tint token themes forget to set when they change the accent →
-     a black brutalist pill fell back to the hardcoded blue tint on hover). Mixing 12%
-     of the text colour into the rest bg is a subtle, always-readable nudge that follows
-     whatever bg/text pair a theme sets. */
-  --ms-badge-bg-hover: color-mix(in srgb, var(--ms-badge-bg) 88%, var(--ms-badge-text-color) 12%);
-  --ms-badge-bg-active: var(--ms-accent-color-light-hover);
-  /* Badge Text Semantic Variables */
-  --ms-badge-text-bg: var(--ms-accent-color-light);
-  --ms-badge-text-color: var(--ms-accent-color);
-  --ms-badge-text-bg-hover: color-mix(in srgb, var(--ms-badge-text-bg) 88%, var(--ms-badge-text-color) 12%);
-  --ms-badge-text-color-hover: var(--ms-badge-text-color);
-  /* Badge Remove Button Semantic Variables */
-  --ms-badge-remove-bg: var(--ms-accent-color);
-  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
-  --ms-badge-remove-color: var(--ms-text-color-on-accent);
-  /* Badge Counter Variant Semantic Variables
-     Neutral/gray styling to distinguish from accent-coloured selection badges.
-     Self-contained: the pill is a translucent tint of the strong text colour, and
-     text/glyph use the text-colour hierarchy — so contrast holds even when a theme
-     omits --base-main-bg (the old --ms-primary-bg-hover chain collapsed to
-     light-on-light there). The counter must NOT inherit the accent-coloured hover
-     of regular badges — its text stays neutral; only the surface deepens. */
-  --ms-badge-counter-border-color: var(--ms-border-color);
-  --ms-badge-counter-text-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent);
-  --ms-badge-counter-text-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent);
-  --ms-badge-counter-text-color: var(--ms-text-color-1);
-  --ms-badge-counter-text-color-hover: var(--ms-text-color-1);
-  --ms-badge-counter-remove-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent);
-  --ms-badge-counter-remove-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent);
-  /* Neutral glyph (text-3 at rest → text-1 on hover), NOT white-on-accent — the old
-     on-accent glyph vanished once the hover bg became a light text colour. */
-  --ms-badge-counter-remove-color: var(--ms-text-color-3);
-  --ms-badge-counter-remove-color-hover: var(--ms-text-color-1);
-  /* Count Display Semantic Variables */
-  --ms-counter-wrapper-bg: transparent;
-  --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
-  --ms-counter-wrapper-border-color: var(--ms-border-color);
-  --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
-  --ms-count-text-color: var(--ms-text-color-1);
-  --ms-count-clear-bg: transparent;
-  --ms-count-clear-bg-hover: var(--ms-accent-color);
-  --ms-count-clear-color: var(--ms-text-color-3);
-  --ms-count-clear-color-hover: var(--ms-text-color-on-accent);
-  /* Tooltip Semantic Variables
-     Tooltips invert relative to the page: dark tooltip on light page, light tooltip on dark page.
-     This keeps the tooltip distinct from its surrounding surface in both modes. */
-  --ms-tooltip-bg: var(--base-tooltip-bg, var(--base-inverse-bg, light-dark(#333333, #f5f5f5)));
-  --ms-tooltip-text-color: var(--base-tooltip-text-color, light-dark(#ffffff, #1a1a1a));
-  /* Selected Popover Semantic Variables */
-  --ms-selected-popover-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a)));
-  --ms-selected-popover-border-color: var(--ms-border-color);
-  --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
-  --ms-selected-popover-header-color: var(--ms-text-color-1);
-  --ms-selected-popover-header-border-color: var(--ms-border-color);
-  --ms-selected-popover-close-bg: transparent;
-  --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
-  --ms-selected-popover-close-color: var(--ms-text-color-3);
-  --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent);
-  /* ==========================================================================
-     INPUT COMPONENT
-     ========================================================================== */
-  --ms-input-padding-h: calc(1.2 * var(--ms-rem));       /* field shell inline padding */
-  --ms-input-gap: calc(0.6 * var(--ms-rem));             /* gap between input + trailing decorations */
-  --ms-input-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));
-  --ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-input-border-width: 1px;
-  --ms-input-border-radius: var(--ms-border-radius-md);
-  --ms-input-text: var(--ms-text-color-1);
-  /* Prefers the shared --base token (light-dark aware, so it adapts on dark themes);
-     the flat gray is the standalone fallback. */
-  --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
-  /* ==========================================================================
-     INPUT SIZE VARIANTS — currently unused (commented out)
-     ==========================================================================
-     Preset size tiers (xs/sm/md/lg/xl) for the input. Read only by the
-     .ms__input--* classes in controls.css, which nothing toggles (no `size`
-     attribute), so this whole chain is inert. Commented out to drop dead theming
-     surface — kept, not deleted, in case a future `size` attribute turns it into a
-     named-preset API; no case has needed it yet. Size via --ms-rem (global) or the
-     individual --ms-input-* vars (targeted) instead. Heights reference
-     --base-input-size-*-height for cross-component consistency (px in parens):
-  --ms-input-size-xs-font: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-input-size-xs-padding-v: calc(0.4 * var(--ms-rem));
-  --ms-input-size-xs-padding-h: calc(0.8 * var(--ms-rem));
-  --ms-input-size-xs-height: calc(var(--base-input-size-xs-height, 3.1) * var(--ms-rem));  (31px)
-  --ms-input-size-sm-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-input-size-sm-padding-v: calc(0.5 * var(--ms-rem));
-  --ms-input-size-sm-padding-h: calc(1.0 * var(--ms-rem));
-  --ms-input-size-sm-height: calc(var(--base-input-size-sm-height, 3.3) * var(--ms-rem));  (33px)
-  --ms-input-size-md-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-input-size-md-padding-v: calc(0.8 * var(--ms-rem));
-  --ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem));
-  --ms-input-size-md-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));  (35px)
-  --ms-input-size-lg-font: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
-  --ms-input-size-lg-padding-v: calc(1.0 * var(--ms-rem));
-  --ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem));
-  --ms-input-size-lg-height: calc(var(--base-input-size-lg-height, 3.8) * var(--ms-rem));  (38px)
-  --ms-input-size-xl-font: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
-  --ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem));
-  --ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem));
-  --ms-input-size-xl-height: calc(var(--base-input-size-xl-height, 4.1) * var(--ms-rem));  (41px)
-  */
-  /* ==========================================================================
-     TOGGLE ICON
-     ========================================================================== */
-  --ms-toggle-color: var(--ms-text-color-3);
-  --ms-transform-rotate-180: 180deg;
-  /* ==========================================================================
-     INPUT CLEAR (✕)
-     ========================================================================== */
-  --ms-input-clear-size: calc(2.4 * var(--ms-rem));
-  --ms-input-clear-icon-size: calc(1.4 * var(--ms-rem));
-  --ms-input-clear-color: var(--base-input-clear-color, var(--ms-text-secondary));
-  --ms-input-clear-bg-hover: var(--base-input-clear-bg-hover, var(--ms-option-bg-matched, transparent));
-  --ms-input-clear-border-radius: var(--ms-border-radius); /* matches the input; square when radius is 0 */
-  /* ==========================================================================
-     COUNT BADGE (in input)
-     ========================================================================== */
-  --ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem));
-  --ms-counter-bg: var(--ms-accent-color);
-  --ms-counter-color: var(--ms-text-color-on-accent);
-  --ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-counter-font-weight: var(--base-font-weight-semibold, 600);
-  --ms-counter-border-radius: var(--ms-border-radius-sm);
-  --ms-counter-bg-hover: var(--ms-accent-color-hover);
-  --ms-transform-scale-hover: 1.1;
-  /* ==========================================================================
-     FLOATING HINT
-     ========================================================================== */
-  --ms-hint-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-hint-border: 1px solid var(--ms-hint-border-color);
-  --ms-hint-border-radius: var(--ms-border-radius-lg);
-  --ms-hint-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  /* ==========================================================================
-     DROPDOWN
-     ========================================================================== */
-  --ms-dropdown-border: var(--base-dropdown-border, 1px solid var(--ms-dropdown-border-color));
-  --ms-dropdown-border-radius: var(--ms-border-radius-lg);
-  /* Inner content clip radius — a hair tighter than the panel so a highlighted
-     first/last row (or the sticky Select-All/Clear actions bar) follows the panel's
-     rounded corners instead of its square background bleeding ~1px past the rounded
-     border (the classic rounded-parent + bordered-box corner artifact). Assumes the
-     default 1px --ms-dropdown-border; if you theme a thicker border, override this to
-     match (panel radius − border width). Clamped at 0 so a squared panel stays square. */
-  --ms-dropdown-inner-border-radius: max(0px, calc(var(--ms-dropdown-border-radius) - 1px));
-  /* Prefers the shared --base token (light-dark aware — deepens on dark themes); the
-     flat two-layer shadow is the standalone fallback. */
-  --ms-dropdown-box-shadow: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
-  /* Live input width, published by JS each positioning frame. It's the only panel
-     dimension CSS can't measure itself, so panels that "match the input" read it. */
-  --ms-input-current-width: auto;
-  /* Options dropdown width. Defaults to the input width; override at app/theme level
-     (web-multiselect { --ms-dropdown-width: 60rem }) or per-instance via the
-     dropdown-width attribute. dropdown-min-width / dropdown-max-width still clamp it. */
-  --ms-dropdown-width: var(--ms-input-current-width);
-  --ms-options-max-height: calc(32 * var(--ms-rem));
-  --ms-option-color: var(--ms-text-color-1);
-  --ms-z-index-dropdown: 9999;
-  --ms-z-index-sticky: 1;
-  /* ==========================================================================
-     FULLSCREEN OVERLAY (touch / phone presentation)
-     Used when a panel is presented as a full-viewport overlay — the options
-     dropdown (`.ms__dropdown--fullscreen`) AND the selected-items popover
-     (`.ms__selected-popover--fullscreen`). Both share ONE header-bar + close-
-     button treatment so the mobile view is consistent. Driven by the element's
-     environmentChanged hook on phones. Everything defaults to the dropdown's own
-     theming so a fullscreen panel looks like the same component.
-     ========================================================================== */
-  --ms-z-index-fullscreen: 10001; /* above dropdown (9999) + popover/tooltip (10000) */
-  /* The truncated-label reveal is triggered from INSIDE the fullscreen overlay, so it
-     must sit above it (the plain option tooltip at 10000 renders behind the 10001 panel). */
-  --ms-z-index-fullscreen-tooltip: 10002;
-  /* Size of the phone view. Every size in the component is calc(N × --ms-rem), so the
-     fullscreen panels override --ms-rem with this to scale rows, text, checkboxes,
-     padding, header and search up together (~1.2× → comfortable ~44–48px touch rows).
-     A plain length (not calc(1.2 × --ms-rem)) so assigning it to --ms-rem on the panel
-     can't form a cyclic var() reference. Set it larger for chunkier touch targets. */
-  --ms-fullscreen-rem: 12px;
-  /* These overlay-only vars are sized in --ms-fullscreen-rem (NOT --ms-rem): a custom
-     property bakes its var() at its declaration site, so declaring them here against
-     --ms-fullscreen-rem gives the enlarged phone-view sizes wherever they're consumed. */
-  --ms-fullscreen-bg: var(--ms-dropdown-bg);
-  --ms-fullscreen-text-color: var(--ms-dropdown-text-color);
-  --ms-fullscreen-header-bg: var(--ms-dropdown-bg);
-  --ms-fullscreen-header-border: 1px solid var(--ms-dropdown-border-color);
-  --ms-fullscreen-header-gap: calc(0.8 * var(--ms-fullscreen-rem));
-  /* Split into v/h so the close button can reclaim this exact padding with negative
-     margins to reach the sheet's physical corner (see .ms__fullscreen-close). */
-  --ms-fullscreen-header-padding-v: calc(0.8 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-header-padding-h: calc(1.2 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-header-padding: var(--ms-fullscreen-header-padding-v) var(--ms-fullscreen-header-padding-h);
-  --ms-fullscreen-header-min-height: calc(5.6 * var(--ms-fullscreen-rem)); /* consistent bar height: search vs title */
-  --ms-fullscreen-title-font-size: calc(1.7 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-title-font-weight: var(--base-font-weight-semibold, 600);
-  --ms-fullscreen-search-border: var(--ms-input-border);
-  --ms-fullscreen-search-border-radius: var(--ms-input-border-radius);
-  --ms-fullscreen-search-padding: calc(0.8 * var(--ms-fullscreen-rem)) calc(1.2 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-search-font-size: calc(1.6 * var(--ms-fullscreen-rem));
-  /* Inline clear (✕) inside the fullscreen search field: a small round mask-icon
-     button pinned to the trailing edge, shown only while there's a term. The gutter
-     reserves trailing padding on the input so typed text never runs under it. */
-  --ms-fullscreen-search-clear-size: calc(2.8 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-search-clear-icon-size: calc(1.4 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-search-clear-inset: calc(0.4 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-search-clear-gutter: calc(3.4 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-search-clear-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color));
-  --ms-fullscreen-search-clear-bg-hover: var(--ms-option-bg-matched, transparent);
-  /* Leading search-mode toggle (opt-in): a small round mask-icon button at the field's
-     leading edge, sized like the clear button. Icon swaps by mode (see the [data-mode]
-     rules in floating.css). */
-  --ms-fullscreen-mode-toggle-size: calc(2.8 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-mode-toggle-icon-size: calc(1.5 * var(--ms-fullscreen-rem));
-  /* Gap between the leading toggle and the search field. Defaults to the header gap so it
-     matches the field↔close spacing on the trailing side (symmetric bar); override to
-     decouple. */
-  --ms-fullscreen-mode-toggle-gap: var(--ms-fullscreen-header-gap);
-  --ms-fullscreen-mode-toggle-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color));
-  --ms-fullscreen-mode-toggle-bg: transparent;
-  --ms-fullscreen-mode-toggle-bg-hover: var(--ms-option-bg-matched, transparent);
-  --ms-fullscreen-close-size: calc(3.6 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-close-icon-size: calc(1.6 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-close-color: var(--ms-dropdown-text-color);
-  /* Visible close chip. Defaults to a borderless, transparent, round hit-glyph (so it
-     reads as a bare ✕), but these turn it into a bordered "button" like a command-
-     palette close — e.g. --ms-fullscreen-close-border: 1px solid var(--ms-border-color);
-     --ms-fullscreen-close-border-radius: calc(0.8 * var(--ms-fullscreen-rem));
-     --ms-fullscreen-close-bg: var(--ms-input-bg);. The tap target stays larger than the
-     chip (see the ::after in floating.css), so bordering it doesn't shrink what's
-     clickable. */
-  --ms-fullscreen-close-bg: transparent;
-  --ms-fullscreen-close-border: none;
-  --ms-fullscreen-close-border-radius: 50%;
-  --ms-fullscreen-close-bg-hover: var(--ms-option-bg-matched, transparent);
-  /* Corner tap target. The visible chip stays --close-size (so it never inflates the
-     header height), but a transparent ::after extends the *hit* area into the sheet's
-     top-trailing corner — the dead header padding around a centered button was the "tap
-     here → nothing happens" zone, and the corner is the easiest place to hit.
-     --edge-nudge is a negative inline-end margin that slides the whole button (and its
-     glyph) that much closer to the physical edge. */
-  --ms-fullscreen-close-edge-nudge: calc(0.8 * var(--ms-fullscreen-rem));
-  /* Truncated-label info affordance (fullscreen only). A circled "i" revealed at the
-     trailing edge of a row whose label is clipped, so the full label is one tap away
-     on touch (where hover tooltips never fire). Sized in --ms-fullscreen-rem. */
-  --ms-fullscreen-info-size: calc(2.8 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-info-icon-size: calc(1.8 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-info-color: var(--ms-accent-color);
-  --ms-fullscreen-info-bg-hover: var(--ms-option-bg-matched, transparent);
-  /* Navigate-mode match navigator under the fullscreen search box: a muted result
-     count plus round prev/next buttons that step through matches (the touch stand-in
-     for desktop's Ctrl+Arrow). Sized in --ms-fullscreen-rem like the rest of the overlay. */
-  --ms-fullscreen-nav-gap: calc(0.6 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-nav-padding-top: calc(0.6 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-nav-count-font-size: calc(1.3 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-nav-count-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color));
-  --ms-fullscreen-nav-btn-size: calc(3.2 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-nav-btn-icon-size: calc(1.6 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-nav-btn-color: var(--ms-dropdown-text-color);
-  --ms-fullscreen-nav-btn-bg: var(--ms-option-bg-matched, transparent);
-  /* Hover = a stronger accent tint than the resting state (8%). A translucent color-mix
-     of the accent adapts to any panel background — unlike --ms-accent-color-light, which is
-     a fixed light-dark() pair that resolves to its pale light branch on dark themes that set
-     --base-* colors but not color-scheme (e.g. the neon example), producing a jarring near-white
-     chip. Stays fully themeable via this variable. */
-  --ms-fullscreen-nav-btn-bg-hover: color-mix(in srgb, var(--ms-accent-color) 22%, transparent);
-  /* Pager match-navigator glyph (the prev/next ^ ⌄ buttons). Defaults to the shared
-     --ms-icon-chevron, so it follows the base chevron out of the box. The pager rotates this
-     source -90° (prev → up) / 90° (next → down), so it expects a RIGHT-pointing glyph — override
-     it here if a theme points --base-icon-chevron somewhere else (e.g. a pre-oriented toggle
-     caret) and you don't want that leaking into the pager. */
-  --ms-fullscreen-nav-btn-icon: var(--ms-icon-chevron);
-  /* Chevron glyph — the dropdown toggle's affordance, and the default source for the pager
-     (via --ms-fullscreen-nav-btn-icon above). Wired to the --base-icon contract
-     (--base-icon-chevron, a Lucide angle that fills its viewBox, so it renders at full optical
-     size — unlike the small solid caret) with an inline right-pointing chevron as the standalone
-     fallback. It points RIGHT at rest; consumers rotate it into place (toggle: 90° closed → down,
-     -90° open → up — themeable via --ms-toggle-rotate-*; pager: -90° → up, 90° → down). Override
-     --ms-icon-chevron (or --base-icon-chevron globally) to re-skin both at once, or override
-     --ms-fullscreen-nav-btn-icon alone to diverge the pager. */
-  --ms-icon-chevron: var(--base-icon-chevron, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>"));
-  /* SVG "i-in-a-circle" glyph — rendered via mask so it inherits the info color via
-     currentColor. Override with any mask-friendly url() SVG. */
-  --ms-icon-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='7.5' r='1.3' fill='black'/><path d='M12 11v6' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
-  /* Tighter tree indent for the phone overlay so deep nodes leave room for the label.
-     Sized in --ms-fullscreen-rem (like the rest of the overlay) so it scales with the
-     phone view: at the 12px default this is ~8.4px base + ~14.4px/level, vs the
-     floating default's real-rem 0.75rem/1.25rem (tree.css). Raise --ms-fullscreen-rem
-     and the indent grows with the rows. */
-  --ms-fullscreen-tree-base-indent: calc(0.7 * var(--ms-fullscreen-rem));
-  --ms-fullscreen-tree-indent: calc(1.2 * var(--ms-fullscreen-rem));
-  /* ==========================================================================
-     DROPDOWN ACTIONS
-     ========================================================================== */
-  --ms-actions-gap: calc(0.4 * var(--ms-rem));
-  --ms-actions-padding: calc(0.8 * var(--ms-rem));
-  --ms-actions-border-bottom: 1px solid var(--ms-actions-border-color);
-  /* Action Button */
-  --ms-action-btn-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
-  --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-action-btn-border: var(--ms-border);
-  --ms-action-btn-border-radius: var(--ms-border-radius-sm);
-  --ms-action-btn-bg: transparent;
-  --ms-action-btn-color: inherit;
-  --ms-action-btn-bg-hover: var(--ms-primary-bg);
-  --ms-action-btn-border-color-hover: var(--ms-accent-color);
-  --ms-transform-scale-active: 0.98;
-  /* ==========================================================================
-     OPTIONS CONTAINER & GROUPS
-     ========================================================================== */
-  --ms-options-padding: 0;
-  /* Group */
-  --ms-group-border-top: 1px solid var(--ms-group-border-color);
-  --ms-group-margin-top: calc(0.4 * var(--ms-rem));
-  --ms-group-padding-top: calc(0.4 * var(--ms-rem));
-  /* Group Label */
-  --ms-group-label-padding: calc(0.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-group-label-font-weight: var(--base-font-weight-semibold, 600);
-  --ms-group-label-color: var(--ms-text-color-3);
-  --ms-group-label-transform: uppercase;
-  --ms-group-label-letter-spacing: 0.05em;
-  /* ==========================================================================
-     INDIVIDUAL OPTIONS
-     ==========================================================================
-     Per-component theming colors live in the SEMANTIC VARIABLES block above
-     (--ms-option-bg, --ms-option-bg-hover, --ms-option-bg-focused,
-      --ms-option-bg-matched, --ms-option-bg-selected, --ms-option-outline-color-focused,
-      --ms-option-border-matched-color). This block holds layout-only sizing. */
-  --ms-option-gap: calc(0.8 * var(--ms-rem));
-  --ms-option-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-option-padding-h: calc(1.2 * var(--ms-rem));
-  /* Adjustable row height for non-virtual rows (flat + tree). Default `auto` =
-     content-driven (padding + line-height), matching web-treeview's node rows.
-     Set a length for a consistent minimum row height; rows still grow if their
-     content is taller (unless you also truncate the title, below). Virtual-scroll
-     rows use the fixed `--ms-option-height` instead. */
-  --ms-option-min-height: auto;
-  --ms-option-outline-focused: 2px solid var(--ms-option-outline-color-focused);
-  --ms-option-focus-outline-offset: -2px;
-  --ms-option-border-matched: 3px solid var(--ms-option-border-matched-color);
-  /* Option State Combinations */
-  --ms-option-bg-focused-hover: var(--ms-primary-bg);
-  --ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent);
-  --ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
-  --ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
-  --ms-option-disabled-bg: var(--base-disabled-bg, transparent);
-  --ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
-  --ms-disabled-opacity: 0.5;
-  /* ==========================================================================
-     OPTION CONTENT
-     ========================================================================== */
-  --ms-option-content-gap: calc(0.8 * var(--ms-rem));
-  /* Option Icon */
-  --ms-option-icon-size: calc(2 * var(--ms-rem));
-  --ms-option-icon-font-size: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
-  /* Option Title (--ms-option-mark-bg / --ms-option-mark-color live in the SEMANTIC VARIABLES block above) */
-  --ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-option-mark-font-weight: var(--base-font-weight-semibold, 600);
-  /* Long-title handling. Default = wrap (multi-line), matching the treeview
-     packages, which leave `.wtv__node-label` / `.stv__node-label` unstyled. To
-     truncate to a single line with an ellipsis, flip all three (a length is only
-     needed if you didn't already fix the row height):
-       --ms-option-title-white-space: nowrap;
-       --ms-option-title-overflow: hidden;
-       --ms-option-title-text-overflow: ellipsis;
-     `.ms__option-title` is the label hook (analogous to `.wtv__node-label`); its
-     flex ancestors already set `min-width: 0`, so ellipsis works without extra CSS.
-     Pair with `enable-option-tooltips` to reveal the full text on hover. */
-  --ms-option-title-white-space: normal;
-  --ms-option-title-overflow: visible;
-  --ms-option-title-text-overflow: clip;
-  /* Option Subtitle */
-  --ms-option-subtitle-margin-top: calc(0.4 * var(--ms-rem));
-  --ms-option-subtitle-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-option-subtitle-line-height: var(--base-line-height-tight, 1.25);
-  /* Checkbox */
-  /* Zero by default: the row centers the checkbox via `align-items: center`, so any
-     top margin would decenter it (the checkbox sat ~1px low against the label — most
-     visible in fullscreen where --ms-rem is larger). The small top nudge is only
-     meaningful when the checkbox aligns to the top of a wrapping label; it's applied
-     there via [data-checkbox-align="top"] in options.css. */
-  --ms-checkbox-margin-top: 0;
-  --ms-checkbox-margin-right: 0;
-  --ms-checkbox-margin-bottom: 0;
-  --ms-checkbox-margin-left: 0;
-  --ms-checkbox-size: calc(1.6 * var(--ms-rem));
-  --ms-checkbox-scale: 1;
-  --ms-checkbox-align: center;
-  /* Checkbox Styling */
-  --ms-checkbox-bg: var(--ms-input-bg);
-  /* Unchecked border — deliberately stronger than the faint generic --ms-border so
-     the box reads as a real, clickable control. Tune weight/colour with these two. */
-  --ms-checkbox-border-width: 1px;
-  --ms-checkbox-border-color: var(--base-checkbox-border-color, #8f8f8f);
-  --ms-checkbox-border: var(--ms-checkbox-border-width) solid var(--ms-checkbox-border-color);
-  --ms-checkbox-border-radius: calc(0.3 * var(--ms-rem));
-  /* Checkmark stroke width — bump for a bolder tick. */
-  --ms-checkbox-checkmark-thickness: 2.5px;
-  --ms-checkbox-checked-bg: var(--ms-accent-color);
-  --ms-checkbox-checked-border: var(--ms-checkbox-border-width) solid var(--ms-accent-color);
-  --ms-checkbox-checkmark-color: var(--ms-text-color-on-accent);
-  --ms-checkbox-hover-border-color: var(--ms-accent-color);
-  --ms-checkbox-disabled-bg: var(--ms-primary-bg);
-  --ms-checkbox-disabled-border: var(--ms-checkbox-border-width) solid var(--ms-border-color);
-  /* Checkbox State Combinations */
-  --ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover);
-  --ms-checkbox-checked-border-color-hover: var(--ms-accent-color-hover);
-  /* ==========================================================================
-     EMPTY & LOADING STATES
-     ========================================================================== */
-  /* Shared footprint so the dropdown doesn't jump when swapping the empty
-     ("No data") block for the loader (spinner + text) during async search.
-     Sized to contain a small spinner + gap + one text line; override if a
-     consumer's loader is taller. */
-  --ms-state-min-height: calc(8 * var(--ms-rem));
-  --ms-empty-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-empty-color: var(--ms-text-color-3);
-  /* "Add new" prompt (empty state when isAddNewAllowed + typed text). A clickable
-     row keyed off the accent so it reads as an action, not a dead message. */
-  --ms-add-new-padding: var(--ms-option-padding);
-  --ms-add-new-gap: var(--ms-option-gap);
-  --ms-add-new-font-size: var(--ms-empty-font-size);
-  --ms-add-new-color: var(--ms-accent-color);
-  --ms-add-new-color-hover: var(--ms-accent-color);
-  --ms-add-new-bg-hover: var(--ms-option-bg-hover);
-  --ms-add-new-icon-size: calc(1.6 * var(--ms-rem));
-  /* Loader */
-  --ms-loader-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-loader-gap: calc(0.8 * var(--ms-rem));
-  /* Loading Text */
-  --ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-loading-text-color: var(--ms-text-color-3);
-  /* ==========================================================================
-     BADGES DISPLAY
-     ========================================================================== */
-  --ms-badges-gap: calc(0.8 * var(--ms-rem));
-  --ms-badges-margin-bottom: calc(0.8 * var(--ms-rem));
-  --ms-badges-margin-top: calc(0.8 * var(--ms-rem));
-  --ms-badges-margin-left: calc(0.4 * var(--ms-rem));
-  --ms-badges-margin-right: calc(0.4 * var(--ms-rem));
-  /* Vertical alignment for inline (left/right) badge positioning */
-  /* Options: center (default), flex-start (top), flex-end (bottom) */
-  --ms-inline-align: center;
-  /* Individual Badge (--ms-badge-bg / --ms-badge-bg-hover / --ms-badge-bg-active live in the SEMANTIC VARIABLES block above) */
-  --ms-badge-gap: calc(0.8 * var(--ms-rem));
-  --ms-badge-height: calc(2.7 * var(--ms-rem));
-  --ms-badge-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-badge-font-weight: var(--base-font-weight-semibold, 600);
-  --ms-badge-border-radius: var(--ms-border-radius-sm);
-  --ms-order-first: -1;
-  /* ==========================================================================
-     BADGE TEXT & REMOVE BUTTON
-     ========================================================================== */
-  /* Badge Text */
-  --ms-badge-text-padding: 0 calc(0.8 * var(--ms-rem));
-  --ms-badge-text-bg: var(--ms-accent-color-light);
-  --ms-badge-text-color: var(--ms-accent-color);
-  --ms-badge-text-border: none;
-  /* Badge Remove Button */
-  --ms-badge-remove-width: calc(2.7 * var(--ms-rem));
-  --ms-badge-remove-bg: var(--ms-accent-color);
-  --ms-badge-remove-color: var(--ms-text-color-on-accent);
-  --ms-badge-remove-border: none;
-  --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
-  --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
-  /* Matches the input-clear / count-clear ✕ glyphs (also 1.4×rem) so all three read at the
-     same size; the old 1.0×rem was fine for the default stroke `x` but rendered a filled
-     custom --base-icon-remove glyph (square-with-x) too small inside the mask box. */
-  --ms-badge-remove-icon-size: calc(1.4 * var(--ms-rem));
-  /* SVG X glyph (Lucide `x`) — rendered via mask so it inherits --ms-badge-remove-color via
-     currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕). Follows the
-     shared --base-icon contract: prefers --base-icon-remove, then --base-icon-close, so a theme
-     re-skinning its close/remove glyph re-skins these too; the inline Lucide `x` is the standalone
-     fallback (no base layer loaded). Override --ms-icon-remove to diverge from the base contract. */
-  --ms-icon-remove: var(--base-icon-remove, var(--base-icon-close, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>")));
-  /* SVG "clear search" glyph (Lucide `search-x`: a magnifier with an x) used by the
-     fullscreen search field's clear button. Deliberately NOT the bare X of
-     --ms-icon-remove so it doesn't read as a second close button beside the overlay
-     ✕. Rendered via mask, so it inherits its color via currentColor; override with any
-     mask-friendly SVG url(). */
-  --ms-icon-search-clear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m13.5 8.5-5 5'/><path d='m8.5 8.5 5 5'/><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
-  /* Mode-toggle glyphs for the fullscreen search-mode switch. The button shows the
-     CURRENT mode: a plain magnifier (Lucide `search`) for navigate, a funnel (Lucide
-     `filter`) for filter. Rendered via mask (inherit color via currentColor); override
-     with any mask-friendly SVG url(). */
-  --ms-icon-search: var(--base-icon-search, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>"));
-  --ms-icon-filter: var(--base-icon-filter, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>"));
-  /* Checkbox glyphs — the checkmark (checked) and dash (indeterminate/tri-state),
-     rendered as masks so they inherit --ms-checkbox-checkmark-color and follow the
-     shared --base-icon-* contract. Override either to diverge from the base. */
-  --ms-icon-check: var(--base-icon-check, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"));
-  --ms-icon-indeterminate: var(--base-icon-indeterminate, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>"));
-  /* "Add new" glyph (empty-state create prompt) — a plus, rendered as a mask so it
-     inherits the row's currentColor. Follows the shared --base-icon-* contract:
-     prefers --base-icon-plus, then --base-icon-add, then an inline "+" fallback. */
-  --ms-icon-add-new: var(--base-icon-plus, var(--base-icon-add, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>")));
-  /* Badge Counter Indicator (layout-only properties, colors come from semantic section) */
-  --ms-badge-counter-bg: transparent;
-  --ms-badge-counter-border: 1px solid var(--ms-badge-counter-border-color);
-  --ms-badge-counter-border-radius: var(--ms-border-radius-sm);
-  /* ==========================================================================
-     "+X MORE" BADGE
-     ========================================================================== */
-  --ms-more-badge-bg: var(--ms-accent-color-light);
-  --ms-more-badge-hover-bg: var(--ms-badge-bg-hover);
-  --ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
-  /* ==========================================================================
-     COUNT DISPLAY MODE
-     ========================================================================== */
-  --ms-count-display-margin-bottom: calc(0.8 * var(--ms-rem));
-  --ms-count-display-margin-top: calc(0.8 * var(--ms-rem));
-  --ms-count-display-margin-left: calc(0.8 * var(--ms-rem));
-  --ms-count-display-margin-right: calc(0.8 * var(--ms-rem));
-  /* Count Badge Wrapper */
-  --ms-counter-wrapper-bg: transparent;
-  --ms-counter-wrapper-border: var(--ms-border);
-  --ms-counter-wrapper-border-radius: var(--ms-border-radius-sm);
-  --ms-counter-wrapper-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
-  --ms-counter-wrapper-gap: calc(0.4 * var(--ms-rem));
-  --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
-  --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
-  /* ==========================================================================
-     COUNT TEXT & CLEAR BUTTON
-     ========================================================================== */
-  /* Count Text */
-  --ms-count-text-bg: transparent;
-  --ms-count-text-border: none;
-  --ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-count-text-color: var(--ms-text-color-1);
-  /* Count Clear Button */
-  --ms-count-clear-size: calc(1.6 * var(--ms-rem));
-  --ms-count-clear-bg: transparent;
-  --ms-count-clear-color: var(--ms-text-color-3);
-  --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
-  --ms-count-clear-border-radius: var(--ms-border-radius-sm);
-  /* Hover fills with SOLID accent and flips the glyph to text-on-accent — mirrors
-     .ms__badge-remove. The old "accent-tint bg + accent glyph" was same-hue: the ✕
-     melted into its own hover background (invisible on near-white accents like
-     minimal-dark, low-contrast blue-on-blue everywhere else). */
-  --ms-count-clear-bg-hover: var(--ms-accent-color);
-  --ms-count-clear-color-hover: var(--ms-text-color-on-accent);
-  --ms-count-clear-icon-size: calc(1.4 * var(--ms-rem));
-  /* Field-clear ✕ (input clear + count clear). Its own knob in the --base-icon contract:
-     prefers --base-icon-clear so a theme can diverge field-clear from close/remove, then falls
-     through to --ms-icon-remove (which itself resolves --base-icon-remove → --base-icon-close →
-     inline ✕). Same glyph as remove by default; override --base-icon-clear alone to split them. */
-  --ms-icon-clear: var(--base-icon-clear, var(--ms-icon-remove));
-  /* ==========================================================================
-     TOOLTIPS
-     ========================================================================== */
-  --ms-tooltip-color: var(--ms-tooltip-text-color);
-  --ms-tooltip-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-tooltip-border-radius: var(--ms-border-radius-lg);
-  --ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-tooltip-max-width: calc(32 * var(--ms-rem));
-  --ms-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  --ms-tooltip-z-index: 10000;
-  /* Option (dropdown row) tooltip — per-feature hooks default to the shared tooltip surface,
-     so option tooltips look identical until you override one of these independently. */
-  --ms-option-tooltip-bg: var(--ms-tooltip-bg);
-  --ms-option-tooltip-text-color: var(--ms-tooltip-text-color);
-  --ms-option-tooltip-padding: var(--ms-tooltip-padding);
-  --ms-option-tooltip-border-radius: var(--ms-tooltip-border-radius);
-  --ms-option-tooltip-font-size: var(--ms-tooltip-font-size);
-  --ms-option-tooltip-max-width: var(--ms-tooltip-max-width);
-  --ms-option-tooltip-shadow: var(--ms-tooltip-shadow);
-  --ms-option-tooltip-z-index: var(--ms-tooltip-z-index);
-  /* ==========================================================================
-     TRANSIENT MESSAGE / TOAST (showMessage)
-     Surfaced on top of the component so a veto reason (or any consumer feedback)
-     is visible even in the fullscreen overlay, where page UI is covered. Sizing is
-     --ms-rem-based (a fullscreen override rescales it below at :host); per-variant
-     colours default to sensible tones and are theme-overridable via --base-*.
-     ========================================================================== */
-  --ms-message-bg: var(--ms-message-info-bg);
-  --ms-message-color: var(--ms-message-info-color);
-  --ms-message-border: 1px solid transparent;
-  --ms-message-border-radius: var(--ms-border-radius-lg);
-  --ms-message-padding: calc(1.0 * var(--ms-rem)) calc(1.4 * var(--ms-rem));
-  --ms-message-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-message-font-weight: var(--base-font-weight-medium, 500);
-  --ms-message-max-width: calc(40 * var(--ms-rem));
-  --ms-message-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
-  /* Gap from the bottom edge of the viewport in the fullscreen overlay. */
-  --ms-message-fullscreen-offset: calc(2.4 * var(--ms-fullscreen-rem));
-  --ms-message-z-index: var(--ms-z-index-fullscreen-tooltip);
-  /* Variants (bg + text). Info reuses the tooltip surface; the rest are status tones. */
-  --ms-message-info-bg: var(--ms-tooltip-bg);
-  --ms-message-info-color: var(--ms-tooltip-text-color);
-  --ms-message-warning-bg: var(--base-warning-bg, #f59e0b);
-  --ms-message-warning-color: var(--base-warning-color, #1a1a1a);
-  --ms-message-error-bg: var(--base-danger-bg, #ef4444);
-  --ms-message-error-color: var(--base-danger-color, #ffffff);
-  --ms-message-success-bg: var(--base-success-bg, #10b981);
-  --ms-message-success-color: var(--base-success-color, #ffffff);
-  /* ==========================================================================
-     SELECTED POPOVER
-     ========================================================================== */
-  --ms-z-index-popover: 10000;
-  /* Selected-items ("badges") popover width — tracks the live field width by default (same
-     as the dropdown, so the two panels line up under the control). Override at app/theme
-     level or per-instance via the selected-popover-width attribute — e.g. a fixed
-     calc(32 * var(--ms-rem)) for a constant width independent of the field. */
-  --ms-selected-popover-width: var(--ms-input-current-width);
-  --ms-selected-popover-max-height: calc(32 * var(--ms-rem));
-  --ms-selected-popover-border: 1px solid var(--ms-selected-popover-border-color);
-  --ms-selected-popover-border-radius: var(--ms-border-radius-lg);
-  --ms-selected-popover-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  /* Popover Header */
-  --ms-selected-popover-header-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
-  --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
-  --ms-selected-popover-header-border-bottom: 1px solid var(--ms-selected-popover-header-border-color);
-  --ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600);
-  --ms-selected-popover-header-color: var(--ms-text-color-1);
-  /* ==========================================================================
-     POPOVER CLOSE BUTTON
-     ========================================================================== */
-  --ms-popover-close-size: calc(2.4 * var(--ms-rem));
-  --ms-selected-popover-close-bg: transparent;
-  --ms-selected-popover-close-color: var(--ms-text-color-3);
-  --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));
-  --ms-selected-popover-close-border-radius: var(--ms-border-radius-sm);
-  /* Solid accent fill + on-accent glyph (see .ms__count-clear note) — avoids the
-     same-hue "accent glyph on accent-tint" melt on hover. */
-  --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
-  --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent);
-  --ms-selected-popover-close-icon-size: calc(1.4 * var(--ms-rem));
-  /* ==========================================================================
-     POPOVER BODY
-     ========================================================================== */
-  --ms-selected-popover-body-gap: calc(0.4 * var(--ms-rem));
-  --ms-selected-popover-body-padding: calc(0.8 * var(--ms-rem));
-  --ms-selected-popover-body-max-height: calc(28.8 * var(--ms-rem));
-  /* ==========================================================================
-     TYPOGRAPHY SCALE
-     ========================================================================== */
-  /* Font Sizes (unitless multipliers × --ms-rem) */
-  --ms-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--ms-rem));
-  --ms-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
-  --ms-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
-  --ms-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
-  --ms-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
-  /* Font Weights */
-  --ms-font-weight-normal: var(--base-font-weight-normal, 400);
-  --ms-font-weight-medium: var(--base-font-weight-medium, 500);
-  --ms-font-weight-semibold: var(--base-font-weight-semibold, 600);
-  /* Line Heights */
-  --ms-line-height-none: 1;
-  --ms-line-height-tight: var(--base-line-height-tight, 1.25);
-  --ms-line-height-normal: var(--base-line-height-normal, 1.5);
-  --ms-line-height-relaxed: var(--base-line-height-relaxed, 1.75);
-  /* ==========================================================================
-     BORDER RADIUS SCALE
-     ========================================================================== */
-  --ms-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * var(--ms-rem));
-  --ms-border-radius-md: calc(var(--base-border-radius-md, 0.6) * var(--ms-rem));
-  --ms-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * var(--ms-rem));
-  --ms-border-radius: var(--ms-border-radius-md);
-  /* ==========================================================================
-     SPACING & SIZING
-     ========================================================================== */
-  --ms-spacing-xs: calc(0.4 * var(--ms-rem));
-  --ms-spacing-sm: calc(0.8 * var(--ms-rem));
-  --ms-spacing-md: calc(1.2 * var(--ms-rem));
-  --ms-spacing-lg: calc(1.6 * var(--ms-rem));
-  /* ==========================================================================
-     TRANSITIONS & EFFECTS
-     ========================================================================== */
-  /* Durations stay local: the --ms scale (150/200ms) doesn't line up with --base-duration-*
-     (fast 100ms / normal 150ms / medium 250ms), so wiring would silently change timings. */
-  --ms-transition-fast: 150ms;
-  --ms-transition-normal: 200ms;
-  /* Easing is an exact match for --base-ease-standard, so it flows from the shared token. */
-  --ms-easing-snappy: var(--base-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
-  /* ==========================================================================
-     OPACITY VALUES
-     ========================================================================== */
-  --ms-placeholder-opacity: 0.6;
-  --ms-disabled-input-opacity: 0.6;
-  /* ==========================================================================
-     SCROLLBAR
-     ========================================================================== */
-  --ms-scrollbar-width: 8px;
-  --ms-scrollbar-track-bg: transparent;
-  --ms-scrollbar-thumb-bg: var(--ms-border-color);
-  --ms-scrollbar-thumb-bg-hover: var(--ms-text-color-3);
-  --ms-scrollbar-thumb-border-radius: 4px;
-  /* ==========================================================================
-     DEBUG PANEL (dev-only)
-     ========================================================================== */
-  --ms-debug-bg: var(--base-elevated-bg, light-dark(#f9fafb, #2b2b2b));
-  --ms-debug-border-color: var(--ms-border-color);
-  --ms-debug-text-color: var(--ms-text-color-1);
-  --ms-debug-border-radius: var(--ms-border-radius-md);
-  --ms-debug-summary-color: var(--ms-accent-color);
-  --ms-debug-summary-bg-hover: var(--ms-primary-bg);
-  --ms-debug-summary-outline-color: var(--ms-accent-color);
-  --ms-debug-summary-border-radius: var(--ms-border-radius-sm);
-  --ms-debug-stats-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
-  --ms-debug-stats-border-radius: var(--ms-border-radius-sm);
-  --ms-debug-bullet-color: var(--ms-accent-color);
-}
+/* ==============================================================================
+   CSS CUSTOM PROPERTIES (:host level)
+   ==============================================================================
+   This file defines all CSS custom properties at the :host level, making them:
+   - Inspectable in browser DevTools
+   - Overridable from outside Shadow DOM
+   - Self-documenting in compiled CSS
+   Usage from outside Shadow DOM:
+     multi-select {
+       --ms-accent-color: #10b981;
+       --ms-input-border-radius: 0.5rem;
+     }
+   ============================================================================== */
+:host {
+  /* Block layout — the wrapper-host pattern paints chrome via .ms__input,
+     but :host still needs an explicit display so consumers placing the
+     element in inline contexts see the expected layout. */
+  display: block;
+  /* ==========================================================================
+     COLOR SCHEME
+     ==========================================================================
+     `color-scheme` is INHERITED on this element — we deliberately do NOT
+     declare it on `:host`. Reason: every hardcoded color fallback below is
+     wrapped in `light-dark(<light>, <dark>)`, which picks one of the two
+     based on the host's used color-scheme. Declaring `color-scheme: light dark`
+     here would *override* whatever the consumer's app declared on <html>,
+     <body>, or an ancestor — flipping forced-dark apps back to "follow OS",
+     and breaking visual coherence with the surrounding page.
+     By letting it inherit:
+       - dhl-style apps that set `body { color-scheme: dark }` propagate it
+         into our shadow DOM unchanged, and `light-dark()` resolves to dark.
+       - apps that set `html { color-scheme: light dark }` get OS-preference
+         switching, end-to-end.
+       - apps that declare nothing get the historical default (light), same
+         as before this fallback set was introduced — no behavior change.
+     Consumers who want explicit per-multiselect control can still set
+     `style="color-scheme: dark"` on the <web-multiselect> element.
+     ========================================================================== */
+  /* ==========================================================================
+     BASE SIZING UNIT
+     ==========================================================================
+     All sizing values are based on this unit for consistent scaling.
+     Bridges to the shared --base-rem knob so a theme scales every Keenmate
+     component from one variable; falls back to 10px when no base layer is loaded.
+     Default: 10px produces standard pixel values
+     Pure Admin: Set --base-rem to 1rem (inherits from html { font-size: 10px })
+     Custom: Set --base-rem (or --ms-rem for this component only) to scale all sizes */
+  --ms-rem: var(--base-rem, 10px);
+  /* ==========================================================================
+     FONT FAMILY (set at :host so all shadow DOM content inherits)
+     ========================================================================== */
+  font-family: var(--ms-font-family, var(--base-font-family, inherit));
+  /* ==========================================================================
+     COLORS & THEME
+     ==========================================================================
+     Color variables follow this priority chain:
+       1. External override: --ms-accent-color: #custom
+       2. Base theme value: var(--base-accent-color)
+       3. Hardcoded default fallback */
+  /* Accent Colors */
+  --ms-accent-color: var(--base-accent-color, #3b82f6);
+  --ms-accent-color-hover: var(--base-accent-color-hover, #2563eb);
+  --ms-accent-color-active: var(--base-accent-color-active, #1d4ed8);
+  /* Accent Color Light Variants (for backgrounds)
+     Dark variants are muted dark-blue tints that read like "accent-tinted dark surface" rather than
+     "near-white", keeping badge / +X more / popover-header backgrounds visible on a dark page. */
+  --ms-accent-color-light: var(--base-accent-color-light, light-dark(#eff6ff, #1e3a5f));
+  --ms-accent-color-light-hover: var(--base-accent-color-light-hover, light-dark(#e0f2fe, #264a73));
+  /* Text Color Levels (FluentUI-style hierarchy)
+     Light mode = the original dark-on-light palette (#111827 → #a0a3a9).
+     Dark mode  = the same hierarchy inverted (#f5f5f5 → #737373) so heading/body/secondary/disabled
+     keep the same relative contrast steps. text-color-on-accent stays white in both modes — the
+     accent color is the same blue in both, and white-on-blue reads in both. */
+  --ms-text-color-1: var(--base-text-color-1, light-dark(#111827, #f5f5f5));
+  --ms-text-color-2: var(--base-text-color-2, light-dark(#353b47, #d4d4d4));
+  --ms-text-color-3: var(--base-text-color-3, light-dark(#6b7280, #a3a3a3));
+  --ms-text-color-4: var(--base-text-color-4, light-dark(#a0a3a9, #737373));
+  --ms-text-color-on-accent: var(--base-text-color-on-accent, #ffffff);
+  /* Legacy aliases (for backward compatibility) */
+  --ms-text-primary: var(--ms-text-color-1);
+  --ms-text-secondary: var(--ms-text-color-3);
+  /* Background Colors
+     --ms-primary-bg paints hover/focus states (option hover, action-button hover, counter
+     hover, etc.); --ms-primary-bg-hover is one step stronger (selected-active, counter badge).
+     The color-mix fallback keeps the hover visible on dark themes — a flat var(--base-main-bg)
+     substrate used to make hover collapse onto the panel background. */
+  --ms-primary-bg: var(--base-hover-bg, color-mix(in srgb, var(--ms-text-color-1) 8%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));
+  --ms-primary-bg-hover: var(--base-active-bg, color-mix(in srgb, var(--ms-text-color-1) 14%, var(--base-main-bg, light-dark(#ffffff, #1a1a1a))));
+  /* Border Base Variables */
+  /* Default border colour. The previous fallbacks (#e5e7eb light / #3a3a3a dark) were very
+     low contrast against white / near-black surfaces — the 1px input/panel edge nearly
+     vanished, especially on phones. Bumped to a clearly-visible gray on each side (still
+     soft, not harsh). Consumers with `--base-border-color` set are unaffected. */
+  --ms-border-color: var(--base-border-color, light-dark(#cbd5e1, #52525b));
+  --ms-border: var(--base-border, 1px solid var(--ms-border-color));
+  /* ==========================================================================
+     SEMANTIC VARIABLES - Component-Specific Theming
+     ==========================================================================
+     Pattern: --ms-{component}-{property}-{state}
+     Example: --ms-input-bg, --ms-option-text-color-hover */
+  /* Input Component Semantic Variables */
+  --ms-input-bg: var(--base-input-bg, light-dark(#ffffff, #1a1a1a));
+  --ms-input-color: var(--base-input-color, var(--ms-text-color-1));
+  --ms-input-border: var(--base-input-border, 1px solid var(--ms-border-color));
+  --ms-input-border-hover: var(--base-input-border-hover, 1px solid var(--ms-accent-color));
+  --ms-input-border-focus: var(--base-input-border-focus, 1px solid var(--ms-accent-color));
+  --ms-input-placeholder-color: var(--base-input-placeholder-color, var(--ms-text-color-4));
+  --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
+  /* Toggle Icon Semantic Variables */
+  --ms-toggle-icon-color: var(--ms-text-color-3);
+  --ms-toggle-icon-color-open: var(--ms-text-color-3);
+  --ms-toggle-icon-size: calc(1.6 * var(--ms-rem));
+  /* Toggle chevron rotation, closed vs open. Defaults orient the directional right-pointing
+     --base-icon-chevron (90° → points down when closed, -90° → up when open). Override BOTH
+     when a theme supplies a PRE-ORIENTED chevron glyph: `0deg` / `0deg` for a static glyph,
+     or `0deg` / `180deg` for a down-glyph that flips up on open. */
+  --ms-toggle-rotate-closed: 90deg;
+  --ms-toggle-rotate-open: -90deg;
+  /* Counter Badge (in Input) Semantic Variables */
+  --ms-counter-badge-bg: var(--ms-accent-color);
+  --ms-counter-badge-bg-hover: var(--ms-accent-color-hover);
+  --ms-counter-badge-color: var(--ms-text-color-on-accent);
+  /* Floating Hint Semantic Variables */
+  --ms-hint-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
+  --ms-hint-color: var(--ms-text-color-4);
+  --ms-hint-border-color: var(--ms-border-color);
+  /* Dropdown Semantic Variables */
+  --ms-dropdown-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a)));
+  --ms-dropdown-text-color: var(--ms-text-color-1);
+  --ms-dropdown-border-color: var(--ms-border-color);
+  --ms-dropdown-box-shadow-semantic: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+  /* Dropdown Actions Semantic Variables */
+  --ms-actions-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
+  --ms-actions-border-color: var(--ms-border-color);
+  /* Action Button Semantic Variables */
+  --ms-action-button-bg: transparent;
+  --ms-action-button-bg-hover: var(--ms-primary-bg);
+  --ms-action-button-border-color: var(--ms-border-color);
+  --ms-action-button-border-color-hover: var(--ms-accent-color);
+  --ms-action-button-color: var(--ms-text-color-1);
+  /* Group Semantic Variables */
+  --ms-group-border-color: var(--ms-border-color);
+  --ms-group-label-color: var(--ms-text-color-3);
+  /* Option Semantic Variables */
+  --ms-option-text-color: var(--ms-text-color-1);
+  --ms-option-bg: transparent;
+  --ms-option-bg-hover: var(--ms-primary-bg);
+  --ms-option-color-hover: inherit;
+  --ms-option-bg-focused: var(--ms-primary-bg);
+  --ms-option-color-focused: inherit;
+  --ms-option-outline-color-focused: var(--ms-accent-color);
+  --ms-option-bg-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
+  --ms-option-bg-matched: color-mix(in srgb, var(--ms-accent-color) 8%, transparent);
+  --ms-option-color-matched: inherit;
+  --ms-option-border-matched-color: color-mix(in srgb, var(--ms-accent-color) 40%, transparent);
+  /* Option Content Semantic Variables */
+  --ms-option-title-color: var(--ms-text-color-1);
+  --ms-option-subtitle-color: var(--ms-text-color-3);
+  --ms-option-mark-bg: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
+  --ms-option-mark-color: inherit;
+  /* Empty/Loading State Semantic Variables */
+  --ms-empty-color: var(--ms-text-color-3);
+  --ms-loading-color: var(--ms-text-color-3);
+  /* Badge Semantic Variables */
+  --ms-badge-bg: var(--ms-accent-color-light);
+  /* Hover DEEPENS the badge's OWN rest background toward its OWN text colour.
+     Deliberately self-referential: NOT --base-hover-bg (a generic surface token →
+     accent pill flipped near-white in dark/neon), and NOT --ms-accent-color-light-hover
+     (a separate accent-tint token themes forget to set when they change the accent →
+     a black brutalist pill fell back to the hardcoded blue tint on hover). Mixing 12%
+     of the text colour into the rest bg is a subtle, always-readable nudge that follows
+     whatever bg/text pair a theme sets. */
+  --ms-badge-bg-hover: color-mix(in srgb, var(--ms-badge-bg) 88%, var(--ms-badge-text-color) 12%);
+  --ms-badge-bg-active: var(--ms-accent-color-light-hover);
+  /* Badge Text Semantic Variables */
+  --ms-badge-text-bg: var(--ms-accent-color-light);
+  --ms-badge-text-color: var(--ms-accent-color);
+  --ms-badge-text-bg-hover: color-mix(in srgb, var(--ms-badge-text-bg) 88%, var(--ms-badge-text-color) 12%);
+  --ms-badge-text-color-hover: var(--ms-badge-text-color);
+  /* Badge Remove Button Semantic Variables */
+  --ms-badge-remove-bg: var(--ms-accent-color);
+  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
+  --ms-badge-remove-color: var(--ms-text-color-on-accent);
+  /* Badge Counter Variant Semantic Variables
+     Neutral/gray styling to distinguish from accent-coloured selection badges.
+     Self-contained: the pill is a translucent tint of the strong text colour, and
+     text/glyph use the text-colour hierarchy — so contrast holds even when a theme
+     omits --base-main-bg (the old --ms-primary-bg-hover chain collapsed to
+     light-on-light there). The counter must NOT inherit the accent-coloured hover
+     of regular badges — its text stays neutral; only the surface deepens. */
+  --ms-badge-counter-border-color: var(--ms-border-color);
+  --ms-badge-counter-text-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent);
+  --ms-badge-counter-text-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent);
+  --ms-badge-counter-text-color: var(--ms-text-color-1);
+  --ms-badge-counter-text-color-hover: var(--ms-text-color-1);
+  --ms-badge-counter-remove-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent);
+  --ms-badge-counter-remove-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent);
+  /* Neutral glyph (text-3 at rest → text-1 on hover), NOT white-on-accent — the old
+     on-accent glyph vanished once the hover bg became a light text colour. */
+  --ms-badge-counter-remove-color: var(--ms-text-color-3);
+  --ms-badge-counter-remove-color-hover: var(--ms-text-color-1);
+  /* Count Display Semantic Variables */
+  --ms-counter-wrapper-bg: transparent;
+  --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
+  --ms-counter-wrapper-border-color: var(--ms-border-color);
+  --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
+  --ms-count-text-color: var(--ms-text-color-1);
+  --ms-count-clear-bg: transparent;
+  --ms-count-clear-bg-hover: var(--ms-accent-color);
+  --ms-count-clear-color: var(--ms-text-color-3);
+  --ms-count-clear-color-hover: var(--ms-text-color-on-accent);
+  /* Tooltip Semantic Variables
+     Tooltips invert relative to the page: dark tooltip on light page, light tooltip on dark page.
+     This keeps the tooltip distinct from its surrounding surface in both modes. */
+  --ms-tooltip-bg: var(--base-tooltip-bg, var(--base-inverse-bg, light-dark(#333333, #f5f5f5)));
+  --ms-tooltip-text-color: var(--base-tooltip-text-color, light-dark(#ffffff, #1a1a1a));
+  /* Selected Popover Semantic Variables */
+  --ms-selected-popover-bg: var(--base-dropdown-bg, var(--base-elevated-bg, light-dark(#ffffff, #1a1a1a)));
+  --ms-selected-popover-border-color: var(--ms-border-color);
+  --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
+  --ms-selected-popover-header-color: var(--ms-text-color-1);
+  --ms-selected-popover-header-border-color: var(--ms-border-color);
+  --ms-selected-popover-close-bg: transparent;
+  --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
+  --ms-selected-popover-close-color: var(--ms-text-color-3);
+  --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent);
+  /* ==========================================================================
+     INPUT COMPONENT
+     ========================================================================== */
+  --ms-input-padding-h: calc(1.2 * var(--ms-rem));       /* field shell inline padding */
+  --ms-input-gap: calc(0.6 * var(--ms-rem));             /* gap between input + trailing decorations */
+  --ms-input-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));
+  --ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-input-border-width: 1px;
+  --ms-input-border-radius: var(--ms-border-radius-md);
+  --ms-input-text: var(--ms-text-color-1);
+  /* Prefers the shared --base token (light-dark aware, so it adapts on dark themes);
+     the flat gray is the standalone fallback. */
+  --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
+  /* ==========================================================================
+     INPUT SIZE VARIANTS — currently unused (commented out)
+     ==========================================================================
+     Preset size tiers (xs/sm/md/lg/xl) for the input. Read only by the
+     .ms__input--* classes in controls.css, which nothing toggles (no `size`
+     attribute), so this whole chain is inert. Commented out to drop dead theming
+     surface — kept, not deleted, in case a future `size` attribute turns it into a
+     named-preset API; no case has needed it yet. Size via --ms-rem (global) or the
+     individual --ms-input-* vars (targeted) instead. Heights reference
+     --base-input-size-*-height for cross-component consistency (px in parens):
+  --ms-input-size-xs-font: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-input-size-xs-padding-v: calc(0.4 * var(--ms-rem));
+  --ms-input-size-xs-padding-h: calc(0.8 * var(--ms-rem));
+  --ms-input-size-xs-height: calc(var(--base-input-size-xs-height, 3.1) * var(--ms-rem));  (31px)
+  --ms-input-size-sm-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-input-size-sm-padding-v: calc(0.5 * var(--ms-rem));
+  --ms-input-size-sm-padding-h: calc(1.0 * var(--ms-rem));
+  --ms-input-size-sm-height: calc(var(--base-input-size-sm-height, 3.3) * var(--ms-rem));  (33px)
+  --ms-input-size-md-font: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-input-size-md-padding-v: calc(0.8 * var(--ms-rem));
+  --ms-input-size-md-padding-h: calc(1.2 * var(--ms-rem));
+  --ms-input-size-md-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));  (35px)
+  --ms-input-size-lg-font: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
+  --ms-input-size-lg-padding-v: calc(1.0 * var(--ms-rem));
+  --ms-input-size-lg-padding-h: calc(1.4 * var(--ms-rem));
+  --ms-input-size-lg-height: calc(var(--base-input-size-lg-height, 3.8) * var(--ms-rem));  (38px)
+  --ms-input-size-xl-font: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
+  --ms-input-size-xl-padding-v: calc(1.2 * var(--ms-rem));
+  --ms-input-size-xl-padding-h: calc(1.6 * var(--ms-rem));
+  --ms-input-size-xl-height: calc(var(--base-input-size-xl-height, 4.1) * var(--ms-rem));  (41px)
+  */
+  /* ==========================================================================
+     TOGGLE ICON
+     ========================================================================== */
+  --ms-toggle-color: var(--ms-text-color-3);
+  --ms-transform-rotate-180: 180deg;
+  /* ==========================================================================
+     INPUT CLEAR (✕)
+     ========================================================================== */
+  --ms-input-clear-size: calc(2.4 * var(--ms-rem));
+  --ms-input-clear-icon-size: calc(1.4 * var(--ms-rem));
+  --ms-input-clear-color: var(--base-input-clear-color, var(--ms-text-secondary));
+  --ms-input-clear-bg-hover: var(--base-input-clear-bg-hover, var(--ms-option-bg-matched, transparent));
+  --ms-input-clear-border-radius: var(--ms-border-radius); /* matches the input; square when radius is 0 */
+  /* ==========================================================================
+     COUNT BADGE (in input)
+     ========================================================================== */
+  --ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem));
+  --ms-counter-bg: var(--ms-accent-color);
+  --ms-counter-color: var(--ms-text-color-on-accent);
+  --ms-counter-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-counter-font-weight: var(--base-font-weight-semibold, 600);
+  --ms-counter-border-radius: var(--ms-border-radius-sm);
+  --ms-counter-bg-hover: var(--ms-accent-color-hover);
+  --ms-transform-scale-hover: 1.1;
+  /* ==========================================================================
+     FLOATING HINT
+     ========================================================================== */
+  --ms-hint-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-hint-border: 1px solid var(--ms-hint-border-color);
+  --ms-hint-border-radius: var(--ms-border-radius-lg);
+  --ms-hint-box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ms-hint-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  /* ==========================================================================
+     DROPDOWN
+     ========================================================================== */
+  --ms-dropdown-border: var(--base-dropdown-border, 1px solid var(--ms-dropdown-border-color));
+  --ms-dropdown-border-radius: var(--ms-border-radius-lg);
+  /* Inner content clip radius — a hair tighter than the panel so a highlighted
+     first/last row (or the sticky Select-All/Clear actions bar) follows the panel's
+     rounded corners instead of its square background bleeding ~1px past the rounded
+     border (the classic rounded-parent + bordered-box corner artifact). Assumes the
+     default 1px --ms-dropdown-border; if you theme a thicker border, override this to
+     match (panel radius − border width). Clamped at 0 so a squared panel stays square. */
+  --ms-dropdown-inner-border-radius: max(0px, calc(var(--ms-dropdown-border-radius) - 1px));
+  /* Prefers the shared --base token (light-dark aware — deepens on dark themes); the
+     flat two-layer shadow is the standalone fallback. */
+  --ms-dropdown-box-shadow: var(--base-dropdown-box-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+  /* Live input width, published by JS each positioning frame. It's the only panel
+     dimension CSS can't measure itself, so panels that "match the input" read it. */
+  --ms-input-current-width: auto;
+  /* Options dropdown width. Defaults to the input width; override at app/theme level
+     (web-multiselect { --ms-dropdown-width: 60rem }) or per-instance via the
+     dropdown-width attribute. dropdown-min-width / dropdown-max-width still clamp it. */
+  --ms-dropdown-width: var(--ms-input-current-width);
+  --ms-options-max-height: calc(32 * var(--ms-rem));
+  --ms-option-color: var(--ms-text-color-1);
+  --ms-z-index-dropdown: 9999;
+  --ms-z-index-sticky: 1;
+  /* ==========================================================================
+     FULLSCREEN OVERLAY (touch / phone presentation)
+     Used when a panel is presented as a full-viewport overlay — the options
+     dropdown (`.ms__dropdown--fullscreen`) AND the selected-items popover
+     (`.ms__selected-popover--fullscreen`). Both share ONE header-bar + close-
+     button treatment so the mobile view is consistent. Driven by the element's
+     environmentChanged hook on phones. Everything defaults to the dropdown's own
+     theming so a fullscreen panel looks like the same component.
+     ========================================================================== */
+  --ms-z-index-fullscreen: 10001; /* above dropdown (9999) + popover/tooltip (10000) */
+  /* The truncated-label reveal is triggered from INSIDE the fullscreen overlay, so it
+     must sit above it (the plain option tooltip at 10000 renders behind the 10001 panel). */
+  --ms-z-index-fullscreen-tooltip: 10002;
+  /* Size of the phone view. Every size in the component is calc(N × --ms-rem), so the
+     fullscreen panels override --ms-rem with this to scale rows, text, checkboxes,
+     padding, header and search up together (~1.2× → comfortable ~44–48px touch rows).
+     A plain length (not calc(1.2 × --ms-rem)) so assigning it to --ms-rem on the panel
+     can't form a cyclic var() reference. Set it larger for chunkier touch targets. */
+  --ms-fullscreen-rem: 12px;
+  /* These overlay-only vars are sized in --ms-fullscreen-rem (NOT --ms-rem): a custom
+     property bakes its var() at its declaration site, so declaring them here against
+     --ms-fullscreen-rem gives the enlarged phone-view sizes wherever they're consumed. */
+  --ms-fullscreen-bg: var(--ms-dropdown-bg);
+  --ms-fullscreen-text-color: var(--ms-dropdown-text-color);
+  --ms-fullscreen-header-bg: var(--ms-dropdown-bg);
+  --ms-fullscreen-header-border: 1px solid var(--ms-dropdown-border-color);
+  --ms-fullscreen-header-gap: calc(0.8 * var(--ms-fullscreen-rem));
+  /* Split into v/h so the close button can reclaim this exact padding with negative
+     margins to reach the sheet's physical corner (see .ms__fullscreen-close). */
+  --ms-fullscreen-header-padding-v: calc(0.8 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-header-padding-h: calc(1.2 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-header-padding: var(--ms-fullscreen-header-padding-v) var(--ms-fullscreen-header-padding-h);
+  --ms-fullscreen-header-min-height: calc(5.6 * var(--ms-fullscreen-rem)); /* consistent bar height: search vs title */
+  --ms-fullscreen-title-font-size: calc(1.7 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-title-font-weight: var(--base-font-weight-semibold, 600);
+  --ms-fullscreen-search-border: var(--ms-input-border);
+  --ms-fullscreen-search-border-radius: var(--ms-input-border-radius);
+  --ms-fullscreen-search-padding: calc(0.8 * var(--ms-fullscreen-rem)) calc(1.2 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-search-font-size: calc(1.6 * var(--ms-fullscreen-rem));
+  /* Inline clear (✕) inside the fullscreen search field: a small round mask-icon
+     button pinned to the trailing edge, shown only while there's a term. The gutter
+     reserves trailing padding on the input so typed text never runs under it. */
+  --ms-fullscreen-search-clear-size: calc(2.8 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-search-clear-icon-size: calc(1.4 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-search-clear-inset: calc(0.4 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-search-clear-gutter: calc(3.4 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-search-clear-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color));
+  --ms-fullscreen-search-clear-bg-hover: var(--ms-option-bg-matched, transparent);
+  /* Leading search-mode toggle (opt-in): a small round mask-icon button at the field's
+     leading edge, sized like the clear button. Icon swaps by mode (see the [data-mode]
+     rules in floating.css). */
+  --ms-fullscreen-mode-toggle-size: calc(2.8 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-mode-toggle-icon-size: calc(1.5 * var(--ms-fullscreen-rem));
+  /* Gap between the leading toggle and the search field. Defaults to the header gap so it
+     matches the field↔close spacing on the trailing side (symmetric bar); override to
+     decouple. */
+  --ms-fullscreen-mode-toggle-gap: var(--ms-fullscreen-header-gap);
+  --ms-fullscreen-mode-toggle-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color));
+  --ms-fullscreen-mode-toggle-bg: transparent;
+  --ms-fullscreen-mode-toggle-bg-hover: var(--ms-option-bg-matched, transparent);
+  --ms-fullscreen-close-size: calc(3.6 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-close-icon-size: calc(1.6 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-close-color: var(--ms-dropdown-text-color);
+  /* Visible close chip. Defaults to a borderless, transparent, round hit-glyph (so it
+     reads as a bare ✕), but these turn it into a bordered "button" like a command-
+     palette close — e.g. --ms-fullscreen-close-border: 1px solid var(--ms-border-color);
+     --ms-fullscreen-close-border-radius: calc(0.8 * var(--ms-fullscreen-rem));
+     --ms-fullscreen-close-bg: var(--ms-input-bg);. The tap target stays larger than the
+     chip (see the ::after in floating.css), so bordering it doesn't shrink what's
+     clickable. */
+  --ms-fullscreen-close-bg: transparent;
+  --ms-fullscreen-close-border: none;
+  --ms-fullscreen-close-border-radius: 50%;
+  --ms-fullscreen-close-bg-hover: var(--ms-option-bg-matched, transparent);
+  /* Corner tap target. The visible chip stays --close-size (so it never inflates the
+     header height), but a transparent ::after extends the *hit* area into the sheet's
+     top-trailing corner — the dead header padding around a centered button was the "tap
+     here → nothing happens" zone, and the corner is the easiest place to hit.
+     --edge-nudge is a negative inline-end margin that slides the whole button (and its
+     glyph) that much closer to the physical edge. */
+  --ms-fullscreen-close-edge-nudge: calc(0.8 * var(--ms-fullscreen-rem));
+  /* Truncated-label info affordance (fullscreen only). A circled "i" revealed at the
+     trailing edge of a row whose label is clipped, so the full label is one tap away
+     on touch (where hover tooltips never fire). Sized in --ms-fullscreen-rem. */
+  --ms-fullscreen-info-size: calc(2.8 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-info-icon-size: calc(1.8 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-info-color: var(--ms-accent-color);
+  --ms-fullscreen-info-bg-hover: var(--ms-option-bg-matched, transparent);
+  /* Navigate-mode match navigator under the fullscreen search box: a muted result
+     count plus round prev/next buttons that step through matches (the touch stand-in
+     for desktop's Ctrl+Arrow). Sized in --ms-fullscreen-rem like the rest of the overlay. */
+  --ms-fullscreen-nav-gap: calc(0.6 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-nav-padding-top: calc(0.6 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-nav-count-font-size: calc(1.3 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-nav-count-color: var(--ms-text-muted-color, var(--ms-dropdown-text-color));
+  --ms-fullscreen-nav-btn-size: calc(3.2 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-nav-btn-icon-size: calc(1.6 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-nav-btn-color: var(--ms-dropdown-text-color);
+  --ms-fullscreen-nav-btn-bg: var(--ms-option-bg-matched, transparent);
+  /* Hover = a stronger accent tint than the resting state (8%). A translucent color-mix
+     of the accent adapts to any panel background — unlike --ms-accent-color-light, which is
+     a fixed light-dark() pair that resolves to its pale light branch on dark themes that set
+     --base-* colors but not color-scheme (e.g. the neon example), producing a jarring near-white
+     chip. Stays fully themeable via this variable. */
+  --ms-fullscreen-nav-btn-bg-hover: color-mix(in srgb, var(--ms-accent-color) 22%, transparent);
+  /* Pager match-navigator glyph (the prev/next ^ ⌄ buttons). Defaults to the shared
+     --ms-icon-chevron, so it follows the base chevron out of the box. The pager rotates this
+     source -90° (prev → up) / 90° (next → down), so it expects a RIGHT-pointing glyph — override
+     it here if a theme points --base-icon-chevron somewhere else (e.g. a pre-oriented toggle
+     caret) and you don't want that leaking into the pager. */
+  --ms-fullscreen-nav-btn-icon: var(--ms-icon-chevron);
+  /* Chevron glyph — the dropdown toggle's affordance, and the default source for the pager
+     (via --ms-fullscreen-nav-btn-icon above). Wired to the --base-icon contract
+     (--base-icon-chevron, a Lucide angle that fills its viewBox, so it renders at full optical
+     size — unlike the small solid caret) with an inline right-pointing chevron as the standalone
+     fallback. It points RIGHT at rest; consumers rotate it into place (toggle: 90° closed → down,
+     -90° open → up — themeable via --ms-toggle-rotate-*; pager: -90° → up, 90° → down). Override
+     --ms-icon-chevron (or --base-icon-chevron globally) to re-skin both at once, or override
+     --ms-fullscreen-nav-btn-icon alone to diverge the pager. */
+  --ms-icon-chevron: var(--base-icon-chevron, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>"));
+  /* SVG "i-in-a-circle" glyph — rendered via mask so it inherits the info color via
+     currentColor. Override with any mask-friendly url() SVG. */
+  --ms-icon-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><circle cx='12' cy='7.5' r='1.3' fill='black'/><path d='M12 11v6' stroke='black' stroke-width='2' stroke-linecap='round' fill='none'/></svg>");
+  /* Tighter tree indent for the phone overlay so deep nodes leave room for the label.
+     Sized in --ms-fullscreen-rem (like the rest of the overlay) so it scales with the
+     phone view: at the 12px default this is ~8.4px base + ~14.4px/level, vs the
+     floating default's real-rem 0.75rem/1.25rem (tree.css). Raise --ms-fullscreen-rem
+     and the indent grows with the rows. */
+  --ms-fullscreen-tree-base-indent: calc(0.7 * var(--ms-fullscreen-rem));
+  --ms-fullscreen-tree-indent: calc(1.2 * var(--ms-fullscreen-rem));
+  /* ==========================================================================
+     DROPDOWN ACTIONS
+     ========================================================================== */
+  --ms-actions-gap: calc(0.4 * var(--ms-rem));
+  --ms-actions-padding: calc(0.8 * var(--ms-rem));
+  --ms-actions-border-bottom: 1px solid var(--ms-actions-border-color);
+  /* Action Button */
+  --ms-action-btn-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
+  --ms-action-btn-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-action-btn-border: var(--ms-border);
+  --ms-action-btn-border-radius: var(--ms-border-radius-sm);
+  --ms-action-btn-bg: transparent;
+  --ms-action-btn-color: inherit;
+  --ms-action-btn-bg-hover: var(--ms-primary-bg);
+  --ms-action-btn-border-color-hover: var(--ms-accent-color);
+  --ms-transform-scale-active: 0.98;
+  /* ==========================================================================
+     OPTIONS CONTAINER & GROUPS
+     ========================================================================== */
+  --ms-options-padding: 0;
+  /* Group */
+  --ms-group-border-top: 1px solid var(--ms-group-border-color);
+  --ms-group-margin-top: calc(0.4 * var(--ms-rem));
+  --ms-group-padding-top: calc(0.4 * var(--ms-rem));
+  /* Group Label */
+  --ms-group-label-padding: calc(0.4 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-group-label-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-group-label-font-weight: var(--base-font-weight-semibold, 600);
+  --ms-group-label-color: var(--ms-text-color-3);
+  --ms-group-label-transform: uppercase;
+  --ms-group-label-letter-spacing: 0.05em;
+  /* ==========================================================================
+     INDIVIDUAL OPTIONS
+     ==========================================================================
+     Per-component theming colors live in the SEMANTIC VARIABLES block above
+     (--ms-option-bg, --ms-option-bg-hover, --ms-option-bg-focused,
+      --ms-option-bg-matched, --ms-option-bg-selected, --ms-option-outline-color-focused,
+      --ms-option-border-matched-color). This block holds layout-only sizing. */
+  --ms-option-gap: calc(0.8 * var(--ms-rem));
+  --ms-option-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-option-padding-h: calc(1.2 * var(--ms-rem));
+  /* Adjustable row height for non-virtual rows (flat + tree). Default `auto` =
+     content-driven (padding + line-height), matching web-treeview's node rows.
+     Set a length for a consistent minimum row height; rows still grow if their
+     content is taller (unless you also truncate the title, below). Virtual-scroll
+     rows use the fixed `--ms-option-height` instead. */
+  --ms-option-min-height: auto;
+  --ms-option-outline-focused: 2px solid var(--ms-option-outline-color-focused);
+  --ms-option-focus-outline-offset: -2px;
+  --ms-option-border-matched: 3px solid var(--ms-option-border-matched-color);
+  /* Option State Combinations */
+  --ms-option-bg-focused-hover: var(--ms-primary-bg);
+  --ms-option-bg-matched-hover: color-mix(in srgb, var(--ms-accent-color) 12%, transparent);
+  --ms-option-bg-selected-focused: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
+  --ms-option-bg-selected-matched: color-mix(in srgb, var(--ms-accent-color) 15%, transparent);
+  --ms-option-disabled-bg: var(--base-disabled-bg, transparent);
+  --ms-option-bg-disabled-selected: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
+  --ms-disabled-opacity: 0.5;
+  /* ==========================================================================
+     OPTION CONTENT
+     ========================================================================== */
+  --ms-option-content-gap: calc(0.8 * var(--ms-rem));
+  /* Option Icon */
+  --ms-option-icon-size: calc(2 * var(--ms-rem));
+  --ms-option-icon-font-size: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
+  /* Option Title (--ms-option-mark-bg / --ms-option-mark-color live in the SEMANTIC VARIABLES block above) */
+  --ms-option-title-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-option-mark-font-weight: var(--base-font-weight-semibold, 600);
+  /* Long-title handling. Default = wrap (multi-line), matching the treeview
+     packages, which leave `.wtv__node-label` / `.stv__node-label` unstyled. To
+     truncate to a single line with an ellipsis, flip all three (a length is only
+     needed if you didn't already fix the row height):
+       --ms-option-title-white-space: nowrap;
+       --ms-option-title-overflow: hidden;
+       --ms-option-title-text-overflow: ellipsis;
+     `.ms__option-title` is the label hook (analogous to `.wtv__node-label`); its
+     flex ancestors already set `min-width: 0`, so ellipsis works without extra CSS.
+     Pair with `enable-option-tooltips` to reveal the full text on hover. */
+  --ms-option-title-white-space: normal;
+  --ms-option-title-overflow: visible;
+  --ms-option-title-text-overflow: clip;
+  /* Option Subtitle */
+  --ms-option-subtitle-margin-top: calc(0.4 * var(--ms-rem));
+  --ms-option-subtitle-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-option-subtitle-line-height: var(--base-line-height-tight, 1.25);
+  /* Checkbox */
+  /* Zero by default: the row centers the checkbox via `align-items: center`, so any
+     top margin would decenter it (the checkbox sat ~1px low against the label — most
+     visible in fullscreen where --ms-rem is larger). The small top nudge is only
+     meaningful when the checkbox aligns to the top of a wrapping label; it's applied
+     there via [data-checkbox-align="top"] in options.css. */
+  --ms-checkbox-margin-top: 0;
+  --ms-checkbox-margin-right: 0;
+  --ms-checkbox-margin-bottom: 0;
+  --ms-checkbox-margin-left: 0;
+  --ms-checkbox-size: calc(1.6 * var(--ms-rem));
+  --ms-checkbox-scale: 1;
+  --ms-checkbox-align: center;
+  /* Checkbox Styling */
+  --ms-checkbox-bg: var(--ms-input-bg);
+  /* Unchecked border — deliberately stronger than the faint generic --ms-border so
+     the box reads as a real, clickable control. Tune weight/colour with these two. */
+  --ms-checkbox-border-width: 1px;
+  --ms-checkbox-border-color: var(--base-checkbox-border-color, #8f8f8f);
+  --ms-checkbox-border: var(--ms-checkbox-border-width) solid var(--ms-checkbox-border-color);
+  --ms-checkbox-border-radius: calc(0.3 * var(--ms-rem));
+  /* Checkmark stroke width — bump for a bolder tick. */
+  --ms-checkbox-checkmark-thickness: 2.5px;
+  --ms-checkbox-checked-bg: var(--ms-accent-color);
+  --ms-checkbox-checked-border: var(--ms-checkbox-border-width) solid var(--ms-accent-color);
+  --ms-checkbox-checkmark-color: var(--ms-text-color-on-accent);
+  --ms-checkbox-hover-border-color: var(--ms-accent-color);
+  --ms-checkbox-disabled-bg: var(--ms-primary-bg);
+  --ms-checkbox-disabled-border: var(--ms-checkbox-border-width) solid var(--ms-border-color);
+  /* Checkbox State Combinations */
+  --ms-checkbox-checked-bg-hover: var(--ms-accent-color-hover);
+  --ms-checkbox-checked-border-color-hover: var(--ms-accent-color-hover);
+  /* ==========================================================================
+     EMPTY & LOADING STATES
+     ========================================================================== */
+  /* Shared footprint so the dropdown doesn't jump when swapping the empty
+     ("No data") block for the loader (spinner + text) during async search.
+     Sized to contain a small spinner + gap + one text line; override if a
+     consumer's loader is taller. */
+  --ms-state-min-height: calc(8 * var(--ms-rem));
+  --ms-empty-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-empty-color: var(--ms-text-color-3);
+  /* "Add new" prompt (empty state when isAddNewAllowed + typed text). A clickable
+     row keyed off the accent so it reads as an action, not a dead message. */
+  --ms-add-new-padding: var(--ms-option-padding);
+  --ms-add-new-gap: var(--ms-option-gap);
+  --ms-add-new-font-size: var(--ms-empty-font-size);
+  --ms-add-new-color: var(--ms-accent-color);
+  --ms-add-new-color-hover: var(--ms-accent-color);
+  --ms-add-new-bg-hover: var(--ms-option-bg-hover);
+  --ms-add-new-icon-size: calc(1.6 * var(--ms-rem));
+  /* Loader */
+  --ms-loader-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-loader-gap: calc(0.8 * var(--ms-rem));
+  /* Loading Text */
+  --ms-loading-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-loading-text-color: var(--ms-text-color-3);
+  /* ==========================================================================
+     BADGES DISPLAY
+     ========================================================================== */
+  --ms-badges-gap: calc(0.8 * var(--ms-rem));
+  --ms-badges-margin-bottom: calc(0.8 * var(--ms-rem));
+  --ms-badges-margin-top: calc(0.8 * var(--ms-rem));
+  --ms-badges-margin-left: calc(0.4 * var(--ms-rem));
+  --ms-badges-margin-right: calc(0.4 * var(--ms-rem));
+  /* Vertical alignment for inline (left/right) badge positioning */
+  /* Options: center (default), flex-start (top), flex-end (bottom) */
+  --ms-inline-align: center;
+  /* Individual Badge (--ms-badge-bg / --ms-badge-bg-hover / --ms-badge-bg-active live in the SEMANTIC VARIABLES block above) */
+  --ms-badge-gap: calc(0.8 * var(--ms-rem));
+  --ms-badge-height: calc(2.7 * var(--ms-rem));
+  --ms-badge-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-badge-font-weight: var(--base-font-weight-semibold, 600);
+  --ms-badge-border-radius: var(--ms-border-radius-sm);
+  --ms-order-first: -1;
+  /* ==========================================================================
+     BADGE TEXT & REMOVE BUTTON
+     ========================================================================== */
+  /* Badge Text */
+  --ms-badge-text-padding: 0 calc(0.8 * var(--ms-rem));
+  --ms-badge-text-bg: var(--ms-accent-color-light);
+  --ms-badge-text-color: var(--ms-accent-color);
+  --ms-badge-text-border: none;
+  /* Badge Remove Button */
+  --ms-badge-remove-width: calc(2.7 * var(--ms-rem));
+  --ms-badge-remove-bg: var(--ms-accent-color);
+  --ms-badge-remove-color: var(--ms-text-color-on-accent);
+  --ms-badge-remove-border: none;
+  --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
+  --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
+  /* Matches the input-clear / count-clear ✕ glyphs (also 1.4×rem) so all three read at the
+     same size; the old 1.0×rem was fine for the default stroke `x` but rendered a filled
+     custom --base-icon-remove glyph (square-with-x) too small inside the mask box. */
+  --ms-badge-remove-icon-size: calc(1.4 * var(--ms-rem));
+  /* SVG X glyph (Lucide `x`) — rendered via mask so it inherits --ms-badge-remove-color via
+     currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕). Follows the
+     shared --base-icon contract: prefers --base-icon-remove, then --base-icon-close, so a theme
+     re-skinning its close/remove glyph re-skins these too; the inline Lucide `x` is the standalone
+     fallback (no base layer loaded). Override --ms-icon-remove to diverge from the base contract. */
+  --ms-icon-remove: var(--base-icon-remove, var(--base-icon-close, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>")));
+  /* SVG "clear search" glyph (Lucide `search-x`: a magnifier with an x) used by the
+     fullscreen search field's clear button. Deliberately NOT the bare X of
+     --ms-icon-remove so it doesn't read as a second close button beside the overlay
+     ✕. Rendered via mask, so it inherits its color via currentColor; override with any
+     mask-friendly SVG url(). */
+  --ms-icon-search-clear: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m13.5 8.5-5 5'/><path d='m8.5 8.5 5 5'/><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
+  /* Mode-toggle glyphs for the fullscreen search-mode switch. The button shows the
+     CURRENT mode: a plain magnifier (Lucide `search`) for navigate, a funnel (Lucide
+     `filter`) for filter. Rendered via mask (inherit color via currentColor); override
+     with any mask-friendly SVG url(). */
+  --ms-icon-search: var(--base-icon-search, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>"));
+  --ms-icon-filter: var(--base-icon-filter, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/></svg>"));
+  /* Checkbox glyphs — the checkmark (checked) and dash (indeterminate/tri-state),
+     rendered as masks so they inherit --ms-checkbox-checkmark-color and follow the
+     shared --base-icon-* contract. Override either to diverge from the base. */
+  --ms-icon-check: var(--base-icon-check, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>"));
+  --ms-icon-indeterminate: var(--base-icon-indeterminate, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>"));
+  /* mask-size for the checkmark/dash glyph inside the checkbox box. Defaults to the
+     shared --base-icon-check-size (the SAME knob pure-admin's .pa-checkbox reads), so a
+     theme rescales the mark once for both; override --ms-icon-check-size to diverge just
+     this component. 68% assumes a Lucide-style glyph that fills its viewBox edge-to-edge. */
+  --ms-icon-check-size: var(--base-icon-check-size, 68%);
+  /* "Add new" glyph (empty-state create prompt) — a plus, rendered as a mask so it
+     inherits the row's currentColor. Follows the shared --base-icon-* contract:
+     prefers --base-icon-plus, then --base-icon-add, then an inline "+" fallback. */
+  --ms-icon-add-new: var(--base-icon-plus, var(--base-icon-add, url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5v14'/></svg>")));
+  /* Badge Counter Indicator (layout-only properties, colors come from semantic section) */
+  --ms-badge-counter-bg: transparent;
+  --ms-badge-counter-border: 1px solid var(--ms-badge-counter-border-color);
+  --ms-badge-counter-border-radius: var(--ms-border-radius-sm);
+  /* ==========================================================================
+     "+X MORE" BADGE
+     ========================================================================== */
+  --ms-more-badge-bg: var(--ms-accent-color-light);
+  --ms-more-badge-hover-bg: var(--ms-badge-bg-hover);
+  --ms-more-badge-active-bg: var(--ms-accent-color-light-hover);
+  /* ==========================================================================
+     COUNT DISPLAY MODE
+     ========================================================================== */
+  --ms-count-display-margin-bottom: calc(0.8 * var(--ms-rem));
+  --ms-count-display-margin-top: calc(0.8 * var(--ms-rem));
+  --ms-count-display-margin-left: calc(0.8 * var(--ms-rem));
+  --ms-count-display-margin-right: calc(0.8 * var(--ms-rem));
+  /* Count Badge Wrapper */
+  --ms-counter-wrapper-bg: transparent;
+  --ms-counter-wrapper-border: var(--ms-border);
+  --ms-counter-wrapper-border-radius: var(--ms-border-radius-sm);
+  --ms-counter-wrapper-padding: calc(0.4 * var(--ms-rem)) calc(0.8 * var(--ms-rem));
+  --ms-counter-wrapper-gap: calc(0.4 * var(--ms-rem));
+  --ms-counter-wrapper-bg-hover: var(--ms-primary-bg);
+  --ms-counter-wrapper-border-color-hover: var(--ms-accent-color);
+  /* ==========================================================================
+     COUNT TEXT & CLEAR BUTTON
+     ========================================================================== */
+  /* Count Text */
+  --ms-count-text-bg: transparent;
+  --ms-count-text-border: none;
+  --ms-count-text-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-count-text-color: var(--ms-text-color-1);
+  /* Count Clear Button */
+  --ms-count-clear-size: calc(1.6 * var(--ms-rem));
+  --ms-count-clear-bg: transparent;
+  --ms-count-clear-color: var(--ms-text-color-3);
+  --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
+  --ms-count-clear-border-radius: var(--ms-border-radius-sm);
+  /* Hover fills with SOLID accent and flips the glyph to text-on-accent — mirrors
+     .ms__badge-remove. The old "accent-tint bg + accent glyph" was same-hue: the ✕
+     melted into its own hover background (invisible on near-white accents like
+     minimal-dark, low-contrast blue-on-blue everywhere else). */
+  --ms-count-clear-bg-hover: var(--ms-accent-color);
+  --ms-count-clear-color-hover: var(--ms-text-color-on-accent);
+  --ms-count-clear-icon-size: calc(1.4 * var(--ms-rem));
+  /* Field-clear ✕ (input clear + count clear). Its own knob in the --base-icon contract:
+     prefers --base-icon-clear so a theme can diverge field-clear from close/remove, then falls
+     through to --ms-icon-remove (which itself resolves --base-icon-remove → --base-icon-close →
+     inline ✕). Same glyph as remove by default; override --base-icon-clear alone to split them. */
+  --ms-icon-clear: var(--base-icon-clear, var(--ms-icon-remove));
+  /* ==========================================================================
+     TOOLTIPS
+     ========================================================================== */
+  --ms-tooltip-color: var(--ms-tooltip-text-color);
+  --ms-tooltip-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-tooltip-border-radius: var(--ms-border-radius-lg);
+  --ms-tooltip-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-tooltip-max-width: calc(32 * var(--ms-rem));
+  --ms-tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --ms-tooltip-z-index: 10000;
+  /* Option (dropdown row) tooltip — per-feature hooks default to the shared tooltip surface,
+     so option tooltips look identical until you override one of these independently. */
+  --ms-option-tooltip-bg: var(--ms-tooltip-bg);
+  --ms-option-tooltip-text-color: var(--ms-tooltip-text-color);
+  --ms-option-tooltip-padding: var(--ms-tooltip-padding);
+  --ms-option-tooltip-border-radius: var(--ms-tooltip-border-radius);
+  --ms-option-tooltip-font-size: var(--ms-tooltip-font-size);
+  --ms-option-tooltip-max-width: var(--ms-tooltip-max-width);
+  --ms-option-tooltip-shadow: var(--ms-tooltip-shadow);
+  --ms-option-tooltip-z-index: var(--ms-tooltip-z-index);
+  /* ==========================================================================
+     TRANSIENT MESSAGE / TOAST (showMessage)
+     Surfaced on top of the component so a veto reason (or any consumer feedback)
+     is visible even in the fullscreen overlay, where page UI is covered. Sizing is
+     --ms-rem-based (a fullscreen override rescales it below at :host); per-variant
+     colours default to sensible tones and are theme-overridable via --base-*.
+     ========================================================================== */
+  --ms-message-bg: var(--ms-message-info-bg);
+  --ms-message-color: var(--ms-message-info-color);
+  --ms-message-border: 1px solid transparent;
+  --ms-message-border-radius: var(--ms-border-radius-lg);
+  --ms-message-padding: calc(1.0 * var(--ms-rem)) calc(1.4 * var(--ms-rem));
+  --ms-message-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-message-font-weight: var(--base-font-weight-medium, 500);
+  --ms-message-max-width: calc(40 * var(--ms-rem));
+  --ms-message-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
+  /* Gap from the bottom edge of the viewport in the fullscreen overlay. */
+  --ms-message-fullscreen-offset: calc(2.4 * var(--ms-fullscreen-rem));
+  --ms-message-z-index: var(--ms-z-index-fullscreen-tooltip);
+  /* Variants (bg + text). Info reuses the tooltip surface; the rest are status tones. */
+  --ms-message-info-bg: var(--ms-tooltip-bg);
+  --ms-message-info-color: var(--ms-tooltip-text-color);
+  --ms-message-warning-bg: var(--base-warning-bg, #f59e0b);
+  --ms-message-warning-color: var(--base-warning-color, #1a1a1a);
+  --ms-message-error-bg: var(--base-danger-bg, #ef4444);
+  --ms-message-error-color: var(--base-danger-color, #ffffff);
+  --ms-message-success-bg: var(--base-success-bg, #10b981);
+  --ms-message-success-color: var(--base-success-color, #ffffff);
+  /* ==========================================================================
+     SELECTED POPOVER
+     ========================================================================== */
+  --ms-z-index-popover: 10000;
+  /* Selected-items ("badges") popover width — tracks the live field width by default (same
+     as the dropdown, so the two panels line up under the control). Override at app/theme
+     level or per-instance via the selected-popover-width attribute — e.g. a fixed
+     calc(32 * var(--ms-rem)) for a constant width independent of the field. */
+  --ms-selected-popover-width: var(--ms-input-current-width);
+  --ms-selected-popover-max-height: calc(32 * var(--ms-rem));
+  --ms-selected-popover-border: 1px solid var(--ms-selected-popover-border-color);
+  --ms-selected-popover-border-radius: var(--ms-border-radius-lg);
+  --ms-selected-popover-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  /* Popover Header */
+  --ms-selected-popover-header-padding: calc(0.8 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
+  --ms-selected-popover-header-bg: color-mix(in srgb, var(--ms-accent-color) 10%, transparent);
+  --ms-selected-popover-header-border-bottom: 1px solid var(--ms-selected-popover-header-border-color);
+  --ms-selected-popover-header-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-selected-popover-header-font-weight: var(--base-font-weight-semibold, 600);
+  --ms-selected-popover-header-color: var(--ms-text-color-1);
+  /* ==========================================================================
+     POPOVER CLOSE BUTTON
+     ========================================================================== */
+  --ms-popover-close-size: calc(2.4 * var(--ms-rem));
+  --ms-selected-popover-close-bg: transparent;
+  --ms-selected-popover-close-color: var(--ms-text-color-3);
+  --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));
+  --ms-selected-popover-close-border-radius: var(--ms-border-radius-sm);
+  /* Solid accent fill + on-accent glyph (see .ms__count-clear note) — avoids the
+     same-hue "accent glyph on accent-tint" melt on hover. */
+  --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
+  --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent);
+  --ms-selected-popover-close-icon-size: calc(1.4 * var(--ms-rem));
+  /* ==========================================================================
+     POPOVER BODY
+     ========================================================================== */
+  --ms-selected-popover-body-gap: calc(0.4 * var(--ms-rem));
+  --ms-selected-popover-body-padding: calc(0.8 * var(--ms-rem));
+  --ms-selected-popover-body-max-height: calc(28.8 * var(--ms-rem));
+  /* ==========================================================================
+     TYPOGRAPHY SCALE
+     ========================================================================== */
+  /* Font Sizes (unitless multipliers × --ms-rem) */
+  --ms-font-size-2xs: calc(var(--base-font-size-2xs, 1) * var(--ms-rem));
+  --ms-font-size-xs: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
+  --ms-font-size-sm: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
+  --ms-font-size-base: calc(var(--base-font-size-base, 1.6) * var(--ms-rem));
+  --ms-font-size-lg: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
+  /* Font Weights */
+  --ms-font-weight-normal: var(--base-font-weight-normal, 400);
+  --ms-font-weight-medium: var(--base-font-weight-medium, 500);
+  --ms-font-weight-semibold: var(--base-font-weight-semibold, 600);
+  /* Line Heights */
+  --ms-line-height-none: 1;
+  --ms-line-height-tight: var(--base-line-height-tight, 1.25);
+  --ms-line-height-normal: var(--base-line-height-normal, 1.5);
+  --ms-line-height-relaxed: var(--base-line-height-relaxed, 1.75);
+  /* ==========================================================================
+     BORDER RADIUS SCALE
+     ========================================================================== */
+  --ms-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * var(--ms-rem));
+  --ms-border-radius-md: calc(var(--base-border-radius-md, 0.6) * var(--ms-rem));
+  --ms-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * var(--ms-rem));
+  --ms-border-radius: var(--ms-border-radius-md);
+  /* ==========================================================================
+     SPACING & SIZING
+     ========================================================================== */
+  --ms-spacing-xs: calc(0.4 * var(--ms-rem));
+  --ms-spacing-sm: calc(0.8 * var(--ms-rem));
+  --ms-spacing-md: calc(1.2 * var(--ms-rem));
+  --ms-spacing-lg: calc(1.6 * var(--ms-rem));
+  /* ==========================================================================
+     TRANSITIONS & EFFECTS
+     ========================================================================== */
+  /* Durations stay local: the --ms scale (150/200ms) doesn't line up with --base-duration-*
+     (fast 100ms / normal 150ms / medium 250ms), so wiring would silently change timings. */
+  --ms-transition-fast: 150ms;
+  --ms-transition-normal: 200ms;
+  /* Easing is an exact match for --base-ease-standard, so it flows from the shared token. */
+  --ms-easing-snappy: var(--base-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
+  /* ==========================================================================
+     OPACITY VALUES
+     ========================================================================== */
+  --ms-placeholder-opacity: 0.6;
+  --ms-disabled-input-opacity: 0.6;
+  /* ==========================================================================
+     SCROLLBAR
+     ========================================================================== */
+  --ms-scrollbar-width: 8px;
+  --ms-scrollbar-track-bg: transparent;
+  --ms-scrollbar-thumb-bg: var(--ms-border-color);
+  --ms-scrollbar-thumb-bg-hover: var(--ms-text-color-3);
+  --ms-scrollbar-thumb-border-radius: 4px;
+  /* ==========================================================================
+     DEBUG PANEL (dev-only)
+     ========================================================================== */
+  --ms-debug-bg: var(--base-elevated-bg, light-dark(#f9fafb, #2b2b2b));
+  --ms-debug-border-color: var(--ms-border-color);
+  --ms-debug-text-color: var(--ms-text-color-1);
+  --ms-debug-border-radius: var(--ms-border-radius-md);
+  --ms-debug-summary-color: var(--ms-accent-color);
+  --ms-debug-summary-bg-hover: var(--ms-primary-bg);
+  --ms-debug-summary-outline-color: var(--ms-accent-color);
+  --ms-debug-summary-border-radius: var(--ms-border-radius-sm);
+  --ms-debug-stats-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
+  --ms-debug-stats-border-radius: var(--ms-border-radius-sm);
+  --ms-debug-bullet-color: var(--ms-accent-color);
+}