filtered-select-multiple-widget 0.0.3

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) Thomas Breitner.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,177 @@
+# Filtered Select Multiple Widget
+
+A dependency-free, JavaScript implementation of Django's dual-pane “FilteredSelectMultiple” widget. It transforms a native `<select multiple>` element into a picker with move buttons and client-side filtering.
+
+![Screenshot Filtered Select Multiple Widget](./docs/filtered-select-multiple-widget-screenshot.png)
+
+## Why?
+
+I had been missing the beautiful and, above all, practical Django admin widget `filter-horizontal` outside of the Django Admin interface for quite some time.
+
+<details>
+<summary>And how does it look in the Django admin?</summary>
+
+![Django Admin filter-horizontal Widget](./docs/django-admin-filterhorizontal.png)
+
+References:
+
+- [Django admin docs `filter_horizontal`](https://docs.djangoproject.com/en/5.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin.filter_horizontal)
+- [Django admin `FilteredSelectMultiple`](https://github.com/django/django/blob/main/django/contrib/admin/widgets.py#L23C1-L23C52)
+- [Django admin `SelectBox`](https://github.com/django/django/blob/main/django/contrib/admin/static/admin/js/SelectBox.js)
+
+The Django widget is a thousand times better than mine. But I hope to gradually improve my implementation.
+
+</details>
+
+## Features
+
+- Zero dependencies and ES module friendly.
+- Works with any native `<select multiple>` element.
+- Optional client-side filtering of the available choices.
+- Keyboard friendly and form-ready (synced back to the original select element).
+- Integrates with Bootstrap 5, DaisyUI, and Tailwind CSS (see live demo with theme switcher).
+- Automatically detects pane labels from associated `<label>` elements.
+
+## Demo
+
+```bash
+npm ci
+npm run demo
+```
+
+The demo includes a theme switcher to showcase integration with Bootstrap 5, DaisyUI, and Tailwind CSS.
+
+## Installation
+
+```bash
+npm install git+https://github.com/tombreit/filtered-select-multiple-widget.git
+```
+
+## Usage
+
+```html
+<select id="permissions" name="permissions" multiple>
+  <option value="read">Read</option>
+  <option value="write" selected>Write</option>
+  <option value="admin">Admin</option>
+</select>
+```
+
+```js
+import { FilteredSelectMultiple } from "filtered-select-multiple-widget";
+
+const select = document.querySelector("#permissions");
+const widget = new FilteredSelectMultiple(select);
+```
+
+### Options
+
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| `showFilter` | `boolean` | `true` | Toggle the search box above the available list. |
+| `filterMatchMode` | `'contains' \| 'startsWith'` | `'contains'` | How filtering behaves. |
+| `size` | `number` | `select.size \|\| clamp(optionCount)` | Number of visible rows for each list. |
+| `preserveSelectionOrder` | `boolean` | `false` | Keep the order items were added in the chosen list rather than the original option order. |
+| `text` | `object` | see defaults | Override UI copy (`availableLabel`, `chosenLabel`, `filterPlaceholder`, `availableFilterPlaceholder`, `chosenFilterPlaceholder`, `addAll`, `addSelected`, `removeSelected`, `removeAll`). If `availableLabel` and `chosenLabel` are not provided, the widget will attempt to auto-detect them from an associated `<label>` element. |
+| `theme` | `Theme` | `defaultTheme` | CSS theme configuration for styling framework integration. |
+
+### Theming
+
+The widget supports some UI frameworks through configurable themes:
+
+```js
+import { 
+  FilteredSelectMultiple, 
+  bootstrap5Theme, 
+  daisyUITheme, 
+  tailwindTheme 
+} from "filtered-select-multiple-widget";
+
+// Bootstrap 5
+new FilteredSelectMultiple(select, { theme: bootstrap5Theme });
+
+// DaisyUI 5
+new FilteredSelectMultiple(select, { theme: daisyUITheme });
+
+// Tailwind CSS 4
+new FilteredSelectMultiple(select, { theme: tailwindTheme });
+```
+
+#### Custom Themes
+
+```js
+import { Theme } from "filtered-select-multiple-widget";
+
+const customTheme = new Theme({
+  container: "my-widget-container",
+  button: "my-button-class",
+  buttonAddSelected: "my-button-class my-primary-button",
+  filter: "my-input-class",
+  select: "my-select-class",
+  // ... customize any element
+});
+
+new FilteredSelectMultiple(select, { theme: customTheme });
+```
+
+#### Available Theme Elements
+
+- `container` - Main widget wrapper
+- `column`, `availableColumn`, `chosenColumn` - Pane containers  
+- `label` - Pane labels
+- `filter` - Search input fields
+- `select` - Multi-select elements
+- `controls` - Button container
+- `button`, `buttonAddAll`, `buttonAddSelected`, `buttonRemoveSelected`, `buttonRemoveAll` - Control buttons
+- `buttonDisabled` - Disabled button modifier
+- `button_svg` - Button SVG icon
+
+### Destroying the widget
+
+```js
+widget.destroy();
+```
+
+The original `<select>` is restored and remains in sync with user selections.
+
+## Third-Party Assets
+
+<details>
+<summary>Heroicons</summary>
+
+This project uses icons from [Heroicons](https://heroicons.com/), which is licensed under the MIT License.
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+</details>
+
+<details>
+<summary>Django project</summary>
+
+Thank you for being here and for all the inspiration.
+
+BSD 3-Clause license.
+
+</details>
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "filtered-select-multiple-widget",
+  "version": "0.0.3",
+  "description": "ES module implementation of Django's FilteredSelectMultiple widget.",
+  "license": "MIT",
+  "author": {
+    "name": "Thomas Breitner",
+    "email": "mail@thms.de",
+    "url": "https://thms.de"
+  },
+  "type": "module",
+  "main": "./src/index.js",
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=14"
+  },
+  "homepage": "https://tombreit.github.io/filtered-select-multiple-widget/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tombreit/filtered-select-multiple-widget.git"
+  },
+  "bugs": {
+    "url": "https://github.com/tombreit/filtered-select-multiple-widget/issues"
+  },
+  "keywords": [
+    "widget",
+    "multiselect"
+  ],
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    }
+  },
+  "devDependencies": {
+    "http-server": "^14.1.1"
+  },
+  "scripts": {
+    "test": "node --check src/index.js && node --check src/FilteredSelectMultiple.js && node --check src/themes.js",
+    "pre-demo": "ln -sf ../src docs/src",
+    "demo": "http-server docs/ -p 8000 -o",
+    "pre-ghpages": "rm -rf docs/src",
+    "ghpages": "cp -r src docs/src"
+  }
+}

