@keenmate/web-multiselect 1.0.0-rc08 → 1.0.0-rc10

package/README.md

@@ -12,7 +12,7 @@ A lightweight, accessible multiselect web component with typeahead search, RTL l
 - 🔍 **Flexible Search Modes** - Filter (hide non-matches) or navigate (jump to matches, keep all visible)
 - ⌨️ **Keyboard Navigation** - Full keyboard support (arrows, Enter, Esc, Tab)
 - 🎨 **Rich Content** - Icons, subtitles, and multiline text support
-- 📊 **Multiple Display Modes** - Pills, count, compact, or partial (pills + threshold)
+- 📊 **Multiple Display Modes** - Pills, count, compact, partial, or none (minimal UI)
 - 💬 **Pill Tooltips** - Customizable tooltips on selected items with placement control
 - 🎯 **Single & Multi-Select** - Switch between single and multiple selection modes
 - 🔄 **Async Data Loading** - On-demand data fetching support
@@ -116,7 +116,7 @@ multiselect.setSelected(['js', 'ts']);
 | `show-checkboxes` | `boolean` | `true` | Show checkboxes next to options |
 | `close-on-select` | `boolean` | `false` | Close dropdown after selecting |
 | `dropdown-min-width` | `string` | - | Min width for dropdown (e.g., '20rem') |
-| `pills-display-mode` | `'pills' \| 'count' \| 'compact' \| 'partial'` | `'pills'` | How to display selected items |
+| `pills-display-mode` | `'pills' \| 'count' \| 'compact' \| 'partial' \| 'none'` | `'pills'` | How to display selected items. `compact`: first item + count. `none`: no display |
 | `pills-threshold` | `number` | - | Auto-switch mode when exceeded (see pills-threshold-mode) |
 | `pills-threshold-mode` | `'count' \| 'partial'` | `'count'` | Mode after threshold: 'count' shows badge, 'partial' shows limited pills + more badge |
 | `pills-max-visible` | `number` | `3` | Max pills shown in partial mode |
@@ -563,11 +563,16 @@ Perfect for different use cases and space constraints:
 <!-- Pills mode (default) - Show all selections as removable pills -->
 <web-multiselect pills-display-mode="pills"></web-multiselect>
 
-<!-- Count mode - Show only count badge -->
+<!-- Count mode - Show "X selected" text with clear button -->
 <web-multiselect pills-display-mode="count" show-count-badge="true"></web-multiselect>
 
-<!-- Compact mode - Show first item + count -->
+<!-- Compact mode - Show first item + count in a single removable pill -->
 <web-multiselect pills-display-mode="compact"></web-multiselect>
+<!-- Example output: [JavaScript (+2 more) | x] -->
+
+<!-- None mode - No display in pills area (minimal UI) -->
+<web-multiselect pills-display-mode="none" show-count-badge="true"></web-multiselect>
+<!-- Only shows [X] badge next to toggle icon -->
 
 <!-- Auto-switch from pills to count at threshold -->
 <web-multiselect
@@ -584,6 +589,15 @@ Perfect for different use cases and space constraints:
 </web-multiselect>
 ```
 
+**Display Mode Behavior:**
+- **`pills`**: Individual removable pills for each selected item. Calls `getPillDisplayCallback` for each item.
+- **`count`**: Shows "X selected" text with clear button. Calls `getCountPillCallback(count)`.
+- **`compact`**: Shows first item + count in single pill (e.g., "JavaScript (+2 more)"). Calls `getPillDisplayCallback(firstItem)` and `getCountPillCallback(count, remainingCount)`.
+- **`partial`**: Shows first N pills + "+X more" badge. Calls `getPillDisplayCallback` for visible items and `getCountPillCallback(count, remainingCount)` for badge.
+- **`none`**: No display in pills area. No callbacks invoked. Use with `show-count-badge="true"` for minimal UI.
+
+**Count Badge (`show-count-badge="true"`)**: Independent feature showing `[X]` next to toggle icon. Works with all display modes. Not affected by callbacks.
+
 ### Pills Positioning
 
 Control where selected item badges appear relative to the input: