@keenmate/web-multiselect 2.0.0-rc10 → 2.0.0-rc12
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.
- package/README.md +186 -186
- package/custom-elements.json +214 -75
- package/dist/index.d.ts +48 -3
- package/dist/multiselect.js +1342 -1222
- package/dist/multiselect.umd.js +13 -13
- package/dist/style.css +1 -1
- package/docs/usage.md +6 -0
- package/package.json +104 -104
- package/src/css/controls.css +95 -25
- package/src/css/floating.css +15 -4
- package/src/css/states.css +6 -5
- package/src/css/variables.css +59 -22
- package/vscode.html-custom-data.json +11 -1
- package/web-types.json +27 -2
package/src/css/controls.css
CHANGED
|
@@ -11,37 +11,51 @@
|
|
|
11
11
|
INPUT
|
|
12
12
|
============================================================================== */
|
|
13
13
|
|
|
14
|
+
/* The wrapper is the FIELD SHELL: it carries the border, background, radius, and
|
|
15
|
+
focus ring. The <input>, the [N] counter, the ✕ clear, and the ▾ chevron are its
|
|
16
|
+
flex children (in that DOM order), laid out in a row with a gap. The input is
|
|
17
|
+
`flex: 1; min-width: 0`, so it only occupies the space left of the trailing
|
|
18
|
+
decorations — long text clips/scrolls inside the input's own box and can never
|
|
19
|
+
slide under the icons. RTL falls out of the flex direction for free. */
|
|
14
20
|
.ms__input-wrapper {
|
|
21
|
+
box-sizing: border-box;
|
|
15
22
|
position: relative;
|
|
16
23
|
display: flex;
|
|
17
24
|
align-items: center;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
.ms__input {
|
|
21
|
-
box-sizing: border-box;
|
|
22
|
-
width: 100%;
|
|
23
|
-
font-family: inherit; /* Form elements don't inherit font by default */
|
|
25
|
+
gap: var(--ms-input-gap);
|
|
24
26
|
height: var(--ms-input-height);
|
|
25
|
-
padding: var(--ms-input-padding);
|
|
26
|
-
padding-inline-end: var(--ms-input-padding-right); /* Space for dropdown icon (trailing side; flips in RTL) */
|
|
27
|
-
font-size: var(--ms-input-font-size);
|
|
28
|
-
border: var(--ms-input-border);
|
|
29
|
-
border-radius: var(--ms-input-border-radius);
|
|
27
|
+
padding-inline: var(--ms-input-padding-h);
|
|
30
28
|
background: var(--ms-input-bg);
|
|
31
29
|
color: var(--ms-input-color);
|
|
30
|
+
border: var(--ms-input-border);
|
|
31
|
+
border-radius: var(--ms-input-border-radius);
|
|
32
32
|
cursor: pointer;
|
|
33
33
|
transition: border var(--ms-transition-fast) var(--ms-easing-snappy);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
.ms__input:hover:not(:focus)
|
|
36
|
+
.ms__input-wrapper:hover:not(:focus-within) {
|
|
37
37
|
border: var(--ms-input-border-hover);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
.ms__input:focus {
|
|
41
|
-
outline: none;
|
|
40
|
+
.ms__input-wrapper:focus-within {
|
|
42
41
|
border: var(--ms-input-border-focus);
|
|
43
42
|
}
|
|
44
43
|
|
|
44
|
+
.ms__input {
|
|
45
|
+
flex: 1 1 auto;
|
|
46
|
+
min-width: 0; /* let the input shrink so text clips instead of overflowing the row */
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
font-family: inherit; /* Form elements don't inherit font by default */
|
|
49
|
+
height: 100%;
|
|
50
|
+
padding: 0;
|
|
51
|
+
border: none;
|
|
52
|
+
background: transparent;
|
|
53
|
+
font-size: var(--ms-input-font-size);
|
|
54
|
+
color: var(--ms-input-color);
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
outline: none;
|
|
57
|
+
}
|
|
58
|
+
|
|
45
59
|
.ms__input::placeholder {
|
|
46
60
|
color: var(--ms-input-placeholder-color);
|
|
47
61
|
opacity: 0; /* Initially hidden until component is ready */
|
|
@@ -98,29 +112,49 @@
|
|
|
98
112
|
============================================================================== */
|
|
99
113
|
|
|
100
114
|
.ms__toggle {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
pointer-events: none;
|
|
115
|
+
flex: 0 0 auto;
|
|
116
|
+
display: block;
|
|
117
|
+
width: var(--ms-toggle-icon-size);
|
|
118
|
+
height: var(--ms-toggle-icon-size);
|
|
106
119
|
color: var(--ms-toggle-icon-color);
|
|
120
|
+
cursor: pointer; /* real box now (not an overlay the click falls through) — opens on click */
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* Chevron as a mask icon (consistent with the ✕ / count-clear / badge-remove glyphs),
|
|
124
|
+
not a text character. --ms-icon-chevron points RIGHT (wired to --base-icon-chevron, a
|
|
125
|
+
Lucide angle that fills its viewBox for full optical size); the closed state rotates it
|
|
126
|
+
90° to point down, opening rotates it -90° to point up (a 180° sweep).
|
|
127
|
+
|
|
128
|
+
The two rotations are themeable via --ms-toggle-rotate-closed / --ms-toggle-rotate-open:
|
|
129
|
+
the defaults (90deg / -90deg) orient the directional right-pointing base chevron. A theme
|
|
130
|
+
supplying a PRE-ORIENTED glyph (already pointing down) can opt out of the orientation —
|
|
131
|
+
set both to `0deg` for a static glyph, or `0deg` / `180deg` to flip it up on open. */
|
|
132
|
+
.ms__toggle::before {
|
|
133
|
+
content: "";
|
|
134
|
+
display: block;
|
|
135
|
+
width: 100%;
|
|
136
|
+
height: 100%;
|
|
137
|
+
background-color: currentColor;
|
|
138
|
+
-webkit-mask: var(--ms-icon-chevron) center / contain no-repeat;
|
|
139
|
+
mask: var(--ms-icon-chevron) center / contain no-repeat;
|
|
140
|
+
transform: rotate(var(--ms-toggle-rotate-closed, 90deg));
|
|
107
141
|
transition: transform var(--ms-transition-fast) var(--ms-easing-snappy);
|
|
108
142
|
}
|
|
109
143
|
|
|
110
144
|
.ms--open .ms__toggle {
|
|
111
|
-
transform: var(--ms-transform-center-y) rotate(var(--ms-transform-rotate-180));
|
|
112
145
|
color: var(--ms-toggle-icon-color-open);
|
|
113
146
|
}
|
|
114
147
|
|
|
148
|
+
.ms--open .ms__toggle::before {
|
|
149
|
+
transform: rotate(var(--ms-toggle-rotate-open, -90deg));
|
|
150
|
+
}
|
|
151
|
+
|
|
115
152
|
/* ==============================================================================
|
|
116
153
|
IN-INPUT COUNT BADGE
|
|
117
154
|
============================================================================== */
|
|
118
155
|
|
|
119
156
|
.ms__counter {
|
|
120
|
-
|
|
121
|
-
inset-inline-end: var(--ms-counter-offset); /* trailing edge (past the toggle icon); flips in RTL */
|
|
122
|
-
top: 50%;
|
|
123
|
-
transform: var(--ms-transform-center-y);
|
|
157
|
+
flex: 0 0 auto;
|
|
124
158
|
padding: var(--ms-counter-padding);
|
|
125
159
|
background: var(--ms-counter-badge-bg);
|
|
126
160
|
color: var(--ms-counter-badge-color);
|
|
@@ -133,7 +167,43 @@
|
|
|
133
167
|
|
|
134
168
|
.ms__counter:hover {
|
|
135
169
|
background: var(--ms-counter-badge-bg-hover);
|
|
136
|
-
transform:
|
|
170
|
+
transform: scale(var(--ms-transform-scale-hover));
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* ==============================================================================
|
|
174
|
+
INPUT CLEAR (✕)
|
|
175
|
+
==============================================================================
|
|
176
|
+
Opt-in via `show-clear`. A small mask-icon ✕ that sits in the trailing flex row,
|
|
177
|
+
just before the chevron. JS (updateClearButton) toggles its `display` by
|
|
178
|
+
selection/enabled state; the flex layout handles spacing (no inset math). */
|
|
179
|
+
.ms__input-clear {
|
|
180
|
+
flex: 0 0 auto;
|
|
181
|
+
display: inline-flex;
|
|
182
|
+
align-items: center;
|
|
183
|
+
justify-content: center;
|
|
184
|
+
width: var(--ms-input-clear-size);
|
|
185
|
+
height: var(--ms-input-clear-size);
|
|
186
|
+
padding: 0;
|
|
187
|
+
color: var(--ms-input-clear-color);
|
|
188
|
+
background: transparent;
|
|
189
|
+
border: none;
|
|
190
|
+
border-radius: var(--ms-input-clear-border-radius);
|
|
191
|
+
cursor: pointer;
|
|
192
|
+
transition: background var(--ms-transition-fast) var(--ms-easing-snappy);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.ms__input-clear:hover {
|
|
196
|
+
background: var(--ms-input-clear-bg-hover);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.ms__input-clear::before {
|
|
200
|
+
content: "";
|
|
201
|
+
display: block;
|
|
202
|
+
width: var(--ms-input-clear-icon-size);
|
|
203
|
+
height: var(--ms-input-clear-icon-size);
|
|
204
|
+
background-color: currentColor;
|
|
205
|
+
-webkit-mask: var(--ms-icon-clear) center / contain no-repeat;
|
|
206
|
+
mask: var(--ms-icon-clear) center / contain no-repeat;
|
|
137
207
|
}
|
|
138
208
|
|
|
139
209
|
/* ==============================================================================
|
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
|
|
288
|
-
mask: var(--ms-icon
|
|
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
|
-
/*
|
|
298
|
+
/* The "next" (down) button rotates the same right-pointing chevron the other way. */
|
|
292
299
|
.ms__fullscreen-nav-btn--next::before {
|
|
293
|
-
transform:
|
|
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/states.css
CHANGED
|
@@ -7,15 +7,16 @@
|
|
|
7
7
|
the `.ms` block that flow through to multiple internal elements.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
/* Disabled state
|
|
11
|
-
|
|
10
|
+
/* Disabled state — the wrapper is the field shell now, so dim + grey it there
|
|
11
|
+
(opacity flows down to the input/counter/clear/toggle children). */
|
|
12
|
+
.ms--disabled .ms__input-wrapper {
|
|
12
13
|
opacity: var(--ms-disabled-input-opacity);
|
|
13
|
-
cursor: not-allowed;
|
|
14
14
|
background: var(--ms-input-bg-disabled);
|
|
15
|
+
cursor: not-allowed;
|
|
15
16
|
}
|
|
16
17
|
|
|
17
|
-
.ms--disabled .
|
|
18
|
-
|
|
18
|
+
.ms--disabled .ms__input {
|
|
19
|
+
cursor: not-allowed;
|
|
19
20
|
}
|
|
20
21
|
|
|
21
22
|
/* No checkboxes modifier (for simple select mode) */
|
package/src/css/variables.css
CHANGED
|
@@ -123,6 +123,13 @@
|
|
|
123
123
|
/* Toggle Icon Semantic Variables */
|
|
124
124
|
--ms-toggle-icon-color: var(--ms-text-color-3);
|
|
125
125
|
--ms-toggle-icon-color-open: var(--ms-text-color-3);
|
|
126
|
+
--ms-toggle-icon-size: calc(1.6 * var(--ms-rem));
|
|
127
|
+
/* Toggle chevron rotation, closed vs open. Defaults orient the directional right-pointing
|
|
128
|
+
--base-icon-chevron (90° → points down when closed, -90° → up when open). Override BOTH
|
|
129
|
+
when a theme supplies a PRE-ORIENTED chevron glyph: `0deg` / `0deg` for a static glyph,
|
|
130
|
+
or `0deg` / `180deg` for a down-glyph that flips up on open. */
|
|
131
|
+
--ms-toggle-rotate-closed: 90deg;
|
|
132
|
+
--ms-toggle-rotate-open: -90deg;
|
|
126
133
|
|
|
127
134
|
/* Counter Badge (in Input) Semantic Variables */
|
|
128
135
|
--ms-counter-badge-bg: var(--ms-accent-color);
|
|
@@ -236,15 +243,16 @@
|
|
|
236
243
|
/* ==========================================================================
|
|
237
244
|
INPUT COMPONENT
|
|
238
245
|
========================================================================== */
|
|
239
|
-
--ms-input-padding: calc(
|
|
240
|
-
--ms-input-
|
|
241
|
-
--ms-input-padding-h: calc(1.2 * var(--ms-rem));
|
|
246
|
+
--ms-input-padding-h: calc(1.2 * var(--ms-rem)); /* field shell inline padding */
|
|
247
|
+
--ms-input-gap: calc(0.6 * var(--ms-rem)); /* gap between input + trailing decorations */
|
|
242
248
|
--ms-input-height: calc(var(--base-input-size-md-height, 3.5) * var(--ms-rem));
|
|
243
249
|
--ms-input-font-size: calc(var(--base-font-size-sm, 1.4) * var(--ms-rem));
|
|
244
250
|
--ms-input-border-width: 1px;
|
|
245
251
|
--ms-input-border-radius: var(--ms-border-radius-md);
|
|
246
252
|
--ms-input-text: var(--ms-text-color-1);
|
|
247
|
-
--
|
|
253
|
+
/* Prefers the shared --base token (light-dark aware, so it adapts on dark themes);
|
|
254
|
+
the flat gray is the standalone fallback. */
|
|
255
|
+
--ms-input-bg-disabled: var(--base-input-bg-disabled, rgba(107, 114, 128, 0.05));
|
|
248
256
|
|
|
249
257
|
/* ==========================================================================
|
|
250
258
|
INPUT SIZE VARIANTS — currently unused (commented out)
|
|
@@ -286,15 +294,21 @@
|
|
|
286
294
|
/* ==========================================================================
|
|
287
295
|
TOGGLE ICON
|
|
288
296
|
========================================================================== */
|
|
289
|
-
--ms-toggle-right: calc(1.2 * var(--ms-rem));
|
|
290
297
|
--ms-toggle-color: var(--ms-text-color-3);
|
|
291
|
-
--ms-transform-center-y: translateY(-50%);
|
|
292
298
|
--ms-transform-rotate-180: 180deg;
|
|
293
299
|
|
|
300
|
+
/* ==========================================================================
|
|
301
|
+
INPUT CLEAR (✕)
|
|
302
|
+
========================================================================== */
|
|
303
|
+
--ms-input-clear-size: calc(2.4 * var(--ms-rem));
|
|
304
|
+
--ms-input-clear-icon-size: calc(1.4 * var(--ms-rem));
|
|
305
|
+
--ms-input-clear-color: var(--base-input-clear-color, var(--ms-text-secondary));
|
|
306
|
+
--ms-input-clear-bg-hover: var(--base-input-clear-bg-hover, var(--ms-option-bg-matched, transparent));
|
|
307
|
+
--ms-input-clear-border-radius: var(--ms-border-radius); /* matches the input; square when radius is 0 */
|
|
308
|
+
|
|
294
309
|
/* ==========================================================================
|
|
295
310
|
COUNT BADGE (in input)
|
|
296
311
|
========================================================================== */
|
|
297
|
-
--ms-counter-offset: calc(3.2 * var(--ms-rem));
|
|
298
312
|
--ms-counter-padding: calc(0.2 * var(--ms-rem)) calc(0.4 * var(--ms-rem));
|
|
299
313
|
--ms-counter-bg: var(--ms-accent-color);
|
|
300
314
|
--ms-counter-color: var(--ms-text-color-on-accent);
|
|
@@ -325,7 +339,9 @@
|
|
|
325
339
|
default 1px --ms-dropdown-border; if you theme a thicker border, override this to
|
|
326
340
|
match (panel radius − border width). Clamped at 0 so a squared panel stays square. */
|
|
327
341
|
--ms-dropdown-inner-border-radius: max(0px, calc(var(--ms-dropdown-border-radius) - 1px));
|
|
328
|
-
|
|
342
|
+
/* Prefers the shared --base token (light-dark aware — deepens on dark themes); the
|
|
343
|
+
flat two-layer shadow is the standalone fallback. */
|
|
344
|
+
--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));
|
|
329
345
|
/* Live input width, published by JS each positioning frame. It's the only panel
|
|
330
346
|
dimension CSS can't measure itself, so panels that "match the input" read it. */
|
|
331
347
|
--ms-input-current-width: auto;
|
|
@@ -443,9 +459,21 @@
|
|
|
443
459
|
--base-* colors but not color-scheme (e.g. the neon example), producing a jarring near-white
|
|
444
460
|
chip. Stays fully themeable via this variable. */
|
|
445
461
|
--ms-fullscreen-nav-btn-bg-hover: color-mix(in srgb, var(--ms-accent-color) 22%, transparent);
|
|
446
|
-
/*
|
|
447
|
-
|
|
448
|
-
|
|
462
|
+
/* Pager match-navigator glyph (the prev/next ^ ⌄ buttons). Defaults to the shared
|
|
463
|
+
--ms-icon-chevron, so it follows the base chevron out of the box. The pager rotates this
|
|
464
|
+
source -90° (prev → up) / 90° (next → down), so it expects a RIGHT-pointing glyph — override
|
|
465
|
+
it here if a theme points --base-icon-chevron somewhere else (e.g. a pre-oriented toggle
|
|
466
|
+
caret) and you don't want that leaking into the pager. */
|
|
467
|
+
--ms-fullscreen-nav-btn-icon: var(--ms-icon-chevron);
|
|
468
|
+
/* Chevron glyph — the dropdown toggle's affordance, and the default source for the pager
|
|
469
|
+
(via --ms-fullscreen-nav-btn-icon above). Wired to the --base-icon contract
|
|
470
|
+
(--base-icon-chevron, a Lucide angle that fills its viewBox, so it renders at full optical
|
|
471
|
+
size — unlike the small solid caret) with an inline right-pointing chevron as the standalone
|
|
472
|
+
fallback. It points RIGHT at rest; consumers rotate it into place (toggle: 90° closed → down,
|
|
473
|
+
-90° open → up — themeable via --ms-toggle-rotate-*; pager: -90° → up, 90° → down). Override
|
|
474
|
+
--ms-icon-chevron (or --base-icon-chevron globally) to re-skin both at once, or override
|
|
475
|
+
--ms-fullscreen-nav-btn-icon alone to diverge the pager. */
|
|
476
|
+
--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>"));
|
|
449
477
|
/* SVG "i-in-a-circle" glyph — rendered via mask so it inherits the info color via
|
|
450
478
|
currentColor. Override with any mask-friendly url() SVG. */
|
|
451
479
|
--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>");
|
|
@@ -649,10 +677,11 @@
|
|
|
649
677
|
--ms-badge-remove-box-shadow-focus: 0 0 0 2px color-mix(in srgb, var(--ms-accent-color) 50%, transparent);
|
|
650
678
|
--ms-badge-remove-icon-size: calc(1.0 * var(--ms-rem));
|
|
651
679
|
/* SVG X glyph (Lucide `x`) — rendered via mask so it inherits --ms-badge-remove-color via
|
|
652
|
-
currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕).
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
680
|
+
currentColor. Drives the badge remove (×) and the fullscreen/popover close (✕). Follows the
|
|
681
|
+
shared --base-icon contract: prefers --base-icon-remove, then --base-icon-close, so a theme
|
|
682
|
+
re-skinning its close/remove glyph re-skins these too; the inline Lucide `x` is the standalone
|
|
683
|
+
fallback (no base layer loaded). Override --ms-icon-remove to diverge from the base contract. */
|
|
684
|
+
--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>")));
|
|
656
685
|
/* SVG "clear search" glyph (Lucide `search-x`: a magnifier with an x) used by the
|
|
657
686
|
fullscreen search field's clear button. Deliberately NOT the bare X of
|
|
658
687
|
--ms-icon-remove so it doesn't read as a second close button beside the overlay
|
|
@@ -663,7 +692,7 @@
|
|
|
663
692
|
CURRENT mode: a plain magnifier (Lucide `search`) for navigate, a funnel (Lucide
|
|
664
693
|
`filter`) for filter. Rendered via mask (inherit color via currentColor); override
|
|
665
694
|
with any mask-friendly SVG url(). */
|
|
666
|
-
--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>");
|
|
695
|
+
--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>"));
|
|
667
696
|
--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>");
|
|
668
697
|
|
|
669
698
|
/* Badge Counter Indicator (layout-only properties, colors come from semantic section) */
|
|
@@ -713,7 +742,11 @@
|
|
|
713
742
|
--ms-count-clear-bg-hover: color-mix(in srgb, var(--ms-accent-color) 20%, transparent);
|
|
714
743
|
--ms-count-clear-color-hover: var(--ms-accent-color);
|
|
715
744
|
--ms-count-clear-icon-size: calc(1.4 * var(--ms-rem));
|
|
716
|
-
|
|
745
|
+
/* Field-clear ✕ (input clear + count clear). Its own knob in the --base-icon contract:
|
|
746
|
+
prefers --base-icon-clear so a theme can diverge field-clear from close/remove, then falls
|
|
747
|
+
through to --ms-icon-remove (which itself resolves --base-icon-remove → --base-icon-close →
|
|
748
|
+
inline ✕). Same glyph as remove by default; override --base-icon-clear alone to split them. */
|
|
749
|
+
--ms-icon-clear: var(--base-icon-clear, var(--ms-icon-remove));
|
|
717
750
|
|
|
718
751
|
/* ==========================================================================
|
|
719
752
|
TOOLTIPS
|
|
@@ -770,10 +803,11 @@
|
|
|
770
803
|
SELECTED POPOVER
|
|
771
804
|
========================================================================== */
|
|
772
805
|
--ms-z-index-popover: 10000;
|
|
773
|
-
/* Selected-items ("badges") popover width —
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
806
|
+
/* Selected-items ("badges") popover width — tracks the live field width by default (same
|
|
807
|
+
as the dropdown, so the two panels line up under the control). Override at app/theme
|
|
808
|
+
level or per-instance via the selected-popover-width attribute — e.g. a fixed
|
|
809
|
+
calc(32 * var(--ms-rem)) for a constant width independent of the field. */
|
|
810
|
+
--ms-selected-popover-width: var(--ms-input-current-width);
|
|
777
811
|
--ms-selected-popover-max-height: calc(32 * var(--ms-rem));
|
|
778
812
|
--ms-selected-popover-border: 1px solid var(--ms-selected-popover-border-color);
|
|
779
813
|
--ms-selected-popover-border-radius: var(--ms-border-radius-lg);
|
|
@@ -846,9 +880,12 @@
|
|
|
846
880
|
/* ==========================================================================
|
|
847
881
|
TRANSITIONS & EFFECTS
|
|
848
882
|
========================================================================== */
|
|
883
|
+
/* Durations stay local: the --ms scale (150/200ms) doesn't line up with --base-duration-*
|
|
884
|
+
(fast 100ms / normal 150ms / medium 250ms), so wiring would silently change timings. */
|
|
849
885
|
--ms-transition-fast: 150ms;
|
|
850
886
|
--ms-transition-normal: 200ms;
|
|
851
|
-
--
|
|
887
|
+
/* Easing is an exact match for --base-ease-standard, so it flows from the shared token. */
|
|
888
|
+
--ms-easing-snappy: var(--base-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
|
|
852
889
|
|
|
853
890
|
/* ==========================================================================
|
|
854
891
|
OPACITY VALUES
|
|
@@ -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\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\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)_",
|
|
8
8
|
"attributes": [
|
|
9
9
|
{
|
|
10
10
|
"name": "search-hint",
|
|
@@ -195,6 +195,11 @@
|
|
|
195
195
|
"description": "Whether typing filters the list or navigates it.",
|
|
196
196
|
"values": [{ "name": "filter" }, { "name": "navigate" }]
|
|
197
197
|
},
|
|
198
|
+
{
|
|
199
|
+
"name": "overlay-group",
|
|
200
|
+
"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.",
|
|
201
|
+
"values": []
|
|
202
|
+
},
|
|
198
203
|
{
|
|
199
204
|
"name": "actions-layout",
|
|
200
205
|
"description": "Whether the action bar wraps or stays on one line.",
|
|
@@ -405,6 +410,11 @@
|
|
|
405
410
|
"description": "Show a selected-count indicator.",
|
|
406
411
|
"values": []
|
|
407
412
|
},
|
|
413
|
+
{
|
|
414
|
+
"name": "show-clear",
|
|
415
|
+
"description": "Show an inline clear (✕) button inside the input that wipes the whole selection. Appears only while something is selected and the control is enabled; clicking it clears the selection and any search text, fires `change`, and refocuses.",
|
|
416
|
+
"values": []
|
|
417
|
+
},
|
|
408
418
|
{
|
|
409
419
|
"name": "show-badge-full-title",
|
|
410
420
|
"description": "Show the full title on badges instead of the short label.",
|