v2.0.0 is mostly additive (tree mode, add-new creation, scroll-to & search APIs, container-responsive
collapse, base-icon theming). The items below are the changes that can require edits.
Event handler signature
Before (v1.x)
After (v2.0.0)
All breaking changes
Event handler properties now receive a CustomEvent
onSelect/onDeselect/onChange used to receive the bare option. They now receive a CustomEvent<MultiSelectEventDetail>. Read e.detail.option, e.detail.selectedOptions, e.detail.selectedValues. The native addEventListener('select', β¦) path is unchanged.Field-shell input redesign removed several CSS variables
The input is now a flex field with real sibling controls (counter, clear, chevron). Removed:
--ms-input-padding, --ms-input-padding-right, --ms-toggle-right, --ms-counter-offset, --ms-input-clear-inset, --ms-input-clear-gutter, --ms-transform-center-y. Use --ms-input-padding-h and --ms-input-gap instead.Checkbox check/dash are now mask glyphs
Rendered from
--ms-icon-check/--ms-icon-indeterminate rather than rotated borders. --ms-checkbox-checkmark-thickness is now a no-op (stroke is baked into the SVG).Selected popover defaults to the field width
Previously a fixed 32rem. Set
selected-popover-width / --ms-selected-popover-width to restore a fixed width.Sizing bridges to the base layer
--ms-rem is now var(--base-rem, 10px) and icons flow from --base-icon-*. No change if you donβt use a base layer; a theme can now rescale/reskin everything centrally.