package/src/FilteredSelectMultiple.js

@@ -0,0 +1,448 @@
+import { defaultTheme } from "./themes.js";
+
+/**
+ * Transform a native <select multiple> element into a dual-list transfer widget.
+ * 
+ * Usage:
+ *   import { FilteredSelectMultiple } from "filtered-select-multiple-widget";
+ *   const widget = new FilteredSelectMultiple(selectElement, options);
+ */
+export class FilteredSelectMultiple {
+  constructor(selectElement, options = {}) {
+    // Validate
+    if (!(selectElement instanceof HTMLSelectElement) || !selectElement.multiple) {
+      throw new Error("FilteredSelectMultiple requires a <select multiple> element");
+    }
+
+    this.selectElement = selectElement;
+    this.doc = selectElement.ownerDocument;
+    
+    // Parse options
+    const optionCount = selectElement.options.length;
+    this.showFilter = options.showFilter ?? true;
+    this.filterMatchMode = options.filterMatchMode ?? "contains";
+    this.size = options.size ?? (selectElement.size || Math.min(Math.max(optionCount, 4), 12));
+    this.preserveSelectionOrder = options.preserveSelectionOrder ?? false;
+    this.theme = { ...defaultTheme, ...options.theme };
+    
+    // Parse text options
+    const textDefaults = {
+      availableLabel: "Available",
+      chosenLabel: "Chosen",
+      filterPlaceholder: "Filter",
+      addAll: "Add all",
+      addSelected: "Add selected",
+      removeSelected: "Remove selected",
+      removeAll: "Remove all",
+    };
+    this.text = { ...textDefaults, ...(options.text || {}) };
+    
+    // Auto-detect labels from <label> element if defaults are used
+    if (this.text.availableLabel === textDefaults.availableLabel && 
+        this.text.chosenLabel === textDefaults.chosenLabel) {
+      const label = this.doc.querySelector(`label[for="${selectElement.id}"]`);
+      if (label) {
+        const baseLabel = label.textContent.trim();
+        this.text.availableLabel = `Available ${baseLabel}`;
+        this.text.chosenLabel = `Chosen ${baseLabel}`;
+      }
+    }
+    
+    // Set filter placeholder defaults
+    const fallbackFilter = options.text?.filterPlaceholder ?? textDefaults.filterPlaceholder;
+    this.text.availableFilterPlaceholder = this.text.availableFilterPlaceholder ?? fallbackFilter;
+    this.text.chosenFilterPlaceholder = this.text.chosenFilterPlaceholder ?? fallbackFilter;
+    
+    // State
+    this.options = new Map(); // key -> {index, value, label, disabled, dataset, title, original}
+    this.available = [];
+    this.chosen = [];
+    
+    // UI elements
+    this.container = null;
+    this.availableSelect = null;
+    this.chosenSelect = null;
+    this.availableFilter = null;
+    this.chosenFilter = null;
+    this.buttons = {};
+    
+    this._init();
+  }
+
+  _init() {
+    // Build state from original select
+    this._buildState();
+    
+    // Hide original select
+    this.selectElement.dataset.filteredSelectMultiple = "true";
+    this.previousDisplay = this.selectElement.style.display;
+    this.selectElement.style.display = "none";
+    
+    // Create placeholder comment for restoring position
+    this.placeholder = this.doc.createComment("filtered-select-multiple");
+    this.selectElement.parentNode.insertBefore(this.placeholder, this.selectElement);
+    
+    // Build and render UI
+    this._buildUI();
+    this._attachEvents();
+    this._render();
+  }
+
+  _buildState() {
+    const options = Array.from(this.selectElement.options);
+    const orderKeys = [];
+    
+    options.forEach((option, index) => {
+      const key = `fsm-${index}`;
+      this.options.set(key, {
+        key,
+        index,
+        value: option.value,
+        label: option.text,
+        disabled: option.disabled,
+        dataset: { ...option.dataset },
+        title: option.title,
+        original: option,
+      });
+      
+      orderKeys.push(key);
+      if (option.selected) {
+        this.chosen.push(key);
+      } else {
+        this.available.push(key);
+      }
+    });
+    
+    // Sort by original order
+    this._sortByIndex(this.available);
+    if (!this.preserveSelectionOrder) {
+      this._sortByIndex(this.chosen);
+    }
+  }
+
+  _sortByIndex(keys) {
+    keys.sort((a, b) => {
+      const aIndex = this.options.get(a)?.index ?? Number.MAX_SAFE_INTEGER;
+      const bIndex = this.options.get(b)?.index ?? Number.MAX_SAFE_INTEGER;
+      return aIndex - bIndex;
+    });
+  }
+
+  _buildUI() {
+    // Main container
+    this.container = this.doc.createElement("div");
+    this.container.className = this.theme.container;
+    
+    // Available pane
+    const availablePane = this._createPane({
+      type: "available",
+      label: this.text.availableLabel,
+      filterPlaceholder: this.text.availableFilterPlaceholder,
+    });
+    this.availableSelect = availablePane.select;
+    this.availableFilter = availablePane.filter;
+    
+    // Controls (buttons)
+    const controls = this._createControls();
+    
+    // Chosen pane
+    const chosenPane = this._createPane({
+      type: "chosen",
+      label: this.text.chosenLabel,
+      filterPlaceholder: this.text.chosenFilterPlaceholder,
+    });
+    this.chosenSelect = chosenPane.select;
+    this.chosenFilter = chosenPane.filter;
+    
+    // Assemble
+    this.container.append(availablePane.column, controls, chosenPane.column);
+    this.placeholder.parentNode.insertBefore(this.container, this.placeholder);
+  }
+
+  _createPane({ type, label, filterPlaceholder }) {
+    const column = this.doc.createElement("div");
+    const isAvailable = type === "available";
+    column.className = this.theme.column + " " + (isAvailable ? this.theme.availableColumn : this.theme.chosenColumn);
+    
+    // Label
+    const labelEl = this.doc.createElement("div");
+    labelEl.className = this.theme.label;
+    labelEl.textContent = label;
+    column.appendChild(labelEl);
+    
+    // Filter input (optional)
+    let filter = null;
+    if (this.showFilter) {
+      filter = this.doc.createElement("input");
+      filter.type = "search";
+      filter.className = this.theme.filter;
+      filter.placeholder = filterPlaceholder;
+      filter.dataset.paneType = type;
+      column.appendChild(filter);
+    }
+    
+    // Select element
+    const select = this.doc.createElement("select");
+    select.multiple = true;
+    select.size = this.size;
+    select.className = this.theme.select;
+    select.dataset.paneType = type;
+    column.appendChild(select);
+    
+    return { column, select, filter };
+  }
+
+  _createControls() {
+    const column = this.doc.createElement("div");
+    column.className = this.theme.controls;
+    
+    const icons = {
+      addAll: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="height: 1.2em;">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
+</svg>`,
+      addSelected: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="height: 1.2em;">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+</svg>`,
+      removeSelected: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="height: 1.2em;">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+</svg>`,
+      removeAll: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="height: 1.2em;">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
+</svg>`,
+    };
+    
+    const buttons = [
+      { action: "addAll", label: this.text.addAll, icon: icons.addAll },
+      { action: "addSelected", label: this.text.addSelected, icon: icons.addSelected },
+      { action: "removeSelected", label: this.text.removeSelected, icon: icons.removeSelected },
+      { action: "removeAll", label: this.text.removeAll, icon: icons.removeAll },
+    ];
+    
+    buttons.forEach(({ action, label, icon }) => {
+      const button = this.doc.createElement("button");
+      button.type = "button";
+      const specificClass = this.theme[`button_${action}`] || "";
+      button.className = (this.theme.button + " " + specificClass).trim();
+      
+      const isRemove = action.startsWith("remove");
+      const svgClass = this.theme.button_svg ? ` class="${this.theme.button_svg}"` : '';
+      const modifiedIcon = icon.replace('<svg', `<svg${svgClass}`);
+      button.innerHTML = isRemove ? `${modifiedIcon} ${label}` : `${label} ${modifiedIcon}`;
+      button.dataset.action = action;
+      
+      this.buttons[action] = button;
+      column.appendChild(button);
+    });
+    
+    return column;
+  }
+
+  _attachEvents() {
+    // Filter input events
+    if (this.availableFilter) {
+      this.availableFilter.addEventListener("input", () => this._renderPane("available"));
+    }
+    if (this.chosenFilter) {
+      this.chosenFilter.addEventListener("input", () => this._renderPane("chosen"));
+    }
+    
+    // Selection change events
+    this.availableSelect.addEventListener("change", () => this._updateButtons());
+    this.chosenSelect.addEventListener("change", () => this._updateButtons());
+    
+    // Double-click to move
+    this.availableSelect.addEventListener("dblclick", () => {
+      if (!this.availableSelect.disabled) {
+        this._moveSelected("available", "chosen");
+      }
+    });
+    this.chosenSelect.addEventListener("dblclick", () => {
+      if (!this.chosenSelect.disabled) {
+        this._moveSelected("chosen", "available");
+      }
+    });
+    
+    // Button clicks
+    Object.entries(this.buttons).forEach(([action, button]) => {
+      button.addEventListener("click", () => {
+        switch (action) {
+          case "addAll":
+            this._moveAll("available", "chosen");
+            break;
+          case "addSelected":
+            this._moveSelected("available", "chosen");
+            break;
+          case "removeSelected":
+            this._moveSelected("chosen", "available");
+            break;
+          case "removeAll":
+            this._moveAll("chosen", "available");
+            break;
+        }
+      });
+    });
+  }
+
+  _render() {
+    this._renderPane("available");
+    this._renderPane("chosen");
+    this._updateButtons();
+  }
+
+  _renderPane(type) {
+    const select = type === "available" ? this.availableSelect : this.chosenSelect;
+    const filter = type === "available" ? this.availableFilter : this.chosenFilter;
+    const keys = type === "available" ? this.available : this.chosen;
+    
+    // Get filter term
+    const term = filter ? filter.value.trim().toLowerCase() : "";
+    
+    // Preserve selection
+    const previousSelection = new Set(
+      Array.from(select.selectedOptions, opt => opt.dataset.key)
+    );
+    
+    // Clear and rebuild
+    select.innerHTML = "";
+    
+    keys.forEach(key => {
+      const meta = this.options.get(key);
+      if (!meta) return;
+      
+      // Apply filter
+      if (term && !this._passesFilter(meta.label, term)) {
+        return;
+      }
+      
+      const option = this.doc.createElement("option");
+      option.value = meta.value;
+      option.textContent = meta.label;
+      option.dataset.key = key;
+      option.disabled = meta.disabled;
+      
+      if (meta.title) {
+        option.title = meta.title;
+      }
+      
+      Object.entries(meta.dataset).forEach(([attr, value]) => {
+        option.dataset[attr] = value;
+      });
+      
+      if (previousSelection.has(key)) {
+        option.selected = true;
+      }
+      
+      select.appendChild(option);
+    });
+  }
+
+  _passesFilter(label, term) {
+    if (!term) return true;
+    
+    const haystack = label.toLowerCase();
+    
+    if (this.filterMatchMode === "startsWith") {
+      return haystack.startsWith(term);
+    }
+    
+    // "contains" mode - all tokens must match
+    const tokens = term.split(/\s+/).filter(Boolean);
+    return tokens.every(token => haystack.includes(token));
+  }
+
+  _getSelectedKeys(select) {
+    return Array.from(select.selectedOptions, opt => opt.dataset.key);
+  }
+
+  _moveSelected(fromType, toType) {
+    const fromSelect = fromType === "available" ? this.availableSelect : this.chosenSelect;
+    const keys = this._getSelectedKeys(fromSelect);
+    if (keys.length > 0) {
+      this._transfer(keys, fromType, toType);
+    }
+  }
+
+  _moveAll(fromType, toType) {
+    const keys = fromType === "available" ? [...this.available] : [...this.chosen];
+    if (keys.length > 0) {
+      this._transfer(keys, fromType, toType);
+    }
+  }
+
+  _transfer(keys, fromType, toType) {
+    const from = fromType === "available" ? this.available : this.chosen;
+    const to = toType === "available" ? this.available : this.chosen;
+    
+    const keySet = new Set(keys);
+    
+    // Remove from source
+    const remaining = from.filter(key => !keySet.has(key));
+    from.splice(0, from.length, ...remaining);
+    
+    // Add to target
+    to.push(...keys);
+    
+    // Sort
+    this._sortByIndex(from);
+    if (!this.preserveSelectionOrder || toType === "available") {
+      this._sortByIndex(to);
+    }
+    
+    // Update and notify
+    this._render();
+    this._syncToOriginal();
+    this._dispatchChange();
+  }
+
+  _syncToOriginal() {
+    const chosenSet = new Set(this.chosen);
+    this.options.forEach(meta => {
+      meta.original.selected = chosenSet.has(meta.key);
+    });
+  }
+
+  _dispatchChange() {
+    const event = new Event("change", { bubbles: true });
+    this.selectElement.dispatchEvent(event);
+  }
+
+  _updateButtons() {
+    const hasAvailableSelection = this.availableSelect.selectedOptions.length > 0;
+    const hasChosenSelection = this.chosenSelect.selectedOptions.length > 0;
+    const hasAvailableItems = this.available.length > 0;
+    const hasChosenItems = this.chosen.length > 0;
+    
+    this._setButtonState("addSelected", !hasAvailableSelection);
+    this._setButtonState("removeSelected", !hasChosenSelection);
+    this._setButtonState("addAll", !hasAvailableItems);
+    this._setButtonState("removeAll", !hasChosenItems);
+  }
+
+  _setButtonState(action, disabled) {
+    const button = this.buttons[action];
+    if (!button) return;
+
+    button.disabled = disabled;
+
+    // Rebuild className from scratch to avoid classList issues with spaces
+    const baseClasses = this.theme.button.split(/\s+/).filter(Boolean);
+    const actionClasses = (this.theme[`button_${action}`] || '').split(/\s+/).filter(Boolean);
+    const disabledClasses = (this.theme.buttonDisabled || '').split(/\s+/).filter(Boolean);
+
+    let finalClasses = [...baseClasses, ...actionClasses];
+    if (disabled) {
+      finalClasses.push(...disabledClasses);
+    }
+
+    button.className = [...new Set(finalClasses)].join(' ');
+  }
+
+  /** Revert the widget and show the original select element */
+  destroy() {
+    this.container.remove();
+    this.selectElement.style.display = this.previousDisplay;
+    this.selectElement.removeAttribute("data-filtered-select-multiple");
+    this.placeholder.parentNode.insertBefore(this.selectElement, this.placeholder);
+    this.placeholder.remove();
+  }
+}

