@keenmate/web-multiselect 2.0.0-rc11 → 2.0.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 (18) hide show
  1. package/README.md +35 -15
  2. package/component-variables.manifest.json +23 -1
  3. package/custom-elements.json +497 -9
  4. package/dist/index.d.ts +195 -5
  5. package/dist/multiselect.js +1415 -1140
  6. package/dist/multiselect.umd.js +12 -12
  7. package/dist/style.css +1 -1
  8. package/docs/usage.md +1 -0
  9. package/package.json +104 -104
  10. package/src/css/animations.css +6 -1
  11. package/src/css/badges.css +14 -0
  12. package/src/css/controls.css +11 -5
  13. package/src/css/floating.css +15 -4
  14. package/src/css/options.css +81 -17
  15. package/src/css/variables.css +110 -35
  16. package/vscode.css-custom-data.json +15 -0
  17. package/vscode.html-custom-data.json +16 -1
  18. package/web-types.json +68 -4
package/src/css/floating.css CHANGED
@@ -37,6 +37,10 @@
37
37
  .ms__dropdown {
38
38
  display: none;
39
39
  position: fixed;
40
+ /* --ms-dropdown-width is the input wrapper's offsetWidth (a border-box measurement), so this
41
+ surface must be border-box too — otherwise its own 1px border is added on top and the panel
42
+ renders 2px wider than the input it's anchored to. */
43
+ box-sizing: border-box;
40
44
  font-family: inherit; /* Ensure font inherits from container */
41
45
  z-index: var(--ms-z-index-dropdown);
42
46
  background: var(--ms-dropdown-bg);
@@ -284,13 +288,16 @@
284
288
  width: var(--ms-fullscreen-nav-btn-icon-size);
285
289
  height: var(--ms-fullscreen-nav-btn-icon-size);
286
290
  background-color: currentColor;
287
- -webkit-mask: var(--ms-icon-chevron) center / contain no-repeat;
288
- mask: var(--ms-icon-chevron) center / contain no-repeat;
291
+ -webkit-mask: var(--ms-fullscreen-nav-btn-icon) center / contain no-repeat;
292
+ mask: var(--ms-fullscreen-nav-btn-icon) center / contain no-repeat;
293
+ /* --ms-fullscreen-nav-btn-icon points RIGHT (defaults to the base chevron); rotate it to
294
+ point up for "prev". Its own token so a pre-oriented toggle glyph can't leak in here. */
295
+ transform: rotate(-90deg);
289
296
  }
290
297
 
291
- /* Chevron points up by default; the "next" (down) button flips it vertically. */
298
+ /* The "next" (down) button rotates the same right-pointing chevron the other way. */
292
299
  .ms__fullscreen-nav-btn--next::before {
293
- transform: scaleY(-1);
300
+ transform: rotate(90deg);
294
301
  }
295
302
 
296
303
  /* The leading element (search field's wrapper or the title) fills the bar, pushing
@@ -712,6 +719,10 @@
712
719
  .ms__selected-popover {
713
720
  display: none;
714
721
  position: fixed;
722
+ /* Border-box so the 1px border sits inside --ms-selected-popover-width (the input's border-box
723
+ offsetWidth) rather than adding to it — otherwise the popover renders 2px wider than the input
724
+ and overhangs it. Matches .ms__dropdown. */
725
+ box-sizing: border-box;
715
726
  z-index: var(--ms-z-index-popover);
716
727
  background: var(--ms-selected-popover-bg);
717
728
  border: var(--ms-selected-popover-border);
package/src/css/options.css CHANGED
@@ -246,15 +246,13 @@
246
246
  content: '';
247
247
  position: absolute;
248
248
  display: none;
249
- /* Checkmark positioning (centered, slightly offset for visual balance) */
250
- left: 50%;
251
- top: 40%;
252
- width: 30%;
253
- height: 55%;
254
- transform: translate(-50%, -50%) rotate(45deg);
255
- /* Checkmark shape (right and bottom borders form the check) */
256
- border: solid var(--ms-checkbox-checkmark-color);
257
- border-width: 0 var(--ms-checkbox-checkmark-thickness, 2px) var(--ms-checkbox-checkmark-thickness, 2px) 0;
249
+ /* Checkmark glyph — a currentColor-tinted mask so it follows --ms-icon-check →
250
+ the shared --base-icon-check contract (was a CSS-border checkmark). Fills the
251
+ box; the Lucide glyph's own viewBox padding keeps it visually inset. */
252
+ inset: 0;
253
+ background-color: var(--ms-checkbox-checkmark-color);
254
+ -webkit-mask: var(--ms-icon-check) no-repeat center / contain;
255
+ mask: var(--ms-icon-check) no-repeat center / contain;
258
256
  }
259
257
 
260
258
  /* Hover state */
@@ -283,14 +281,10 @@
283
281
 
284
282
  .ms__checkbox--indeterminate::after {
285
283
  display: block;
286
- top: 50%;
287
- left: 50%;
288
- width: 55%;
289
- height: 0;
290
- /* Override the rotated checkmark: a centered horizontal dash. */
291
- transform: translate(-50%, -50%);
292
- border: none;
293
- border-bottom: var(--ms-checkbox-checkmark-thickness, 2px) solid var(--ms-checkbox-checkmark-color);
284
+ /* Swap the check glyph for the dash — follows --ms-icon-indeterminate →
285
+ --base-icon-indeterminate. Inherits the mask box from .ms__checkbox::after. */
286
+ -webkit-mask-image: var(--ms-icon-indeterminate);
287
+ mask-image: var(--ms-icon-indeterminate);
294
288
  }
295
289
 
296
290
  .ms__checkbox--indeterminate:hover:not(:disabled) {
@@ -441,6 +435,76 @@
441
435
  color: var(--ms-empty-color);
442
436
  }
443
437
 
438
+ /* "Add new" prompt — replaces the empty message when isAddNewAllowed is on and the
439
+ user has typed a term with no matches. Clickable (data-action="add-new" → handleAddNew);
440
+ styled like an accent-coloured option row so it reads as an action. */
441
+ .ms__add-new {
442
+ display: flex;
443
+ align-items: center;
444
+ gap: var(--ms-add-new-gap);
445
+ /* Size like a normal option row (padding + content) — NOT the tall empty/loading
446
+ footprint. The empty-state min-height is only for the "no results" / spinner swap. */
447
+ padding: var(--ms-add-new-padding);
448
+ font-size: var(--ms-add-new-font-size);
449
+ color: var(--ms-add-new-color);
450
+ cursor: pointer;
451
+ /* Same rationale as .ms__option: a click here is an action gesture, not text selection. */
452
+ user-select: none;
453
+ -webkit-user-select: none;
454
+ }
455
+
456
+ /* Hover gated to real pointing devices (see .ms__option for the touch rationale). */
457
+ @media (hover: hover) {
458
+ .ms__add-new:hover {
459
+ background: var(--ms-add-new-bg-hover);
460
+ color: var(--ms-add-new-color-hover);
461
+ }
462
+ }
463
+
464
+ /* Keyboard focus (arrow-navigated) — mirror the hover surface so the prompt reads
465
+ as the active row, matching .ms__option--focused. */
466
+ .ms__add-new--focused {
467
+ background: var(--ms-add-new-bg-hover);
468
+ color: var(--ms-add-new-color-hover);
469
+ }
470
+
471
+ /* Pending state — an async addNewCallback is in flight (spinner + "Adding …"). Not
472
+ clickable (no data-action on the row), so drop the pointer cursor. */
473
+ .ms__add-new--loading {
474
+ cursor: default;
475
+ }
476
+
477
+ /* Self-contained spinner (no external .pa-loader dependency — it can't cross the
478
+ shadow boundary). Sized to the prompt's icon box; tinted by the row's currentColor. */
479
+ .ms__add-new-spinner {
480
+ flex-shrink: 0;
481
+ width: var(--ms-add-new-icon-size);
482
+ height: var(--ms-add-new-icon-size);
483
+ border-radius: 50%;
484
+ border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
485
+ border-top-color: currentColor;
486
+ animation: ms-spin 0.6s linear infinite;
487
+ }
488
+
489
+ @media (prefers-reduced-motion: reduce) {
490
+ .ms__add-new-spinner { animation-duration: 1.5s; }
491
+ }
492
+
493
+ .ms__add-new-icon {
494
+ flex-shrink: 0;
495
+ width: var(--ms-add-new-icon-size);
496
+ height: var(--ms-add-new-icon-size);
497
+ background-color: currentColor;
498
+ -webkit-mask: var(--ms-icon-add-new) center / contain no-repeat;
499
+ mask: var(--ms-icon-add-new) center / contain no-repeat;
500
+ }
501
+
502
+ .ms__add-new-text {
503
+ overflow: hidden;
504
+ text-overflow: ellipsis;
505
+ white-space: nowrap;
506
+ }
507
+
444
508
  /* Loading state */
