{
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
  "name": "@keenmate/web-multiselect",
  "version": "2.1.0",
  "description-markup": "markdown",
  "contributions": {
    "html": {
      "elements": [
        {
          "name": "web-multiselect",
          "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- **ready** - The picker was built and painted for the first time (once per element lifetime). Fires right after the first build — synchronously during upgrade for a normal element, or when the render gate is released (`el.ready()` / removing `defer`) for a deferred one. No detail.\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- **ready(): _void_** - Release the `defer` render gate: build the picker now (once), with every\r\noption, callback and listener wired while deferred already in place. No-op\r\nwhen the element wasn't deferred or is already built. `flush()` first so a\r\nsynchronous `el.options = …; el.customStylesCallback = …; el.ready()` lands\r\nthose pending writes in the single build rather than after it. Latched — the\r\ngate never re-closes. Fires the `ready` event on the first build.\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-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-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-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-icon-check-size** - mask-size for the checkmark/dash glyph inside the checkbox box; chains to --base-icon-check-size (default 68%, the same knob as pure-admin's .pa-checkbox) _(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-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)_",
          "doc-url": "",
          "attributes": [
            {
              "name": "search-hint",
              "description": "Small hint text shown beneath the search input.",
              "value": { "type": "string | null" }
            },
            {
              "name": "search-placeholder",
              "description": "Placeholder text for the search input. When unset it defaults to \"Search...\"; if `show-search-mode-toggle` is on, the default instead becomes mode-aware (\"Search…\" in navigate, \"Filter…\" in filter). An explicit value always wins and stays fixed.",
              "value": { "type": "string | null" }
            },
            {
              "name": "select-placeholder",
              "description": "Placeholder shown on the control when nothing is selected.",
              "value": { "type": "string", "default": "'Pick an option...'" }
            },
            {
              "name": "no-data-placeholder",
              "description": "Text shown when there are no options at all.",
              "value": { "type": "string | null" }
            },
            {
              "name": "dropdown-min-width",
              "description": "Minimum width of the dropdown panel (any CSS length).",
              "value": { "type": "string | null" }
            },
            {
              "name": "dropdown-max-width",
              "description": "Maximum width of the dropdown panel (any CSS length).",
              "value": { "type": "string | null" }
            },
            {
              "name": "max-height",
              "description": "Maximum height of the dropdown list before it scrolls.",
              "value": { "type": "string", "default": "'20rem'" }
            },
            {
              "name": "empty-message",
              "description": "Message shown when a search yields no matches.",
              "value": { "type": "string", "default": "'No results found'" }
            },
            {
              "name": "add-new-text",
              "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.",
              "value": { "type": "string | null" }
            },
            {
              "name": "add-new-pending-text",
              "description": "Template for the pending prompt (spinner + text) shown while an async `addNewCallback` runs. `{value}` is replaced with the typed text. Default: `Adding \"{value}\"…`.",
              "value": { "type": "string | null" }
            },
            {
              "name": "loading-message",
              "description": "Message shown while options are loading.",
              "value": { "type": "string", "default": "'Loading...'" }
            },
            {
              "name": "remove-button-tooltip-text",
              "description": "Tooltip text for a badge remove (×) button.",
              "value": { "type": "string | null" }
            },
            {
              "name": "name",
              "description": "HTML form field name/id used for the hidden input(s).",
              "value": { "type": "string | null" }
            },
            {
              "name": "dropdown-width",
              "description": "Fixed dropdown width; mirrored to the `--ms-dropdown-width` CSS variable.",
              "value": { "type": "string | null" }
            },
            {
              "name": "selected-popover-width",
              "description": "Selected-items popover width; mirrored to `--ms-selected-popover-width`.",
              "value": { "type": "string | null" }
            },
            {
              "name": "value-member",
              "description": "Property name on an option object that holds its value.",
              "value": { "type": "string | null" }
            },
            {
              "name": "display-value-member",
              "description": "Property name that holds an option display label.",
              "value": { "type": "string | null" }
            },
            {
              "name": "search-value-member",
              "description": "Property name searched against (falls back to the display value).",
              "value": { "type": "string | null" }
            },
            {
              "name": "icon-member",
              "description": "Property name that holds an option icon.",
              "value": { "type": "string | null" }
            },
            {
              "name": "subtitle-member",
              "description": "Property name that holds an option subtitle.",
              "value": { "type": "string | null" }
            },
            {
              "name": "full-title-member",
              "description": "Property name that holds an option full/long title.",
              "value": { "type": "string | null" }
            },
            {
              "name": "group-member",
              "description": "Property name used to group options under headers.",
              "value": { "type": "string | null" }
            },
            {
              "name": "disabled-member",
              "description": "Property name that marks an option disabled.",
              "value": { "type": "string | null" }
            },
            {
              "name": "path-member",
              "description": "Property name holding a node materialized tree path.",
              "value": { "type": "string | null" }
            },
            {
              "name": "parent-path-member",
              "description": "Property name holding a node parent path.",
              "value": { "type": "string | null" }
            },
            {
              "name": "level-member",
              "description": "Property name holding a node depth level.",
              "value": { "type": "string | null" }
            },
            {
              "name": "has-children-member",
              "description": "Property name flagging that a node has children.",
              "value": { "type": "string | null" }
            },
            {
              "name": "is-selectable-member",
              "description": "Property name marking whether a node can be selected.",
              "value": { "type": "string | null" }
            },
            {
              "name": "tree-path-separator",
              "description": "Separator between segments in a materialized tree path.",
              "value": { "type": "string", "default": "'.'" }
            },
            {
              "name": "checkbox-mode",
              "description": "Tree checkbox interaction.\n- `independent` (default) — toggles only the clicked node.\n- `cascade` — checks a node whole subtree and shows a tristate (checked / indeterminate / unchecked) box on branches.\n\nTree + multiple only.",
              "value": {
                "type": "'independent' | 'cascade'",
                "default": "'independent'"
              }
            },
            {
              "name": "cascade-select-policy",
              "description": "In `cascade` mode, which values a selection emits (badges / form / change):\n- `rolled-up` (default) — minimal cover: a fully-selected subtree collapses to its root; partially-selected branches emit their individually-checked descendants.\n- `leaves` — only the checked leaf-level nodes.\n- `all` — every fully-checked node (branches and leaves).",
              "value": {
                "type": "'rolled-up' | 'leaves' | 'all'",
                "default": "'rolled-up'"
              }
            },
            {
              "name": "badges-display-mode",
              "description": "How the current selection is shown in the control.",
              "value": {
                "type": "'badges' | 'count' | 'compact' | 'partial' | 'none'",
                "default": "'badges'"
              }
            },
            {
              "name": "badges-position",
              "description": "Where the badges/selection appear relative to the input.",
              "value": {
                "type": "'top' | 'bottom' | 'left' | 'right'",
                "default": "'bottom'"
              }
            },
            {
              "name": "badges-threshold-mode",
              "description": "How `badgesThreshold` is interpreted: collapse to a count badge, or keep partial badges + a \"more\" badge.",
              "value": { "type": "'count' | 'partial'", "default": "'count'" }
            },
            {
              "name": "search-input-mode",
              "description": "Search field mode: editable, read-only, or hidden.",
              "value": {
                "type": "'normal' | 'readonly' | 'hidden'",
                "default": "'normal'"
              }
            },
            {
              "name": "search-mode",
              "description": "Whether typing filters the list or navigates it.",
              "value": {
                "type": "'filter' | 'navigate'",
                "default": "'filter'"
              }
            },
            {
              "name": "overlay-group",
              "description": "Scope the \"one overlay open at a time\" coordination to a named group. Overlays (multiselects, datepickers, external popovers) sharing a group dismiss each other when one opens; different groups are independent. Unset = the default (ungrouped) group.",
              "value": { "type": "string | null" }
            },
            {
              "name": "actions-layout",
              "description": "Whether the action bar wraps or stays on one line.",
              "value": { "type": "'nowrap' | 'wrap'", "default": "'nowrap'" }
            },
            {
              "name": "actions-position",
              "description": "Whether the action bar sits above or below the list.",
              "value": { "type": "'top' | 'bottom'", "default": "'top'" }
            },
            {
              "name": "actions-align",
              "description": "Horizontal alignment of the action buttons.",
              "value": {
                "type": "'stretch' | 'left' | 'right' | 'center' | 'space-between'",
                "default": "'stretch'"
              }
            },
            {
              "name": "checkbox-align",
              "description": "Vertical alignment of an option checkbox.",
              "value": {
                "type": "'top' | 'center' | 'bottom'",
                "default": "'center'"
              }
            },
            {
              "name": "value-format",
              "description": "Serialization format the control emits its value in.",
              "value": {
                "type": "'json' | 'csv' | 'array'",
                "default": "'json'"
              }
            },
            {
              "name": "badge-tooltip-placement",
              "description": "Preferred placement of a badge tooltip relative to its badge (floating-ui placement).",
              "value": {
                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
                "default": "'top'"
              }
            },
            {
              "name": "option-tooltip-placement",
              "description": "Preferred placement of an option tooltip (floating-ui placement).",
              "value": {
                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'",
                "default": "'top-start'"
              }
            },
            {
              "name": "mobile-presentation",
              "description": "How the open dropdown is presented on phones. `auto` (default) keeps the floating panel on desktop/tablet and switches to a full-screen overlay on phone-sized touch devices (touch primary + shorter viewport side < 600px, orientation-robust); `floating` forces the anchored panel everywhere; `fullscreen` forces the full-screen overlay on any device (handy for previews/testing). Resolved reactively from the device/viewport environment.",
              "value": {
                "type": "'auto' | 'floating' | 'fullscreen'",
                "default": "'auto'"
              }
            },
            {
              "name": "fullscreen-autofocus",
              "description": "In the phone fullscreen overlay, auto-focus the search field on open (pops the soft keyboard immediately). Default `false`: the sheet opens with the list visible and the keyboard closed, appearing only when the user taps the search. Set `true` to type-to-filter right away. No effect in the floating presentation.",
              "value": { "type": "boolean" }
            },
            {
              "name": "badges-threshold",
              "description": "Threshold at which badges collapse to a count/compact view.",
              "value": { "type": "number" }
            },
            {
              "name": "badges-max-visible",
              "description": "Maximum number of badges rendered before overflow.",
              "value": { "type": "number" }
            },
            {
              "name": "collapse-badges-below",
              "description": "Container-responsive opt-in (off by default). When set to a px width, the control watches its OWN border box (not the window, via the core `resized` hook / a shared ResizeObserver) and collapses `badges-display-mode` to `count` (\"N selected\") while the box is narrower than this — so a picker in a narrow column/sidebar never overflows with pills, even on a wide monitor. Widening past the threshold restores the configured badges mode. Element-only: the override is applied to the live picker, never to your `badges-display-mode` config.",
              "value": { "type": "number" }
            },
            {
              "name": "min-search-length",
              "description": "Minimum characters before searching/filtering starts.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "search-debounce",
              "description": "Debounce delay in ms applied to the search input.",
              "value": { "type": "number", "default": "0" }
            },
            {
              "name": "virtual-scroll-threshold",
              "description": "Option count above which virtual scrolling turns on.",
              "value": { "type": "number", "default": "100" }
            },
            {
              "name": "option-height",
              "description": "Fixed row height in px used by virtual scrolling.",
              "value": { "type": "number", "default": "50" }
            },
            {
              "name": "badge-height",
              "description": "Fixed badge height in px used for layout/virtualization.",
              "value": { "type": "number", "default": "36" }
            },
            {
              "name": "virtual-scroll-buffer",
              "description": "Extra rows rendered above/below the viewport when virtualizing.",
              "value": { "type": "number", "default": "10" }
            },
            {
              "name": "badge-tooltip-delay",
              "description": "Delay in ms before a badge tooltip appears.",
              "value": { "type": "number", "default": "100" }
            },
            {
              "name": "badge-tooltip-offset",
              "description": "Gap in px between a badge and its tooltip.",
              "value": { "type": "number", "default": "8" }
            },
            {
              "name": "option-tooltip-delay",
              "description": "Delay in ms before an option tooltip appears (falls back to badgeTooltipDelay).",
              "value": { "type": "number" }
            },
            {
              "name": "option-tooltip-offset",
              "description": "Gap in px between an option and its tooltip.",
              "value": { "type": "number" }
            },
            {
              "name": "multiple",
              "description": "Allow selecting multiple options. When off, selecting one replaces the previous.",
              "value": { "type": "boolean" }
            },
            {
              "name": "allow-groups",
              "description": "Allow grouping options under group headers.",
              "value": { "type": "boolean" }
            },
            {
              "name": "show-checkboxes",
              "description": "Show a checkbox on each option.",
              "value": { "type": "boolean" }
            },
            {
              "name": "sticky-actions",
              "description": "Keep the action bar pinned while the list scrolls.",
              "value": { "type": "boolean" }
            },
            {
              "name": "lock-placement",
              "description": "Keep the dropdown initial placement instead of flipping when it fits.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enable-search",
              "description": "Show the search input.",
              "value": { "type": "boolean" }
            },
            {
              "name": "keep-options-on-search",
              "description": "Keep already-selected options visible while filtering.",
              "value": { "type": "boolean" }
            },
            {
              "name": "should-keep-search-on-close",
              "description": "Preserve the search text after the dropdown closes.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enable-selected-popover",
              "description": "Allow the selected-items popover to open (from the count/compact/\"+X more\" badge or the in-input counter). Turn off when you render your own selection UI, so those affordances become inert.",
              "value": { "type": "boolean" }
            },
            {
              "name": "close-on-select",
              "description": "Close the dropdown immediately after a selection.",
              "value": { "type": "boolean" }
            },
            {
              "name": "allow-add-new",
              "description": "Allow adding a new option from the search text.",
              "value": { "type": "boolean" }
            },
            {
              "name": "show-counter",
              "description": "Show a selected-count indicator.",
              "value": { "type": "boolean" }
            },
            {
              "name": "show-clear",
              "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.",
              "value": { "type": "boolean" }
            },
            {
              "name": "show-badge-full-title",
              "description": "Show the full title on badges instead of the short label.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enable-virtual-scroll",
              "description": "Force virtual scrolling on regardless of the threshold.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enable-badge-tooltips",
              "description": "Enable tooltips on badges.",
              "value": { "type": "boolean" }
            },
            {
              "name": "enable-option-tooltips",
              "description": "Enable tooltips on options.",
              "value": { "type": "boolean" }
            },
            {
              "name": "option-tooltip-follow-cursor",
              "description": "Make option tooltips follow the pointer.",
              "value": { "type": "boolean" }
            },
            {
              "name": "show-search-mode-toggle",
              "description": "Show a clickable toggle in the phone fullscreen overlay search header that flips `search-mode` between `filter` and `navigate` live. Fullscreen-only; no effect in the floating presentation or when search is disabled.",
              "value": { "type": "boolean" }
            },
            {
              "name": "initial-values",
              "description": "Values selected on first render. Accepts a JSON array (`[\"a\",\"b\"]`) or a bare CSV (`a,b,c`).",
              "value": { "type": "Array<string | number>", "default": "[]" }
            },
            {
              "name": "show-debug-info",
              "description": "Render an in-component debug panel.",
              "value": { "type": "boolean" }
            },
            {
              "name": "defer",
              "description": "Hold the initial render. When the `defer` attribute is present on upgrade the component builds nothing (it only reserves space) — so options, callbacks (e.g. `customStylesCallback`) and event listeners can all be wired first, then released with `el.ready()` (or by removing the `defer` attribute, for server-driven frameworks). The release builds the picker ONCE with everything already in place, avoiding the upgrade-then-restyle flash. Absent (default): builds immediately on connect. Latched — once released the gate never re-closes.",
              "value": { "type": "boolean" }
            },
            {
              "name": "data-options",
              "description": "HTML-authoring source for the option list, parsed per `data-options-format`. Reactive: changing either attribute re-renders. Prefer the `options` property in JS; a set `options` property and declarative <option> children both win over this.",
              "value": { "type": "string" }
            },
            {
              "name": "data-options-format",
              "description": "How to parse the `data-options` attribute: `json` (a JSON array of objects or [value, label] tuples), `csv` (rows split on `data-options-row-splitter`, cells on `data-options-splitter`; the first row is a header — map columns via *-member), or `plain` (bare values split on both splitters -> [value, label] tuples, value === label). Default `json`.",
              "value": {
                "type": "'json' | 'csv' | 'plain'",
                "default": "'json'"
              }
            },
            {
              "name": "data-options-splitter",
              "description": "Field/cell delimiter for the `csv` and `plain` `data-options` formats. Default `,`. Escapes `\\t` `\\n` `\\r` are honoured (e.g. `data-options-splitter=\"\\t\"` for TSV). Ignored for `json`.",
              "value": { "type": "string", "default": "','" }
            },
            {
              "name": "data-options-row-splitter",
              "description": "Row/record delimiter for the `csv` and `plain` `data-options` formats. Default newline. Escapes honoured (e.g. `data-options-row-splitter=\";\"` for single-line data). Ignored for `json`.",
              "value": { "type": "string", "default": "'\\n'" }
            }
          ],
          "events": [
            {
              "name": "select",
              "description": "An option was selected. `detail.option` is the selected option; `detail.selectedOptions`/`detail.selectedValues` are the full selection."
            },
            {
              "name": "deselect",
              "description": "An option was removed from the selection. `detail.option` is that option."
            },
            {
              "name": "change",
              "description": "The selection changed. `detail.selectedOptions`/`detail.selectedValues` are the full selection."
            },
            {
              "name": "add",
              "description": "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."
            },
            {
              "name": "ready",
              "description": "The picker was built and painted for the first time (once per element lifetime). Fires right after the first build — synchronously during upgrade for a normal element, or when the render gate is released (`el.ready()` / removing `defer`) for a deferred one. No detail."
            }
          ],
          "js": {
            "properties": [
              {
                "name": "onSelect",
                "type": "((e: CustomEvent<MultiSelectEventDetail<T>>) => void) | null"
              },
              {
                "name": "onDeselect",
                "type": "((e: CustomEvent<MultiSelectEventDetail<T>>) => void) | null"
              },
              {
                "name": "onChange",
                "type": "((e: CustomEvent<MultiSelectEventDetail<T>>) => void) | null"
              },
              {
                "name": "onAdd",
                "type": "((e: CustomEvent<MultiSelectEventDetail<T>>) => void) | null"
              },
              {
                "name": "onReady",
                "type": "((e: CustomEvent<undefined>) => void) | null"
              },
              {
                "name": "name",
                "description": "Form field name (mirrors the `name` attribute → `formFieldId`).",
                "type": "string | null"
              },
              {
                "name": "selectedValue",
                "type": "string | number | (string | number)[] | null"
              },
              { "name": "selectedItem", "type": "T | null" },
              {
                "name": "searchText",
                "description": "The current search box text (empty string when nothing is typed). Read via this getter, write with search.",
                "type": "string"
              },
              {
                "name": "isOpen",
                "description": "Whether the dropdown is currently open. Assigning opens/closes it.",
                "type": "boolean"
              },
              {
                "name": "isReady",
                "description": "Whether the picker has been built (the `ready` event has fired). False while a `defer` gate is still held.",
                "type": "boolean"
              },
              {
                "name": "searchHint",
                "description": "Small hint text shown beneath the search input.",
                "type": "string | null"
              },
              {
                "name": "searchPlaceholder",
                "description": "Placeholder text for the search input. When unset it defaults to \"Search...\"; if `show-search-mode-toggle` is on, the default instead becomes mode-aware (\"Search…\" in navigate, \"Filter…\" in filter). An explicit value always wins and stays fixed.",
                "type": "string | null"
              },
              {
                "name": "selectPlaceholder",
                "description": "Placeholder shown on the control when nothing is selected.",
                "type": "string"
              },
              {
                "name": "noDataPlaceholder",
                "description": "Text shown when there are no options at all.",
                "type": "string | null"
              },
              {
                "name": "dropdownMinWidth",
                "description": "Minimum width of the dropdown panel (any CSS length).",
                "type": "string | null"
              },
              {
                "name": "dropdownMaxWidth",
                "description": "Maximum width of the dropdown panel (any CSS length).",
                "type": "string | null"
              },
              {
                "name": "maxHeight",
                "description": "Maximum height of the dropdown list before it scrolls.",
                "type": "string"
              },
              {
                "name": "emptyMessage",
                "description": "Message shown when a search yields no matches.",
                "type": "string"
              },
              {
                "name": "addNewText",
                "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.",
                "type": "string | null"
              },
              {
                "name": "addNewPendingText",
                "description": "Template for the pending prompt (spinner + text) shown while an async `addNewCallback` runs. `{value}` is replaced with the typed text. Default: `Adding \"{value}\"…`.",
                "type": "string | null"
              },
              {
                "name": "loadingMessage",
                "description": "Message shown while options are loading.",
                "type": "string"
              },
              {
                "name": "removeButtonTooltipText",
                "description": "Tooltip text for a badge remove (×) button.",
                "type": "string | null"
              },
              {
                "name": "formFieldId",
                "description": "HTML form field name/id used for the hidden input(s).",
                "type": "string | null"
              },
              {
                "name": "dropdownWidth",
                "description": "Fixed dropdown width; mirrored to the `--ms-dropdown-width` CSS variable.",
                "type": "string | null"
              },
              {
                "name": "selectedPopoverWidth",
                "description": "Selected-items popover width; mirrored to `--ms-selected-popover-width`.",
                "type": "string | null"
              },
              {
                "name": "valueMember",
                "description": "Property name on an option object that holds its value.",
                "type": "string | null"
              },
              {
                "name": "displayValueMember",
                "description": "Property name that holds an option display label.",
                "type": "string | null"
              },
              {
                "name": "searchValueMember",
                "description": "Property name searched against (falls back to the display value).",
                "type": "string | null"
              },
              {
                "name": "iconMember",
                "description": "Property name that holds an option icon.",
                "type": "string | null"
              },
              {
                "name": "subtitleMember",
                "description": "Property name that holds an option subtitle.",
                "type": "string | null"
              },
              {
                "name": "fullTitleMember",
                "description": "Property name that holds an option full/long title.",
                "type": "string | null"
              },
              {
                "name": "groupMember",
                "description": "Property name used to group options under headers.",
                "type": "string | null"
              },
              {
                "name": "disabledMember",
                "description": "Property name that marks an option disabled.",
                "type": "string | null"
              },
              {
                "name": "pathMember",
                "description": "Property name holding a node materialized tree path.",
                "type": "string | null"
              },
              {
                "name": "parentPathMember",
                "description": "Property name holding a node parent path.",
                "type": "string | null"
              },
              {
                "name": "levelMember",
                "description": "Property name holding a node depth level.",
                "type": "string | null"
              },
              {
                "name": "hasChildrenMember",
                "description": "Property name flagging that a node has children.",
                "type": "string | null"
              },
              {
                "name": "isSelectableMember",
                "description": "Property name marking whether a node can be selected.",
                "type": "string | null"
              },
              {
                "name": "treePathSeparator",
                "description": "Separator between segments in a materialized tree path.",
                "type": "string"
              },
              {
                "name": "isTreeEnabled",
                "description": "Force tree mode on/off. Property-only; when unset (null) tree mode auto-enables if a path source (path-member / getPathCallback) is present.",
                "type": "boolean"
              },
              {
                "name": "checkboxMode",
                "description": "Tree checkbox interaction.\n- `independent` (default) — toggles only the clicked node.\n- `cascade` — checks a node whole subtree and shows a tristate (checked / indeterminate / unchecked) box on branches.\n\nTree + multiple only.",
                "type": "'independent' | 'cascade'"
              },
              {
                "name": "cascadeSelectPolicy",
                "description": "In `cascade` mode, which values a selection emits (badges / form / change):\n- `rolled-up` (default) — minimal cover: a fully-selected subtree collapses to its root; partially-selected branches emit their individually-checked descendants.\n- `leaves` — only the checked leaf-level nodes.\n- `all` — every fully-checked node (branches and leaves).",
                "type": "'rolled-up' | 'leaves' | 'all'"
              },
              {
                "name": "badgesDisplayMode",
                "description": "How the current selection is shown in the control.",
                "type": "'badges' | 'count' | 'compact' | 'partial' | 'none'"
              },
              {
                "name": "badgesPosition",
                "description": "Where the badges/selection appear relative to the input.",
                "type": "'top' | 'bottom' | 'left' | 'right'"
              },
              {
                "name": "badgesThresholdMode",
                "description": "How `badgesThreshold` is interpreted: collapse to a count badge, or keep partial badges + a \"more\" badge.",
                "type": "'count' | 'partial'"
              },
              {
                "name": "searchInputMode",
                "description": "Search field mode: editable, read-only, or hidden.",
                "type": "'normal' | 'readonly' | 'hidden'"
              },
              {
                "name": "searchMode",
                "description": "Whether typing filters the list or navigates it.",
                "type": "'filter' | 'navigate'"
              },
              {
                "name": "overlayGroup",
                "description": "Scope the \"one overlay open at a time\" coordination to a named group. Overlays (multiselects, datepickers, external popovers) sharing a group dismiss each other when one opens; different groups are independent. Unset = the default (ungrouped) group.",
                "type": "string | null"
              },
              {
                "name": "actionsLayout",
                "description": "Whether the action bar wraps or stays on one line.",
                "type": "'nowrap' | 'wrap'"
              },
              {
                "name": "actionsPosition",
                "description": "Whether the action bar sits above or below the list.",
                "type": "'top' | 'bottom'"
              },
              {
                "name": "actionsAlign",
                "description": "Horizontal alignment of the action buttons.",
                "type": "'stretch' | 'left' | 'right' | 'center' | 'space-between'"
              },
              {
                "name": "checkboxAlign",
                "description": "Vertical alignment of an option checkbox.",
                "type": "'top' | 'center' | 'bottom'"
              },
              {
                "name": "valueFormat",
                "description": "Serialization format the control emits its value in.",
                "type": "'json' | 'csv' | 'array'"
              },
              {
                "name": "badgeTooltipPlacement",
                "description": "Preferred placement of a badge tooltip relative to its badge (floating-ui placement).",
                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'"
              },
              {
                "name": "optionTooltipPlacement",
                "description": "Preferred placement of an option tooltip (floating-ui placement).",
                "type": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'"
              },
              {
                "name": "mobilePresentation",
                "description": "How the open dropdown is presented on phones. `auto` (default) keeps the floating panel on desktop/tablet and switches to a full-screen overlay on phone-sized touch devices (touch primary + shorter viewport side < 600px, orientation-robust); `floating` forces the anchored panel everywhere; `fullscreen` forces the full-screen overlay on any device (handy for previews/testing). Resolved reactively from the device/viewport environment.",
                "type": "'auto' | 'floating' | 'fullscreen'"
              },
              {
                "name": "fullscreenAutofocus",
                "description": "In the phone fullscreen overlay, auto-focus the search field on open (pops the soft keyboard immediately). Default `false`: the sheet opens with the list visible and the keyboard closed, appearing only when the user taps the search. Set `true` to type-to-filter right away. No effect in the floating presentation.",
                "type": "boolean"
              },
              {
                "name": "badgesThreshold",
                "description": "Threshold at which badges collapse to a count/compact view.",
                "type": "number"
              },
              {
                "name": "badgesMaxVisible",
                "description": "Maximum number of badges rendered before overflow.",
                "type": "number"
              },
              {
                "name": "collapseBadgesBelow",
                "description": "Container-responsive opt-in (off by default). When set to a px width, the control watches its OWN border box (not the window, via the core `resized` hook / a shared ResizeObserver) and collapses `badges-display-mode` to `count` (\"N selected\") while the box is narrower than this — so a picker in a narrow column/sidebar never overflows with pills, even on a wide monitor. Widening past the threshold restores the configured badges mode. Element-only: the override is applied to the live picker, never to your `badges-display-mode` config.",
                "type": "number"
              },
              {
                "name": "minSearchLength",
                "description": "Minimum characters before searching/filtering starts.",
                "type": "number"
              },
              {
                "name": "searchDebounce",
                "description": "Debounce delay in ms applied to the search input.",
                "type": "number"
              },
              {
                "name": "virtualScrollThreshold",
                "description": "Option count above which virtual scrolling turns on.",
                "type": "number"
              },
              {
                "name": "optionHeight",
                "description": "Fixed row height in px used by virtual scrolling.",
                "type": "number"
              },
              {
                "name": "badgeHeight",
                "description": "Fixed badge height in px used for layout/virtualization.",
                "type": "number"
              },
              {
                "name": "virtualScrollBuffer",
                "description": "Extra rows rendered above/below the viewport when virtualizing.",
                "type": "number"
              },
              {
                "name": "badgeTooltipDelay",
                "description": "Delay in ms before a badge tooltip appears.",
                "type": "number"
              },
              {
                "name": "badgeTooltipOffset",
                "description": "Gap in px between a badge and its tooltip.",
                "type": "number"
              },
              {
                "name": "optionTooltipDelay",
                "description": "Delay in ms before an option tooltip appears (falls back to badgeTooltipDelay).",
                "type": "number"
              },
              {
                "name": "optionTooltipOffset",
                "description": "Gap in px between an option and its tooltip.",
                "type": "number"
              },
              {
                "name": "isMultipleEnabled",
                "description": "Allow selecting multiple options. When off, selecting one replaces the previous.",
                "type": "boolean"
              },
              {
                "name": "isGroupsAllowed",
                "description": "Allow grouping options under group headers.",
                "type": "boolean"
              },
              {
                "name": "isCheckboxesShown",
                "description": "Show a checkbox on each option.",
                "type": "boolean"
              },
              {
                "name": "isActionsSticky",
                "description": "Keep the action bar pinned while the list scrolls.",
                "type": "boolean"
              },
              {
                "name": "isPlacementLocked",
                "description": "Keep the dropdown initial placement instead of flipping when it fits.",
                "type": "boolean"
              },
              {
                "name": "isSearchEnabled",
                "description": "Show the search input.",
                "type": "boolean"
              },
              {
                "name": "isKeepOptionsOnSearch",
                "description": "Keep already-selected options visible while filtering.",
                "type": "boolean"
              },
              {
                "name": "shouldKeepSearchOnClose",
                "description": "Preserve the search text after the dropdown closes.",
                "type": "boolean"
              },
              {
                "name": "isSelectedPopoverEnabled",
                "description": "Allow the selected-items popover to open (from the count/compact/\"+X more\" badge or the in-input counter). Turn off when you render your own selection UI, so those affordances become inert.",
                "type": "boolean"
              },
              {
                "name": "isCloseOnSelect",
                "description": "Close the dropdown immediately after a selection.",
                "type": "boolean"
              },
              {
                "name": "isAddNewAllowed",
                "description": "Allow adding a new option from the search text.",
                "type": "boolean"
              },
              {
                "name": "isCounterShown",
                "description": "Show a selected-count indicator.",
                "type": "boolean"
              },
              {
                "name": "isClearShown",
                "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.",
                "type": "boolean"
              },
              {
                "name": "isBadgeFullTitleShown",
                "description": "Show the full title on badges instead of the short label.",
                "type": "boolean"
              },
              {
                "name": "isVirtualScrollEnabled",
                "description": "Force virtual scrolling on regardless of the threshold.",
                "type": "boolean"
              },
              {
                "name": "isBadgeTooltipsEnabled",
                "description": "Enable tooltips on badges.",
                "type": "boolean"
              },
              {
                "name": "isOptionTooltipsEnabled",
                "description": "Enable tooltips on options.",
                "type": "boolean"
              },
              {
                "name": "isOptionTooltipFollowCursor",
                "description": "Make option tooltips follow the pointer.",
                "type": "boolean"
              },
              {
                "name": "isSearchModeToggleShown",
                "description": "Show a clickable toggle in the phone fullscreen overlay search header that flips `search-mode` between `filter` and `navigate` live. Fullscreen-only; no effect in the floating presentation or when search is disabled.",
                "type": "boolean"
              },
              {
                "name": "initialValues",
                "description": "Values selected on first render. Accepts a JSON array (`[\"a\",\"b\"]`) or a bare CSV (`a,b,c`).",
                "type": "Array<string | number>"
              },
              {
                "name": "showDebugInfo",
                "description": "Render an in-component debug panel.",
                "type": "boolean"
              },
              {
                "name": "deferRender",
                "description": "Hold the initial render. When the `defer` attribute is present on upgrade the component builds nothing (it only reserves space) — so options, callbacks (e.g. `customStylesCallback`) and event listeners can all be wired first, then released with `el.ready()` (or by removing the `defer` attribute, for server-driven frameworks). The release builds the picker ONCE with everything already in place, avoiding the upgrade-then-restyle flash. Absent (default): builds immediately on connect. Latched — once released the gate never re-closes.",
                "type": "boolean"
              },
              {
                "name": "options",
                "description": "The array of option objects to render. The JS API — assign `el.options` directly. For HTML authoring use the `data-options` attribute (parsed per `data-options-format`) or declarative <option> children; both feed the same list and take precedence over this property in the order: <option> children > property > data-options.",
                "type": "ReadonlyArray<Record<string, unknown>>"
              },
              {
                "name": "optionsSource",
                "description": "HTML-authoring source for the option list, parsed per `data-options-format`. Reactive: changing either attribute re-renders. Prefer the `options` property in JS; a set `options` property and declarative <option> children both win over this.",
                "type": "string"
              },
              {
                "name": "optionsFormat",
                "description": "How to parse the `data-options` attribute: `json` (a JSON array of objects or [value, label] tuples), `csv` (rows split on `data-options-row-splitter`, cells on `data-options-splitter`; the first row is a header — map columns via *-member), or `plain` (bare values split on both splitters -> [value, label] tuples, value === label). Default `json`.",
                "type": "'json' | 'csv' | 'plain'"
              },
              {
                "name": "optionsSplitter",
                "description": "Field/cell delimiter for the `csv` and `plain` `data-options` formats. Default `,`. Escapes `\\t` `\\n` `\\r` are honoured (e.g. `data-options-splitter=\"\\t\"` for TSV). Ignored for `json`.",
                "type": "string"
              },
              {
                "name": "optionsRowSplitter",
                "description": "Row/record delimiter for the `csv` and `plain` `data-options` formats. Default newline. Escapes honoured (e.g. `data-options-row-splitter=\";\"` for single-line data). Ignored for `json`.",
                "type": "string"
              },
              {
                "name": "actionButtons",
                "description": "Custom action buttons for the dropdown footer/header. Property-only; when unset the default Select-All / Clear buttons apply.",
                "type": "Array<Record<string, unknown>>"
              },
              {
                "name": "getValueCallback",
                "description": "Extract an option value (overrides valueMember).",
                "type": "(item: unknown) => string | number"
              },
              {
                "name": "getPathCallback",
                "description": "Extract a node tree path (enables tree mode; overrides pathMember).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getGroupCallback",
                "description": "Extract the group name from an option (overrides groupMember).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getDisabledCallback",
                "description": "Whether an option is disabled (overrides disabledMember).",
                "type": "(item: unknown) => boolean"
              },
              {
                "name": "getIsSelectableCallback",
                "description": "Whether a tree node can be selected (overrides is-selectable-member).",
                "type": "(node: unknown) => boolean"
              },
              {
                "name": "getSearchValueCallback",
                "description": "Text an option is searched against (overrides searchValueMember).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "searchCallback",
                "description": "Custom / async search; return the filtered options.",
                "type": "(searchTerm: string, signal?: AbortSignal) => Promise<unknown[]>"
              },
              {
                "name": "getDisplayValueCallback",
                "description": "Compute the display label for an option (overrides displayValueMember).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getBadgeDisplayCallback",
                "description": "Compute the text shown on an option badge.",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getBadgeClassCallback",
                "description": "Extra CSS class(es) for an option badge.",
                "type": "(item: unknown) => string | string[]"
              },
              {
                "name": "getIconCallback",
                "description": "Icon for an option (overrides iconMember).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getSubtitleCallback",
                "description": "Subtitle for an option (overrides subtitleMember).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getFullTitleCallback",
                "description": "Full title for an option (used by badges when show-badge-full-title is on).",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getCounterCallback",
                "description": "Render the selected-count label.",
                "type": "(count: number, moreCount?: number) => string"
              },
              {
                "name": "getValueFormatCallback",
                "description": "Serialize the selected values for form submission.",
                "type": "(selectedValues: (string | number)[]) => string"
              },
              {
                "name": "getBadgeTooltipCallback",
                "description": "Tooltip content for an option badge.",
                "type": "(item: unknown) => string | HTMLElement"
              },
              {
                "name": "getOptionTooltipCallback",
                "description": "Tooltip content for an option row.",
                "type": "(item: unknown) => string | HTMLElement"
              },
              {
                "name": "getRemoveButtonTooltipCallback",
                "description": "Tooltip text for a badge remove button.",
                "type": "(item: unknown) => string"
              },
              {
                "name": "getSelectedItemClassCallback",
                "description": "Extra CSS class(es) for a selected item.",
                "type": "(item: unknown) => string | string[]"
              },
              {
                "name": "renderOptionContentCallback",
                "description": "Custom render for an option row; may return HTML or an element.",
                "type": "(item: unknown, context: OptionContentRenderContext) => string | HTMLElement"
              },
              {
                "name": "renderBadgeContentCallback",
                "description": "Custom render for a badge content (fills the built-in pill); may return HTML or an element.",
                "type": "(item: unknown, context: BadgeContentRenderContext) => string | HTMLElement"
              },
              {
                "name": "renderBadgeCallback",
                "description": "Custom render for the WHOLE badge (main area), not just its content — return the entire pill/card. The component wraps it in `.ms__badge.ms__badge--custom` with `data-value` and delegates removal to any inner element with `data-action=\"remove\"` (or `.ms__badge-remove`). Return null/empty to fall back to the default pill for that item.",
                "type": "(item: unknown, context: BadgeContentRenderContext) => string | HTMLElement | null"
              },
              {
                "name": "renderGroupLabelContentCallback",
                "description": "Customize a group label; may return an HTML string or element.",
                "type": "(groupName: string) => string | HTMLElement"
              },
              {
                "name": "renderSelectedContentCallback",
                "description": "Custom render for the whole selected area.",
                "type": "(item: unknown) => string"
              },
              {
                "name": "renderSelectedItemContentCallback",
                "description": "Custom render for one selected item.",
                "type": "(item: unknown) => string | HTMLElement"
              },
              {
                "name": "customStylesCallback",
                "description": "Returns a CSS string injected into the component via a replaceable style slot (§12.8).",
                "type": "() => string"
              },
              {
                "name": "beforeSearchCallback",
                "description": "Runs before a search; return a rewritten term or null to veto.",
                "type": "(searchTerm: string) => string | null"
              },
              {
                "name": "beforeSelectCallback",
                "description": "Runs before selecting; return false to veto, or a string to veto and show it as a message.",
                "type": "(option: unknown, selectedOptions: unknown[]) => boolean | string | void"
              },
              {
                "name": "beforeDeselectCallback",
                "description": "Runs before deselecting; return false to veto, or a string to veto and show it as a message.",
                "type": "(option: unknown, selectedOptions: unknown[]) => boolean | string | void"
              },
              {
                "name": "addNewCallback",
                "description": "Create a new option from the typed text. May return a rich option object (renders via the same get*/render* callbacks as any option). Async + cancelable: return null/undefined to abort (no add, no `add` event). Omit entirely to handle creation yourself via the `add` event.",
                "type": "(value: string) => unknown | null | undefined | Promise<unknown | null | undefined>"
              },
              {
                "name": "getAddNewTextCallback",
                "description": "Dynamically compute the \"add new\" prompt label from the typed text (returns plain text). Takes precedence over `add-new-text`.",
                "type": "(value: string) => string"
              },
              {
                "name": "keydownCallback",
                "description": "Intercept keydown before built-in handling; return true to suppress the default. Gets the event, current state, and an imperative controller.",
                "type": "(context: MultiSelectKeydownContext) => boolean | void"
              }
            ],
            "events": [
              {
                "name": "select",
                "description": "An option was selected. `detail.option` is the selected option; `detail.selectedOptions`/`detail.selectedValues` are the full selection."
              },
              {
                "name": "deselect",
                "description": "An option was removed from the selection. `detail.option` is that option."
              },
              {
                "name": "change",
                "description": "The selection changed. `detail.selectedOptions`/`detail.selectedValues` are the full selection."
              },
              {
                "name": "add",
                "description": "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."
              },
              {
                "name": "ready",
                "description": "The picker was built and painted for the first time (once per element lifetime). Fires right after the first build — synchronously during upgrade for a normal element, or when the render gate is released (`el.ready()` / removing `defer`) for a deferred one. No detail."
              }
            ]
          }
        }
      ]
    },
    "css": {
      "properties": [
        {
          "name": "--ms-rem",
          "description": "Base sizing unit for proportional scaling (default: 10px)"
        },
        { "name": "--ms-accent-color", "description": "Primary accent color" },
        {
          "name": "--ms-accent-color-hover",
          "description": "Accent color on hover"
        },
        {
          "name": "--ms-accent-color-active",
          "description": "Accent color when pressed"
        },
        {
          "name": "--ms-accent-color-light",
          "description": "Light accent background"
        },
        {
          "name": "--ms-accent-color-light-hover",
          "description": "Light accent hover"
        },
        { "name": "--ms-text-color-1", "description": "Primary text color" },
        { "name": "--ms-text-color-2", "description": "Secondary text color" },
        { "name": "--ms-text-color-3", "description": "Tertiary text color" },
        { "name": "--ms-text-color-4", "description": "Quaternary text color" },
        {
          "name": "--ms-text-color-on-accent",
          "description": "Text on accent backgrounds"
        },
        {
          "name": "--ms-text-primary",
          "description": "Legacy alias for text-color-1"
        },
        {
          "name": "--ms-text-secondary",
          "description": "Legacy alias for text-color-3"
        },
        {
          "name": "--ms-primary-bg",
          "description": "Hover/focus background (options, action buttons, counter); reads --base-hover-bg"
        },
        {
          "name": "--ms-primary-bg-hover",
          "description": "Active/stronger background (counter badge text); reads --base-active-bg"
        },
        { "name": "--ms-border-color", "description": "Default border color" },
        { "name": "--ms-border", "description": "Full border shorthand" },
        { "name": "--ms-input-bg", "description": "Input field background" },
        { "name": "--ms-input-color", "description": "Input text color" },
        { "name": "--ms-input-border", "description": "Input border" },
        {
          "name": "--ms-input-border-hover",
          "description": "Input border on hover"
        },
        {
          "name": "--ms-input-border-focus",
          "description": "Input border when focused"
        },
        {
          "name": "--ms-input-placeholder-color",
          "description": "Placeholder text color"
        },
        {
          "name": "--ms-input-bg-disabled",
          "description": "Disabled input background"
        },
        { "name": "--ms-input-height", "description": "Input height" },
        { "name": "--ms-input-font-size", "description": "Input font size" },
        {
          "name": "--ms-input-border-width",
          "description": "Input border width"
        },
        {
          "name": "--ms-input-border-radius",
          "description": "Input border radius"
        },
        { "name": "--ms-input-text", "description": "Input text color" },
        { "name": "--ms-toggle-color", "description": "Toggle icon color" },
        {
          "name": "--ms-toggle-icon-color",
          "description": "Toggle icon color (semantic)"
        },
        {
          "name": "--ms-toggle-icon-color-open",
          "description": "Toggle icon color when open"
        },
        {
          "name": "--ms-counter-padding",
          "description": "Counter badge padding"
        },
        {
          "name": "--ms-counter-bg",
          "description": "Counter badge background"
        },
        {
          "name": "--ms-counter-color",
          "description": "Counter badge text color"
        },
        {
          "name": "--ms-counter-font-size",
          "description": "Counter badge font size"
        },
        {
          "name": "--ms-counter-font-weight",
          "description": "Counter badge font weight"
        },
        {
          "name": "--ms-counter-border-radius",
          "description": "Counter badge border radius"
        },
        {
          "name": "--ms-counter-bg-hover",
          "description": "Counter badge hover background"
        },
        {
          "name": "--ms-counter-badge-bg",
          "description": "Counter badge semantic background"
        },
        {
          "name": "--ms-counter-badge-bg-hover",
          "description": "Counter badge semantic hover"
        },
        {
          "name": "--ms-counter-badge-color",
          "description": "Counter badge semantic color"
        },
        { "name": "--ms-hint-padding", "description": "Floating hint padding" },
        { "name": "--ms-hint-border", "description": "Floating hint border" },
        {
          "name": "--ms-hint-border-radius",
          "description": "Floating hint border radius"
        },
        {
          "name": "--ms-hint-box-shadow",
          "description": "Floating hint shadow"
        },
        {
          "name": "--ms-hint-font-size",
          "description": "Floating hint font size"
        },
        { "name": "--ms-hint-bg", "description": "Floating hint background" },
        {
          "name": "--ms-hint-color",
          "description": "Floating hint text color"
        },
        {
          "name": "--ms-hint-border-color",
          "description": "Floating hint border color"
        },
        { "name": "--ms-dropdown-bg", "description": "Dropdown background" },
        {
          "name": "--ms-dropdown-text-color",
          "description": "Dropdown text color"
        },
        { "name": "--ms-dropdown-border", "description": "Dropdown border" },
        {
          "name": "--ms-dropdown-border-color",
          "description": "Dropdown border color"
        },
        {
          "name": "--ms-dropdown-border-radius",
          "description": "Dropdown border radius"
        },
        {
          "name": "--ms-dropdown-box-shadow",
          "description": "Dropdown shadow"
        },
        {
          "name": "--ms-dropdown-box-shadow-semantic",
          "description": "Dropdown semantic shadow"
        },
        {
          "name": "--ms-dropdown-width",
          "description": "Options dropdown width (defaults to the input width; also set via the dropdown-width attribute)"
        },
        {
          "name": "--ms-options-max-height",
          "description": "Options list max height"
        },
        { "name": "--ms-z-index-dropdown", "description": "Dropdown z-index" },
        {
          "name": "--ms-z-index-sticky",
          "description": "Sticky elements z-index"
        },
        { "name": "--ms-actions-gap", "description": "Actions row gap" },
        {
          "name": "--ms-actions-padding",
          "description": "Actions row padding"
        },
        {
          "name": "--ms-actions-border-bottom",
          "description": "Actions row border"
        },
        { "name": "--ms-actions-bg", "description": "Actions row background" },
        {
          "name": "--ms-actions-border-color",
          "description": "Actions row border color"
        },
        {
          "name": "--ms-action-btn-padding",
          "description": "Action button padding"
        },
        {
          "name": "--ms-action-btn-font-size",
          "description": "Action button font size"
        },
        {
          "name": "--ms-action-btn-border",
          "description": "Action button border"
        },
        {
          "name": "--ms-action-btn-border-radius",
          "description": "Action button border radius"
        },
        {
          "name": "--ms-action-btn-bg",
          "description": "Action button background"
        },
        {
          "name": "--ms-action-btn-color",
          "description": "Action button color"
        },
        {
          "name": "--ms-action-btn-bg-hover",
          "description": "Action button hover background"
        },
        {
          "name": "--ms-action-btn-border-color-hover",
          "description": "Action button hover border"
        },
        {
          "name": "--ms-action-button-bg",
          "description": "Semantic action button background"
        },
        {
          "name": "--ms-action-button-bg-hover",
          "description": "Semantic action button hover"
        },
        {
          "name": "--ms-action-button-border-color",
          "description": "Semantic action button border"
        },
        {
          "name": "--ms-action-button-border-color-hover",
          "description": "Semantic action button hover border"
        },
        {
          "name": "--ms-action-button-color",
          "description": "Semantic action button color"
        },
        {
          "name": "--ms-options-padding",
          "description": "Options container padding"
        },
        { "name": "--ms-group-border-top", "description": "Group border top" },
        { "name": "--ms-group-margin-top", "description": "Group margin top" },
        {
          "name": "--ms-group-padding-top",
          "description": "Group padding top"
        },
        {
          "name": "--ms-group-border-color",
          "description": "Group border color"
        },
        {
          "name": "--ms-group-label-padding",
          "description": "Group label padding"
        },
        {
          "name": "--ms-group-label-font-size",
          "description": "Group label font size"
        },
        {
          "name": "--ms-group-label-font-weight",
          "description": "Group label font weight"
        },
        {
          "name": "--ms-group-label-color",
          "description": "Group label color"
        },
        {
          "name": "--ms-group-label-transform",
          "description": "Group label text transform"
        },
        {
          "name": "--ms-group-label-letter-spacing",
          "description": "Group label letter spacing"
        },
        { "name": "--ms-option-gap", "description": "Option content gap" },
        { "name": "--ms-option-padding", "description": "Option padding" },
        {
          "name": "--ms-option-padding-h",
          "description": "Option horizontal padding"
        },
        { "name": "--ms-option-color", "description": "Option text color" },
        { "name": "--ms-option-bg", "description": "Option background" },
        {
          "name": "--ms-option-bg-hover",
          "description": "Option hover background"
        },
        {
          "name": "--ms-option-bg-focused",
          "description": "Option focused background"
        },
        {
          "name": "--ms-option-outline-focused",
          "description": "Option focus outline"
        },
        {
          "name": "--ms-option-focus-outline-offset",
          "description": "Option focus outline offset"
        },
        {
          "name": "--ms-option-bg-matched",
          "description": "Matched option background"
        },
        {
          "name": "--ms-option-border-matched",
          "description": "Matched option border"
        },
        {
          "name": "--ms-option-bg-selected",
          "description": "Selected option background"
        },
        {
          "name": "--ms-option-text-color",
          "description": "Option text color (semantic)"
        },
        {
          "name": "--ms-option-color-hover",
          "description": "Option hover color"
        },
        {
          "name": "--ms-option-color-focused",
          "description": "Option focused color"
        },
        {
          "name": "--ms-option-outline-color-focused",
          "description": "Option focus outline color"
        },
        {
          "name": "--ms-option-color-matched",
          "description": "Matched option color"
        },
        {
          "name": "--ms-option-border-matched-color",
          "description": "Matched option border color"
        },
        {
          "name": "--ms-option-bg-focused-hover",
          "description": "Focused option hover background"
        },
        {
          "name": "--ms-option-bg-matched-hover",
          "description": "Matched option hover background"
        },
        {
          "name": "--ms-option-bg-selected-focused",
          "description": "Selected focused background"
        },
        {
          "name": "--ms-option-bg-selected-matched",
          "description": "Selected matched background"
        },
        {
          "name": "--ms-option-disabled-bg",
          "description": "Disabled option background"
        },
        {
          "name": "--ms-option-bg-disabled-selected",
          "description": "Disabled selected background"
        },
        {
          "name": "--ms-disabled-opacity",
          "description": "Disabled option opacity"
        },
        {
          "name": "--ms-option-content-gap",
          "description": "Option content gap"
        },
        { "name": "--ms-option-icon-size", "description": "Option icon size" },
        {
          "name": "--ms-option-icon-font-size",
          "description": "Option icon font size"
        },
        {
          "name": "--ms-option-title-font-size",
          "description": "Option title font size"
        },
        {
          "name": "--ms-option-title-color",
          "description": "Option title color"
        },
        {
          "name": "--ms-option-subtitle-margin-top",
          "description": "Option subtitle margin"
        },
        {
          "name": "--ms-option-subtitle-font-size",
          "description": "Option subtitle font size"
        },
        {
          "name": "--ms-option-subtitle-line-height",
          "description": "Option subtitle line height"
        },
        {
          "name": "--ms-option-subtitle-color",
          "description": "Option subtitle color"
        },
        {
          "name": "--ms-option-mark-bg",
          "description": "Search match highlight background"
        },
        {
          "name": "--ms-option-mark-color",
          "description": "Search match highlight color"
        },
        {
          "name": "--ms-option-mark-font-weight",
          "description": "Search match highlight weight"
        },
        {
          "name": "--ms-checkbox-margin-top",
          "description": "Checkbox margin top"
        },
        {
          "name": "--ms-checkbox-margin-right",
          "description": "Checkbox margin right"
        },
        {
          "name": "--ms-checkbox-margin-bottom",
          "description": "Checkbox margin bottom"
        },
        {
          "name": "--ms-checkbox-margin-left",
          "description": "Checkbox margin left"
        },
        { "name": "--ms-checkbox-size", "description": "Checkbox size" },
        { "name": "--ms-checkbox-scale", "description": "Checkbox scale" },
        { "name": "--ms-checkbox-align", "description": "Checkbox alignment" },
        { "name": "--ms-checkbox-bg", "description": "Checkbox background" },
        { "name": "--ms-checkbox-border", "description": "Checkbox border" },
        {
          "name": "--ms-checkbox-border-radius",
          "description": "Checkbox border radius"
        },
        {
          "name": "--ms-checkbox-checked-bg",
          "description": "Checked checkbox background"
        },
        {
          "name": "--ms-checkbox-checked-border",
          "description": "Checked checkbox border"
        },
        {
          "name": "--ms-checkbox-checkmark-color",
          "description": "Checkmark color"
        },
        {
          "name": "--ms-checkbox-hover-border-color",
          "description": "Checkbox hover border"
        },
        {
          "name": "--ms-checkbox-disabled-bg",
          "description": "Disabled checkbox background"
        },
        {
          "name": "--ms-checkbox-disabled-border",
          "description": "Disabled checkbox border"
        },
        {
          "name": "--ms-checkbox-checked-bg-hover",
          "description": "Checked checkbox hover background"
        },
        {
          "name": "--ms-checkbox-checked-border-color-hover",
          "description": "Checked checkbox hover border"
        },
        {
          "name": "--ms-state-min-height",
          "description": "Shared min-height for the empty and loading states so the dropdown doesn't resize when swapping between them"
        },
        { "name": "--ms-empty-padding", "description": "Empty state padding" },
        {
          "name": "--ms-empty-font-size",
          "description": "Empty state font size"
        },
        { "name": "--ms-empty-color", "description": "Empty state text color" },
        { "name": "--ms-loader-padding", "description": "Loader padding" },
        { "name": "--ms-loader-gap", "description": "Loader gap" },
        {
          "name": "--ms-loading-text-font-size",
          "description": "Loading text font size"
        },
        {
          "name": "--ms-loading-text-color",
          "description": "Loading text color"
        },
        {
          "name": "--ms-loading-color",
          "description": "Loading color (semantic)"
        },
        { "name": "--ms-badges-gap", "description": "Badges container gap" },
        {
          "name": "--ms-badges-margin-bottom",
          "description": "Badges margin bottom"
        },
        {
          "name": "--ms-badges-margin-top",
          "description": "Badges margin top"
        },
        {
          "name": "--ms-badges-margin-left",
          "description": "Badges margin left"
        },
        {
          "name": "--ms-badges-margin-right",
          "description": "Badges margin right"
        },
        { "name": "--ms-badge-gap", "description": "Badge internal gap" },
        { "name": "--ms-badge-height", "description": "Badge height" },
        { "name": "--ms-badge-font-size", "description": "Badge font size" },
        {
          "name": "--ms-badge-font-weight",
          "description": "Badge font weight"
        },
        {
          "name": "--ms-badge-border-radius",
          "description": "Badge border radius"
        },
        { "name": "--ms-badge-bg", "description": "Badge background" },
        {
          "name": "--ms-badge-bg-hover",
          "description": "Badge hover background"
        },
        {
          "name": "--ms-badge-bg-active",
          "description": "Badge active background"
        },
        {
          "name": "--ms-badge-text-padding",
          "description": "Badge text padding"
        },
        {
          "name": "--ms-badge-text-bg",
          "description": "Badge text background"
        },
        { "name": "--ms-badge-text-color", "description": "Badge text color" },
        {
          "name": "--ms-badge-text-border",
          "description": "Badge text border"
        },
        {
          "name": "--ms-badge-text-bg-hover",
          "description": "Badge text hover background"
        },
        {
          "name": "--ms-badge-text-color-hover",
          "description": "Badge text hover color"
        },
        {
          "name": "--ms-badge-remove-width",
          "description": "Badge remove button width"
        },
        {
          "name": "--ms-badge-remove-bg",
          "description": "Badge remove button background"
        },
        {
          "name": "--ms-badge-remove-color",
          "description": "Badge remove button color"
        },
        {
          "name": "--ms-badge-remove-border",
          "description": "Badge remove button border"
        },
        {
          "name": "--ms-badge-remove-font-size",
          "description": "Badge remove button font size (unused since 1.10.0 — kept for backward-compat)"
        },
        {
          "name": "--ms-badge-remove-icon-size",
          "description": "Badge remove X icon size (mask SVG)"
        },
        {
          "name": "--ms-badge-remove-bg-hover",
          "description": "Badge remove button hover background"
        },
        {
          "name": "--ms-badge-remove-box-shadow-focus",
          "description": "Badge remove button focus shadow"
        },
        {
          "name": "--ms-icon-remove",
          "description": "Remove icon as CSS url() to a mask-friendly SVG; color comes from currentColor"
        },
        {
          "name": "--ms-icon-filter",
          "description": "Funnel glyph (fullscreen search-mode toggle); chains to --base-icon-filter"
        },
        {
          "name": "--ms-icon-check",
          "description": "Checkmark glyph (mask) for a checked checkbox/option; chains to --base-icon-check"
        },
        {
          "name": "--ms-icon-indeterminate",
          "description": "Dash glyph (mask) for a tri-state/partial checkbox; chains to --base-icon-indeterminate"
        },
        {
          "name": "--ms-icon-check-size",
          "description": "mask-size for the checkmark/dash glyph inside the checkbox box; chains to --base-icon-check-size (default 68%, the same knob as pure-admin's .pa-checkbox)"
        },
        {
          "name": "--ms-badge-counter-bg",
          "description": "Counter badge background"
        },
        {
          "name": "--ms-badge-counter-border",
          "description": "Counter badge border"
        },
        {
          "name": "--ms-badge-counter-border-color",
          "description": "Counter badge border color"
        },
        {
          "name": "--ms-badge-counter-border-radius",
          "description": "Counter badge border radius"
        },
        {
          "name": "--ms-badge-counter-text-color",
          "description": "Counter badge text color"
        },
        {
          "name": "--ms-badge-counter-text-bg",
          "description": "Counter badge text background"
        },
        {
          "name": "--ms-badge-counter-remove-bg",
          "description": "Counter badge remove background"
        },
        {
          "name": "--ms-badge-counter-remove-color",
          "description": "Counter badge remove color"
        },
        {
          "name": "--ms-badge-counter-remove-bg-hover",
          "description": "Counter badge remove hover background"
        },
        {
          "name": "--ms-more-badge-bg",
          "description": "More badge background"
        },
        {
          "name": "--ms-more-badge-hover-bg",
          "description": "More badge hover background"
        },
        {
          "name": "--ms-more-badge-active-bg",
          "description": "More badge active background"
        },
        {
          "name": "--ms-count-display-margin-bottom",
          "description": "Count display margin bottom"
        },
        {
          "name": "--ms-count-display-margin-top",
          "description": "Count display margin top"
        },
        {
          "name": "--ms-count-display-margin-left",
          "description": "Count display margin left"
        },
        {
          "name": "--ms-count-display-margin-right",
          "description": "Count display margin right"
        },
        {
          "name": "--ms-counter-wrapper-bg",
          "description": "Counter wrapper background"
        },
        {
          "name": "--ms-counter-wrapper-border",
          "description": "Counter wrapper border"
        },
        {
          "name": "--ms-counter-wrapper-border-radius",
          "description": "Counter wrapper border radius"
        },
        {
          "name": "--ms-counter-wrapper-padding",
          "description": "Counter wrapper padding"
        },
        {
          "name": "--ms-counter-wrapper-gap",
          "description": "Counter wrapper gap"
        },
        {
          "name": "--ms-counter-wrapper-bg-hover",
          "description": "Counter wrapper hover background"
        },
        {
          "name": "--ms-counter-wrapper-border-color",
          "description": "Counter wrapper border color"
        },
        {
          "name": "--ms-counter-wrapper-border-color-hover",
          "description": "Counter wrapper hover border"
        },
        {
          "name": "--ms-count-text-bg",
          "description": "Count text background"
        },
        {
          "name": "--ms-count-text-border",
          "description": "Count text border"
        },
        {
          "name": "--ms-count-text-font-size",
          "description": "Count text font size"
        },
        { "name": "--ms-count-text-color", "description": "Count text color" },
        {
          "name": "--ms-count-clear-size",
          "description": "Count clear button size"
        },
        {
          "name": "--ms-count-clear-bg",
          "description": "Count clear button background"
        },
        {
          "name": "--ms-count-clear-color",
          "description": "Count clear button color"
        },
        {
          "name": "--ms-count-clear-font-size",
          "description": "Count clear button font size (unused since 1.10.0 — kept for backward-compat)"
        },
        {
          "name": "--ms-count-clear-icon-size",
          "description": "Count clear X icon size (mask SVG)"
        },
        {
          "name": "--ms-count-clear-border-radius",
          "description": "Count clear button border radius"
        },
        {
          "name": "--ms-count-clear-bg-hover",
          "description": "Count clear button hover background"
        },
        {
          "name": "--ms-count-clear-color-hover",
          "description": "Count clear button hover color"
        },
        {
          "name": "--ms-icon-clear",
          "description": "Clear icon as CSS url() to a mask-friendly SVG; defaults to var(--ms-icon-remove)"
        },
        { "name": "--ms-tooltip-bg", "description": "Tooltip background" },
        {
          "name": "--ms-tooltip-text-color",
          "description": "Tooltip text color"
        },
        { "name": "--ms-tooltip-color", "description": "Tooltip color" },
        { "name": "--ms-tooltip-padding", "description": "Tooltip padding" },
        {
          "name": "--ms-tooltip-border-radius",
          "description": "Tooltip border radius"
        },
        {
          "name": "--ms-tooltip-font-size",
          "description": "Tooltip font size"
        },
        {
          "name": "--ms-tooltip-max-width",
          "description": "Tooltip max width"
        },
        { "name": "--ms-tooltip-shadow", "description": "Tooltip shadow" },
        { "name": "--ms-tooltip-z-index", "description": "Tooltip z-index" },
        { "name": "--ms-z-index-popover", "description": "Popover z-index" },
        {
          "name": "--ms-selected-popover-width",
          "description": "Selected popover width"
        },
        {
          "name": "--ms-selected-popover-max-height",
          "description": "Selected popover max height"
        },
        {
          "name": "--ms-selected-popover-border",
          "description": "Selected popover border"
        },
        {
          "name": "--ms-selected-popover-border-radius",
          "description": "Selected popover border radius"
        },
        {
          "name": "--ms-selected-popover-box-shadow",
          "description": "Selected popover shadow"
        },
        {
          "name": "--ms-selected-popover-bg",
          "description": "Selected popover background"
        },
        {
          "name": "--ms-selected-popover-border-color",
          "description": "Selected popover border color"
        },
        {
          "name": "--ms-selected-popover-header-padding",
          "description": "Popover header padding"
        },
        {
          "name": "--ms-selected-popover-header-bg",
          "description": "Popover header background"
        },
        {
          "name": "--ms-selected-popover-header-border-bottom",
          "description": "Popover header border"
        },
        {
          "name": "--ms-selected-popover-header-font-size",
          "description": "Popover header font size"
        },
        {
          "name": "--ms-selected-popover-header-font-weight",
          "description": "Popover header font weight"
        },
        {
          "name": "--ms-selected-popover-header-color",
          "description": "Popover header color"
        },
        {
          "name": "--ms-selected-popover-header-border-color",
          "description": "Popover header border color"
        },
        {
          "name": "--ms-popover-close-size",
          "description": "Popover close button size"
        },
        {
          "name": "--ms-selected-popover-close-bg",
          "description": "Popover close button background"
        },
        {
          "name": "--ms-selected-popover-close-color",
          "description": "Popover close button color"
        },
        {
          "name": "--ms-selected-popover-close-font-size",
          "description": "Popover close button font size (unused since 1.10.0 — kept for backward-compat)"
        },
        {
          "name": "--ms-selected-popover-close-icon-size",
          "description": "Popover close X icon size (mask SVG)"
        },
        {
          "name": "--ms-selected-popover-close-border-radius",
          "description": "Popover close button border radius"
        },
        {
          "name": "--ms-selected-popover-close-bg-hover",
          "description": "Popover close button hover background"
        },
        {
          "name": "--ms-selected-popover-close-color-hover",
          "description": "Popover close button hover color"
        },
        {
          "name": "--ms-selected-popover-body-gap",
          "description": "Popover body gap"
        },
        {
          "name": "--ms-selected-popover-body-padding",
          "description": "Popover body padding"
        },
        {
          "name": "--ms-selected-popover-body-max-height",
          "description": "Popover body max height"
        },
        {
          "name": "--ms-font-size-2xs",
          "description": "Extra extra small font size"
        },
        { "name": "--ms-font-size-xs", "description": "Extra small font size" },
        { "name": "--ms-font-size-sm", "description": "Small font size" },
        { "name": "--ms-font-size-base", "description": "Base font size" },
        { "name": "--ms-font-size-lg", "description": "Large font size" },
        {
          "name": "--ms-font-weight-normal",
          "description": "Normal font weight"
        },
        {
          "name": "--ms-font-weight-medium",
          "description": "Medium font weight"
        },
        {
          "name": "--ms-font-weight-semibold",
          "description": "Semibold font weight"
        },
        {
          "name": "--ms-line-height-none",
          "description": "No line height (1)"
        },
        {
          "name": "--ms-line-height-tight",
          "description": "Tight line height"
        },
        {
          "name": "--ms-line-height-normal",
          "description": "Normal line height"
        },
        {
          "name": "--ms-line-height-relaxed",
          "description": "Relaxed line height"
        },
        {
          "name": "--ms-border-radius-sm",
          "description": "Small border radius"
        },
        {
          "name": "--ms-border-radius-md",
          "description": "Medium border radius"
        },
        {
          "name": "--ms-border-radius-lg",
          "description": "Large border radius"
        },
        {
          "name": "--ms-border-radius",
          "description": "Default border radius"
        },
        { "name": "--ms-spacing-xs", "description": "Extra small spacing" },
        { "name": "--ms-spacing-sm", "description": "Small spacing" },
        { "name": "--ms-spacing-md", "description": "Medium spacing" },
        { "name": "--ms-spacing-lg", "description": "Large spacing" },
        {
          "name": "--ms-transition-fast",
          "description": "Fast transition duration"
        },
        {
          "name": "--ms-transition-normal",
          "description": "Normal transition duration"
        },
        {
          "name": "--ms-easing-snappy",
          "description": "Snappy easing function"
        },
        {
          "name": "--ms-placeholder-opacity",
          "description": "Placeholder opacity"
        },
        {
          "name": "--ms-disabled-input-opacity",
          "description": "Disabled input opacity"
        },
        { "name": "--ms-scrollbar-width", "description": "Scrollbar width" },
        {
          "name": "--ms-scrollbar-track-bg",
          "description": "Scrollbar track background"
        },
        {
          "name": "--ms-scrollbar-thumb-bg",
          "description": "Scrollbar thumb background"
        },
        {
          "name": "--ms-scrollbar-thumb-bg-hover",
          "description": "Scrollbar thumb hover background"
        },
        {
          "name": "--ms-scrollbar-thumb-border-radius",
          "description": "Scrollbar thumb border radius"
        },
        { "name": "--ms-debug-bg", "description": "Debug panel background" },
        {
          "name": "--ms-debug-border-color",
          "description": "Debug panel border"
        },
        { "name": "--ms-debug-text-color", "description": "Debug panel text" },
        {
          "name": "--ms-debug-border-radius",
          "description": "Debug panel corner radius"
        },
        {
          "name": "--ms-debug-summary-color",
          "description": "Debug section heading color"
        },
        {
          "name": "--ms-debug-summary-bg-hover",
          "description": "Debug section heading hover background"
        },
        {
          "name": "--ms-debug-summary-outline-color",
          "description": "Debug section heading focus outline"
        },
        {
          "name": "--ms-debug-summary-border-radius",
          "description": "Debug section heading corner radius"
        },
        {
          "name": "--ms-debug-stats-bg",
          "description": "Debug stats nested panel background"
        },
        {
          "name": "--ms-debug-stats-border-radius",
          "description": "Debug stats nested panel corner radius"
        },
        {
          "name": "--ms-debug-bullet-color",
          "description": "Debug stat bullet marker color"
        },
        {
          "name": "--ms-transform-rotate-180",
          "description": "180 degree rotation"
        },
        {
          "name": "--ms-transform-scale-hover",
          "description": "Hover scale transform"
        },
        {
          "name": "--ms-transform-scale-active",
          "description": "Active scale transform"
        },
        { "name": "--ms-order-first", "description": "Order first (-1)" }
      ],
      "pseudo-elements": []
    }
  }
}