@keenmate/web-multiselect 1.11.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}

@@ -627,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);
 }