445
509
  .ms__loader {
446
510
  display: flex;
package/src/css/variables.css CHANGED
@@ -45,10 +45,12 @@
45
45
  BASE SIZING UNIT
46
46
  ==========================================================================
47
47
  All sizing values are based on this unit for consistent scaling.
48
+ Bridges to the shared --base-rem knob so a theme scales every KeenMate
49
+ component from one variable; falls back to 10px when no base layer is loaded.
48
50
  Default: 10px produces standard pixel values
49
- Pure Admin: Set to 1rem (inherits from html { font-size: 10px })
50
- Custom: Set to any value to scale all sizes proportionally */
51
- --ms-rem: 10px;
51
+ Pure Admin: Set --base-rem to 1rem (inherits from html { font-size: 10px })
52
+ Custom: Set --base-rem (or --ms-rem for this component only) to scale all sizes */
53
+ --ms-rem: var(--base-rem, 10px);
52
54
 
53
55
  /* ==========================================================================
54
56
  FONT FAMILY (set at :host so all shadow DOM content inherits)
@@ -124,6 +126,12 @@
124
126
  --ms-toggle-icon-color: var(--ms-text-color-3);
125
127
  --ms-toggle-icon-color-open: var(--ms-text-color-3);
126
128
  --ms-toggle-icon-size: calc(1.6 * var(--ms-rem));
129
+ /* Toggle chevron rotation, closed vs open. Defaults orient the directional right-pointing
130
+ --base-icon-chevron (90° → points down when closed, -90° → up when open). Override BOTH
131
+ when a theme supplies a PRE-ORIENTED chevron glyph: `0deg` / `0deg` for a static glyph,
132
+ or `0deg` / `180deg` for a down-glyph that flips up on open. */
133
+ --ms-toggle-rotate-closed: 90deg;
134
+ --ms-toggle-rotate-open: -90deg;
127
135
 
128
136
  /* Counter Badge (in Input) Semantic Variables */
129
137
  --ms-counter-badge-bg: var(--ms-accent-color);
@@ -181,15 +189,20 @@
181
189
 
182
190
  /* Badge Semantic Variables */
183
191
  --ms-badge-bg: var(--ms-accent-color-light);
184
- /* Hover deepens the accent tint (dark-mode aware). Using --ms-input-bg here
185
- made a light-blue badge go WHITE on hover — reading as "background lost". */
186
- --ms-badge-bg-hover: var(--base-hover-bg, var(--ms-accent-color-light-hover));
192
+ /* Hover DEEPENS the badge's OWN rest background toward its OWN text colour.
193
+ Deliberately self-referential: NOT --base-hover-bg (a generic surface token →
194
+ accent pill flipped near-white in dark/neon), and NOT --ms-accent-color-light-hover
195
+ (a separate accent-tint token themes forget to set when they change the accent →
196
+ a black brutalist pill fell back to the hardcoded blue tint on hover). Mixing 12%
197
+ of the text colour into the rest bg is a subtle, always-readable nudge that follows
198
+ whatever bg/text pair a theme sets. */
199
+ --ms-badge-bg-hover: color-mix(in srgb, var(--ms-badge-bg) 88%, var(--ms-badge-text-color) 12%);
187
200
  --ms-badge-bg-active: var(--ms-accent-color-light-hover);
188
201
 
189
202
  /* Badge Text Semantic Variables */
190
203
  --ms-badge-text-bg: var(--ms-accent-color-light);
191
204
  --ms-badge-text-color: var(--ms-accent-color);
192
- --ms-badge-text-bg-hover: var(--base-hover-bg, var(--ms-accent-color-light-hover));
205
+ --ms-badge-text-bg-hover: color-mix(in srgb, var(--ms-badge-text-bg) 88%, var(--ms-badge-text-color) 12%);
193
206
  --ms-badge-text-color-hover: var(--ms-badge-text-color);
194
207
 
195
208
  /* Badge Remove Button Semantic Variables */
@@ -197,14 +210,24 @@
197
210
  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
198
211
  --ms-badge-remove-color: var(--ms-text-color-on-accent);
199
212
 
200
- /* Badge Counter Variant Semantic Variables */
201
- /* Neutral/gray styling to distinguish from accent-colored selection badges */
213
+ /* Badge Counter Variant Semantic Variables
214
+ Neutral/gray styling to distinguish from accent-coloured selection badges.
215
+ Self-contained: the pill is a translucent tint of the strong text colour, and
216
+ text/glyph use the text-colour hierarchy — so contrast holds even when a theme
217
+ omits --base-main-bg (the old --ms-primary-bg-hover chain collapsed to
218
+ light-on-light there). The counter must NOT inherit the accent-coloured hover
219
+ of regular badges — its text stays neutral; only the surface deepens. */
202
220
  --ms-badge-counter-border-color: var(--ms-border-color);
203
- --ms-badge-counter-text-bg: var(--ms-primary-bg-hover);
221
+ --ms-badge-counter-text-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent);
222
+ --ms-badge-counter-text-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent);
204
223
  --ms-badge-counter-text-color: var(--ms-text-color-1);
205
- --ms-badge-counter-remove-bg: var(--ms-text-color-3);
206
- --ms-badge-counter-remove-bg-hover: var(--ms-text-color-1);
207
- --ms-badge-counter-remove-color: var(--ms-text-color-on-accent);
224
+ --ms-badge-counter-text-color-hover: var(--ms-text-color-1);
225
+ --ms-badge-counter-remove-bg: color-mix(in srgb, var(--ms-text-color-1) 10%, transparent);
226
+ --ms-badge-counter-remove-bg-hover: color-mix(in srgb, var(--ms-text-color-1) 16%, transparent);
227
+ /* Neutral glyph (text-3 at rest → text-1 on hover), NOT white-on-accent — the old
228
+ on-accent glyph vanished once the hover bg became a light text colour. */
229
+ --ms-badge-counter-remove-color: var(--ms-text-color-3);
230
+ --ms-badge-counter-remove-color-hover: var(--ms-text-color-1);
208
231
 
209
232
  /* Count Display Semantic Variables */
210
233
  --ms-counter-wrapper-bg: transparent;
@@ -215,7 +238,7 @@
215
238
  --ms-count-clear-bg: transparent;
216
239
  --ms-count-clear-bg-hover: var(--ms-accent-color);
217
240
  --ms-count-clear-color: var(--ms-text-color-3);
218
- --ms-count-clear-color-hover: var(--ms-accent-color);
241
+ --ms-count-clear-color-hover: var(--ms-text-color-on-accent);
219
242
 
220
243
  /* Tooltip Semantic Variables
221
244
  Tooltips invert relative to the page: dark tooltip on light page, light tooltip on dark page.
@@ -232,7 +255,7 @@
232
255
  --ms-selected-popover-close-bg: transparent;
233
256
  --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
234
257
  --ms-selected-popover-close-color: var(--ms-text-color-3);
235
- --ms-selected-popover-close-color-hover: var(--ms-accent-color);
258
+ --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent);
236
259
 
237
260
  /* ==========================================================================
238
261
  INPUT COMPONENT
@@ -244,7 +267,9 @@
244
267
  --ms-input-border-width: 1px;
245
268
  --ms-input-border-radius: var(--ms-border-radius-md);
246
269
  --ms-input-text: var(--ms-text-color-1);
247
- --ms-input-bg-disabled: rgba(107, 114, 128, 0.05);
270
+ /* Prefers the shared --base token (light-dark aware, so it adapts on dark themes);
271
+ the flat gray is the standalone fallback. */
272
+ --ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
248
273
 
249
274
  /* ==========================================================================
250
275
  INPUT SIZE VARIANTS — currently unused (commented out)
@@ -294,8 +319,8 @@
294
319
  ========================================================================== */
295
320
  --ms-input-clear-size: calc(2.4 * var(--ms-rem));
296
321
  --ms-input-clear-icon-size: calc(1.4 * var(--ms-rem));
297
- --ms-input-clear-color: var(--ms-text-secondary);
298
- --ms-input-clear-bg-hover: var(--ms-option-bg-matched, transparent);
322
+ --ms-input-clear-color: var(--base-input-clear-color, var(--ms-text-secondary));
323
+ --ms-input-clear-bg-hover: var(--base-input-clear-bg-hover, var(--ms-option-bg-matched, transparent));
299
324
  --ms-input-clear-border-radius: var(--ms-border-radius); /* matches the input; square when radius is 0 */
300
325
 
301
326
  /* ==========================================================================
@@ -331,7 +356,9 @@
331
356
  default 1px --ms-dropdown-border; if you theme a thicker border, override this to
332
357
  match (panel radius − border width). Clamped at 0 so a squared panel stays square. */
333
358
  --ms-dropdown-inner-border-radius: max(0px, calc(var(--ms-dropdown-border-radius) - 1px));
334
- --ms-dropdown-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
359
+ /* Prefers the shared --base token (light-dark aware — deepens on dark themes); the
360
+ flat two-layer shadow is the standalone fallback. */
361
+ --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));
335
362
  /* Live input width, published by JS each positioning frame. It's the only panel
336
363
  dimension CSS can't measure itself, so panels that "match the input" read it. */
337
364
  --ms-input-current-width: auto;
@@ -449,9 +476,21 @@
449
476
  --base-* colors but not color-scheme (e.g. the neon example), producing a jarring near-white
450
477
  chip. Stays fully themeable via this variable. */
451
478
  --ms-fullscreen-nav-btn-bg-hover: color-mix(in srgb, var(--ms-accent-color) 22%, transparent);
452
- /* SVG chevron glyph — rendered via mask so it inherits the button color via currentColor.
453
- Points up; the "next" button flips it with scaleY(-1). Override with any mask-friendly SVG. */
454
- --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>");
479
+ /* Pager match-navigator glyph (the prev/next ^ ⌄ buttons). Defaults to the shared
480
+ --ms-icon-chevron, so it follows the base chevron out of the box. The pager rotates this
481
+ source -90° (prev → up) / 90° (next → down), so it expects a RIGHT-pointing glyph — override
482
+ it here if a theme points --base-icon-chevron somewhere else (e.g. a pre-oriented toggle
483
+ caret) and you don't want that leaking into the pager. */
484
+ --ms-fullscreen-nav-btn-icon: var(--ms-icon-chevron);
485
+ /* Chevron glyph — the dropdown toggle's affordance, and the default source for the pager
486
+ (via --ms-fullscreen-nav-btn-icon above). Wired to the --base-icon contract
487
+ (--base-icon-chevron, a Lucide angle that fills its viewBox, so it renders at full optical
488
+ size — unlike the small solid caret) with an inline right-pointing chevron as the standalone
489
+ fallback. It points RIGHT at rest; consumers rotate it into place (toggle: 90° closed → down,
490
+ -90° open → up — themeable via --ms-toggle-rotate-*; pager: -90° → up, 90° → down). Override
491
+ --ms-icon-chevron (or --base-icon-chevron globally) to re-skin both at once, or override
492
+ --ms-fullscreen-nav-btn-icon alone to diverge the pager. */
493
+ --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>"));
455
494
  /* SVG "i-in-a-circle" glyph — rendered via mask so it inherits the info color via
456
495
  currentColor. Override with any mask-friendly url() SVG. */
457
496
  --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>");
@@ -607,6 +646,16 @@
607
646
  --ms-empty-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
608
647
  --ms-empty-color: var(--ms-text-color-3);
609
648
 
649
+ /* "Add new" prompt (empty state when isAddNewAllowed + typed text). A clickable
650
+ row keyed off the accent so it reads as an action, not a dead message. */
651
+ --ms-add-new-padding: var(--ms-option-padding);
652
+ --ms-add-new-gap: var(--ms-option-gap);
653
+ --ms-add-new-font-size: var(--ms-empty-font-size);
654
+ --ms-add-new-color: var(--ms-accent-color);
655
+ --ms-add-new-color-hover: var(--ms-accent-color);
656
+ --ms-add-new-bg-hover: var(--ms-option-bg-hover);
657
+ --ms-add-new-icon-size: calc(1.6 * var(--ms-rem));
658
+
610
659
  /* Loader */
611
660
  --ms-loader-padding: calc(1.6 * var(--ms-rem)) calc(1.2 * var(--ms-rem));
612
661
  --ms-loader-gap: calc(0.8 * var(--ms-rem));
@@ -653,12 +702,16 @@
653
702
  --ms-badge-remove-font-size: calc(var(--base-font-size-xs, 1.2) * var(--ms-rem));
654
703
  --ms-badge-remove-bg-hover: var(--ms-accent-color-hover);
655
704
  --ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
