@keenmate/web-multiselect 1.9.0 → 1.10.0

package/README.md

@@ -7,6 +7,28 @@ A lightweight, accessible multiselect web component with typeahead search, RTL l
 
 > **⚠️ Security Notice:** This component intentionally allows raw HTML in rendering callbacks to give developers full control over content display. If you display user-generated content, you must sanitize it yourself. See [HTML Injection (XSS) Notice](#html-injection-xss-notice) for the complete list of affected callbacks.
 
+## What's New in v1.10.0
+
+- **`data-options` attribute on `<web-multiselect>`** — set options declaratively from HTML, no JS bootstrap required (works alongside `initial-values` for pure-HTML / server-rendered / SharePoint workbench scenarios).
+- **`form.reset()` now clears the selection** — the element is now form-associated (`static formAssociated = true` + `ElementInternals` + `formResetCallback()`).
+- **Dropdown / hint / selected popover no longer clipped inside scrollable ancestors** — Floating UI now uses `strategy: 'fixed'` for all three panels, so they escape `overflow: hidden|auto|scroll` containers (e.g. SharePoint Framework workbenches).
+- **`initial-values` now works when options arrive after init** — values are reconciled on every `options` mutation, not just at construction.
+- **Remove / close (×) buttons render as SVG masks** — pixel-centered regardless of font; color still flows through the existing `--ms-*-color` variables via `currentColor`; three new `--ms-*-icon-size` variables for theming.
+- **Keyboard navigation now keeps working after a mouse click on an option** — previously, clicking an option moved focus from the search input to the option's checkbox (knocking the `keydown` listener offline) *and* left `focusedIndex` at its pre-click value, so subsequent ArrowDown / ArrowUp / Enter went nowhere visible. Click now anchors `focusedIndex` to the clicked option and refocuses the search input, so arrow keys continue from where you clicked and Enter toggles the option under the cursor.
+- **Count-clear / popover-close hover backdrop now matches the rest of the component** — was a circle (`border-radius: 50%`), now a small rounded rectangle (`--ms-border-radius-sm`) consistent with every other interactive element. Themes that prefer the circle can set `--ms-count-clear-border-radius` and `--ms-selected-popover-close-border-radius` back to `50%`.
+- **Keyboard `Enter` respects disabled options** — previously only the click handler did.
+- **End-to-end test suite** — 114 Playwright specs across 19 fixture pages (`npm run test:e2e`).
+- **`THEMING.md`** — new reference cataloguing every theme-able component state and the CSS variables that drive it.
+
+## What's New in v1.9.0
+
+- **Live attribute / callback updates no longer rebuild the DOM** — `updateOptions(partial)` merges in place; selection state, scroll position, focus, and tooltips are preserved across attribute changes.
+- **9 previously-dead per-component CSS override hooks are now wired** — `--ms-hint-border-color`, `--ms-dropdown-border-color`, `--ms-actions-border-color`, `--ms-group-border-color`, `--ms-badge-counter-border-color`, `--ms-selected-popover-border-color`, `--ms-selected-popover-header-border-color`, `--ms-option-outline-color-focused`, `--ms-option-border-matched-color`.
+- **`selectAll` / `clearAll` now fire per-item `selectCallback` / `deselectCallback`** — consumers wiring per-item analytics or side effects no longer silently miss bulk operations.
+- **New `Tooltip` class** consolidating three previous tooltip implementations; fixes a handle leak and a popover-vs-main-container collision.
+- **`--base-primary-bg` theming variable** — `--ms-primary-bg` reads it first, then `--base-main-bg`, then a hardcoded default.
+- Plus many fixes across custom action buttons, grouped-option focus, badge cursors, focus rings, and logging.
+
 ## Features
 
 - 📝 **Declarative HTML** - Use standard `<option>` and `<optgroup>` elements - no JavaScript required for simple cases!
@@ -1791,7 +1813,9 @@ For the complete list of all available CSS variables, see:
 | `--ms-badge-font-size` | `0.75rem` | Badge font size |
 | `--ms-badge-border-radius` | `0.375rem` | Badge border radius |
 | `--ms-badge-remove-bg` | `var(--ms-accent-color)` | Remove button background |
-| `--ms-badge-remove-color` | `var(--ms-text-color-on-accent)` | Remove button color |
+| `--ms-badge-remove-color` | `var(--ms-text-color-on-accent)` | Remove button (X) color — applied to the SVG via `currentColor` |
+| `--ms-badge-remove-icon-size` | `calc(1.0 * var(--ms-rem))` | Size of the X glyph inside the remove button |
+| `--ms-icon-remove` | (inline SVG `url(...)`) | The X mask SVG; override to swap the glyph shape (alpha-only — color comes from `--ms-badge-remove-color`) |
 | `--ms-badge-counter-text-bg` | `var(--ms-primary-bg)` | BadgeCounter text background ("+X more") |
 | `--ms-badge-counter-text-color` | `var(--ms-text-color-3)` | BadgeCounter text color |
 | `--ms-badge-counter-remove-bg` | `var(--ms-text-color-3)` | BadgeCounter remove button background |

package/component-variables.manifest.json

@@ -270,10 +270,11 @@
     { "name": "ms-badge-remove-bg", "category": "badge", "usage": "Badge remove button background" },
     { "name": "ms-badge-remove-color", "category": "badge", "usage": "Badge remove button color" },
     { "name": "ms-badge-remove-border", "category": "badge", "usage": "Badge remove button border" },
-    { "name": "ms-badge-remove-font-size", "category": "badge", "usage": "Badge remove button font size" },
+    { "name": "ms-badge-remove-font-size", "category": "badge", "usage": "Badge remove button font size (unused since 1.10.0 — kept for backward-compat)" },
+    { "name": "ms-badge-remove-icon-size", "category": "badge", "usage": "Badge remove X icon size (mask SVG)" },
     { "name": "ms-badge-remove-bg-hover", "category": "badge", "usage": "Badge remove button hover background" },
     { "name": "ms-badge-remove-box-shadow-focus", "category": "badge", "usage": "Badge remove button focus shadow" },
-    { "name": "ms-icon-remove", "category": "badge", "usage": "Remove icon character" },
+    { "name": "ms-icon-remove", "category": "badge", "usage": "Remove icon as CSS url() to a mask-friendly SVG; color comes from currentColor" },
     { "name": "ms-badge-counter-bg", "category": "badge", "usage": "Counter badge background" },
     { "name": "ms-badge-counter-border", "category": "badge", "usage": "Counter badge border" },
     { "name": "ms-badge-counter-border-color", "category": "badge", "usage": "Counter badge border color" },
@@ -306,11 +307,12 @@
     { "name": "ms-count-clear-size", "category": "count", "usage": "Count clear button size" },
     { "name": "ms-count-clear-bg", "category": "count", "usage": "Count clear button background" },
     { "name": "ms-count-clear-color", "category": "count", "usage": "Count clear button color" },
-    { "name": "ms-count-clear-font-size", "category": "count", "usage": "Count clear button font size" },
+    { "name": "ms-count-clear-font-size", "category": "count", "usage": "Count clear button font size (unused since 1.10.0 — kept for backward-compat)" },
+    { "name": "ms-count-clear-icon-size", "category": "count", "usage": "Count clear X icon size (mask SVG)" },
     { "name": "ms-count-clear-border-radius", "category": "count", "usage": "Count clear button border radius" },
     { "name": "ms-count-clear-bg-hover", "category": "count", "usage": "Count clear button hover background" },
     { "name": "ms-count-clear-color-hover", "category": "count", "usage": "Count clear button hover color" },
-    { "name": "ms-icon-clear", "category": "count", "usage": "Clear icon character" },
+    { "name": "ms-icon-clear", "category": "count", "usage": "Clear icon as CSS url() to a mask-friendly SVG; defaults to var(--ms-icon-remove)" },
 
     { "name": "ms-tooltip-bg", "category": "tooltip", "usage": "Tooltip background" },
     { "name": "ms-tooltip-text-color", "category": "tooltip", "usage": "Tooltip text color" },
@@ -340,7 +342,8 @@
     { "name": "ms-popover-close-size", "category": "popover", "usage": "Popover close button size" },
     { "name": "ms-selected-popover-close-bg", "category": "popover", "usage": "Popover close button background" },
     { "name": "ms-selected-popover-close-color", "category": "popover", "usage": "Popover close button color" },
-    { "name": "ms-selected-popover-close-font-size", "category": "popover", "usage": "Popover close button font size" },
+    { "name": "ms-selected-popover-close-font-size", "category": "popover", "usage": "Popover close button font size (unused since 1.10.0 — kept for backward-compat)" },
+    { "name": "ms-selected-popover-close-icon-size", "category": "popover", "usage": "Popover close X icon size (mask SVG)" },
     { "name": "ms-selected-popover-close-border-radius", "category": "popover", "usage": "Popover close button border radius" },
     { "name": "ms-selected-popover-close-bg-hover", "category": "popover", "usage": "Popover close button hover background" },
     { "name": "ms-selected-popover-close-color-hover", "category": "popover", "usage": "Popover close button hover color" },

package/dist/index.d.ts

@@ -194,7 +194,7 @@ declare interface MultiSelectConfig<T = any> {
     isVirtualScrollEnabled?: boolean;
     /** Vertical alignment of checkboxes relative to option content */
     checkboxAlign?: 'top' | 'center' | 'bottom';
-    /** Hint text shown above the input when focused */
+    /** Hint text shown above the input while the dropdown is open. */
     searchHint?: string;
     /** Placeholder text for the search input */
     searchPlaceholder?: string;
@@ -269,9 +269,11 @@ declare interface MultiSelectConfig<T = any> {
 }
 
 export declare class MultiSelectElement<T = any> extends BaseElement {
+    static formAssociated: boolean;
     private picker?;
     private containerElement?;
     private shadow;
+    private internals?;
     private _options?;
     private _valueMember?;
     private _getValueCallback?;
@@ -309,6 +311,14 @@ export declare class MultiSelectElement<T = any> extends BaseElement {
     private _changeCallback?;
     static get observedAttributes(): string[];
     constructor();
+    /**
+     * Called by the browser when the surrounding <form> is reset. Clears the
+     * picker's selection so the multiselect actually participates in the
+     * standard reset lifecycle. (Before form-association, reset was a no-op
+     * because the hidden inputs were re-stamped from internal state on every
+     * render.)
+     */
+    formResetCallback(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
@@ -638,7 +648,7 @@ export declare class WebMultiSelect<T = any> {
     private selectOption;
     private deselectOption;
     private selectAll;
-    private clearAll;
+    clearAll(): void;
     /**
      * Re-render and fire callbacks after a selection state change.
      * `added` / `removed` drive per-item select/deselect callbacks.
@@ -658,6 +668,15 @@ export declare class WebMultiSelect<T = any> {
     private positionDropdown;
     private positionHint;
     private parseInitialSelection;
+    /**
+     * Resolve any `selectedValues` entries that don't yet have a matching
+     * `selectedOptions` object by looking them up in the current `allOptions`.
+     * Idempotent; safe to call after init *and* after `options` is replaced
+     * (e.g., async fetch, `searchCallback` result, or late `element.options =`
+     * assignment). Without this, `initial-values` declared before options
+     * arrive ends up with phantom values that `getValue()` can never report.
+     */
+    private reconcileSelectedOptions;
     private toggleSelectedPopover;
     private showPopover;
     private hideSelectedPopover;