@keenmate/web-multiselect 1.10.0 → 1.12.0-rc01

package/src/css/count-display.css

@@ -0,0 +1,108 @@
+/* ==============================================================================
+   COUNT-DISPLAY MODE
+   ==============================================================================
+   Alternative selection-summary UI: a single counter pill ("3 selected") with
+   an inline clear button, instead of one badge per item. Activated via the
+   `badges-display-mode="count"` attribute. The clickable badge that opens the
+   selected-items popover lives in badges.css.
+*/
+
+/* ==============================================================================
+   COUNT-DISPLAY CONTAINER
+   ============================================================================== */
+
+.ms__count-display {
+  display: flex;
+  align-items: center;
+}
+
+.ms__count-display:empty {
+  display: none;
+}
+
+/* Position variants */
+.ms__count-display--bottom {
+  margin-top: var(--ms-count-display-margin-bottom);
+}
+
+.ms__count-display--top {
+  margin-bottom: var(--ms-count-display-margin-top);
+  order: var(--ms-order-first); /* Place before multiselect in flex container */
+}
+
+.ms__count-display--left {
+  order: var(--ms-order-first); /* Place before multiselect */
+  margin-right: var(--ms-count-display-margin-left);
+  justify-content: flex-start;
+}
+
+.ms__count-display--right {
+  margin-left: var(--ms-count-display-margin-right);
+  justify-content: flex-end;
+}
+
+/* ==============================================================================
+   COUNTER PILL (text + clear button)
+   ============================================================================== */
+
+/* Wrapper containing count text and clear button */
+.ms__counter-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ms-counter-wrapper-gap);
+  background: var(--ms-counter-wrapper-bg);
+  border: var(--ms-counter-wrapper-border);
+  border-radius: var(--ms-counter-wrapper-border-radius);
+  padding: var(--ms-counter-wrapper-padding);
+  transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms__counter-wrapper:hover {
+  background: var(--ms-counter-wrapper-bg-hover);
+  border-color: var(--ms-counter-wrapper-border-color-hover);
+}
+
+.ms__count-text {
+  display: inline-flex;
+  align-items: center;
+  background: var(--ms-count-text-bg);
+  border: var(--ms-count-text-border);
+  padding: 0;
+  font-size: var(--ms-count-text-font-size);
+  color: var(--ms-count-text-color);
+  cursor: pointer;
+  transition: color var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms__count-clear {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ms-count-clear-size);
+  height: var(--ms-count-clear-size);
+  padding: 0;
+  border: none;
+  background: var(--ms-count-clear-bg);
+  color: var(--ms-count-clear-color);
+  font-size: var(--ms-count-clear-font-size);
+  line-height: var(--ms-line-height-none);
+  cursor: pointer;
+  border-radius: var(--ms-count-clear-border-radius);
+  transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
+}
+
+.ms__count-clear:hover {
+  background: var(--ms-count-clear-bg-hover);
+  color: var(--ms-count-clear-color-hover);
+}
+
+.ms__count-clear::before {
+  content: "";
+  display: block;
+  width: var(--ms-count-clear-icon-size);
+  height: var(--ms-count-clear-icon-size);
+  background-color: currentColor;
+  -webkit-mask: var(--ms-icon-clear) center / contain no-repeat;
+          mask: var(--ms-icon-clear) center / contain no-repeat;
+}

package/src/css/dark-mode.css