656
- --ms-badge-remove-icon-size: calc(1.0 * var(--ms-rem));
705
+ /* Matches the input-clear / count-clear ✕ glyphs (also 1.4×rem) so all three read at the
706
+ same size; the old 1.0×rem was fine for the default stroke `x` but rendered a filled
707
+ custom --base-icon-remove glyph (square-with-x) too small inside the mask box. */
708
+ --ms-badge-remove-icon-size: calc(1.4 * var(--ms-rem));
657
709
  /* SVG X glyph (Lucide `x`) — rendered via mask so it inherits --ms-badge-remove-color via
658
- currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕). Kept in
659
- lockstep with the other icons (all Lucide) so the set stays visually consistent. Override
660
- this var to use a different shape; the value must be a CSS url() to a mask-friendly SVG. */
661
- --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>");
710
+ currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕). Follows the
711
+ shared --base-icon contract: prefers --base-icon-remove, then --base-icon-close, so a theme
712
+ re-skinning its close/remove glyph re-skins these too; the inline Lucide `x` is the standalone
713
+ fallback (no base layer loaded). Override --ms-icon-remove to diverge from the base contract. */
714
+ --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>")));
662
715
  /* SVG "clear search" glyph (Lucide `search-x`: a magnifier with an x) used by the
663
716
  fullscreen search field's clear button. Deliberately NOT the bare X of
664
717
  --ms-icon-remove so it doesn't read as a second close button beside the overlay
@@ -669,8 +722,17 @@
669
722
  CURRENT mode: a plain magnifier (Lucide `search`) for navigate, a funnel (Lucide
670
723
  `filter`) for filter. Rendered via mask (inherit color via currentColor); override
671
724
  with any mask-friendly SVG url(). */
672
- --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>");
673
- --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>");
725
+ --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>"));
726
+ --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>"));
727
+ /* Checkbox glyphs — the checkmark (checked) and dash (indeterminate/tri-state),
728
+ rendered as masks so they inherit --ms-checkbox-checkmark-color and follow the
729
+ shared --base-icon-* contract. Override either to diverge from the base. */
730
+ --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>"));
731
+ --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>"));
732
+ /* "Add new" glyph (empty-state create prompt) — a plus, rendered as a mask so it
733
+ inherits the row's currentColor. Follows the shared --base-icon-* contract:
734
+ prefers --base-icon-plus, then --base-icon-add, then an inline "+" fallback. */
735
+ --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>")));
674
736
 
675
737
  /* Badge Counter Indicator (layout-only properties, colors come from semantic section) */
676
738
  --ms-badge-counter-bg: transparent;
@@ -716,10 +778,18 @@
716
778
  --ms-count-clear-color: var(--ms-text-color-3);
717
779
  --ms-count-clear-font-size: calc(var(--base-font-size-lg, 1.8) * var(--ms-rem));
718
780
  --ms-count-clear-border-radius: var(--ms-border-radius-sm);
719
- --ms-count-clear-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
720
- --ms-count-clear-color-hover: var(--ms-accent-color);
781
+ /* Hover fills with SOLID accent and flips the glyph to text-on-accent — mirrors
782
+ .ms__badge-remove. The old "accent-tint bg + accent glyph" was same-hue: the ✕
783
+ melted into its own hover background (invisible on near-white accents like
784
+ minimal-dark, low-contrast blue-on-blue everywhere else). */
785
+ --ms-count-clear-bg-hover: var(--ms-accent-color);
786
+ --ms-count-clear-color-hover: var(--ms-text-color-on-accent);
721
787
  --ms-count-clear-icon-size: calc(1.4 * var(--ms-rem));
722
- --ms-icon-clear: var(--ms-icon-remove);
788
+ /* Field-clear ✕ (input clear + count clear). Its own knob in the --base-icon contract:
789
+ prefers --base-icon-clear so a theme can diverge field-clear from close/remove, then falls
790
+ through to --ms-icon-remove (which itself resolves --base-icon-remove → --base-icon-close →
791
+ inline ✕). Same glyph as remove by default; override --base-icon-clear alone to split them. */
792
+ --ms-icon-clear: var(--base-icon-clear, var(--ms-icon-remove));
723
793
 
724
794
  /* ==========================================================================
725
795
  TOOLTIPS
@@ -802,8 +872,10 @@
802
872
  --ms-selected-popover-close-color: var(--ms-text-color-3);
803
873
  --ms-selected-popover-close-font-size: calc(var(--base-font-size-xl, 2) * var(--ms-rem));
804
874
  --ms-selected-popover-close-border-radius: var(--ms-border-radius-sm);
805
- --ms-selected-popover-close-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
806
- --ms-selected-popover-close-color-hover: var(--ms-accent-color);
875
+ /* Solid accent fill + on-accent glyph (see .ms__count-clear note) — avoids the
876
+ same-hue "accent glyph on accent-tint" melt on hover. */
877
+ --ms-selected-popover-close-bg-hover: var(--ms-accent-color);
878
+ --ms-selected-popover-close-color-hover: var(--ms-text-color-on-accent);
807
879
  --ms-selected-popover-close-icon-size: calc(1.4 * var(--ms-rem));
808
880
 
809
881
  /* ==========================================================================
@@ -853,9 +925,12 @@
853
925
  /* ==========================================================================
854
926
  TRANSITIONS & EFFECTS
855
927
  ========================================================================== */
928
+ /* Durations stay local: the --ms scale (150/200ms) doesn't line up with --base-duration-*
929
+ (fast 100ms / normal 150ms / medium 250ms), so wiring would silently change timings. */
856
930
  --ms-transition-fast: 150ms;
857
931
  --ms-transition-normal: 200ms;
