@keenmate/web-multiselect 2.0.0-rc11 → 2.0.0-rc12

package/src/css/variables.css

@@ -124,6 +124,12 @@
   --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);
@@ -244,7 +250,9 @@
   --ms-input-border-width: 1px;
   --ms-input-border-radius: var(--ms-border-radius-md);
   --ms-input-text: var(--ms-text-color-1);
-  --ms-input-bg-disabled: rgba(107, 114, 128, 0.05);
+  /* 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)
@@ -294,8 +302,8 @@
      ========================================================================== */
   --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(--ms-text-secondary);
-  --ms-input-clear-bg-hover: var(--ms-option-bg-matched, transparent);
+  --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 */
 
   /* ==========================================================================
@@ -331,7 +339,9 @@
      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));
-  --ms-dropdown-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  /* 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;
@@ -449,9 +459,21 @@
      --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);
-  /* SVG chevron glyph — rendered via mask so it inherits the button color via currentColor.
-     Points up; the "next" button flips it with scaleY(-1). Override with any mask-friendly SVG. */
-  --ms-icon-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 15l7-7 7 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
+  /* 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>");
@@ -655,10 +677,11 @@
   --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
   --ms-badge-remove-icon-size: calc(1.0 * 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 (✕). Kept in
-     lockstep with the other icons (all Lucide) so the set stays visually consistent. Override
-     this var to use a different shape; the value must be a CSS url() to a mask-friendly SVG. */
-  --ms-icon-remove: 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>");
+     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
@@ -669,7 +692,7 @@
      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: 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-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: 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>");
 
   /* Badge Counter Indicator (layout-only properties, colors come from semantic section) */
@@ -719,7 +742,11 @@
   --ms-count-clear-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
   --ms-count-clear-color-hover: var(--ms-accent-color);
   --ms-count-clear-icon-size: calc(1.4 * var(--ms-rem));
-  --ms-icon-clear: var(--ms-icon-remove);
+  /* 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
@@ -853,9 +880,12 @@
   /* ==========================================================================
      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;
-  --ms-easing-snappy: cubic-bezier(0.4, 0, 0.2, 1);
+  /* 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

package/vscode.html-custom-data.json

@@ -195,6 +195,11 @@
           "description": "Whether typing filters the list or navigates it.",
           "values": [{ "name": "filter" }, { "name": "navigate" }]
         },
+        {
+          "name": "overlay-group",
+          "description": "Scope the \"one overlay open at a time\" coordination to a named group. Overlays (multiselects, datepickers, external popovers) sharing a group dismiss each other when one opens; different groups are independent. Unset = the default (ungrouped) group.",
+          "values": []
+        },
         {
           "name": "actions-layout",
           "description": "Whether the action bar wraps or stays on one line.",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@keenmate/web-multiselect",
-  "version": "2.0.0-rc11",
+  "version": "2.0.0-rc12",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -199,6 +199,11 @@
                 "default": "'filter'"
               }
             },
+            {
+              "name": "overlay-group",
+              "description": "Scope the \"one overlay open at a time\" coordination to a named group. Overlays (multiselects, datepickers, external popovers) sharing a group dismiss each other when one opens; different groups are independent. Unset = the default (ungrouped) group.",
+              "value": { "type": "string | null" }
+            },
             {
               "name": "actions-layout",
               "description": "Whether the action bar wraps or stays on one line.",
@@ -674,6 +679,11 @@
                 "description": "Whether typing filters the list or navigates it.",
                 "type": "'filter' | 'navigate'"
               },
+              {
+                "name": "overlayGroup",
+                "description": "Scope the \"one overlay open at a time\" coordination to a named group. Overlays (multiselects, datepickers, external popovers) sharing a group dismiss each other when one opens; different groups are independent. Unset = the default (ungrouped) group.",
+                "type": "string | null"
+              },
               {
                 "name": "actionsLayout",
                 "description": "Whether the action bar wraps or stays on one line.",