@@ -0,0 +1,58 @@
+/* ==============================================================================
+   DARK MODE — framework class + per-instance signal handling
+   ==============================================================================
+   Sets `color-scheme` on the host when the consumer signals dark/light via a
+   framework class (signal #4) or a per-instance attribute (signal #5). Every
+   `--ms-*` color in variables.css resolves through `light-dark(<light>, <dark>)`,
+   so flipping `color-scheme` on the host picks the correct branch without us
+   touching any `--base-*` value.
+
+   Why we don't override `--base-*` here:
+   Setting e.g. `--base-input-bg: #1a1a1a` on `:host` shadows the consumer's
+   `:root { --base-input-bg: ... }` for resolution inside the shadow root, so
+   their themed value (e.g. pure-admin's #163768) would be silently replaced
+   by our hardcoded default. Setting `color-scheme` instead leaves the
+   consumer's `--base-*` chain intact — they remain the source of truth, and
+   we only pick the dark branch of our own fallbacks.
+
+   Why `color-scheme` on `:host` is fine *here* (but not in variables.css):
+   variables.css avoids it because an unconditional declaration would override
+   whatever the consumer's <html>/<body>/ancestor set. Here we declare it only
+   when the consumer's own signal matches, so we're amplifying their intent
+   rather than fighting it. Frameworks that already set `color-scheme`
+   alongside their class (Bootstrap 5.3+) get a redundant no-op; frameworks
+   that don't (Tailwind `.dark`, hand-rolled toggles) get filled in.
+
+   Signals handled:
+     #4 Framework theme class on an ancestor — `:host-context([data-theme="dark"])`,
+        `:host-context([data-bs-theme="dark"])`, `:host-context(.dark)`.
+     #5 Per-instance attribute on the host — `:host([data-theme="dark"])`,
+        `:host([data-theme="light"])`. Highest specificity, wins over any
+        framework class on an ancestor.
+
+   See [color-scheme.md](BlissFramework guidelines) for the full pattern. */
+
+/* DARK — framework class on ancestor (signal #4) */
+:host-context([data-theme="dark"]),
+:host-context([data-bs-theme="dark"]),
+:host-context(.dark) {
+  color-scheme: dark;
+}
+
+/* LIGHT — framework class on ancestor (signal #4, safety net for
+   "force one section back to light on a dark page"). */
+:host-context([data-theme="light"]),
+:host-context([data-bs-theme="light"]),
+:host-context(.light) {
+  color-scheme: light;
+}
+
+/* DARK — per-instance attribute on the host (signal #5). */
+:host([data-theme="dark"]) {
+  color-scheme: dark;
+}
+
+/* LIGHT — per-instance attribute on the host (signal #5). */
+:host([data-theme="light"]) {
+  color-scheme: light;
+}

package/src/css/{_debug.css → debug.css}

@@ -4,45 +4,45 @@
    Debug information display for development and troubleshooting
 */
 