858
- --ms-easing-snappy: cubic-bezier(0.4, 0, 0.2, 1);
932
+ /* Easing is an exact match for --base-ease-standard, so it flows from the shared token. */
933
+ --ms-easing-snappy: var(--base-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
859
934
 
860
935
  /* ==========================================================================
861
936
  OPACITY VALUES
package/vscode.css-custom-data.json CHANGED
@@ -1028,6 +1028,21 @@
1028
1028
  "description": "Remove icon as CSS url() to a mask-friendly SVG; color comes from currentColor",
1029
1029
  "values": []
1030
1030
  },
1031
+ {
1032
+ "name": "--ms-icon-filter",
1033
+ "description": "Funnel glyph (fullscreen search-mode toggle); chains to --base-icon-filter",
1034
+ "values": []
1035
+ },
1036
+ {
1037
+ "name": "--ms-icon-check",
1038
+ "description": "Checkmark glyph (mask) for a checked checkbox/option; chains to --base-icon-check",
1039
+ "values": []
1040
+ },
1041
+ {
1042
+ "name": "--ms-icon-indeterminate",
1043
+ "description": "Dash glyph (mask) for a tri-state/partial checkbox; chains to --base-icon-indeterminate",
1044
+ "values": []
1045
+ },
1031
1046
  {
1032
1047
  "name": "--ms-badge-counter-bg",
1033
1048
  "description": "Counter badge background",
package/vscode.html-custom-data.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "tags": [
5
5
  {
6
6
  "name": "web-multiselect",
7
- "description": "\n---\n\n\n### **Events:**\n - **select** - An option was selected. `detail.option` is the selected option; `detail.selectedOptions`/`detail.selectedValues` are the full selection.\n- **deselect** - An option was removed from the selection. `detail.option` is that option.\n- **change** - The selection changed. `detail.selectedOptions`/`detail.selectedValues` are the full selection.\n\n### **Methods:**\n - **formResetCallback(): _void_** - Called by the browser when the surrounding <form> is reset. Clears the\r\npicker's selection so the control participates in the standard reset.\n\n\n\n\n\n\n\n- **showMessage(content: _string | HTMLElement_, opts: _MessageOptions_): _void_** - Surface a transient message (\"toast\") on top of the component — visible even in the\r\nfullscreen overlay, where page-level UI is hidden behind the sheet. Content is text or\r\nan element; `opts.variant` sets the tone and `opts.duration` the auto-dismiss (0 =\r\nsticky). Also reached automatically when a `beforeSelect`/`beforeDeselect` callback\r\nreturns a reason string.\n- **hideMessage(): _void_** - Dismiss the transient message shown by showMessage, if any.\n- **open(): _void_** - Open the dropdown.\n- **close(): _void_** - Close the dropdown.\n- **toggle(): _void_** - Toggle the dropdown open/closed.\n\n### **CSS Properties:**\n - **--ms-rem** - Base sizing unit for proportional scaling (default: 10px) _(default: undefined)_\n- **--ms-accent-color** - Primary accent color _(default: undefined)_\n- **--ms-accent-color-hover** - Accent color on hover _(default: undefined)_\n- **--ms-accent-color-active** - Accent color when pressed _(default: undefined)_\n- **--ms-accent-color-light** - Light accent background _(default: undefined)_\n- **--ms-accent-color-light-hover** - Light accent hover _(default: undefined)_\n- **--ms-text-color-1** - Primary text color _(default: undefined)_\n- **--ms-text-color-2** - Secondary text color _(default: undefined)_\n- **--ms-text-color-3** - Tertiary text color _(default: undefined)_\n- **--ms-text-color-4** - Quaternary text color _(default: undefined)_\n- **--ms-text-color-on-accent** - Text on accent backgrounds _(default: undefined)_\n- **--ms-text-primary** - Legacy alias for text-color-1 _(default: undefined)_\n- **--ms-text-secondary** - Legacy alias for text-color-3 _(default: undefined)_\n- **--ms-primary-bg** - Hover/focus background (options, action buttons, counter); reads --base-hover-bg _(default: undefined)_\n- **--ms-primary-bg-hover** - Active/stronger background (counter badge text); reads --base-active-bg _(default: undefined)_\n- **--ms-border-color** - Default border color _(default: undefined)_\n- **--ms-border** - Full border shorthand _(default: undefined)_\n- **--ms-input-bg** - Input field background _(default: undefined)_\n- **--ms-input-color** - Input text color _(default: undefined)_\n- **--ms-input-border** - Input border _(default: undefined)_\n- **--ms-input-border-hover** - Input border on hover _(default: undefined)_\n- **--ms-input-border-focus** - Input border when focused _(default: undefined)_\n- **--ms-input-placeholder-color** - Placeholder text color _(default: undefined)_\n- **--ms-input-bg-disabled** - Disabled input background _(default: undefined)_\n- **--ms-input-padding** - Input padding _(default: undefined)_\n- **--ms-input-padding-right** - Input right padding (for toggle) _(default: undefined)_\n- **--ms-input-height** - Input height _(default: undefined)_\n- **--ms-input-font-size** - Input font size _(default: undefined)_\n- **--ms-input-border-width** - Input border width _(default: undefined)_\n- **--ms-input-border-radius** - Input border radius _(default: undefined)_\n- **--ms-input-text** - Input text color _(default: undefined)_\n- **--ms-input-size-xs-font** - XS size font _(default: undefined)_\n- **--ms-input-size-xs-padding-v** - XS vertical padding _(default: undefined)_\n- **--ms-input-size-xs-padding-h** - XS horizontal padding _(default: undefined)_\n- **--ms-input-size-xs-height** - XS input height _(default: undefined)_\n- **--ms-input-size-sm-font** - SM size font _(default: undefined)_\n- **--ms-input-size-sm-padding-v** - SM vertical padding _(default: undefined)_\n- **--ms-input-size-sm-padding-h** - SM horizontal padding _(default: undefined)_\n- **--ms-input-size-sm-height** - SM input height _(default: undefined)_\n- **--ms-input-size-md-font** - MD size font _(default: undefined)_\n- **--ms-input-size-md-padding-v** - MD vertical padding _(default: undefined)_\n- **--ms-input-size-md-padding-h** - MD horizontal padding _(default: undefined)_\n- **--ms-input-size-md-height** - MD input height _(default: undefined)_\n- **--ms-input-size-lg-font** - LG size font _(default: undefined)_\n- **--ms-input-size-lg-padding-v** - LG vertical padding _(default: undefined)_\n- **--ms-input-size-lg-padding-h** - LG horizontal padding _(default: undefined)_\n- **--ms-input-size-lg-height** - LG input height _(default: undefined)_\n- **--ms-input-size-xl-font** - XL size font _(default: undefined)_\n- **--ms-input-size-xl-padding-v** - XL vertical padding _(default: undefined)_\n- **--ms-input-size-xl-padding-h** - XL horizontal padding _(default: undefined)_\n- **--ms-input-size-xl-height** - XL input height _(default: undefined)_\n- **--ms-toggle-right** - Toggle icon right position _(default: undefined)_\n- **--ms-toggle-color** - Toggle icon color _(default: undefined)_\n- **--ms-toggle-icon-color** - Toggle icon color (semantic) _(default: undefined)_\n- **--ms-toggle-icon-color-open** - Toggle icon color when open _(default: undefined)_\n- **--ms-counter-offset** - Counter badge offset _(default: undefined)_\n- **--ms-counter-padding** - Counter badge padding _(default: undefined)_\n- **--ms-counter-bg** - Counter badge background _(default: undefined)_\n- **--ms-counter-color** - Counter badge text color _(default: undefined)_\n- **--ms-counter-font-size** - Counter badge font size _(default: undefined)_\n- **--ms-counter-font-weight** - Counter badge font weight _(default: undefined)_\n- **--ms-counter-border-radius** - Counter badge border radius _(default: undefined)_\n- **--ms-counter-bg-hover** - Counter badge hover background _(default: undefined)_\n- **--ms-counter-badge-bg** - Counter badge semantic background _(default: undefined)_\n- **--ms-counter-badge-bg-hover** - Counter badge semantic hover _(default: undefined)_\n- **--ms-counter-badge-color** - Counter badge semantic color _(default: undefined)_\n- **--ms-hint-padding** - Floating hint padding _(default: undefined)_\n- **--ms-hint-border** - Floating hint border _(default: undefined)_\n- **--ms-hint-border-radius** - Floating hint border radius _(default: undefined)_\n- **--ms-hint-box-shadow** - Floating hint shadow _(default: undefined)_\n- **--ms-hint-font-size** - Floating hint font size _(default: undefined)_\n- **--ms-hint-bg** - Floating hint background _(default: undefined)_\n- **--ms-hint-color** - Floating hint text color _(default: undefined)_\n- **--ms-hint-border-color** - Floating hint border color _(default: undefined)_\n- **--ms-dropdown-bg** - Dropdown background _(default: undefined)_\n- **--ms-dropdown-text-color** - Dropdown text color _(default: undefined)_\n- **--ms-dropdown-border** - Dropdown border _(default: undefined)_\n- **--ms-dropdown-border-color** - Dropdown border color _(default: undefined)_\n- **--ms-dropdown-border-radius** - Dropdown border radius _(default: undefined)_\n- **--ms-dropdown-box-shadow** - Dropdown shadow _(default: undefined)_\n- **--ms-dropdown-box-shadow-semantic** - Dropdown semantic shadow _(default: undefined)_\n- **--ms-dropdown-width** - Options dropdown width (defaults to the input width; also set via the dropdown-width attribute) _(default: undefined)_\n- **--ms-options-max-height** - Options list max height _(default: undefined)_\n- **--ms-z-index-dropdown** - Dropdown z-index _(default: undefined)_\n- **--ms-z-index-sticky** - Sticky elements z-index _(default: undefined)_\n- **--ms-actions-gap** - Actions row gap _(default: undefined)_\n- **--ms-actions-padding** - Actions row padding _(default: undefined)_\n- **--ms-actions-border-bottom** - Actions row border _(default: undefined)_\n- **--ms-actions-bg** - Actions row background _(default: undefined)_\n- **--ms-actions-border-color** - Actions row border color _(default: undefined)_\n- **--ms-action-btn-padding** - Action button padding _(default: undefined)_\n- **--ms-action-btn-font-size** - Action button font size _(default: undefined)_\n- **--ms-action-btn-border** - Action button border _(default: undefined)_\n- **--ms-action-btn-border-radius** - Action button border radius _(default: undefined)_\n- **--ms-action-btn-bg** - Action button background _(default: undefined)_\n- **--ms-action-btn-color** - Action button color _(default: undefined)_\n- **--ms-action-btn-bg-hover** - Action button hover background _(default: undefined)_\n- **--ms-action-btn-border-color-hover** - Action button hover border _(default: undefined)_\n- **--ms-action-button-bg** - Semantic action button background _(default: undefined)_\n- **--ms-action-button-bg-hover** - Semantic action button hover _(default: undefined)_\n- **--ms-action-button-border-color** - Semantic action button border _(default: undefined)_\n- **--ms-action-button-border-color-hover** - Semantic action button hover border _(default: undefined)_\n- **--ms-action-button-color** - Semantic action button color _(default: undefined)_\n- **--ms-options-padding** - Options container padding _(default: undefined)_\n- **--ms-group-border-top** - Group border top _(default: undefined)_\n- **--ms-group-margin-top** - Group margin top _(default: undefined)_\n- **--ms-group-padding-top** - Group padding top _(default: undefined)_\n- **--ms-group-border-color** - Group border color _(default: undefined)_\n- **--ms-group-label-padding** - Group label padding _(default: undefined)_\n- **--ms-group-label-font-size** - Group label font size _(default: undefined)_\n- **--ms-group-label-font-weight** - Group label font weight _(default: undefined)_\n- **--ms-group-label-color** - Group label color _(default: undefined)_\n- **--ms-group-label-transform** - Group label text transform _(default: undefined)_\n- **--ms-group-label-letter-spacing** - Group label letter spacing _(default: undefined)_\n- **--ms-option-gap** - Option content gap _(default: undefined)_\n- **--ms-option-padding** - Option padding _(default: undefined)_\n- **--ms-option-padding-h** - Option horizontal padding _(default: undefined)_\n- **--ms-option-color** - Option text color _(default: undefined)_\n- **--ms-option-bg** - Option background _(default: undefined)_\n- **--ms-option-bg-hover** - Option hover background _(default: undefined)_\n- **--ms-option-bg-focused** - Option focused background _(default: undefined)_\n- **--ms-option-outline-focused** - Option focus outline _(default: undefined)_\n- **--ms-option-focus-outline-offset** - Option focus outline offset _(default: undefined)_\n- **--ms-option-bg-matched** - Matched option background _(default: undefined)_\n- **--ms-option-border-matched** - Matched option border _(default: undefined)_\n- **--ms-option-bg-selected** - Selected option background _(default: undefined)_\n- **--ms-option-text-color** - Option text color (semantic) _(default: undefined)_\n- **--ms-option-color-hover** - Option hover color _(default: undefined)_\n- **--ms-option-color-focused** - Option focused color _(default: undefined)_\n- **--ms-option-outline-color-focused** - Option focus outline color _(default: undefined)_\n- **--ms-option-color-matched** - Matched option color _(default: undefined)_\n- **--ms-option-border-matched-color** - Matched option border color _(default: undefined)_\n- **--ms-option-bg-focused-hover** - Focused option hover background _(default: undefined)_\n- **--ms-option-bg-matched-hover** - Matched option hover background _(default: undefined)_\n- **--ms-option-bg-selected-focused** - Selected focused background _(default: undefined)_\n- **--ms-option-bg-selected-matched** - Selected matched background _(default: undefined)_\n- **--ms-option-disabled-bg** - Disabled option background _(default: undefined)_\n- **--ms-option-bg-disabled-selected** - Disabled selected background _(default: undefined)_\n- **--ms-disabled-opacity** - Disabled option opacity _(default: undefined)_\n- **--ms-option-content-gap** - Option content gap _(default: undefined)_\n- **--ms-option-icon-size** - Option icon size _(default: undefined)_\n- **--ms-option-icon-font-size** - Option icon font size _(default: undefined)_\n- **--ms-option-title-font-size** - Option title font size _(default: undefined)_\n- **--ms-option-title-color** - Option title color _(default: undefined)_\n- **--ms-option-subtitle-margin-top** - Option subtitle margin _(default: undefined)_\n- **--ms-option-subtitle-font-size** - Option subtitle font size _(default: undefined)_\n- **--ms-option-subtitle-line-height** - Option subtitle line height _(default: undefined)_\n- **--ms-option-subtitle-color** - Option subtitle color _(default: undefined)_\n- **--ms-option-mark-bg** - Search match highlight background _(default: undefined)_\n- **--ms-option-mark-color** - Search match highlight color _(default: undefined)_\n- **--ms-option-mark-font-weight** - Search match highlight weight _(default: undefined)_\n- **--ms-checkbox-margin-top** - Checkbox margin top _(default: undefined)_\n- **--ms-checkbox-margin-right** - Checkbox margin right _(default: undefined)_\n- **--ms-checkbox-margin-bottom** - Checkbox margin bottom _(default: undefined)_\n- **--ms-checkbox-margin-left** - Checkbox margin left _(default: undefined)_\n- **--ms-checkbox-size** - Checkbox size _(default: undefined)_\n- **--ms-checkbox-scale** - Checkbox scale _(default: undefined)_\n- **--ms-checkbox-align** - Checkbox alignment _(default: undefined)_\n- **--ms-checkbox-bg** - Checkbox background _(default: undefined)_\n- **--ms-checkbox-border** - Checkbox border _(default: undefined)_\n- **--ms-checkbox-border-radius** - Checkbox border radius _(default: undefined)_\n- **--ms-checkbox-checked-bg** - Checked checkbox background _(default: undefined)_\n- **--ms-checkbox-checked-border** - Checked checkbox border _(default: undefined)_\n- **--ms-checkbox-checkmark-color** - Checkmark color _(default: undefined)_\n- **--ms-checkbox-hover-border-color** - Checkbox hover border _(default: undefined)_\n- **--ms-checkbox-disabled-bg** - Disabled checkbox background _(default: undefined)_\n- **--ms-checkbox-disabled-border** - Disabled checkbox border _(default: undefined)_\n- **--ms-checkbox-checked-bg-hover** - Checked checkbox hover background _(default: undefined)_\n- **--ms-checkbox-checked-border-color-hover** - Checked checkbox hover border _(default: undefined)_\n- **--ms-state-min-height** - Shared min-height for the empty and loading states so the dropdown doesn't resize when swapping between them _(default: undefined)_\n- **--ms-empty-padding** - Empty state padding _(default: undefined)_\n- **--ms-empty-font-size** - Empty state font size _(default: undefined)_\n- **--ms-empty-color** - Empty state text color _(default: undefined)_\n- **--ms-loader-padding** - Loader padding _(default: undefined)_\n- **--ms-loader-gap** - Loader gap _(default: undefined)_\n- **--ms-loading-text-font-size** - Loading text font size _(default: undefined)_\n- **--ms-loading-text-color** - Loading text color _(default: undefined)_\n- **--ms-loading-color** - Loading color (semantic) _(default: undefined)_\n- **--ms-badges-gap** - Badges container gap _(default: undefined)_\n- **--ms-badges-margin-bottom** - Badges margin bottom _(default: undefined)_\n- **--ms-badges-margin-top** - Badges margin top _(default: undefined)_\n- **--ms-badges-margin-left** - Badges margin left _(default: undefined)_\n- **--ms-badges-margin-right** - Badges margin right _(default: undefined)_\n- **--ms-badge-gap** - Badge internal gap _(default: undefined)_\n- **--ms-badge-height** - Badge height _(default: undefined)_\n- **--ms-badge-font-size** - Badge font size _(default: undefined)_\n- **--ms-badge-font-weight** - Badge font weight _(default: undefined)_\n- **--ms-badge-border-radius** - Badge border radius _(default: undefined)_\n- **--ms-badge-bg** - Badge background _(default: undefined)_\n- **--ms-badge-bg-hover** - Badge hover background _(default: undefined)_\n- **--ms-badge-bg-active** - Badge active background _(default: undefined)_\n- **--ms-badge-text-padding** - Badge text padding _(default: undefined)_\n- **--ms-badge-text-bg** - Badge text background _(default: undefined)_\n- **--ms-badge-text-color** - Badge text color _(default: undefined)_\n- **--ms-badge-text-border** - Badge text border _(default: undefined)_\n- **--ms-badge-text-bg-hover** - Badge text hover background _(default: undefined)_\n- **--ms-badge-text-color-hover** - Badge text hover color _(default: undefined)_\n- **--ms-badge-remove-width** - Badge remove button width _(default: undefined)_\n- **--ms-badge-remove-bg** - Badge remove button background _(default: undefined)_\n- **--ms-badge-remove-color** - Badge remove button color _(default: undefined)_\n- **--ms-badge-remove-border** - Badge remove button border _(default: undefined)_\n- **--ms-badge-remove-font-size** - Badge remove button font size (unused since 1.10.0 — kept for backward-compat) _(default: undefined)_\n- **--ms-badge-remove-icon-size** - Badge remove X icon size (mask SVG) _(default: undefined)_\n- **--ms-badge-remove-bg-hover** - Badge remove button hover background _(default: undefined)_\n- **--ms-badge-remove-box-shadow-focus** - Badge remove button focus shadow _(default: undefined)_\n- **--ms-icon-remove** - Remove icon as CSS url() to a mask-friendly SVG; color comes from currentColor _(default: undefined)_\n- **--ms-badge-counter-bg** - Counter badge background _(default: undefined)_\n- **--ms-badge-counter-border** - Counter badge border _(default: undefined)_\n- **--ms-badge-counter-border-color** - Counter badge border color _(default: undefined)_\n- **--ms-badge-counter-border-radius** - Counter badge border radius _(default: undefined)_\n- **--ms-badge-counter-text-color** - Counter badge text color _(default: undefined)_\n- **--ms-badge-counter-text-bg** - Counter badge text background _(default: undefined)_\n- **--ms-badge-counter-remove-bg** - Counter badge remove background _(default: undefined)_\n- **--ms-badge-counter-remove-color** - Counter badge remove color _(default: undefined)_\n- **--ms-badge-counter-remove-bg-hover** - Counter badge remove hover background _(default: undefined)_\n- **--ms-more-badge-bg** - More badge background _(default: undefined)_\n- **--ms-more-badge-hover-bg** - More badge hover background _(default: undefined)_\n- **--ms-more-badge-active-bg** - More badge active background _(default: undefined)_\n- **--ms-count-display-margin-bottom** - Count display margin bottom _(default: undefined)_\n- **--ms-count-display-margin-top** - Count display margin top _(default: undefined)_\n- **--ms-count-display-margin-left** - Count display margin left _(default: undefined)_\n- **--ms-count-display-margin-right** - Count display margin right _(default: undefined)_\n- **--ms-counter-wrapper-bg** - Counter wrapper background _(default: undefined)_\n- **--ms-counter-wrapper-border** - Counter wrapper border _(default: undefined)_\n- **--ms-counter-wrapper-border-radius** - Counter wrapper border radius _(default: undefined)_\n- **--ms-counter-wrapper-padding** - Counter wrapper padding _(default: undefined)_\n- **--ms-counter-wrapper-gap** - Counter wrapper gap _(default: undefined)_\n- **--ms-counter-wrapper-bg-hover** - Counter wrapper hover background _(default: undefined)_\n- **--ms-counter-wrapper-border-color** - Counter wrapper border color _(default: undefined)_\n- **--ms-counter-wrapper-border-color-hover** - Counter wrapper hover border _(default: undefined)_\n- **--ms-count-text-bg** - Count text background _(default: undefined)_\n- **--ms-count-text-border** - Count text border _(default: undefined)_\n- **--ms-count-text-font-size** - Count text font size _(default: undefined)_\n- **--ms-count-text-color** - Count text color _(default: undefined)_\n- **--ms-count-clear-size** - Count clear button size _(default: undefined)_\n- **--ms-count-clear-bg** - Count clear button background _(default: undefined)_\n- **--ms-count-clear-color** - Count clear button color _(default: undefined)_\n- **--ms-count-clear-font-size** - Count clear button font size (unused since 1.10.0 — kept for backward-compat) _(default: undefined)_\n- **--ms-count-clear-icon-size** - Count clear X icon size (mask SVG) _(default: undefined)_\n- **--ms-count-clear-border-radius** - Count clear button border radius _(default: undefined)_\n- **--ms-count-clear-bg-hover** - Count clear button hover background _(default: undefined)_\n- **--ms-count-clear-color-hover** - Count clear button hover color _(default: undefined)_\n- **--ms-icon-clear** - Clear icon as CSS url() to a mask-friendly SVG; defaults to var(--ms-icon-remove) _(default: undefined)_\n- **--ms-tooltip-bg** - Tooltip background _(default: undefined)_\n- **--ms-tooltip-text-color** - Tooltip text color _(default: undefined)_\n- **--ms-tooltip-color** - Tooltip color _(default: undefined)_\n- **--ms-tooltip-padding** - Tooltip padding _(default: undefined)_\n- **--ms-tooltip-border-radius** - Tooltip border radius _(default: undefined)_\n- **--ms-tooltip-font-size** - Tooltip font size _(default: undefined)_\n- **--ms-tooltip-max-width** - Tooltip max width _(default: undefined)_\n- **--ms-tooltip-shadow** - Tooltip shadow _(default: undefined)_\n- **--ms-tooltip-z-index** - Tooltip z-index _(default: undefined)_\n- **--ms-z-index-popover** - Popover z-index _(default: undefined)_\n- **--ms-selected-popover-width** - Selected popover width _(default: undefined)_\n- **--ms-selected-popover-max-height** - Selected popover max height _(default: undefined)_\n- **--ms-selected-popover-border** - Selected popover border _(default: undefined)_\n- **--ms-selected-popover-border-radius** - Selected popover border radius _(default: undefined)_\n- **--ms-selected-popover-box-shadow** - Selected popover shadow _(default: undefined)_\n- **--ms-selected-popover-bg** - Selected popover background _(default: undefined)_\n- **--ms-selected-popover-border-color** - Selected popover border color _(default: undefined)_\n- **--ms-selected-popover-header-padding** - Popover header padding _(default: undefined)_\n- **--ms-selected-popover-header-bg** - Popover header background _(default: undefined)_\n- **--ms-selected-popover-header-border-bottom** - Popover header border _(default: undefined)_\n- **--ms-selected-popover-header-font-size** - Popover header font size _(default: undefined)_\n- **--ms-selected-popover-header-font-weight** - Popover header font weight _(default: undefined)_\n- **--ms-selected-popover-header-color** - Popover header color _(default: undefined)_\n- **--ms-selected-popover-header-border-color** - Popover header border color _(default: undefined)_\n- **--ms-popover-close-size** - Popover close button size _(default: undefined)_\n- **--ms-selected-popover-close-bg** - Popover close button background _(default: undefined)_\n- **--ms-selected-popover-close-color** - Popover close button color _(default: undefined)_\n- **--ms-selected-popover-close-font-size** - Popover close button font size (unused since 1.10.0 — kept for backward-compat) _(default: undefined)_\n- **--ms-selected-popover-close-icon-size** - Popover close X icon size (mask SVG) _(default: undefined)_\n- **--ms-selected-popover-close-border-radius** - Popover close button border radius _(default: undefined)_\n- **--ms-selected-popover-close-bg-hover** - Popover close button hover background _(default: undefined)_\n- **--ms-selected-popover-close-color-hover** - Popover close button hover color _(default: undefined)_\n- **--ms-selected-popover-body-gap** - Popover body gap _(default: undefined)_\n- **--ms-selected-popover-body-padding** - Popover body padding _(default: undefined)_\n- **--ms-selected-popover-body-max-height** - Popover body max height _(default: undefined)_\n- **--ms-font-size-2xs** - Extra extra small font size _(default: undefined)_\n- **--ms-font-size-xs** - Extra small font size _(default: undefined)_\n- **--ms-font-size-sm** - Small font size _(default: undefined)_\n- **--ms-font-size-base** - Base font size _(default: undefined)_\n- **--ms-font-size-lg** - Large font size _(default: undefined)_\n- **--ms-font-weight-normal** - Normal font weight _(default: undefined)_\n- **--ms-font-weight-medium** - Medium font weight _(default: undefined)_\n- **--ms-font-weight-semibold** - Semibold font weight _(default: undefined)_\n- **--ms-line-height-none** - No line height (1) _(default: undefined)_\n- **--ms-line-height-tight** - Tight line height _(default: undefined)_\n- **--ms-line-height-normal** - Normal line height _(default: undefined)_\n- **--ms-line-height-relaxed** - Relaxed line height _(default: undefined)_\n- **--ms-border-radius-sm** - Small border radius _(default: undefined)_\n- **--ms-border-radius-md** - Medium border radius _(default: undefined)_\n- **--ms-border-radius-lg** - Large border radius _(default: undefined)_\n- **--ms-border-radius** - Default border radius _(default: undefined)_\n- **--ms-spacing-xs** - Extra small spacing _(default: undefined)_\n- **--ms-spacing-sm** - Small spacing _(default: undefined)_\n- **--ms-spacing-md** - Medium spacing _(default: undefined)_\n- **--ms-spacing-lg** - Large spacing _(default: undefined)_\n- **--ms-transition-fast** - Fast transition duration _(default: undefined)_\n- **--ms-transition-normal** - Normal transition duration _(default: undefined)_\n- **--ms-easing-snappy** - Snappy easing function _(default: undefined)_\n- **--ms-placeholder-opacity** - Placeholder opacity _(default: undefined)_\n- **--ms-disabled-input-opacity** - Disabled input opacity _(default: undefined)_\n- **--ms-scrollbar-width** - Scrollbar width _(default: undefined)_\n- **--ms-scrollbar-track-bg** - Scrollbar track background _(default: undefined)_\n- **--ms-scrollbar-thumb-bg** - Scrollbar thumb background _(default: undefined)_\n- **--ms-scrollbar-thumb-bg-hover** - Scrollbar thumb hover background _(default: undefined)_\n- **--ms-scrollbar-thumb-border-radius** - Scrollbar thumb border radius _(default: undefined)_\n- **--ms-debug-bg** - Debug panel background _(default: undefined)_\n- **--ms-debug-border-color** - Debug panel border _(default: undefined)_\n- **--ms-debug-text-color** - Debug panel text _(default: undefined)_\n- **--ms-debug-border-radius** - Debug panel corner radius _(default: undefined)_\n- **--ms-debug-summary-color** - Debug section heading color _(default: undefined)_\n- **--ms-debug-summary-bg-hover** - Debug section heading hover background _(default: undefined)_\n- **--ms-debug-summary-outline-color** - Debug section heading focus outline _(default: undefined)_\n- **--ms-debug-summary-border-radius** - Debug section heading corner radius _(default: undefined)_\n- **--ms-debug-stats-bg** - Debug stats nested panel background _(default: undefined)_\n- **--ms-debug-stats-border-radius** - Debug stats nested panel corner radius _(default: undefined)_\n- **--ms-debug-bullet-color** - Debug stat bullet marker color _(default: undefined)_\n- **--ms-transform-center-y** - Center Y transform _(default: undefined)_\n- **--ms-transform-rotate-180** - 180 degree rotation _(default: undefined)_\n- **--ms-transform-scale-hover** - Hover scale transform _(default: undefined)_\n- **--ms-transform-scale-active** - Active scale transform _(default: undefined)_\n- **--ms-order-first** - Order first (-1) _(default: undefined)_",
7
+ "description": "\n---\n\n\n### **Events:**\n - **select** - An option was selected. `detail.option` is the selected option; `detail.selectedOptions`/`detail.selectedValues` are the full selection.\n- **deselect** - An option was removed from the selection. `detail.option` is that option.\n- **change** - The selection changed. `detail.selectedOptions`/`detail.selectedValues` are the full selection.\n- **add** - The user chose to create a new option from the typed text (via the \"add new\" prompt or Enter) — requires `allow-add-new`. `detail.value` is the typed text; `detail.option` is the created item when `addNewCallback` produced one.\n\n### **Methods:**\n - **formResetCallback(): _void_** - Called by the browser when the surrounding <form> is reset. Clears the\r\npicker's selection so the control participates in the standard reset.\n\n\n\n\n\n\n\n- **showMessage(content: _string | HTMLElement_, opts: _MessageOptions_): _void_** - Surface a transient message (\"toast\") on top of the component — visible even in the\r\nfullscreen overlay, where page-level UI is hidden behind the sheet. Content is text or\r\nan element; `opts.variant` sets the tone and `opts.duration` the auto-dismiss (0 =\r\nsticky). Also reached automatically when a `beforeSelect`/`beforeDeselect` callback\r\nreturns a reason string.\n- **hideMessage(): _void_** - Dismiss the transient message shown by showMessage, if any.\n- **clearSearch(): _void_** - Clear the search box and restore the full option list (does not touch the selection — use\r\nclearAll for that). Pair with scrollToValue to reveal then scroll to an option\r\na search had filtered out: `el.clearSearch(); el.scrollToValue(v)`.\n- **search(term: _string_): _void_** - Programmatically set the search text and filter, as if the user typed it (runs\r\n`beforeSearchCallback` / `minSearchLength` / async `searchCallback`). Does not open the dropdown\r\n— call open if you want it visible. Pass `''` to clear (same as clearSearch).\n- **scrollToIndex(index: _number_, opts: _{ block?: ScrollLogicalPosition }_): _boolean_** - Scroll the open dropdown to the option at `index` (into the current filtered list). Returns\r\nfalse if closed or out of range. Deferred internally so `el.open(); el.scrollToIndex(i)` works.\n- **scrollToValue(value: _string | number_, opts: _{ block?: ScrollLogicalPosition }_): _boolean_** - Scroll the open dropdown to the option with this `value`. Returns false if it isn't in the\r\ncurrently visible list (filtered out by search, or under a collapsed tree branch) — call\r\nclearSearch / expand first.\n- **scrollToGroup(name: _string_, opts: _{ block?: ScrollLogicalPosition }_): _boolean_** - Scroll to a group: its header in standard rendering, or the group's first option in\r\nvirtual-scroll mode (no headers there). Returns false in tree mode or if the group is empty\r\nin the current filtered list.\n- **open(): _void_** - Open the dropdown.\n- **close(): _void_** - Close the dropdown.\n- **toggle(): _void_** - Toggle the dropdown open/closed.\n\n### **CSS Properties:**\n - **--ms-rem** - Base sizing unit for proportional scaling (default: 10px) _(default: undefined)_\n- **--ms-accent-color** - Primary accent color _(default: undefined)_\n- **--ms-accent-color-hover** - Accent color on hover _(default: undefined)_\n- **--ms-accent-color-active** - Accent color when pressed _(default: undefined)_\n- **--ms-accent-color-light** - Light accent background _(default: undefined)_\n- **--ms-accent-color-light-hover** - Light accent hover _(default: undefined)_\n- **--ms-text-color-1** - Primary text color _(default: undefined)_\n- **--ms-text-color-2** - Secondary text color _(default: undefined)_\n- **--ms-text-color-3** - Tertiary text color _(default: undefined)_\n- **--ms-text-color-4** - Quaternary text color _(default: undefined)_\n- **--ms-text-color-on-accent** - Text on accent backgrounds _(default: undefined)_\n- **--ms-text-primary** - Legacy alias for text-color-1 _(default: undefined)_\n- **--ms-text-secondary** - Legacy alias for text-color-3 _(default: undefined)_\n- **--ms-primary-bg** - Hover/focus background (options, action buttons, counter); reads --base-hover-bg _(default: undefined)_\n- **--ms-primary-bg-hover** - Active/stronger background (counter badge text); reads --base-active-bg _(default: undefined)_\n- **--ms-border-color** - Default border color _(default: undefined)_\n- **--ms-border** - Full border shorthand _(default: undefined)_\n- **--ms-input-bg** - Input field background _(default: undefined)_\n- **--ms-input-color** - Input text color _(default: undefined)_\n- **--ms-input-border** - Input border _(default: undefined)_\n- **--ms-input-border-hover** - Input border on hover _(default: undefined)_\n- **--ms-input-border-focus** - Input border when focused _(default: undefined)_\n- **--ms-input-placeholder-color** - Placeholder text color _(default: undefined)_\n- **--ms-input-bg-disabled** - Disabled input background _(default: undefined)_\n- **--ms-input-padding** - Input padding _(default: undefined)_\n- **--ms-input-padding-right** - Input right padding (for toggle) _(default: undefined)_\n- **--ms-input-height** - Input height _(default: undefined)_\n- **--ms-input-font-size** - Input font size _(default: undefined)_\n- **--ms-input-border-width** - Input border width _(default: undefined)_\n- **--ms-input-border-radius** - Input border radius _(default: undefined)_\n- **--ms-input-text** - Input text color _(default: undefined)_\n- **--ms-input-size-xs-font** - XS size font _(default: undefined)_\n- **--ms-input-size-xs-padding-v** - XS vertical padding _(default: undefined)_\n- **--ms-input-size-xs-padding-h** - XS horizontal padding _(default: undefined)_\n- **--ms-input-size-xs-height** - XS input height _(default: undefined)_\n- **--ms-input-size-sm-font** - SM size font _(default: undefined)_\n- **--ms-input-size-sm-padding-v** - SM vertical padding _(default: undefined)_\n- **--ms-input-size-sm-padding-h** - SM horizontal padding _(default: undefined)_\n- **--ms-input-size-sm-height** - SM input height _(default: undefined)_\n- **--ms-input-size-md-font** - MD size font _(default: undefined)_\n- **--ms-input-size-md-padding-v** - MD vertical padding _(default: undefined)_\n- **--ms-input-size-md-padding-h** - MD horizontal padding _(default: undefined)_\n- **--ms-input-size-md-height** - MD input height _(default: undefined)_\n- **--ms-input-size-lg-font** - LG size font _(default: undefined)_\n- **--ms-input-size-lg-padding-v** - LG vertical padding _(default: undefined)_\n- **--ms-input-size-lg-padding-h** - LG horizontal padding _(default: undefined)_\n- **--ms-input-size-lg-height** - LG input height _(default: undefined)_\n- **--ms-input-size-xl-font** - XL size font _(default: undefined)_\n- **--ms-input-size-xl-padding-v** - XL vertical padding _(default: undefined)_\n- **--ms-input-size-xl-padding-h** - XL horizontal padding _(default: undefined)_\n- **--ms-input-size-xl-height** - XL input height _(default: undefined)_\n- **--ms-toggle-right** - Toggle icon right position _(default: undefined)_\n- **--ms-toggle-color** - Toggle icon color _(default: undefined)_\n- **--ms-toggle-icon-color** - Toggle icon color (semantic) _(default: undefined)_\n- **--ms-toggle-icon-color-open** - Toggle icon color when open _(default: undefined)_\n- **--ms-counter-offset** - Counter badge offset _(default: undefined)_\n- **--ms-counter-padding** - Counter badge padding _(default: undefined)_\n- **--ms-counter-bg** - Counter badge background _(default: undefined)_\n- **--ms-counter-color** - Counter badge text color _(default: undefined)_\n- **--ms-counter-font-size** - Counter badge font size _(default: undefined)_\n- **--ms-counter-font-weight** - Counter badge font weight _(default: undefined)_\n- **--ms-counter-border-radius** - Counter badge border radius _(default: undefined)_\n- **--ms-counter-bg-hover** - Counter badge hover background _(default: undefined)_\n- **--ms-counter-badge-bg** - Counter badge semantic background _(default: undefined)_\n- **--ms-counter-badge-bg-hover** - Counter badge semantic hover _(default: undefined)_\n- **--ms-counter-badge-color** - Counter badge semantic color _(default: undefined)_\n- **--ms-hint-padding** - Floating hint padding _(default: undefined)_\n- **--ms-hint-border** - Floating hint border _(default: undefined)_\n- **--ms-hint-border-radius** - Floating hint border radius _(default: undefined)_\n- **--ms-hint-box-shadow** - Floating hint shadow _(default: undefined)_\n- **--ms-hint-font-size** - Floating hint font size _(default: undefined)_\n- **--ms-hint-bg** - Floating hint background _(default: undefined)_\n- **--ms-hint-color** - Floating hint text color _(default: undefined)_\n- **--ms-hint-border-color** - Floating hint border color _(default: undefined)_\n- **--ms-dropdown-bg** - Dropdown background _(default: undefined)_\n- **--ms-dropdown-text-color** - Dropdown text color _(default: undefined)_\n- **--ms-dropdown-border** - Dropdown border _(default: undefined)_\n- **--ms-dropdown-border-color** - Dropdown border color _(default: undefined)_\n- **--ms-dropdown-border-radius** - Dropdown border radius _(default: undefined)_\n- **--ms-dropdown-box-shadow** - Dropdown shadow _(default: undefined)_\n- **--ms-dropdown-box-shadow-semantic** - Dropdown semantic shadow _(default: undefined)_\n- **--ms-dropdown-width** - Options dropdown width (defaults to the input width; also set via the dropdown-width attribute) _(default: undefined)_\n- **--ms-options-max-height** - Options list max height _(default: undefined)_\n- **--ms-z-index-dropdown** - Dropdown z-index _(default: undefined)_\n- **--ms-z-index-sticky** - Sticky elements z-index _(default: undefined)_\n- **--ms-actions-gap** - Actions row gap _(default: undefined)_\n- **--ms-actions-padding** - Actions row padding _(default: undefined)_\n- **--ms-actions-border-bottom** - Actions row border _(default: undefined)_\n- **--ms-actions-bg** - Actions row background _(default: undefined)_\n- **--ms-actions-border-color** - Actions row border color _(default: undefined)_\n- **--ms-action-btn-padding** - Action button padding _(default: undefined)_\n- **--ms-action-btn-font-size** - Action button font size _(default: undefined)_\n- **--ms-action-btn-border** - Action button border _(default: undefined)_\n- **--ms-action-btn-border-radius** - Action button border radius _(default: undefined)_\n- **--ms-action-btn-bg** - Action button background _(default: undefined)_\n- **--ms-action-btn-color** - Action button color _(default: undefined)_\n- **--ms-action-btn-bg-hover** - Action button hover background _(default: undefined)_\n- **--ms-action-btn-border-color-hover** - Action button hover border _(default: undefined)_\n- **--ms-action-button-bg** - Semantic action button background _(default: undefined)_\n- **--ms-action-button-bg-hover** - Semantic action button hover _(default: undefined)_\n- **--ms-action-button-border-color** - Semantic action button border _(default: undefined)_\n- **--ms-action-button-border-color-hover** - Semantic action button hover border _(default: undefined)_\n- **--ms-action-button-color** - Semantic action button color _(default: undefined)_\n- **--ms-options-padding** - Options container padding _(default: undefined)_\n- **--ms-group-border-top** - Group border top _(default: undefined)_\n- **--ms-group-margin-top** - Group margin top _(default: undefined)_\n- **--ms-group-padding-top** - Group padding top _(default: undefined)_\n- **--ms-group-border-color** - Group border color _(default: undefined)_\n- **--ms-group-label-padding** - Group label padding _(default: undefined)_\n- **--ms-group-label-font-size** - Group label font size _(default: undefined)_\n- **--ms-group-label-font-weight** - Group label font weight _(default: undefined)_\n- **--ms-group-label-color** - Group label color _(default: undefined)_\n- **--ms-group-label-transform** - Group label text transform _(default: undefined)_\n- **--ms-group-label-letter-spacing** - Group label letter spacing _(default: undefined)_\n- **--ms-option-gap** - Option content gap _(default: undefined)_\n- **--ms-option-padding** - Option padding _(default: undefined)_\n- **--ms-option-padding-h** - Option horizontal padding _(default: undefined)_\n- **--ms-option-color** - Option text color _(default: undefined)_\n- **--ms-option-bg** - Option background _(default: undefined)_\n- **--ms-option-bg-hover** - Option hover background _(default: undefined)_\n- **--ms-option-bg-focused** - Option focused background _(default: undefined)_\n- **--ms-option-outline-focused** - Option focus outline _(default: undefined)_\n- **--ms-option-focus-outline-offset** - Option focus outline offset _(default: undefined)_\n- **--ms-option-bg-matched** - Matched option background _(default: undefined)_\n- **--ms-option-border-matched** - Matched option border _(default: undefined)_\n- **--ms-option-bg-selected** - Selected option background _(default: undefined)_\n- **--ms-option-text-color** - Option text color (semantic) _(default: undefined)_\n- **--ms-option-color-hover** - Option hover color _(default: undefined)_\n- **--ms-option-color-focused** - Option focused color _(default: undefined)_\n- **--ms-option-outline-color-focused** - Option focus outline color _(default: undefined)_\n- **--ms-option-color-matched** - Matched option color _(default: undefined)_\n- **--ms-option-border-matched-color** - Matched option border color _(default: undefined)_\n- **--ms-option-bg-focused-hover** - Focused option hover background _(default: undefined)_\n- **--ms-option-bg-matched-hover** - Matched option hover background _(default: undefined)_\n- **--ms-option-bg-selected-focused** - Selected focused background _(default: undefined)_\n- **--ms-option-bg-selected-matched** - Selected matched background _(default: undefined)_\n- **--ms-option-disabled-bg** - Disabled option background _(default: undefined)_\n- **--ms-option-bg-disabled-selected** - Disabled selected background _(default: undefined)_\n- **--ms-disabled-opacity** - Disabled option opacity _(default: undefined)_\n- **--ms-option-content-gap** - Option content gap _(default: undefined)_\n- **--ms-option-icon-size** - Option icon size _(default: undefined)_\n- **--ms-option-icon-font-size** - Option icon font size _(default: undefined)_\n- **--ms-option-title-font-size** - Option title font size _(default: undefined)_\n- **--ms-option-title-color** - Option title color _(default: undefined)_\n- **--ms-option-subtitle-margin-top** - Option subtitle margin _(default: undefined)_\n- **--ms-option-subtitle-font-size** - Option subtitle font size _(default: undefined)_\n- **--ms-option-subtitle-line-height** - Option subtitle line height _(default: undefined)_\n- **--ms-option-subtitle-color** - Option subtitle color _(default: undefined)_\n- **--ms-option-mark-bg** - Search match highlight background _(default: undefined)_\n- **--ms-option-mark-color** - Search match highlight color _(default: undefined)_\n- **--ms-option-mark-font-weight** - Search match highlight weight _(default: undefined)_\n- **--ms-checkbox-margin-top** - Checkbox margin top _(default: undefined)_\n- **--ms-checkbox-margin-right** - Checkbox margin right _(default: undefined)_\n- **--ms-checkbox-margin-bottom** - Checkbox margin bottom _(default: undefined)_\n- **--ms-checkbox-margin-left** - Checkbox margin left _(default: undefined)_\n- **--ms-checkbox-size** - Checkbox size _(default: undefined)_\n- **--ms-checkbox-scale** - Checkbox scale _(default: undefined)_\n- **--ms-checkbox-align** - Checkbox alignment _(default: undefined)_\n- **--ms-checkbox-bg** - Checkbox background _(default: undefined)_\n- **--ms-checkbox-border** - Checkbox border _(default: undefined)_\n- **--ms-checkbox-border-radius** - Checkbox border radius _(default: undefined)_\n- **--ms-checkbox-checked-bg** - Checked checkbox background _(default: undefined)_\n- **--ms-checkbox-checked-border** - Checked checkbox border _(default: undefined)_\n- **--ms-checkbox-checkmark-color** - Checkmark color _(default: undefined)_\n- **--ms-checkbox-hover-border-color** - Checkbox hover border _(default: undefined)_\n- **--ms-checkbox-disabled-bg** - Disabled checkbox background _(default: undefined)_\n- **--ms-checkbox-disabled-border** - Disabled checkbox border _(default: undefined)_\n- **--ms-checkbox-checked-bg-hover** - Checked checkbox hover background _(default: undefined)_\n- **--ms-checkbox-checked-border-color-hover** - Checked checkbox hover border _(default: undefined)_\n- **--ms-state-min-height** - Shared min-height for the empty and loading states so the dropdown doesn't resize when swapping between them _(default: undefined)_\n- **--ms-empty-padding** - Empty state padding _(default: undefined)_\n- **--ms-empty-font-size** - Empty state font size _(default: undefined)_\n- **--ms-empty-color** - Empty state text color _(default: undefined)_\n- **--ms-loader-padding** - Loader padding _(default: undefined)_\n- **--ms-loader-gap** - Loader gap _(default: undefined)_\n- **--ms-loading-text-font-size** - Loading text font size _(default: undefined)_\n- **--ms-loading-text-color** - Loading text color _(default: undefined)_\n- **--ms-loading-color** - Loading color (semantic) _(default: undefined)_\n- **--ms-badges-gap** - Badges container gap _(default: undefined)_\n- **--ms-badges-margin-bottom** - Badges margin bottom _(default: undefined)_\n- **--ms-badges-margin-top** - Badges margin top _(default: undefined)_\n- **--ms-badges-margin-left** - Badges margin left _(default: undefined)_\n- **--ms-badges-margin-right** - Badges margin right _(default: undefined)_\n- **--ms-badge-gap** - Badge internal gap _(default: undefined)_\n- **--ms-badge-height** - Badge height _(default: undefined)_\n- **--ms-badge-font-size** - Badge font size _(default: undefined)_\n- **--ms-badge-font-weight** - Badge font weight _(default: undefined)_\n- **--ms-badge-border-radius** - Badge border radius _(default: undefined)_\n- **--ms-badge-bg** - Badge background _(default: undefined)_\n- **--ms-badge-bg-hover** - Badge hover background _(default: undefined)_\n- **--ms-badge-bg-active** - Badge active background _(default: undefined)_\n- **--ms-badge-text-padding** - Badge text padding _(default: undefined)_\n- **--ms-badge-text-bg** - Badge text background _(default: undefined)_\n- **--ms-badge-text-color** - Badge text color _(default: undefined)_\n- **--ms-badge-text-border** - Badge text border _(default: undefined)_\n- **--ms-badge-text-bg-hover** - Badge text hover background _(default: undefined)_\n- **--ms-badge-text-color-hover** - Badge text hover color _(default: undefined)_\n- **--ms-badge-remove-width** - Badge remove button width _(default: undefined)_\n- **--ms-badge-remove-bg** - Badge remove button background _(default: undefined)_\n- **--ms-badge-remove-color** - Badge remove button color _(default: undefined)_\n- **--ms-badge-remove-border** - Badge remove button border _(default: undefined)_\n- **--ms-badge-remove-font-size** - Badge remove button font size (unused since 1.10.0 — kept for backward-compat) _(default: undefined)_\n- **--ms-badge-remove-icon-size** - Badge remove X icon size (mask SVG) _(default: undefined)_\n- **--ms-badge-remove-bg-hover** - Badge remove button hover background _(default: undefined)_\n- **--ms-badge-remove-box-shadow-focus** - Badge remove button focus shadow _(default: undefined)_\n- **--ms-icon-remove** - Remove icon as CSS url() to a mask-friendly SVG; color comes from currentColor _(default: undefined)_\n- **--ms-icon-filter** - Funnel glyph (fullscreen search-mode toggle); chains to --base-icon-filter _(default: undefined)_\n- **--ms-icon-check** - Checkmark glyph (mask) for a checked checkbox/option; chains to --base-icon-check _(default: undefined)_\n- **--ms-icon-indeterminate** - Dash glyph (mask) for a tri-state/partial checkbox; chains to --base-icon-indeterminate _(default: undefined)_\n- **--ms-badge-counter-bg** - Counter badge background _(default: undefined)_\n- **--ms-badge-counter-border** - Counter badge border _(default: undefined)_\n- **--ms-badge-counter-border-color** - Counter badge border color _(default: undefined)_\n- **--ms-badge-counter-border-radius** - Counter badge border radius _(default: undefined)_\n- **--ms-badge-counter-text-color** - Counter badge text color _(default: undefined)_\n- **--ms-badge-counter-text-bg** - Counter badge text background _(default: undefined)_\n- **--ms-badge-counter-remove-bg** - Counter badge remove background _(default: undefined)_\n- **--ms-badge-counter-remove-color** - Counter badge remove color _(default: undefined)_\n- **--ms-badge-counter-remove-bg-hover** - Counter badge remove hover background _(default: undefined)_\n- **--ms-more-badge-bg** - More badge background _(default: undefined)_\n- **--ms-more-badge-hover-bg** - More badge hover background _(default: undefined)_\n- **--ms-more-badge-active-bg** - More badge active background _(default: undefined)_\n- **--ms-count-display-margin-bottom** - Count display margin bottom _(default: undefined)_\n- **--ms-count-display-margin-top** - Count display margin top _(default: undefined)_\n- **--ms-count-display-margin-left** - Count display margin left _(default: undefined)_\n- **--ms-count-display-margin-right** - Count display margin right _(default: undefined)_\n- **--ms-counter-wrapper-bg** - Counter wrapper background _(default: undefined)_\n- **--ms-counter-wrapper-border** - Counter wrapper border _(default: undefined)_\n- **--ms-counter-wrapper-border-radius** - Counter wrapper border radius _(default: undefined)_\n- **--ms-counter-wrapper-padding** - Counter wrapper padding _(default: undefined)_\n- **--ms-counter-wrapper-gap** - Counter wrapper gap _(default: undefined)_\n- **--ms-counter-wrapper-bg-hover** - Counter wrapper hover background _(default: undefined)_\n- **--ms-counter-wrapper-border-color** - Counter wrapper border color _(default: undefined)_\n- **--ms-counter-wrapper-border-color-hover** - Counter wrapper hover border _(default: undefined)_\n- **--ms-count-text-bg** - Count text background _(default: undefined)_\n- **--ms-count-text-border** - Count text border _(default: undefined)_\n- **--ms-count-text-font-size** - Count text font size _(default: undefined)_\n- **--ms-count-text-color** - Count text color _(default: undefined)_\n- **--ms-count-clear-size** - Count clear button size _(default: undefined)_\n- **--ms-count-clear-bg** - Count clear button background _(default: undefined)_\n- **--ms-count-clear-color** - Count clear button color _(default: undefined)_\n- **--ms-count-clear-font-size** - Count clear button font size (unused since 1.10.0 — kept for backward-compat) _(default: undefined)_\n- **--ms-count-clear-icon-size** - Count clear X icon size (mask SVG) _(default: undefined)_\n- **--ms-count-clear-border-radius** - Count clear button border radius _(default: undefined)_\n- **--ms-count-clear-bg-hover** - Count clear button hover background _(default: undefined)_\n- **--ms-count-clear-color-hover** - Count clear button hover color _(default: undefined)_\n- **--ms-icon-clear** - Clear icon as CSS url() to a mask-friendly SVG; defaults to var(--ms-icon-remove) _(default: undefined)_\n- **--ms-tooltip-bg** - Tooltip background _(default: undefined)_\n- **--ms-tooltip-text-color** - Tooltip text color _(default: undefined)_\n- **--ms-tooltip-color** - Tooltip color _(default: undefined)_\n- **--ms-tooltip-padding** - Tooltip padding _(default: undefined)_\n- **--ms-tooltip-border-radius** - Tooltip border radius _(default: undefined)_\n- **--ms-tooltip-font-size** - Tooltip font size _(default: undefined)_\n- **--ms-tooltip-max-width** - Tooltip max width _(default: undefined)_\n- **--ms-tooltip-shadow** - Tooltip shadow _(default: undefined)_\n- **--ms-tooltip-z-index** - Tooltip z-index _(default: undefined)_\n- **--ms-z-index-popover** - Popover z-index _(default: undefined)_\n- **--ms-selected-popover-width** - Selected popover width _(default: undefined)_\n- **--ms-selected-popover-max-height** - Selected popover max height _(default: undefined)_\n- **--ms-selected-popover-border** - Selected popover border _(default: undefined)_\n- **--ms-selected-popover-border-radius** - Selected popover border radius _(default: undefined)_\n- **--ms-selected-popover-box-shadow** - Selected popover shadow _(default: undefined)_\n- **--ms-selected-popover-bg** - Selected popover background _(default: undefined)_\n- **--ms-selected-popover-border-color** - Selected popover border color _(default: undefined)_\n- **--ms-selected-popover-header-padding** - Popover header padding _(default: undefined)_\n- **--ms-selected-popover-header-bg** - Popover header background _(default: undefined)_\n- **--ms-selected-popover-header-border-bottom** - Popover header border _(default: undefined)_\n- **--ms-selected-popover-header-font-size** - Popover header font size _(default: undefined)_\n- **--ms-selected-popover-header-font-weight** - Popover header font weight _(default: undefined)_\n- **--ms-selected-popover-header-color** - Popover header color _(default: undefined)_\n- **--ms-selected-popover-header-border-color** - Popover header border color _(default: undefined)_\n- **--ms-popover-close-size** - Popover close button size _(default: undefined)_\n- **--ms-selected-popover-close-bg** - Popover close button background _(default: undefined)_\n- **--ms-selected-popover-close-color** - Popover close button color _(default: undefined)_\n- **--ms-selected-popover-close-font-size** - Popover close button font size (unused since 1.10.0 — kept for backward-compat) _(default: undefined)_\n- **--ms-selected-popover-close-icon-size** - Popover close X icon size (mask SVG) _(default: undefined)_\n- **--ms-selected-popover-close-border-radius** - Popover close button border radius _(default: undefined)_\n- **--ms-selected-popover-close-bg-hover** - Popover close button hover background _(default: undefined)_\n- **--ms-selected-popover-close-color-hover** - Popover close button hover color _(default: undefined)_\n- **--ms-selected-popover-body-gap** - Popover body gap _(default: undefined)_\n- **--ms-selected-popover-body-padding** - Popover body padding _(default: undefined)_\n- **--ms-selected-popover-body-max-height** - Popover body max height _(default: undefined)_\n- **--ms-font-size-2xs** - Extra extra small font size _(default: undefined)_\n- **--ms-font-size-xs** - Extra small font size _(default: undefined)_\n- **--ms-font-size-sm** - Small font size _(default: undefined)_\n- **--ms-font-size-base** - Base font size _(default: undefined)_\n- **--ms-font-size-lg** - Large font size _(default: undefined)_\n- **--ms-font-weight-normal** - Normal font weight _(default: undefined)_\n- **--ms-font-weight-medium** - Medium font weight _(default: undefined)_\n- **--ms-font-weight-semibold** - Semibold font weight _(default: undefined)_\n- **--ms-line-height-none** - No line height (1) _(default: undefined)_\n- **--ms-line-height-tight** - Tight line height _(default: undefined)_\n- **--ms-line-height-normal** - Normal line height _(default: undefined)_\n- **--ms-line-height-relaxed** - Relaxed line height _(default: undefined)_\n- **--ms-border-radius-sm** - Small border radius _(default: undefined)_\n- **--ms-border-radius-md** - Medium border radius _(default: undefined)_\n- **--ms-border-radius-lg** - Large border radius _(default: undefined)_\n- **--ms-border-radius** - Default border radius _(default: undefined)_\n- **--ms-spacing-xs** - Extra small spacing _(default: undefined)_\n- **--ms-spacing-sm** - Small spacing _(default: undefined)_\n- **--ms-spacing-md** - Medium spacing _(default: undefined)_\n- **--ms-spacing-lg** - Large spacing _(default: undefined)_\n- **--ms-transition-fast** - Fast transition duration _(default: undefined)_\n- **--ms-transition-normal** - Normal transition duration _(default: undefined)_\n- **--ms-easing-snappy** - Snappy easing function _(default: undefined)_\n- **--ms-placeholder-opacity** - Placeholder opacity _(default: undefined)_\n- **--ms-disabled-input-opacity** - Disabled input opacity _(default: undefined)_\n- **--ms-scrollbar-width** - Scrollbar width _(default: undefined)_\n- **--ms-scrollbar-track-bg** - Scrollbar track background _(default: undefined)_\n- **--ms-scrollbar-thumb-bg** - Scrollbar thumb background _(default: undefined)_\n- **--ms-scrollbar-thumb-bg-hover** - Scrollbar thumb hover background _(default: undefined)_\n- **--ms-scrollbar-thumb-border-radius** - Scrollbar thumb border radius _(default: undefined)_\n- **--ms-debug-bg** - Debug panel background _(default: undefined)_\n- **--ms-debug-border-color** - Debug panel border _(default: undefined)_\n- **--ms-debug-text-color** - Debug panel text _(default: undefined)_\n- **--ms-debug-border-radius** - Debug panel corner radius _(default: undefined)_\n- **--ms-debug-summary-color** - Debug section heading color _(default: undefined)_\n- **--ms-debug-summary-bg-hover** - Debug section heading hover background _(default: undefined)_\n- **--ms-debug-summary-outline-color** - Debug section heading focus outline _(default: undefined)_\n- **--ms-debug-summary-border-radius** - Debug section heading corner radius _(default: undefined)_\n- **--ms-debug-stats-bg** - Debug stats nested panel background _(default: undefined)_\n- **--ms-debug-stats-border-radius** - Debug stats nested panel corner radius _(default: undefined)_\n- **--ms-debug-bullet-color** - Debug stat bullet marker color _(default: undefined)_\n- **--ms-transform-center-y** - Center Y transform _(default: undefined)_\n- **--ms-transform-rotate-180** - 180 degree rotation _(default: undefined)_\n- **--ms-transform-scale-hover** - Hover scale transform _(default: undefined)_\n- **--ms-transform-scale-active** - Active scale transform _(default: undefined)_\n- **--ms-order-first** - Order first (-1) _(default: undefined)_",
8
8
  "attributes": [
9
9
  {
10
10
  "name": "search-hint",
@@ -46,6 +46,16 @@
46
46
  "description": "Message shown when a search yields no matches.",
47
47
  "values": []
48
48
  },
49
+ {
50
+ "name": "add-new-text",
51
+ "description": "Template for the clickable \"add new\" prompt shown (when `allow-add-new` is on) in place of the empty message once a search yields no matches. `{value}` is replaced with the typed text. Default: `Add \"{value}\"`. A `getAddNewTextCallback` wins.",
52
+ "values": []
53
+ },
54
+ {
55
+ "name": "add-new-pending-text",
56
+ "description": "Template for the pending prompt (spinner + text) shown while an async `addNewCallback` runs. `{value}` is replaced with the typed text. Default: `Adding \"{value}\"…`.",
57
+ "values": []
58
+ },
49
59
  {
50
60
  "name": "loading-message",
51
61
  "description": "Message shown while options are loading.",
@@ -195,6 +205,11 @@
195
205
  "description": "Whether typing filters the list or navigates it.",
196
206
  "values": [{ "name": "filter" }, { "name": "navigate" }]
197
207
  },
208
+ {
209
+ "name": "overlay-group",
210
+ "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.",
211
+ "values": []
212
+ },
198
213
  {
199
214
  "name": "actions-layout",
200
215
  "description": "Whether the action bar wraps or stays on one line.",