package/src/index.js

@@ -0,0 +1,7 @@
+export { FilteredSelectMultiple } from "./FilteredSelectMultiple.js";
+export { 
+  defaultTheme, 
+  bootstrap5Theme, 
+  daisyUITheme, 
+  tailwindTheme 
+} from "./themes.js";

package/src/themes.js

@@ -0,0 +1,88 @@
+/**
+ * Theme definitions for FilteredSelectMultiple widget
+ * Simple objects mapping element types to CSS class strings
+ */
+
+/**
+ * Default/minimal theme (original classes)
+ */
+export const defaultTheme = {
+  container: "filtered-select-multiple",
+  column: "fsm-column",
+  availableColumn: "fsm-available",
+  chosenColumn: "fsm-chosen",
+  label: "fsm-label",
+  filter: "fsm-filter",
+  select: "fsm-select",
+  controls: "fsm-controls",
+  button: "fsm-button",
+  button_addAll: "fsm-add-all",
+  button_addSelected: "fsm-add-selected",
+  button_removeSelected: "fsm-remove-selected",
+  button_removeAll: "fsm-remove-all",
+  buttonDisabled: "fsm-button-disabled",
+  button_svg: "fsm-button-svg",
+};
+
+/**
+ * Bootstrap 5 theme preset
+ */
+export const bootstrap5Theme = {
+  container: "d-flex gap-3",
+  column: "d-flex flex-column",
+  availableColumn: "d-flex flex-column",
+  chosenColumn: "d-flex flex-column",
+  label: "form-label fw-semibold mb-2",
+  filter: "form-control form-control-sm mb-2",
+  select: "form-select flex-grow-1",
+  controls: "d-flex flex-column justify-content-center gap-2 px-3",
+  button: "btn btn-sm btn-primary",
+  button_addAll: "",
+  button_addSelected: "",
+  button_removeSelected: "",
+  button_removeAll: "",
+  buttonDisabled: "disabled",
+  button_svg: "d-inline-block",
+};
+
+/**
+ * DaisyUI 5 theme preset
+ */
+export const daisyUITheme = {
+  container: "flex gap-4",
+  column: "flex flex-col",
+  availableColumn: "flex flex-col",
+  chosenColumn: "flex flex-col",
+  label: "label label-text font-semibold mb-2",
+  filter: "input input-bordered input-sm mb-2 w-full",
+  select: "select select-bordered w-full flex-grow",
+  controls: "flex flex-col justify-center gap-2 px-4",
+  button: "btn btn-sm",
+  button_addAll: "btn-secondary",
+  button_addSelected: "btn-primary",
+  button_removeSelected: "btn-primary",
+  button_removeAll: "btn-secondary",
+  buttonDisabled: "btn-disabled",
+  button_svg: "",
+};
+
+/**
+ * Tailwind CSS 4 theme preset (minimal utility classes)
+ */
+export const tailwindTheme = {
+  container: "flex gap-4",
+  column: "flex flex-col",
+  availableColumn: "flex flex-col",
+  chosenColumn: "flex flex-col",
+  label: "font-semibold text-sm mb-2",
+  filter: "border border-slate-300 rounded px-3 py-2 text-sm mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500",
+  select: "border border-slate-300 rounded px-2 py-1 min-w-[200px] flex-grow",
+  controls: "flex flex-col justify-center gap-2 px-4",
+  button: "inline-flex items-center gap-2 px-3 py-2 text-sm border rounded hover:bg-slate-50 transition-colors",
+  button_addAll: "border-slate-300",
+  button_addSelected: "bg-blue-600 text-white border-blue-600 hover:bg-blue-700",
+  button_removeSelected: "bg-blue-600 text-white border-blue-600 hover:bg-blue-700",
+  button_removeAll: "border-slate-300",
+  buttonDisabled: "opacity-50 cursor-not-allowed",
+  button_svg: "",
+};