@keenmate/web-multiselect 1.8.4 → 1.8.6

package/README.md

@@ -5,6 +5,8 @@
 
 A lightweight, accessible multiselect web component with typeahead search, RTL language support, rich content, and excellent keyboard navigation.
 
+> **⚠️ 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.
+
 ## Features
 
 - 📝 **Declarative HTML** - Use standard `<option>` and `<optgroup>` elements - no JavaScript required for simple cases!
@@ -678,6 +680,19 @@ Control where selected item badges appear relative to the input:
 <web-multiselect badges-position="right"></web-multiselect>
 ```
 
+**Inline Vertical Alignment:** For left/right positioning, control vertical alignment with `--ms-inline-align`:
+
+```html
+<!-- Center aligned (default) -->
+<web-multiselect badges-position="right" style="--ms-inline-align: center;"></web-multiselect>
+
+<!-- Top aligned -->
+<web-multiselect badges-position="right" style="--ms-inline-align: flex-start;"></web-multiselect>
+
+<!-- Bottom aligned -->
+<web-multiselect badges-position="left" style="--ms-inline-align: flex-end;"></web-multiselect>
+```
+
 **Note:** In RTL mode, left/right positions are automatically mirrored - `badges-position="left"` will appear on the physical right side in RTL languages.
 
 ### Badge Tooltips
@@ -774,6 +789,34 @@ Three rendering callbacks are available:
 
 All callbacks can return either **HTML strings** or **HTMLElement** objects (except `renderSelectedContentCallback` which returns plain text).
 
+#### HTML Injection (XSS) Notice
+
+The following callbacks allow **raw HTML injection** and are intentionally **NOT XSS-safe**. This gives developers full control over rendering but requires sanitizing untrusted data:
+
+| Callback | Output Used In | Risk Level |
+|----------|---------------|------------|
+| `renderOptionContentCallback` | Dropdown options (innerHTML) | HTML injection |
+| `renderBadgeContentCallback` | Badges (innerHTML) | HTML injection |
+| `renderSelectedItemContentCallback` | Selected items popover (innerHTML) | HTML injection |
+| `renderGroupLabelContentCallback` | Group headers (innerHTML) | HTML injection |
+| `getIconCallback` | Option icons (innerHTML) | HTML injection |
+| `getSubtitleCallback` | Option subtitles (innerHTML) | HTML injection |
+| `getDisplayValueCallback` | Option titles, badges (innerHTML) | HTML injection |
+| `getBadgeDisplayCallback` | Badge text (innerHTML) | HTML injection |
+| `getCounterCallback` | Count badges (innerHTML) | HTML injection |
+| `getBadgeTooltipCallback` | Tooltips (innerHTML if HTMLElement) | HTML injection |
+| `customStylesCallback` | Style tag (textContent) | CSS injection |
+
+**Safe callbacks** (output is escaped or used as data):
+- `getValueCallback`, `getSearchValueCallback`, `getGroupCallback`, `getDisabledCallback`
+- `getBadgeClassCallback`, `getSelectedItemClassCallback` (CSS class names only)
+- `beforeSearchCallback`, `searchCallback`, `addNewCallback`
+- `selectCallback`, `deselectCallback`, `changeCallback`
+- `getRemoveButtonTooltipCallback` (used as title attribute)
+- `getValueFormatCallback` (form value)
+
+**If displaying user-generated content**, sanitize it before returning from these callbacks.
+
 #### Custom Option Rendering
 
 Customize how options appear in the dropdown: