tyrell-components 1.0.0-TC25 → 1.0.0-TC27

package/lib/components/{multiselect.js → select.js}

@@ -1,52 +1,51 @@
 /**
- * TyMultiselect Web Component
- * PORTED FROM: clj/ty/components/multiselect.cljs
+ * TySelect Web Component
  *
- * A multiselect dropdown component using ty-tag for selections with:
- * - Tag-only options (only ty-tag elements supported)
- * - Multiple selection with visual tags
- * - Desktop mode with smart positioning
- * - Mobile mode with full-screen modal
- * - Search and filtering capabilities
- * - Keyboard navigation
- * - Form association for native form submission with multiple values
- * - Scroll locking when dropdown is open
- * - Outside click to close
+ * The select control — replaces ty-dropdown and ty-multiselect.
+ *
+ * Cardinality (native <select> semantics):
+ * - default: SINGLE select — scalar value, picking an option closes the popup
+ * - `multiple`: multi select — comma value / repeated FormData entries,
+ *   options toggle and the popup stays open
+ *
+ * Skins:
+ * - default: form FIELD — full width, --ty-input-* tokens, matches ty-input;
+ *   shows the selected label(s) inline
+ * - `compact`: content-hugging trigger for toolbars/filter bars; single shows
+ *   the selected label, multiple shows placeholder + count badge (pair with
+ *   <ty-selected-tags>)
+ * - slot="trigger": consumer skin — replaces field/compact chrome entirely,
+ *   behavior/ARIA/form participation unchanged
+ *
+ * - ty-option children (ty-tag also accepted)
+ * - Desktop popup with smart positioning, mobile full-screen modal
+ * - Search / external-search / debounce, keyboard navigation
+ * - Form association: single submits one entry, multiple submits repeated
+ *   `name=` entries (HTMX-ready)
+ * - change event detail: { value, values, items: [{value, label, flavor}], action, item }
+ *   (`value` is a scalar for single, array for multiple)
  *
  * @example
  * ```html
- * <!-- Basic multiselect -->
- * <ty-multiselect label="Skills" placeholder="Select skills" required>
- *   <ty-tag value="js">JavaScript</ty-tag>
- *   <ty-tag value="ts">TypeScript</ty-tag>
- *   <ty-tag value="py">Python</ty-tag>
- * </ty-multiselect>
+ * <!-- Single select, field skin -->
+ * <ty-select label="Robot" name="robot">
+ *   <ty-option value="bobo">Bobo Robot</ty-option>
+ *   <ty-option value="eywa">EYWA Dataset Example</ty-option>
+ * </ty-select>
  *
- * <!-- With pre-selected values -->
- * <ty-multiselect value="js,ts">
- *   <ty-tag value="js">JavaScript</ty-tag>
- *   <ty-tag value="ts">TypeScript</ty-tag>
- *   <ty-tag value="py">Python</ty-tag>
- * </ty-multiselect>
- *
- * <!-- With rich tag content -->
- * <ty-multiselect label="Team Members">
- *   <ty-tag value="1" flavor="primary">
- *     <div class="flex items-center gap-2">
- *       <img src="avatar1.jpg" class="w-6 h-6 rounded-full" />
- *       <span>John Doe</span>
- *     </div>
- *   </ty-tag>
- * </ty-multiselect>
+ * <!-- Multi select, compact skin + out-of-band chips -->
+ * <ty-select multiple compact label="Robots" name="robots" id="robots">...</ty-select>
+ * <ty-selected-tags for="robots"></ty-selected-tags>
  * ```
  */
-import { ensureStyles } from '../utils/styles.js';
-import { multiselectStyles } from '../styles/multiselect.js';
-import { getLoaderSvg } from '../utils/loader-registry.js';
-import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
-import { isMobileTouch } from '../utils/mobile.js';
-import { TyComponent } from '../base/ty-component.js';
-import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
+import { ensureStyles } from "../utils/styles.js";
+import { multiselectStyles } from "../styles/multiselect.js";
+import { selectStyles } from "../styles/select.js";
+import { getLoaderSvg } from "../utils/loader-registry.js";
+import { lockScroll, unlockScroll } from "../utils/scroll-lock.js";
+import { isMobileTouch } from "../utils/mobile.js";
+import { TyComponent } from "../base/ty-component.js";
+import { CustomScrollbar, isCustomScrollbarEnabled, } from "../utils/custom-scrollbar.js";
 // ============================================================================
 // Element Hash Utility (for consistent scroll lock IDs)
 // ============================================================================
@@ -87,41 +86,53 @@ const REQUIRED_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="24" he
 const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
   <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
 </svg>`;
+/**
+ * 'auto' searchable mode: option count above which the search row appears.
+ * Short lists scan faster than they search — native <select> has no search.
+ */
+const SEARCH_AUTO_THRESHOLD = 7;
+/**
+ * Search (magnifier) icon SVG — popup search input adornment (from Lucide)
+ */
+const SEARCH_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
+</svg>`;
 /**
  * Ty Multiselect Component
  */
-export class TyMultiselect extends TyComponent {
+export class TySelect extends TyComponent {
     constructor() {
         super(); // TyComponent handles attachInternals() and attachShadow()
         // ============================================================================
         // INTERNAL STATE
         // ============================================================================
-        this._name = '';
-        this._placeholder = 'Select options...';
-        this._label = '';
+        this._name = "";
+        this._multiple = false;
+        this._compact = false;
+        this._placeholder = "Select...";
+        this._label = "";
         this._disabled = false;
         this._readonly = false;
         this._required = false;
         this._externalSearch = false;
+        this._searchable = "auto";
         this._loading = false;
         this._scrollLockId = null;
-        this._size = 'md';
-        this._selectedLabel = 'Selected';
-        this._availableLabel = 'Available';
-        this._noOptionsMessage = 'No options available';
+        this._size = "md";
+        this._availableLabel = "Available";
+        this._noOptionsMessage = "No options available";
         // Component state
         this._state = {
             open: false,
-            search: '',
+            search: "",
             highlightedIndex: -1,
             filteredTags: [],
             selectedValues: [],
-            mode: 'desktop' // Updated dynamically on render via syncMode()
+            mode: "desktop", // Updated dynamically on render via syncMode()
         };
         // Event handler references for cleanup
         this._stubClickHandler = null;
         this._tagClickHandler = null;
-        this._tagDismissHandler = null;
         this._searchInputHandler = null;
         this._blockSearchClick = null;
         this._keyboardHandler = null;
@@ -133,8 +144,12 @@ export class TyMultiselect extends TyComponent {
         // MutationObserver for light-DOM children — re-syncs selected tags' visual
         // state when consumers swap tag children (external-search refresh pattern).
         this._childObserver = null;
+        // Last single-select display clone — survives external-search option swaps
+        // that remove the matching option (and often the clone itself) from the DOM.
+        this._selectedClone = null;
         const shadow = this.shadowRoot;
-        ensureStyles(shadow, { css: multiselectStyles, id: 'ty-multiselect' });
+        ensureStyles(shadow, { css: multiselectStyles, id: "ty-select-base" });
+        ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
         // DON'T render here - wait for onConnect() to initialize values first
         // This matches dropdown.ts pattern and prevents showing empty state
     }
@@ -145,10 +160,10 @@ export class TyMultiselect extends TyComponent {
     onConnect() {
         // SAFETY: Close any open dialogs to prevent scroll locking
         const shadow = this.shadowRoot;
-        const dialogs = shadow.querySelectorAll('dialog');
-        dialogs.forEach(dialog => {
+        const dialogs = shadow.querySelectorAll("dialog");
+        dialogs.forEach((dialog) => {
             if (dialog.open) {
-                console.warn('⚠️ Found open dialog on connect, closing it');
+                console.warn("⚠️ Found open dialog on connect, closing it");
                 dialog.close();
             }
         });
@@ -167,6 +182,12 @@ export class TyMultiselect extends TyComponent {
             if (this._state.selectedValues.length > 0) {
                 this.syncSelectedTags(this._state.selectedValues);
             }
+            // Option count may have crossed the 'auto' searchable threshold
+            this.updateSearchVisibility();
+            // External-search consumers replace ALL ty-option children — often
+            // including our display clone. Rebuild the selection display (idempotent:
+            // a clone that already matches is left alone, so no observer loop).
+            this.updateSelectionDisplay();
         });
         this._childObserver.observe(this, { childList: true });
     }
@@ -177,15 +198,15 @@ export class TyMultiselect extends TyComponent {
     onDisconnect() {
         // CRITICAL: Close all dialogs to prevent scroll locking
         const shadow = this.shadowRoot;
-        const dialogs = shadow.querySelectorAll('dialog');
-        dialogs.forEach(dialog => {
+        const dialogs = shadow.querySelectorAll("dialog");
+        dialogs.forEach((dialog) => {
             if (dialog.open) {
                 dialog.close();
             }
         });
         // Clean up document-level listeners
         if (this._keyboardHandler) {
-            document.removeEventListener('keydown', this._keyboardHandler);
+            document.removeEventListener("keydown", this._keyboardHandler);
             this._keyboardHandler = null;
         }
         // Clear any pending debounce timer
@@ -208,7 +229,7 @@ export class TyMultiselect extends TyComponent {
     onPropertiesChanged(changes) {
         for (const { name, newValue } of changes) {
             switch (name) {
-                case 'value':
+                case "value":
                     const selectedValues = this.parseValue(newValue);
                     this._state.selectedValues = selectedValues;
                     // CRITICAL: Only sync tags if we're connected and tags exist
@@ -218,48 +239,59 @@ export class TyMultiselect extends TyComponent {
                         this.updateSelectionDisplay();
                         this.updateMobileSelectedState();
                     }
-                    else {
-                        console.warn('💜 [multiselect] onPropertiesChanged - NOT connected yet, skipping sync (will happen in initializeState)');
+                    // (not-yet-connected: sync deferred to initializeState)
+                    break;
+                case "name":
+                    this._name = newValue || "";
+                    break;
+                case "multiple":
+                    this._multiple = newValue;
+                    // Dropping to single with a multi selection: keep only the first
+                    if (!newValue && this._state.selectedValues.length > 1) {
+                        this.updateComponentValue([this._state.selectedValues[0]], false, "set", null);
                     }
                     break;
-                case 'name':
-                    this._name = newValue || '';
+                case "compact":
+                    this._compact = newValue;
                     break;
-                case 'placeholder':
-                    this._placeholder = newValue || 'Select options...';
-                    // No need to update display - placeholder text change doesn't affect visibility
+                case "placeholder":
+                    this._placeholder = newValue || "Select...";
+                    if (this.isConnected && this.shadowRoot)
+                        this.updateSelectionDisplay();
                     break;
-                case 'label':
-                    this._label = newValue || '';
+                case "label":
+                    this._label = newValue || "";
                     break;
-                case 'disabled':
+                case "disabled":
                     this._disabled = newValue;
                     break;
-                case 'readonly':
+                case "readonly":
                     this._readonly = newValue;
                     break;
-                case 'required':
+                case "required":
                     this._required = newValue;
                     break;
-                case 'externalSearch':
+                case "externalSearch":
                     this._externalSearch = newValue;
                     break;
-                case 'size':
+                case "searchable":
+                    this._searchable = newValue;
+                    if (this.isConnected && this.shadowRoot)
+                        this.updateSearchVisibility();
+                    break;
+                case "size":
                     this._size = newValue;
                     break;
-                case 'debounce':
+                case "debounce":
                     this._debounce = newValue;
                     break;
-                case 'selected-label':
-                    this._selectedLabel = newValue || 'Selected';
-                    break;
-                case 'available-label':
-                    this._availableLabel = newValue || 'Available';
+                case "available-label":
+                    this._availableLabel = newValue || "Available";
                     break;
-                case 'no-options-message':
-                    this._noOptionsMessage = newValue || 'No options available';
+                case "no-options-message":
+                    this._noOptionsMessage = newValue || "No options available";
                     break;
-                case 'loading':
+                case "loading":
                     this._loading = newValue;
                     this.applyLoadingState();
                     break;
@@ -277,16 +309,16 @@ export class TyMultiselect extends TyComponent {
         if (!shadow)
             return;
         const svg = this._loading ? getLoaderSvg() : null;
-        shadow.querySelectorAll('.dropdown-options-wrapper').forEach((wrapper) => {
-            wrapper.classList.toggle('loading', this._loading);
+        shadow.querySelectorAll(".dropdown-options-wrapper").forEach((wrapper) => {
+            wrapper.classList.toggle("loading", this._loading);
             if (this._loading) {
-                wrapper.setAttribute('aria-busy', 'true');
-                const spinner = wrapper.querySelector('.dropdown-loading-spinner');
+                wrapper.setAttribute("aria-busy", "true");
+                const spinner = wrapper.querySelector(".dropdown-loading-spinner");
                 if (spinner && svg)
                     spinner.innerHTML = svg;
             }
             else {
-                wrapper.removeAttribute('aria-busy');
+                wrapper.removeAttribute("aria-busy");
             }
         });
     }
@@ -297,8 +329,12 @@ export class TyMultiselect extends TyComponent {
     getFormValue() {
         const selectedValues = this._state.selectedValues;
         if (this._name && selectedValues.length > 0) {
+            // Single select submits one plain entry
+            if (!this._multiple)
+                return selectedValues[0];
+            // Multiple submits repeated `name=` entries (HTMX standard)
             const formData = new FormData();
-            selectedValues.forEach(value => {
+            selectedValues.forEach((value) => {
                 formData.append(this._name, value);
             });
             return formData;
@@ -310,16 +346,19 @@ export class TyMultiselect extends TyComponent {
      */
     parseValue(value) {
         // Defensive check: ensure value is actually a string before calling .trim()
-        if (!value || typeof value !== 'string' || value.trim() === '')
+        if (!value || typeof value !== "string" || value.trim() === "")
             return [];
-        return value.split(',').map(v => v.trim()).filter(v => v !== '');
+        return value
+            .split(",")
+            .map((v) => v.trim())
+            .filter((v) => v !== "");
     }
     /**
      * Initialize component state from attributes
      * Reads from both property and attribute (like ClojureScript version)
      */
     initializeState() {
-        const initialValue = this.getProperty('value') || '';
+        const initialValue = this.getProperty("value") || "";
         if (initialValue) {
             // Explicit value provided - sync tags directly
             // DON'T use updateComponentValue() because the property is already set!
@@ -336,8 +375,8 @@ export class TyMultiselect extends TyComponent {
             // No explicit value - check for pre-selected tags
             const allTags = this.getTagElements();
             const preSelectedTags = allTags
-                .filter(tag => tag.hasAttribute('selected'))
-                .map(tag => this.getTagData(tag).value);
+                .filter((tag) => tag.hasAttribute("selected"))
+                .map((tag) => this.getTagData(tag).value);
             if (preSelectedTags.length > 0) {
                 // Set the property value and sync (updateComponentValue handles everything)
                 this.updateComponentValue(preSelectedTags, false);
@@ -348,78 +387,48 @@ export class TyMultiselect extends TyComponent {
     // TAG MANAGEMENT METHODS (Phase 2)
     // ============================================================================
     /**
-     * Get all ty-tag elements from the component (ALL slots)
+     * Get all option elements from the component (ty-option preferred, ty-tag accepted)
      */
     getTagElements() {
-        // Get ALL ty-tag children, regardless of slot assignment
-        const tags = Array.from(this.querySelectorAll('ty-tag'));
-        return tags;
+        // :not([cloned]) — the single-select display clone (slot="selected")
+        // lives in our light DOM too and must never count as an option
+        return Array.from(this.querySelectorAll("ty-option:not([cloned]), ty-tag:not([cloned])"));
     }
     /**
      * Extract value and text from a ty-tag element
      */
     getTagData(element) {
         // Get value from either property or attribute
-        const value = element.value || element.getAttribute('value') || element.textContent || '';
-        const text = element.textContent || '';
+        const value = element.value ||
+            element.getAttribute("value") ||
+            element.textContent ||
+            "";
+        // Display label: explicit label attribute wins over textContent —
+        // native <option label> semantics; lets rich options declare clean text
+        const text = element.getAttribute("label") || element.textContent || "";
         return { value, text, element };
     }
     /**
-     * Select a tag - set selected state, move to selected slot, make dismissible
+     * Select an option - attribute only. The option stays in the list with
+     * selected styling; chips are rendered out-of-band (ty-selected-tags).
      */
     selectTag(tag) {
-        const tagValue = this.getTagData(tag).value;
-        // Set selected attribute
-        tag.setAttribute('selected', '');
-        // Move to selected slot
-        tag.setAttribute('slot', 'selected');
-        // Make dismissible
-        tag.setAttribute('dismissible', 'true');
-        // Force re-slotting by removing and re-adding
-        const parent = tag.parentNode;
-        if (parent) {
-            parent.removeChild(tag);
-            parent.appendChild(tag);
-        }
-        else {
-            console.warn(`⚠️ [multiselect] - No parent for "${tagValue}"!`);
-        }
+        tag.setAttribute("selected", "");
     }
     /**
-     * Deselect a tag - remove selected state, remove from selected slot, remove dismissible
+     * Deselect an option - attribute only.
      */
     deselectTag(tag) {
-        // Remove selected attribute
-        tag.removeAttribute('selected');
-        // Remove from selected slot
-        tag.removeAttribute('slot');
-        // Remove dismissible
-        tag.removeAttribute('dismissible');
-        // Force re-slotting by removing and re-adding
-        const parent = tag.parentNode;
-        if (parent) {
-            parent.removeChild(tag);
-            parent.appendChild(tag);
-        }
+        tag.removeAttribute("selected");
     }
     /**
      * Get array of currently selected values from tags (ALWAYS reads from DOM)
      */
     getSelectedValues() {
         return this.getTagElements()
-            .filter(tag => tag.hasAttribute('selected'))
-            .map(tag => this.getTagData(tag).value)
-            .filter(value => value !== '');
-    }
-    /**
-     * Check if all available tags are selected
-     */
-    allTagsSelected() {
-        const tags = this.getTagElements();
-        if (tags.length === 0)
-            return false;
-        const selectedCount = tags.filter(tag => tag.hasAttribute('selected')).length;
-        return selectedCount === tags.length;
+            .filter((tag) => tag.hasAttribute("selected"))
+            .map((tag) => this.getTagData(tag).value)
+            .filter((value) => value !== "");
     }
     /**
      * Sync tag selection states with desired values
@@ -427,10 +436,10 @@ export class TyMultiselect extends TyComponent {
     syncSelectedTags(selectedValues) {
         const selectedSet = new Set(selectedValues);
         const tags = this.getTagElements();
-        tags.forEach(tag => {
+        tags.forEach((tag) => {
             const tagValue = this.getTagData(tag).value;
             const shouldBeSelected = selectedSet.has(tagValue);
-            const isSelected = tag.hasAttribute('selected');
+            const isSelected = tag.hasAttribute("selected");
             if (shouldBeSelected && !isSelected) {
                 this.selectTag(tag);
             }
@@ -443,9 +452,9 @@ export class TyMultiselect extends TyComponent {
      * Central update function - synchronizes everything
      * Uses TyComponent's property system for proper lifecycle
      */
-    updateComponentValue(newValues, dispatchChange = false, action = 'set', item = null) {
+    updateComponentValue(newValues, dispatchChange = false, action = "set", item = null) {
         const oldValues = this.getSelectedValues();
-        const valueStr = newValues.join(',');
+        const valueStr = newValues.join(",");
         // Only update if changed
         if (JSON.stringify(newValues.sort()) !== JSON.stringify(oldValues.sort())) {
             // Use TyComponent's property system - this will trigger:
@@ -453,18 +462,34 @@ export class TyMultiselect extends TyComponent {
             // 2. onPropertiesChanged() → updates placeholder via updateSelectionDisplay()
             // 3. updateFormValue() → automatic (formValue: true in config)
             // 4. render() → automatic if visual properties changed
-            this.setProperty('value', valueStr);
-            // Dispatch custom multiselect change event (with action/item details)
+            this.setProperty("value", valueStr);
+            // Dispatch change event (with rich items for out-of-band chip rendering)
             if (dispatchChange) {
                 this.dispatchChangeEvent({
+                    // Scalar for single select, array for multiple
+                    value: this._multiple ? [...newValues] : (newValues[0] ?? null),
                     values: newValues,
+                    items: this.getSelectedItems(newValues),
                     action,
-                    item
+                    item,
                 });
             }
         }
-        else {
-        }
+    }
+    /**
+     * Build rich item info for values, read off the matching option elements
+     */
+    getSelectedItems(values) {
+        const byValue = new Map(this.getTagElements().map((el) => [this.getTagData(el).value, el]));
+        return values.map((value) => {
+            const el = byValue.get(value);
+            return {
+                value,
+                // label attribute wins (native <option label> semantics)
+                label: el?.getAttribute("label") || el?.textContent?.trim() || value,
+                flavor: el?.getAttribute("flavor") ?? null,
+            };
+        });
     }
     // ============================================================================
     // DROPDOWN METHODS (Phase 3 & 4)
@@ -474,50 +499,61 @@ export class TyMultiselect extends TyComponent {
      */
     calculatePosition() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector('.multiselect-stub');
-        const dialog = shadow.querySelector('.dropdown-dialog');
+        const stub = shadow.querySelector(".multiselect-stub");
+        const dialog = shadow.querySelector(".dropdown-dialog");
         if (!stub || !dialog)
             return;
         const stubRect = stub.getBoundingClientRect();
         const viewportHeight = window.innerHeight;
         const viewportWidth = window.innerWidth;
-        // Get dialog dimensions (it's already shown with showModal)
+        // Get dialog dimensions (it's already shown with showModal).
+        // Cap the estimate: with hundreds of options the raw measurement can be
+        // the uncapped content height, which made "fits below?" always false.
+        // 440px ≈ options max-height (24rem) + search header.
+        const MAX_POPUP_ESTIMATE = 440;
         const dialogRect = dialog.getBoundingClientRect();
-        const estimatedHeight = dialogRect.height || 200;
+        const estimatedHeight = Math.min(dialogRect.height || 200, MAX_POPUP_ESTIMATE);
         const padding = 8;
         const wrapPadding = 20;
+        // Popup width is independent of the trigger — a small button trigger still
+        // gets a usable list. Overridable via --ty-select-popup-width.
+        const cssWidth = parseFloat(getComputedStyle(this).getPropertyValue("--ty-select-popup-width"));
+        const popupWidth = !isNaN(cssWidth)
+            ? cssWidth
+            : Math.max(stubRect.width, 320);
         // Available space calculations
         const spaceBelow = viewportHeight - stubRect.bottom;
-        const spaceRight = viewportWidth - stubRect.left;
-        // Smart direction logic
-        const positionBelow = spaceBelow >= estimatedHeight + padding;
-        const fitsHorizontally = spaceRight >= stubRect.width;
-        // Calculate position coordinates
-        const x = fitsHorizontally
-            ? stubRect.left - wrapPadding
-            : Math.max(padding, viewportWidth - stubRect.width - padding);
+        const spaceAbove = stubRect.top;
+        // Smart direction logic: below when it fits — and when neither side
+        // fits, take the side with MORE room instead of blindly flipping up
+        // (a field near the viewport top used to clip the popup off-screen).
+        const positionBelow = spaceBelow >= estimatedHeight + padding || spaceBelow >= spaceAbove;
+        // Anchor to the trigger's left edge, clamped into the viewport
+        const x = Math.max(padding - wrapPadding, Math.min(stubRect.left - wrapPadding, viewportWidth - popupWidth - wrapPadding - padding));
+        // Open below (or above) the trigger — never covering it
+        const gap = 4;
         const y = positionBelow
-            ? stubRect.top - wrapPadding
-            : viewportHeight - stubRect.bottom - wrapPadding;
-        const width = stubRect.width + wrapPadding + wrapPadding;
+            ? stubRect.bottom + gap - wrapPadding
+            : viewportHeight - stubRect.top + gap - wrapPadding;
+        const width = popupWidth + wrapPadding + wrapPadding;
         // Set CSS variables for positioning
-        this.style.setProperty('--dropdown-x', `${x}px`);
-        this.style.setProperty('--dropdown-y', `${y}px`);
-        this.style.setProperty('--dropdown-width', `${width}px`);
-        this.style.setProperty('--dropdown-offset-x', '0px');
-        this.style.setProperty('--dropdown-offset-y', '0px');
-        this.style.setProperty('--dropdown-padding', `${wrapPadding}px`);
+        this.style.setProperty("--dropdown-x", `${x}px`);
+        this.style.setProperty("--dropdown-y", `${y}px`);
+        this.style.setProperty("--dropdown-width", `${width}px`);
+        this.style.setProperty("--dropdown-offset-x", "0px");
+        this.style.setProperty("--dropdown-offset-y", "0px");
+        this.style.setProperty("--dropdown-padding", `${wrapPadding}px`);
         // Set direction classes for CSS styling
         if (positionBelow) {
-            dialog.classList.add('position-below');
-            dialog.classList.remove('position-above');
+            dialog.classList.add("position-below");
+            dialog.classList.remove("position-above");
         }
         else {
-            dialog.classList.add('position-above');
-            dialog.classList.remove('position-below');
+            dialog.classList.add("position-above");
+            dialog.classList.remove("position-below");
         }
         // Optional: Store direction for debugging
-        this.style.setProperty('--dropdown-direction', positionBelow ? 'below' : 'above');
+        this.style.setProperty("--dropdown-direction", positionBelow ? "below" : "above");
     }
     // ============================================================================
     // CUSTOM SCROLLBAR FOR OPTIONS
@@ -526,13 +562,15 @@ export class TyMultiselect extends TyComponent {
         if (!isCustomScrollbarEnabled())
             return;
         const shadow = this.shadowRoot;
-        const optionsDiv = shadow.querySelector('.dropdown-options');
-        const optionsWrapper = shadow.querySelector('.dropdown-options-wrapper');
+        const optionsDiv = shadow.querySelector(".dropdown-options");
+        const optionsWrapper = shadow.querySelector(".dropdown-options-wrapper");
         if (!optionsDiv || !optionsWrapper)
             return;
         this._destroyOptionsScrollbar();
-        optionsDiv.classList.add('ty-custom-scroll');
-        this._optionsScrollbar = new CustomScrollbar(optionsDiv, { vertical: true });
+        optionsDiv.classList.add("ty-custom-scroll");
+        this._optionsScrollbar = new CustomScrollbar(optionsDiv, {
+            vertical: true,
+        });
         if (this._optionsScrollbar.trackY) {
             optionsWrapper.appendChild(this._optionsScrollbar.trackY);
         }
@@ -555,38 +593,38 @@ export class TyMultiselect extends TyComponent {
      */
     openDropdown() {
         const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector('.dropdown-dialog');
+        const dialog = shadow.querySelector(".dropdown-dialog");
         if (!dialog)
             return;
         // Lock body scroll while dropdown is open
-        const lockId = `multiselect-${this.id || 'anon'}-${getElementHash(this)}`;
+        const lockId = `multiselect-${this.id || "anon"}-${getElementHash(this)}`;
         this._scrollLockId = lockId;
         lockScroll(lockId);
         // Show modal
         dialog.showModal();
-        dialog.classList.add('open');
+        dialog.classList.add("open");
         // Position dropdown AFTER showing modal
         this.calculatePosition();
         // Update component state
         this._state.open = true;
         // Update visual states
-        const chevron = shadow.querySelector('.dropdown-chevron');
+        const chevron = shadow.querySelector(".dropdown-chevron");
         if (chevron)
-            chevron.classList.add('open');
-        const searchChevron = shadow.querySelector('.dropdown-search-chevron');
+            chevron.classList.add("open");
+        const searchChevron = shadow.querySelector(".dropdown-search-chevron");
         if (searchChevron)
-            searchChevron.classList.add('open');
+            searchChevron.classList.add("open");
         // Initialize options state
-        const tags = this.getTagElements().map(el => this.getTagData(el));
+        const tags = this.getTagElements().map((el) => this.getTagData(el));
         this._state.filteredTags = tags;
         this._state.highlightedIndex = -1;
         // Ensure options area is visible (may have been hidden from previous search)
         this.updateOptionsVisibility(true);
         // Setup custom scrollbar on options
         this._setupOptionsScrollbar();
-        // Focus search input
-        const searchInput = shadow.querySelector('.dropdown-search-input');
-        if (searchInput) {
+        // Focus search input (when the search row is shown)
+        const searchInput = shadow.querySelector(".dropdown-search-input");
+        if (searchInput && this.shouldShowSearch()) {
             setTimeout(() => searchInput.focus(), 100);
         }
         // Lifecycle event (also fires empty search if external-search)
@@ -597,15 +635,15 @@ export class TyMultiselect extends TyComponent {
      */
     closeDropdown() {
         const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector('.dropdown-dialog');
+        const dialog = shadow.querySelector(".dropdown-dialog");
         if (!dialog)
             return;
         // Destroy custom scrollbar
         this._destroyOptionsScrollbar();
         // Close dialog
-        dialog.classList.remove('open');
-        dialog.classList.remove('position-above');
-        dialog.classList.remove('position-below');
+        dialog.classList.remove("open");
+        dialog.classList.remove("position-above");
+        dialog.classList.remove("position-below");
         dialog.close();
         // Unlock body scroll (paired with the lock in openDropdown)
         if (this._scrollLockId) {
@@ -616,18 +654,18 @@ export class TyMultiselect extends TyComponent {
         this._state.open = false;
         this._state.highlightedIndex = -1;
         // Update visual states
-        const chevron = shadow.querySelector('.dropdown-chevron');
+        const chevron = shadow.querySelector(".dropdown-chevron");
         if (chevron)
-            chevron.classList.remove('open');
-        const searchChevron = shadow.querySelector('.dropdown-search-chevron');
+            chevron.classList.remove("open");
+        const searchChevron = shadow.querySelector(".dropdown-search-chevron");
         if (searchChevron)
-            searchChevron.classList.remove('open');
+            searchChevron.classList.remove("open");
         // Reset search and restore all tags
-        const hadQuery = this._state.search !== '';
-        this._state.search = '';
-        const searchInput = shadow.querySelector('.dropdown-search-input');
+        const hadQuery = this._state.search !== "";
+        this._state.search = "";
+        const searchInput = shadow.querySelector(".dropdown-search-input");
         if (searchInput) {
-            searchInput.value = '';
+            searchInput.value = "";
         }
         if (this._externalSearch) {
             // External mode — notify consumer so it can reset its own filtered state.
@@ -639,12 +677,12 @@ export class TyMultiselect extends TyComponent {
                     clearTimeout(this._searchDebounceTimer);
                     this._searchDebounceTimer = null;
                 }
-                this.fireSearchEvent('');
+                this.fireSearchEvent("");
             }
         }
         else {
             // Internal mode — restore visibility of all tags ourselves
-            const allTags = this.getTagElements().map(el => this.getTagData(el));
+            const allTags = this.getTagElements().map((el) => this.getTagData(el));
             this._state.filteredTags = allTags;
             this.updateTagVisibility(allTags, allTags);
             this.clearHighlights(allTags);
@@ -658,28 +696,24 @@ export class TyMultiselect extends TyComponent {
      */
     openMobileModal() {
         const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector('.mobile-dialog');
+        const dialog = shadow.querySelector(".mobile-dialog");
         if (!dialog)
             return;
         // Lock body scroll while mobile modal is open
-        const lockId = `multiselect-${this.id || 'anon'}-${getElementHash(this)}`;
+        const lockId = `multiselect-${this.id || "anon"}-${getElementHash(this)}`;
         this._scrollLockId = lockId;
         lockScroll(lockId);
         // Show dialog using native API (handles z-index automatically)
         dialog.showModal();
-        dialog.classList.add('open');
-        const stub_slot = shadow.querySelector('#stub-slot');
-        const mobile_slot = shadow.querySelector('#mobile-slot');
-        stub_slot.name = "selected-blocked";
-        mobile_slot.name = "selected";
+        dialog.classList.add("open");
         // Update component state
         this._state.open = true;
         // Initialize options state
-        const tags = this.getTagElements().map(el => this.getTagData(el));
+        const tags = this.getTagElements().map((el) => this.getTagData(el));
         this._state.filteredTags = tags;
-        // Focus search input
-        const searchInput = shadow.querySelector('.mobile-search-input');
-        if (searchInput) {
+        // Focus search input (when the search row is shown)
+        const searchInput = shadow.querySelector(".mobile-search-input");
+        if (searchInput && this.shouldShowSearch()) {
             // Small delay to ensure dialog is ready
             setTimeout(() => searchInput.focus(), 100);
         }
@@ -696,30 +730,26 @@ export class TyMultiselect extends TyComponent {
      */
     closeMobileModal() {
         const shadow = this.shadowRoot;
-        const dialog = shadow.querySelector('.mobile-dialog');
+        const dialog = shadow.querySelector(".mobile-dialog");
         if (!dialog)
             return;
         // Close immediately — ::backdrop doesn't support transitions
-        dialog.classList.remove('open');
+        dialog.classList.remove("open");
         dialog.close();
         // Unlock body scroll (paired with the lock in openMobileModal)
         if (this._scrollLockId) {
             unlockScroll(this._scrollLockId);
             this._scrollLockId = null;
         }
-        const stub_slot = shadow.querySelector('#stub-slot');
-        const mobile_slot = shadow.querySelector('#mobile-slot');
-        stub_slot.name = "selected";
-        mobile_slot.name = "selected-blocked";
         // Update state
         this._state.open = false;
         this._state.highlightedIndex = -1;
         // Reset search
-        const hadQuery = this._state.search !== '';
-        this._state.search = '';
-        const searchInput = shadow.querySelector('.mobile-search-input');
+        const hadQuery = this._state.search !== "";
+        this._state.search = "";
+        const searchInput = shadow.querySelector(".mobile-search-input");
         if (searchInput) {
-            searchInput.value = '';
+            searchInput.value = "";
         }
         if (this._externalSearch) {
             // External mode — notify consumer that the search was cleared on close
@@ -729,13 +759,13 @@ export class TyMultiselect extends TyComponent {
                     clearTimeout(this._searchDebounceTimer);
                     this._searchDebounceTimer = null;
                 }
-                this.fireSearchEvent('');
+                this.fireSearchEvent("");
             }
         }
         else {
             // Internal mode — unhide all tags ourselves
             const allTags = this.getTagElements();
-            allTags.forEach(el => el.removeAttribute('hidden'));
+            allTags.forEach((el) => el.removeAttribute("hidden"));
         }
         // Lifecycle event
         this.fireCloseEvent();
@@ -749,51 +779,38 @@ export class TyMultiselect extends TyComponent {
         if (this._disabled || this._readonly) {
             return;
         }
-        // Don't open if all tags are already selected
-        if (this.allTagsSelected()) {
-            return;
-        }
         this.openDropdown();
     }
     handleTagClick(e) {
         const target = e.target;
-        // Find the ty-tag element
-        const tag = target.tagName === 'TY-TAG'
-            ? target
-            : target.closest('ty-tag');
-        if (!tag || tag.hasAttribute('disabled'))
+        // Find the option element (ty-option or ty-tag)
+        const tag = target.closest("ty-option, ty-tag");
+        if (!tag || tag.hasAttribute("disabled"))
             return;
-        if (tag.hasAttribute('selected'))
-            return; // Already selected
         e.preventDefault();
         e.stopPropagation();
         const tagValue = this.getTagData(tag).value;
         const currentValues = this.getSelectedValues();
-        const newValues = [...currentValues, tagValue];
-        // Use central update function with change event
-        this.updateComponentValue(newValues, true, 'add', tagValue);
-        // Auto-close if all tags selected
-        if (this.allTagsSelected()) {
-            if (this._state.mode === 'desktop') {
-                this.closeDropdown();
+        // Single select: picking replaces the selection and closes the popup
+        // (native <select> semantics — re-picking the same option just closes)
+        if (!this._multiple) {
+            this.updateComponentValue([tagValue], true, "set", tagValue);
+            if (this._state.mode === "mobile") {
+                this.closeMobileModal();
             }
             else {
-                this.closeMobileModal();
+                this.closeDropdown();
             }
-        }
-    }
-    handleTagDismiss(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        const customEvent = e;
-        const tag = customEvent.detail?.target;
-        if (!tag)
             return;
-        const tagValue = this.getTagData(tag).value;
-        const currentValues = this.getSelectedValues();
-        const newValues = currentValues.filter(v => v !== tagValue);
-        // Use central update function with change event
-        this.updateComponentValue(newValues, true, 'remove', tagValue);
+        }
+        // Multiple: toggle — clicking a selected option deselects it
+        if (tag.hasAttribute("selected")) {
+            const newValues = currentValues.filter((v) => v !== tagValue);
+            this.updateComponentValue(newValues, true, "remove", tagValue);
+        }
+        else {
+            this.updateComponentValue([...currentValues, tagValue], true, "add", tagValue);
+        }
     }
     blockSearchClick(e) {
         e.stopPropagation();
@@ -810,11 +827,10 @@ export class TyMultiselect extends TyComponent {
             this.dispatchSearchEvent(query);
             return;
         }
-        // Internal search: filter tags locally
-        const allTags = this.getTagElements().map(el => this.getTagData(el));
-        // Only filter from non-selected tags
-        const availableTags = allTags.filter(t => !t.element.hasAttribute('selected'));
-        const filtered = this.filterTags(availableTags, query);
+        // Internal search: filter ALL options locally — selected ones stay visible
+        // (with selected styling) so they can be toggled off while searching
+        const allTags = this.getTagElements().map((el) => this.getTagData(el));
+        const filtered = this.filterTags(allTags, query);
         // Update state
         this._state.filteredTags = filtered;
         this._state.highlightedIndex = -1;
@@ -831,13 +847,12 @@ export class TyMultiselect extends TyComponent {
         if (!this._state.open)
             return;
         const shadow = this.shadowRoot;
-        const searchInput = shadow.querySelector('.dropdown-search-input');
+        const searchInput = shadow.querySelector(".dropdown-search-input");
         const target = e.target;
         // Only handle navigation keys when dropdown is open and either:
         // 1. Event comes from search input, OR
         // 2. Event comes from document but search input is not focused
-        const shouldHandle = target === searchInput ||
-            document.activeElement !== searchInput;
+        const shouldHandle = target === searchInput || document.activeElement !== searchInput;
         if (!shouldHandle)
             return;
         // Get current state values
@@ -845,21 +860,22 @@ export class TyMultiselect extends TyComponent {
         const tagsCount = filteredTags.length;
         const currentHighlightedIndex = this._state.highlightedIndex;
         switch (e.key) {
-            case 'Escape':
+            case "Escape":
                 e.preventDefault();
                 e.stopPropagation();
                 this.closeDropdown();
                 break;
-            case 'Enter':
+            case "Enter":
                 e.preventDefault();
                 e.stopPropagation();
                 // Select highlighted tag if any
-                if (currentHighlightedIndex >= 0 && currentHighlightedIndex < tagsCount) {
+                if (currentHighlightedIndex >= 0 &&
+                    currentHighlightedIndex < tagsCount) {
                     const tag = filteredTags[currentHighlightedIndex];
                     this.handleTagClick({ target: tag.element });
                 }
                 break;
-            case 'ArrowUp':
+            case "ArrowUp":
                 e.preventDefault();
                 e.stopPropagation();
                 let newIndexUp;
@@ -881,7 +897,7 @@ export class TyMultiselect extends TyComponent {
                 this._state.highlightedIndex = newIndexUp;
                 this.highlightTag(filteredTags, newIndexUp);
                 break;
-            case 'ArrowDown':
+            case "ArrowDown":
                 e.preventDefault();
                 e.stopPropagation();
                 let newIndexDown;
@@ -912,7 +928,7 @@ export class TyMultiselect extends TyComponent {
      * Filter tags based on search query
      */
     filterTags(tags, query) {
-        if (!query || query.trim() === '') {
+        if (!query || query.trim() === "") {
             return tags;
         }
         const searchLower = query.toLowerCase();
@@ -922,13 +938,13 @@ export class TyMultiselect extends TyComponent {
      * Update visibility of tags based on filtered list
      */
     updateTagVisibility(filteredTags, allTags) {
-        const visibleValues = new Set(filteredTags.map(tag => tag.value));
+        const visibleValues = new Set(filteredTags.map((tag) => tag.value));
         allTags.forEach(({ value, element }) => {
             if (visibleValues.has(value)) {
-                element.removeAttribute('hidden');
+                element.removeAttribute("hidden");
             }
             else {
-                element.setAttribute('hidden', '');
+                element.setAttribute("hidden", "");
             }
         });
     }
@@ -937,9 +953,9 @@ export class TyMultiselect extends TyComponent {
      */
     updateOptionsVisibility(hasOptions) {
         const shadow = this.shadowRoot;
-        const options = shadow.querySelector('.dropdown-options');
+        const options = shadow.querySelector(".dropdown-options");
         if (options) {
-            options.style.display = hasOptions ? '' : 'none';
+            options.style.display = hasOptions ? "" : "none";
         }
     }
     /**
@@ -947,7 +963,7 @@ export class TyMultiselect extends TyComponent {
      */
     clearHighlights(tags) {
         tags.forEach(({ element }) => {
-            element.removeAttribute('highlighted');
+            element.removeAttribute("highlighted");
         });
     }
     /**
@@ -957,12 +973,12 @@ export class TyMultiselect extends TyComponent {
         this.clearHighlights(tags);
         if (index >= 0 && index < tags.length) {
             const { element } = tags[index];
-            element.setAttribute('highlighted', '');
+            element.setAttribute("highlighted", "");
             // Scroll into view
             element.scrollIntoView({
-                behavior: 'smooth',
-                block: 'nearest',
-                inline: 'nearest'
+                behavior: "smooth",
+                block: "nearest",
+                inline: "nearest",
             });
         }
     }
@@ -992,13 +1008,13 @@ export class TyMultiselect extends TyComponent {
      * Fire the actual search event
      */
     fireSearchEvent(query) {
-        this.dispatchEvent(new CustomEvent('search', {
+        this.dispatchEvent(new CustomEvent("search", {
             detail: {
                 query,
-                element: this
+                element: this,
             },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
     }
     /**
@@ -1007,20 +1023,20 @@ export class TyMultiselect extends TyComponent {
      * query so consumers have a clean hook to reset/refetch the option list.
      */
     fireOpenEvent() {
-        this.dispatchEvent(new CustomEvent('open', {
+        this.dispatchEvent(new CustomEvent("open", {
             detail: { mode: this._state.mode, element: this },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
         if (this._externalSearch) {
-            this.fireSearchEvent('');
+            this.fireSearchEvent("");
         }
     }
     fireCloseEvent() {
-        this.dispatchEvent(new CustomEvent('close', {
+        this.dispatchEvent(new CustomEvent("close", {
             detail: { mode: this._state.mode, element: this },
             bubbles: true,
-            composed: true
+            composed: true,
         }));
     }
     // ============================================================================
@@ -1030,10 +1046,10 @@ export class TyMultiselect extends TyComponent {
      * Dispatch custom change event
      */
     dispatchChangeEvent(detail) {
-        this.dispatchEvent(new CustomEvent('change', {
+        this.dispatchEvent(new CustomEvent("change", {
             detail,
             bubbles: true,
-            cancelable: true
+            cancelable: true,
         }));
     }
     // ============================================================================
@@ -1045,45 +1061,61 @@ export class TyMultiselect extends TyComponent {
      */
     render() {
         // Sync mode on every render so rotation/resize is picked up
-        this._state.mode = isMobileTouch() ? 'mobile' : 'desktop';
-        if (this._state.mode === 'mobile') {
+        this._state.mode = isMobileTouch() ? "mobile" : "desktop";
+        if (this._state.mode === "mobile") {
             this.renderMobile();
         }
         else {
             this.renderDesktop();
         }
+        this.updateSearchVisibility();
         // Loading wrapper is rendered dynamically — re-apply each render
         this.applyLoadingState();
     }
+    /**
+     * When a consumer slots their own trigger (slot="trigger"), strip the
+     * default field chrome so the trigger is styled entirely by the consumer.
+     */
+    setupTriggerSlot() {
+        const shadow = this.shadowRoot;
+        const stub = shadow.querySelector(".multiselect-stub");
+        const slot = shadow.querySelector('slot[name="trigger"]');
+        if (!stub || !slot)
+            return;
+        const sync = () => stub.classList.toggle("custom-trigger", slot.assignedElements().length > 0);
+        slot.addEventListener("slotchange", sync);
+        sync();
+    }
     /**
      * Setup event listeners
      */
     setupEventListeners() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector('.multiselect-stub');
-        const optionsSlot = shadow.querySelector('#options-slot');
-        const searchInput = shadow.querySelector('.dropdown-search-input');
+        const stub = shadow.querySelector(".multiselect-stub");
+        const optionsSlot = shadow.querySelector("#options-slot");
+        const searchInput = shadow.querySelector(".dropdown-search-input");
         if (stub) {
             this._stubClickHandler = this.handleStubClick.bind(this);
-            stub.addEventListener('click', this._stubClickHandler);
+            stub.addEventListener("click", this._stubClickHandler);
         }
+        this.setupTriggerSlot();
         // Add tag click handler to slot
         if (optionsSlot) {
             this._tagClickHandler = this.handleTagClick.bind(this);
-            optionsSlot.addEventListener('click', this._tagClickHandler);
+            optionsSlot.addEventListener("click", this._tagClickHandler);
         }
         // Add search input handlers
         if (searchInput) {
             this._searchInputHandler = this.handleSearchInput.bind(this);
             this._blockSearchClick = this.blockSearchClick.bind(this);
-            searchInput.addEventListener('input', this._searchInputHandler);
-            searchInput.addEventListener('click', this._blockSearchClick);
+            searchInput.addEventListener("input", this._searchInputHandler);
+            searchInput.addEventListener("click", this._blockSearchClick);
             // searchInput.addEventListener('blur', this._searchBlurHandler)
         }
         // Setup dialog backdrop click handler
-        const dialog = shadow.querySelector('.dropdown-dialog');
+        const dialog = shadow.querySelector(".dropdown-dialog");
         if (dialog) {
-            dialog.addEventListener('click', (e) => {
+            dialog.addEventListener("click", (e) => {
                 // Only close if clicking directly on the dialog (backdrop), not its children
                 if (e.target === dialog) {
                     this.closeDropdown();
@@ -1092,10 +1124,7 @@ export class TyMultiselect extends TyComponent {
         }
         // Setup keyboard handler
         this._keyboardHandler = this.handleKeyboard.bind(this);
-        document.addEventListener('keydown', this._keyboardHandler);
-        // Listen for dismiss events from selected tags
-        this._tagDismissHandler = this.handleTagDismiss.bind(this);
-        this.addEventListener('dismiss', this._tagDismissHandler);
+        document.addEventListener("keydown", this._keyboardHandler);
     }
     /**
      * Build CSS class list for stub
@@ -1103,8 +1132,10 @@ export class TyMultiselect extends TyComponent {
     buildStubClasses() {
         const classes = [this._size];
         if (this._disabled)
-            classes.push('disabled');
-        return classes.join(' ');
+            classes.push("disabled");
+        if (this._compact)
+            classes.push("compact");
+        return classes.join(" ");
     }
     /**
      * Render desktop mode with dialog
@@ -1112,37 +1143,44 @@ export class TyMultiselect extends TyComponent {
     renderDesktop() {
         const shadow = this.shadowRoot;
         // Only set innerHTML and setup listeners if container doesn't exist
-        if (!shadow.querySelector('.multiselect-container')) {
+        if (!shadow.querySelector(".multiselect-container")) {
             const stubClasses = this.buildStubClasses();
-            const labelHtml = this._label ? `
+            const labelHtml = this._label
+                ? `
         <label class="ty-field-label">
           ${this._label}
-          ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
+          ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
         </label>
-      ` : '';
-            const searchPlaceholder = 'Search...';
+      `
+                : "";
+            const searchPlaceholder = "Search...";
             shadow.innerHTML = `
         <div class="multiselect-container dropdown-mode-desktop">
           ${labelHtml}
           <div class="dropdown-wrapper">
             <div class="dropdown-stub multiselect-stub ${stubClasses}"
-                 ${this._disabled ? 'disabled' : ''}>
-              <slot name="start"></slot>
-              <div class="multiselect-chips">
+                 ${this._disabled ? "disabled" : ""}>
+              <slot name="trigger">
+                <slot name="start"></slot>
                 <slot name="selected"></slot>
-              </div>
-              <span class="dropdown-placeholder">${this._placeholder}</span>
-              <div class="dropdown-chevron">
-                ${CHEVRON_DOWN_SVG}
-              </div>
+                <span class="dropdown-placeholder">${this._placeholder}</span>
+                <span class="select-count" hidden></span>
+                <slot name="end"></slot>
+                <div class="dropdown-chevron">
+                  ${CHEVRON_DOWN_SVG}
+                </div>
+              </slot>
             </div>
             <dialog class="dropdown-dialog">
               <div class="dropdown-header">
-                <input 
-                  class="dropdown-search-input ${this._size}" 
+                <div class="dropdown-search-icon" aria-hidden="true">
+                  ${SEARCH_ICON_SVG}
+                </div>
+                <input
+                  class="dropdown-search-input ${this._size}"
                   type="text"
                   placeholder="${searchPlaceholder}"
-                  ${this._disabled ? 'disabled' : ''}
+                  ${this._disabled ? "disabled" : ""}
                 />
                 <div class="dropdown-search-chevron">
                   ${CHEVRON_DOWN_SVG}
@@ -1178,31 +1216,38 @@ export class TyMultiselect extends TyComponent {
     renderMobile() {
         const shadow = this.shadowRoot;
         // Only set innerHTML and setup listeners if container doesn't exist
-        if (!shadow.querySelector('.multiselect-container')) {
+        if (!shadow.querySelector(".multiselect-container")) {
             const stubClasses = this.buildStubClasses();
-            const labelHtml = this._label ? `
+            const labelHtml = this._label
+                ? `
         <label class="ty-field-label">
           ${this._label}
-          ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}
+          ${this._required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ""}
         </label>
-      ` : '';
+      `
+                : "";
             // Close button SVG (X icon)
             const closeButtonSvg = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <line x1="18" y1="6" x2="6" y2="18"></line>
         <line x1="6" y1="6" x2="18" y2="18"></line>
       </svg>`;
             // Search placeholder: "Search <label>..." or just "Search..."
-            const searchPlaceholder = this._label ? `Search ${this._label}...` : 'Search...';
+            const searchPlaceholder = this._label
+                ? `Search ${this._label}...`
+                : "Search...";
             // Search is always available — only the mode (internal vs external) varies.
             const searchHeaderHtml = `
         <div class="mobile-search-header">
-          ${this._label ? `<span class="mobile-header-label">${this._label}</span>` : ''}
+          ${this._label ? `<span class="mobile-header-label">${this._label}</span>` : ""}
           <div class="mobile-header-content">
+            <div class="dropdown-search-icon" aria-hidden="true">
+              ${SEARCH_ICON_SVG}
+            </div>
             <input
               class="mobile-search-input ${this._size}"
               type="text"
               placeholder="${searchPlaceholder}"
-              ${this._disabled ? 'disabled' : ''}
+              ${this._disabled ? "disabled" : ""}
             />
             <button class="mobile-close-button" type="button" aria-label="Close">
               ${closeButtonSvg}
@@ -1215,35 +1260,27 @@ export class TyMultiselect extends TyComponent {
           ${labelHtml}
           <div class="dropdown-wrapper">
             <div class="dropdown-stub multiselect-stub ${stubClasses}"
-                 ${this._disabled ? 'disabled' : ''}>
-              <slot name="start"></slot>
-              <div class="multiselect-chips">
-                <slot id="stub-slot" name="selected"></slot>
-              </div>
-              <span class="dropdown-placeholder">${this._placeholder}</span>
-              <div class="dropdown-chevron">
-                ${CHEVRON_DOWN_SVG}
-              </div>
+                 ${this._disabled ? "disabled" : ""}>
+              <slot name="trigger">
+                <slot name="start"></slot>
+                <slot name="selected"></slot>
+                <span class="dropdown-placeholder">${this._placeholder}</span>
+                <span class="select-count" hidden></span>
+                <slot name="end"></slot>
+                <div class="dropdown-chevron">
+                  ${CHEVRON_DOWN_SVG}
+                </div>
+              </slot>
             </div>
 
             <dialog class="mobile-dialog">
               <div class="mobile-dialog-content">
-                
+
                 <!-- HEADER (matches dropdown.ts) -->
                 ${searchHeaderHtml}
-                
-                <!-- BODY: pinned selected strip + filter list -->
-                <div class="mobile-body">
 
-                  <!-- SELECTED STRIP (pinned, collapses when empty) -->
-                  <div class="mobile-selected-section" data-empty="true">
-                    <div class="section-header">
-                      <span class="section-title">${this._selectedLabel} <span class="section-count">(0)</span></span>
-                    </div>
-                    <div class="section-content">
-                      <slot id="mobile-slot" name="selected"></slot>
-                    </div>
-                  </div>
+                <!-- BODY: options list with toggleable selected state -->
+                <div class="mobile-body">
 
                   <!-- AVAILABLE LIST (always visible, takes remaining space) -->
                   <div class="mobile-available-section" data-empty="false">
@@ -1280,31 +1317,30 @@ export class TyMultiselect extends TyComponent {
      */
     setupMobileEventListeners() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector('.multiselect-stub');
-        const optionsSlot = shadow.querySelector('#options-slot');
-        const searchInput = shadow.querySelector('.mobile-search-input');
-        const closeButton = shadow.querySelector('.mobile-close-button');
-        const dialog = shadow.querySelector('.mobile-dialog');
+        const stub = shadow.querySelector(".multiselect-stub");
+        const optionsSlot = shadow.querySelector("#options-slot");
+        const searchInput = shadow.querySelector(".mobile-search-input");
+        const closeButton = shadow.querySelector(".mobile-close-button");
+        const dialog = shadow.querySelector(".mobile-dialog");
         if (stub) {
-            stub.addEventListener('click', (e) => this.handleMobileStubClick(e));
+            stub.addEventListener("click", (e) => this.handleMobileStubClick(e));
         }
+        this.setupTriggerSlot();
         // Add tag click handler to slot
         if (optionsSlot) {
-            optionsSlot.addEventListener('click', (e) => this.handleMobileTagClick(e));
+            optionsSlot.addEventListener("click", (e) => this.handleMobileTagClick(e));
         }
         // Add search input handlers (if searchable)
         if (searchInput) {
-            searchInput.addEventListener('input', (e) => this.handleSearchInput(e));
+            searchInput.addEventListener("input", (e) => this.handleSearchInput(e));
         }
         // Close button click
         if (closeButton) {
-            closeButton.addEventListener('click', () => this.closeMobileModal());
+            closeButton.addEventListener("click", () => this.closeMobileModal());
         }
-        this._tagDismissHandler = this.handleTagDismiss.bind(this);
-        this.addEventListener('dismiss', this._tagDismissHandler);
         // Backdrop click to close (native dialog behavior)
         if (dialog) {
-            dialog.addEventListener('click', (e) => {
+            dialog.addEventListener("click", (e) => {
                 // Only close if clicking directly on the dialog element (backdrop)
                 // Not if clicking on its children (dialog-content)
                 if (e.target === dialog) {
@@ -1312,7 +1348,7 @@ export class TyMultiselect extends TyComponent {
                 }
             });
             // Also handle Escape key via cancel event
-            dialog.addEventListener('cancel', (e) => {
+            dialog.addEventListener("cancel", (e) => {
                 e.preventDefault(); // Prevent default to handle it our way
                 this.closeMobileModal();
             });
@@ -1327,10 +1363,6 @@ export class TyMultiselect extends TyComponent {
         if (this._disabled || this._readonly) {
             return;
         }
-        // Don't open if all tags are already selected
-        if (this.allTagsSelected()) {
-            return;
-        }
         this.openMobileModal();
     }
     /**
@@ -1342,130 +1374,241 @@ export class TyMultiselect extends TyComponent {
         this.handleTagClick(e);
     }
     /**
-     * Update mobile selected section state (collapsed view, empty states, etc.)
+     * Update mobile options section state (count, empty state)
      */
     updateMobileSelectedState() {
-        if (this._state.mode !== 'mobile')
+        if (this._state.mode !== "mobile")
             return;
         const shadow = this.shadowRoot;
-        const selectedSection = shadow.querySelector('.mobile-selected-section');
-        const availableSection = shadow.querySelector('.mobile-available-section');
-        const sectionCountSpan = shadow.querySelector('.section-count');
-        if (selectedSection) {
-            const selectedCount = this._state.selectedValues.length;
-            const hasSelected = selectedCount > 0;
-            selectedSection.setAttribute('data-empty', String(!hasSelected));
-            // Update header count
-            if (sectionCountSpan) {
-                sectionCountSpan.textContent = `(${selectedCount})`;
-            }
-        }
+        const availableSection = shadow.querySelector(".mobile-available-section");
         if (availableSection) {
-            // Count *visible* available tags — tags hidden by search filtering count as 0
-            const visibleAvailable = this.getTagElements().filter(tag => !tag.hasAttribute('selected') && !tag.hasAttribute('hidden')).length;
-            availableSection.setAttribute('data-empty', String(visibleAvailable === 0));
+            // Count *visible* options — options hidden by search filtering count as 0
+            const visibleAvailable = this.getTagElements().filter((tag) => !tag.hasAttribute("hidden")).length;
+            availableSection.setAttribute("data-empty", String(visibleAvailable === 0));
             // Update available header count
-            const availableTitleSpan = shadow.querySelector('.mobile-available-section .section-title');
+            const availableTitleSpan = shadow.querySelector(".mobile-available-section .section-title");
             if (availableTitleSpan) {
                 availableTitleSpan.textContent = `${this._availableLabel} (${visibleAvailable})`;
             }
         }
     }
     /**
-     * Update selection display (show/hide placeholder)
-     * Matches dropdown.ts pattern - uses CSS via has-selection class
+     * Update selection display: count badge next to the placeholder
+     */
+    /**
+     * Should the popup show a search row? external-search always (the input is
+     * the mechanism); searchable always/never wins otherwise; 'auto' shows it
+     * only when the option list is long enough to need filtering.
+     */
+    shouldShowSearch() {
+        if (this._externalSearch)
+            return true;
+        if (this._searchable === "always")
+            return true;
+        if (this._searchable === "never")
+            return false;
+        return this.getTagElements().length > SEARCH_AUTO_THRESHOLD;
+    }
+    /**
+     * Toggle the search row (desktop header / mobile input) per shouldShowSearch.
+     */
+    updateSearchVisibility() {
+        const shadow = this.shadowRoot;
+        if (!shadow)
+            return;
+        const show = this.shouldShowSearch();
+        const header = shadow.querySelector(".dropdown-header");
+        if (header)
+            header.hidden = !show;
+        // Mobile keeps its header (label + close button); only the input+icon hide
+        const mobileInput = shadow.querySelector(".mobile-search-input");
+        if (mobileInput)
+            mobileInput.hidden = !show;
+        const mobileIcon = shadow.querySelector(".mobile-header-content .dropdown-search-icon");
+        if (mobileIcon)
+            mobileIcon.hidden = !show;
+    }
+    /**
+     * Selection summary appropriate to cardinality × skin:
+     * - single (field or compact): the selected OPTION itself — cloned into
+     *   slot="selected" so rich HTML options display intact (dropdown parity);
+     *   placeholder when empty
+     * - multiple + field: joined labels (ellipsis via CSS), or placeholder
+     * - multiple + compact: placeholder + count badge
      */
     updateSelectionDisplay() {
         const shadow = this.shadowRoot;
-        const stub = shadow.querySelector('.multiselect-stub');
+        const stub = shadow.querySelector(".multiselect-stub");
         if (!stub)
             return;
-        const tags = this.getTagElements();
-        const selectedTags = tags.filter(tag => tag.hasAttribute('selected'));
-        const hasSelected = selectedTags.length > 0;
-        if (hasSelected) {
-            stub.classList.add('has-selection');
+        // Selection comes from STATE, not from scanning option elements —
+        // external search replaces the option children, and the selection must
+        // survive even when the current results don't include the selected value.
+        const values = this._state.selectedValues;
+        const count = values.length;
+        stub.classList.toggle("has-selection", count > 0);
+        stub.classList.toggle("compact", this._compact);
+        const badge = stub.querySelector(".select-count");
+        if (badge) {
+            badge.textContent = String(count);
+            badge.hidden = count === 0 || !this._multiple || !this._compact;
         }
-        else {
-            stub.classList.remove('has-selection');
+        // Single select: project the selected option into the stub as a clone
+        // (rich HTML content survives — same mechanism as ty-dropdown).
+        const wantClone = !this._multiple && count > 0 ? values[0] : null;
+        this.syncSelectedClone(wantClone);
+        stub.classList.toggle("has-clone", wantClone !== null);
+        const textEl = stub.querySelector(".dropdown-placeholder");
+        if (textEl) {
+            // The clone replaces the text display entirely in single mode
+            textEl.hidden = wantClone !== null;
+            const showLabels = count > 0 && this._multiple && !this._compact;
+            if (showLabels) {
+                textEl.textContent = this.getSelectedItems(values)
+                    .map((i) => i.label)
+                    .join(", ");
+                textEl.classList.remove("placeholder-shown");
+            }
+            else {
+                textEl.textContent = this._placeholder;
+                textEl.classList.add("placeholder-shown");
+            }
+        }
+    }
+    /**
+     * Keep exactly one display clone (slot="selected", marked `cloned`) in our
+     * light DOM matching the given value — or none. The clone never counts as
+     * an option (getTagElements filters [cloned]) and ty-option's own
+     * :host([cloned]) styling strips its list-row chrome.
+     */
+    syncSelectedClone(value) {
+        const existing = this.querySelector(':scope > [cloned][slot="selected"]');
+        if (existing?.getAttribute("value") === value) {
+            this._selectedClone = existing;
+            return; // already right
+        }
+        existing?.remove();
+        if (value === null) {
+            this._selectedClone = null;
+            return;
+        }
+        const option = this.getTagElements().find((el) => this.getTagData(el).value === value);
+        if (option) {
+            const clone = option.cloneNode(true);
+            clone.removeAttribute("selected"); // no tick/selected styling in the stub
+            clone.setAttribute("slot", "selected");
+            clone.setAttribute("cloned", "true");
+            this.appendChild(clone);
+            this._selectedClone = clone;
+        }
+        else if (this._selectedClone?.getAttribute("value") === value) {
+            // The option list no longer contains the selection (external search
+            // swapped the children — possibly wiping our clone with them). Restore
+            // the saved display clone so the selection stays visible.
+            const restored = this._selectedClone.cloneNode(true);
+            this.appendChild(restored);
+            this._selectedClone = restored;
         }
     }
     // ============================================================================
     // PUBLIC API - Getters/Setters
     // ============================================================================
+    /**
+     * Deselect a value programmatically WITH a change event.
+     * Used by out-of-band chip displays (ty-selected-tags) so dismissing a chip
+     * fires change like any in-popup interaction (HTMX hx-trigger="change" etc.).
+     */
+    deselectValue(value) {
+        const current = this.getSelectedValues();
+        if (!current.includes(value))
+            return;
+        this.updateComponentValue(current.filter((v) => v !== value), true, "remove", value);
+    }
     get value() {
         // Always read from DOM - tags with 'selected' attribute are source of truth
-        return this.getSelectedValues().join(',');
+        return this.getSelectedValues().join(",");
     }
     set value(val) {
-        this.setProperty('value', val);
+        this.setProperty("value", val);
     }
     get name() {
-        return this.getProperty('name');
+        return this.getProperty("name");
     }
     set name(val) {
-        this.setProperty('name', val);
+        this.setProperty("name", val);
+    }
+    get multiple() {
+        return this.getProperty("multiple");
+    }
+    set multiple(value) {
+        this.setProperty("multiple", value);
+    }
+    get compact() {
+        return this.getProperty("compact");
+    }
+    set compact(value) {
+        this.setProperty("compact", value);
     }
     get placeholder() {
-        return this.getProperty('placeholder');
+        return this.getProperty("placeholder");
     }
     set placeholder(val) {
-        this.setProperty('placeholder', val);
+        this.setProperty("placeholder", val);
     }
     get label() {
-        return this.getProperty('label');
+        return this.getProperty("label");
     }
     set label(val) {
-        this.setProperty('label', val);
+        this.setProperty("label", val);
     }
     get disabled() {
-        return this.getProperty('disabled');
+        return this.getProperty("disabled");
     }
     set disabled(value) {
-        this.setProperty('disabled', value);
+        this.setProperty("disabled", value);
     }
     get loading() {
-        return this.getProperty('loading');
+        return this.getProperty("loading");
     }
     set loading(value) {
-        this.setProperty('loading', value);
+        this.setProperty("loading", value);
     }
     get readonly() {
-        return this.getProperty('readonly');
+        return this.getProperty("readonly");
     }
     set readonly(value) {
-        this.setProperty('readonly', value);
+        this.setProperty("readonly", value);
     }
     get required() {
-        return this.getProperty('required');
+        return this.getProperty("required");
     }
     set required(value) {
-        this.setProperty('required', value);
+        this.setProperty("required", value);
+    }
+    get searchable() {
+        return this.getProperty("searchable");
+    }
+    set searchable(value) {
+        this.setProperty("searchable", value);
     }
     get externalSearch() {
-        return this.getProperty('externalSearch');
+        return this.getProperty("externalSearch");
     }
     set externalSearch(value) {
-        this.setProperty('externalSearch', value);
+        this.setProperty("externalSearch", value);
     }
     get debounce() {
-        return this.getProperty('debounce');
+        return this.getProperty("debounce");
     }
     set debounce(value) {
-        const numValue = typeof value === 'string' ? parseInt(value, 10) : value;
-        this.setProperty('debounce', numValue);
+        const numValue = typeof value === "string" ? parseInt(value, 10) : value;
+        this.setProperty("debounce", numValue);
     }
     get size() {
-        return this.getProperty('size');
+        return this.getProperty("size");
     }
     set size(value) {
-        this.setProperty('size', value);
-    }
-    get flavor() {
-        return this.getProperty('flavor');
-    }
-    set flavor(value) {
-        this.setProperty('flavor', value);
+        this.setProperty("size", value);
     }
     get form() {
         return this._internals.form;
@@ -1474,90 +1617,104 @@ export class TyMultiselect extends TyComponent {
 // ============================================================================
 // PROPERTY CONFIGURATION - Declarative property lifecycle
 // ============================================================================
-TyMultiselect.properties = {
+TySelect.properties = {
     value: {
-        type: 'string',
+        type: "string",
         visual: true,
         formValue: true,
         emitChange: false,
-        default: '',
+        default: "",
         coerce: (v) => {
             // Handle array input (from React, Reagent, etc.)
             if (Array.isArray(v)) {
-                return v.join(',');
+                return v.join(",");
             }
             // Handle null/undefined
             if (v === null || v === undefined) {
-                return '';
+                return "";
             }
             // String already
             return String(v);
-        }
+        },
     },
     name: {
-        type: 'string',
-        default: ''
+        type: "string",
+        default: "",
+    },
+    // Cardinality — native <select> semantics: absent = single select
+    multiple: {
+        type: "boolean",
+        visual: true,
+        default: false,
+    },
+    // Skin — absent = form field (matches ty-input); present = compact
+    // content-hugging trigger (toolbars, filter bars)
+    compact: {
+        type: "boolean",
+        visual: true,
+        default: false,
     },
     placeholder: {
-        type: 'string',
+        type: "string",
         visual: true,
-        default: 'Select options...'
+        default: "Select...",
     },
     label: {
-        type: 'string',
+        type: "string",
         visual: true,
-        default: ''
+        default: "",
     },
     disabled: {
-        type: 'boolean',
+        type: "boolean",
         visual: true,
-        default: false
+        default: false,
     },
     readonly: {
-        type: 'boolean',
+        type: "boolean",
         visual: true,
-        default: false
+        default: false,
     },
     required: {
-        type: 'boolean',
+        type: "boolean",
         visual: true,
-        default: false
+        default: false,
     },
     externalSearch: {
-        type: 'boolean',
+        type: "boolean",
         visual: true,
         default: false,
-        aliases: { 'external-search': true }
+        aliases: { "external-search": true },
     },
-    size: {
-        type: 'string',
+    // Search row visibility: 'auto' (default) shows it only for long option
+    // lists; searchable / searchable="true" forces it on, searchable="false"
+    // off. external-search always shows it (the input IS the mechanism).
+    searchable: {
+        type: "string",
         visual: true,
-        default: 'md',
-        validate: (v) => ['sm', 'md', 'lg'].includes(v),
+        default: "auto",
         coerce: (v) => {
-            if (!['sm', 'md', 'lg'].includes(v)) {
-                console.warn(`[ty-multiselect] Invalid size. Using md.`);
-                return 'md';
-            }
-            return v;
-        }
+            if (v === true || v === "" || v === "true")
+                return "always";
+            if (v === false || v === "false")
+                return "never";
+            return "auto";
+        },
     },
-    flavor: {
-        type: 'string',
+    size: {
+        type: "string",
         visual: true,
-        default: 'neutral',
-        validate: (v) => ['primary', 'secondary', 'success', 'danger', 'warning', 'neutral'].includes(v),
+        default: "md",
+        validate: (v) => ["sm", "md", "lg"].includes(v),
         coerce: (v) => {
-            const valid = ['primary', 'secondary', 'success', 'danger', 'warning', 'neutral'];
-            if (!valid.includes(v)) {
-                console.warn(`[ty-multiselect] Invalid flavor. Using neutral.`);
-                return 'neutral';
+            if (!["sm", "md", "lg"].includes(v)) {
+                console.warn(`[ty-select] Invalid size. Using md.`);
+                return "md";
             }
             return v;
-        }
+        },
     },
     debounce: {
-        type: 'number',
+        type: "number",
         default: 0,
         validate: (v) => v >= 0 && v <= 5000,
         coerce: (v) => {
@@ -1565,31 +1722,26 @@ TyMultiselect.properties = {
             if (isNaN(num))
                 return 0;
             return Math.max(0, Math.min(5000, num));
-        }
-    },
-    'selected-label': {
-        type: 'string',
-        visual: true,
-        default: 'Selected'
+        },
     },
-    'available-label': {
-        type: 'string',
+    "available-label": {
+        type: "string",
         visual: true,
-        default: 'Available'
+        default: "Available",
     },
-    'no-options-message': {
-        type: 'string',
+    "no-options-message": {
+        type: "string",
         visual: true,
-        default: 'No options available'
+        default: "No options available",
     },
     loading: {
-        type: 'boolean',
+        type: "boolean",
         visual: true,
-        default: false
-    }
+        default: false,
+    },
 };
 // Register the custom element
-if (!customElements.get('ty-multiselect')) {
-    customElements.define('ty-multiselect', TyMultiselect);
+if (!customElements.get("ty-select")) {
+    customElements.define("ty-select", TySelect);
 }
-//# sourceMappingURL=multiselect.js.map
+//# sourceMappingURL=select.js.map