-.ms-debug-info {
+.ms__debug-info {
   margin-top: calc(0.4 * var(--ms-rem));
   padding: calc(0.4 * var(--ms-rem));
-  background-color: #f9fafb;
-  border: 1px solid #e5e7eb;
-  border-radius: calc(var(--base-border-radius-md, 0.6) * var(--ms-rem));
+  background-color: var(--ms-debug-bg);
+  border: 1px solid var(--ms-debug-border-color);
+  border-radius: var(--ms-debug-border-radius);
   font-size: calc(1.2 * var(--ms-rem));
-  color: #111827;
+  color: var(--ms-debug-text-color);
 }
 
-.ms-debug-info details summary {
+.ms__debug-info details summary {
   cursor: pointer;
   font-weight: 600;
-  color: #2563eb;
+  color: var(--ms-debug-summary-color);
   user-select: none;
   padding: calc(0.4 * var(--ms-rem));
-  border-radius: calc(var(--base-border-radius-sm, 0.4) * var(--ms-rem));
+  border-radius: var(--ms-debug-summary-border-radius);
 }
 
-.ms-debug-info details summary:hover {
-  background-color: #f3f4f6;
+.ms__debug-info details summary:hover {
+  background-color: var(--ms-debug-summary-bg-hover);
 }
 
-.ms-debug-info details summary:focus {
-  outline: 2px solid #3b82f6;
+.ms__debug-info details summary:focus {
+  outline: 2px solid var(--ms-debug-summary-outline-color);
   outline-offset: 2px;
 }
 
-.ms-debug-info .ms-debug-stats {
+.ms__debug-info .ms__debug-stats {
   display: flex;
   flex-direction: column;
   gap: calc(0.4 * var(--ms-rem));
   margin-top: calc(0.4 * var(--ms-rem));
   padding: calc(0.4 * var(--ms-rem));
-  background-color: #ffffff;
-  border-radius: calc(var(--base-border-radius-sm, 0.4) * var(--ms-rem));
+  background-color: var(--ms-debug-stats-bg);
+  border-radius: var(--ms-debug-stats-border-radius);
 }
 
-.ms-debug-info .ms-debug-stats span {
+.ms__debug-info .ms__debug-stats span {
   display: flex;
   justify-content: space-between;
   padding: 2px 4px;
@@ -50,8 +50,8 @@
   font-size: calc(1 * var(--ms-rem));
 }
 
-.ms-debug-info .ms-debug-stats span::before {
+.ms__debug-info .ms__debug-stats span::before {
   content: '•';
   margin-right: calc(0.4 * var(--ms-rem));
-  color: #3b82f6;
+  color: var(--ms-debug-bullet-color);
 }

package/src/css/{_tooltips-popover.css → floating.css}

@@ -1,13 +1,100 @@
 /* ==============================================================================
-   TOOLTIPS & POPOVER
+   FLOATING — Floating-UI-anchored panels
    ==============================================================================
-   Badge tooltips and selected items popover
+   Search hint, dropdown panel, badge tooltips, and the selected-items popover.
+   All use `position: fixed` so they escape `overflow: hidden|auto|scroll`
+   containers, and all are positioned by Floating UI from JS. The CSS here
+   defines visual chrome only — positioning is dynamic.
 */
 
+/* ==============================================================================
+   FLOATING SEARCH HINT
+   ============================================================================== */
+
+.ms__hint {
+  display: none;
+  position: fixed;
+  z-index: var(--ms-z-index-popover);
+  padding: var(--ms-hint-padding);
+  background: var(--ms-hint-bg);
+  border: var(--ms-hint-border);
+  border-radius: var(--ms-hint-border-radius);
+  box-shadow: var(--ms-hint-box-shadow);
+  font-size: var(--ms-hint-font-size);
+  color: var(--ms-hint-color);
+  line-height: var(--ms-line-height-relaxed);
+  max-width: 100%;
+}
+
+.ms__hint--visible {
+  display: block;
+}
+
+/* ==============================================================================
+   DROPDOWN PANEL
+   ============================================================================== */
+
+.ms__dropdown {
+  display: none;
+  position: fixed;
+  font-family: inherit; /* Ensure font inherits from container */
+  z-index: var(--ms-z-index-dropdown);
+  background: var(--ms-dropdown-bg);
+  border: var(--ms-dropdown-border);
+  border-radius: var(--ms-dropdown-border-radius);
+  box-shadow: var(--ms-dropdown-box-shadow);
+  max-height: var(--ms-options-max-height);
+  overflow: hidden; /* Clips content to border-radius, inner container handles scrolling */
+  color: var(--ms-dropdown-text-color);
+}
+
+.ms__dropdown--visible {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inner scrolling container — clips scrollbar to rounded corners */
+.ms__dropdown-inner {
+  flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  touch-action: pan-y;
+  -webkit-overflow-scrolling: touch;
+
+  /* Scrollbar styling */
+  scrollbar-width: thin;  /* Firefox */
+  scrollbar-color: var(--ms-scrollbar-thumb-bg) var(--ms-scrollbar-track-bg);
+}
+
+.ms__dropdown-inner::-webkit-scrollbar {
+  width: var(--ms-scrollbar-width);
+}
+
+.ms__dropdown-inner::-webkit-scrollbar-track {
+  background: var(--ms-scrollbar-track-bg);
+}
+
+.ms__dropdown-inner::-webkit-scrollbar-thumb {
+  background: var(--ms-scrollbar-thumb-bg);
+  border-radius: var(--ms-scrollbar-thumb-border-radius);
+}
+
+.ms__dropdown-inner::-webkit-scrollbar-thumb:hover {
+  background: var(--ms-scrollbar-thumb-bg-hover);
+}
+
+.ms__dropdown--virtual {
+  /* In virtual scroll mode, let the options container handle scrolling */
+  max-height: none;
+}
+
+.ms__dropdown--virtual .ms__dropdown-inner {
+  overflow-y: visible;
+}
+
 /* ==============================================================================
    BADGE TOOLTIPS
-   ==============================================================================
-*/
+   ============================================================================== */
 
 .ms__badge-tooltip {
   position: fixed;
@@ -35,11 +122,12 @@
 }
 
 /* ==============================================================================
-   SELECTED ITEMS POPOVER
+   SELECTED-ITEMS POPOVER
    ==============================================================================
+   Opens from the count-display / compact / "+X more" interactions to show
+   every selected item. Contains its own scrollable body.
 */
 
-/* Selected items popover (for count display mode) */
 .ms__selected-popover {
   display: none;
   position: fixed;
@@ -151,10 +239,6 @@
   min-width: 0; /* Allow proper flex sizing */
   white-space: normal; /* Explicitly allow wrapping */
   word-wrap: break-word; /* Break long words */
-  /* Remove overflow constraints to allow multi-line content */
-  /* overflow: hidden; */
-  /* text-overflow: ellipsis; */
-  /* white-space: nowrap; */
 }
 
 /* Virtual scroll mode */

package/src/css/main.css

@@ -1,27 +1,32 @@
 /* ==============================================================================
-   MULTISELECT COMPONENT - MAIN ENTRY POINT
+   MULTISELECT COMPONENT — MAIN ENTRY POINT
    ==============================================================================
-   Typeahead multiselect with rich content support and floating hints
+   Cascade layer order (later = higher priority):
+     variables  — :host { --ms-* } declarations
+     component  — base + feature rules
+     overrides  — dark mode, framework themes, per-instance overrides
 
-   File structure:
-   - _variables.css        : All CSS custom properties at :host level (for theming)
-   - _base.css             : FOUC prevention + layout containers
-   - _input-dropdown.css   : Input, toggle, counter, hint, dropdown, actions
-   - _options.css          : Options list, groups, checkbox, content, states
-   - _badges-display.css   : Badges, count display, individual badges
-   - _tooltips-popover.css : Badge tooltips + selected items popover
-   - _rtl.css              : RTL (Right-to-Left) language support
-   - _modifiers.css        : State modifiers
-   - _debug.css            : Debug information panel
+   Consumer override contract:
+   - Any unlayered consumer rule beats every rule in these layers.
+   - Any :root --base-* declaration beats the variables layer trivially.
 */
 
-/* Import all partials in dependency order */
-@import '_variables.css';
-@import '_base.css';
-@import '_input-dropdown.css';
-@import '_options.css';
-@import '_badges-display.css';
-@import '_tooltips-popover.css';
-@import '_rtl.css';
-@import '_modifiers.css';
-@import '_debug.css';
+@layer variables, component, overrides;
+
+/* === SKELETON + CANONICAL CONCERNS (Tier 1 + Tier 2) === */
+@import url('./variables.css')      layer(variables);
+@import url('./base.css')           layer(component);
+@import url('./controls.css')       layer(component);
+@import url('./floating.css')       layer(component);
+@import url('./states.css')         layer(component);
+@import url('./animations.css')     layer(component);
+
+/* === COMPONENT-SPECIFIC FEATURES (Tier 3 — alphabetized) === */
+@import url('./badges.css')         layer(component);
+@import url('./count-display.css')  layer(component);
+@import url('./debug.css')          layer(component);
+@import url('./options.css')        layer(component);
+@import url('./rtl.css')            layer(component);
+
+/* === OVERRIDES === */
+@import url('./dark-mode.css')      layer(overrides);

package/src/css/{_options.css → options.css}

@@ -153,7 +153,7 @@
   outline: none;
 }
 
-/* Checkbox alignment variants (center is default, defined in _variables.css) */
+/* Checkbox alignment variants (center is default, defined in variables.css) */
 .ms__option[data-checkbox-align="top"] {
   --ms-checkbox-align: flex-start;
 }

package/src/css/{_modifiers.css → states.css}

@@ -1,13 +1,10 @@
 /* ==============================================================================
-   MODIFIERS & VARIANTS
-   ==============================================================================
-   State modifiers (disabled, no-checkboxes)
-   Note: Size variants removed - use --ms-rem for global scaling instead
-*/
-
-/* ==============================================================================
-   STATE MODIFIERS
+   STATES — cross-feature state modifiers
    ==============================================================================
+   Block-level state classes that affect multiple feature areas. Per-element
+   states (`.ms__input:focus`, `.ms__option--focused`, `.ms__badges:empty`,
+   etc.) stay in their feature files; this file is for state classes set on
+   the `.ms` block that flow through to multiple internal elements.
 */
 
 /* Disabled state */

package/src/css/{_variables.css → variables.css}

@@ -14,6 +14,28 @@
    ============================================================================== */
 
 :host {
+  /* ==========================================================================
+     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
      ==========================================================================
@@ -47,15 +69,21 @@
   --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) */
-  --ms-accent-color-light: var(--base-accent-color-light, #eff6ff);
-  --ms-accent-color-light-hover: var(--base-accent-color-light-hover, #e0f2fe);
-
-  /* Text Color Levels (FluentUI-style hierarchy) */
-  --ms-text-color-1: var(--base-text-color-1, #111827);
-  --ms-text-color-2: var(--base-text-color-2, #353b47);
-  --ms-text-color-3: var(--base-text-color-3, #6b7280);
-  --ms-text-color-4: var(--base-text-color-4, #a0a3a9);
+  /* 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) */
@@ -63,14 +91,15 @@
   --ms-text-secondary: var(--ms-text-color-3);
 
   /* Background Colors
-     --ms-primary-bg drives option hover/focus, action-button hover, counter-wrapper hover, etc.
-     Theme authors can override via either --base-primary-bg (semantic) or --base-main-bg (legacy);
-     direct --ms-primary-bg / --ms-option-bg-hover overrides take precedence over both. */
-  --ms-primary-bg: var(--base-primary-bg, var(--base-main-bg, #f3f4f6));
-  --ms-primary-bg-hover: var(--base-hover-bg, #e5e7eb);
+     --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 */
-  --ms-border-color: var(--base-border-color, #e5e7eb);
+  --ms-border-color: var(--base-border-color, light-dark(#e5e7eb, #3a3a3a));
   --ms-border: var(--base-border, 1px solid var(--ms-border-color));
 
   /* ==========================================================================
@@ -80,7 +109,7 @@
      Example: --ms-input-bg, --ms-option-text-color-hover */
 
   /* Input Component Semantic Variables */
-  --ms-input-bg: var(--base-input-bg, #ffffff);
+  --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));
@@ -98,18 +127,18 @@
   --ms-counter-badge-color: var(--ms-text-color-on-accent);
 
   /* Floating Hint Semantic Variables */
-  --ms-hint-bg: var(--base-main-bg, #ffffff);
+  --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, #ffffff);
+  --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, #ffffff);
+  --ms-actions-bg: var(--base-main-bg, light-dark(#ffffff, #1a1a1a));
   --ms-actions-border-color: var(--ms-border-color);
 
   /* Action Button Semantic Variables */
@@ -182,12 +211,14 @@
   --ms-count-clear-color: var(--ms-text-color-3);
   --ms-count-clear-color-hover: var(--ms-accent-color);
 
-  /* Tooltip Semantic Variables */
-  --ms-tooltip-bg: var(--base-tooltip-bg, #333333);
-  --ms-tooltip-text-color: var(--base-tooltip-text-color, #ffffff);
+  /* 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, #ffffff);
+  --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);
@@ -596,4 +627,19 @@
   --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);
 }