@styloviz/select-dropdown 0.1.1

package/fesm2022/styloviz-select-dropdown.mjs

@@ -0,0 +1,638 @@
+import * as i0 from '@angular/core';
+import { model, input, output, signal, computed, viewChild, inject, ElementRef, ApplicationRef, effect, TemplateRef, forwardRef, HostListener, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/** Process-wide counter for generating unique fallback ids. */
+let _svSelectUid = 0;
+/**
+ * SelectDropdown — A fully-featured, accessible select component for dashboards.
+ *
+ * Features:
+ * - Single and multi-select modes via the `multiple` input
+ * - Flat option list and grouped option list (or both together)
+ * - Typeahead search with query filtering
+ * - Keyboard navigation (↑ ↓ Enter Escape Tab) with scroll-into-view
+ * - Chip display for multi-select (up to 3 visible, +N overflow badge)
+ * - Clearable selection via an inline × button
+ * - Avatar / icon / sublabel / badge per option row
+ * - Max-selection cap (`maxSelected`) with disabled-state enforcement
+ * - 3 sizes × 3 visual variants (default · filled · flushed)
+ * - Full `ControlValueAccessor` integration — works with `FormControl` and `ngModel`
+ * - `setDisabledState()` honours both `[disabled]` input and `formControl.disable()`
+ * - Full dark-mode support
+ * - Accessible: `role="combobox"`, `aria-expanded`, `aria-selected`, `aria-disabled`
+ */
+class SvSelectDropdownComponent {
+    // ── Inputs ─────────────────────────────────────────────────────────────────
+    /** Selected value(s) — string for single, string[] for multiple (two-way). */
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Flat list of options. Use `groups` instead for sectioned lists. */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Grouped options with section labels. */
+    groups = input([], ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Placeholder shown when nothing is selected. @default 'Select an option' */
+    placeholder = input('Select an option', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Field label. */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Helper text shown below the field. */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Error message; puts the field in an error state when set. */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    /** Field size: sm, md or lg. @default 'md' */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Visual variant. @default 'default' */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Allow selecting multiple options. @default false */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Show a search box to filter options. @default false */
+    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    /** Placeholder for the search box. @default 'Search…' */
+    searchPlaceholder = input('Search…', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Text shown when a search yields no matches. @default 'No results found' */
+    noResultsText = input('No results found', ...(ngDevMode ? [{ debugName: "noResultsText" }] : /* istanbul ignore next */ []));
+    /** Show a clear (×) control. @default false */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
+    /** Disable the field. @default false */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Show a loading state. @default false */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Mark the field as required. @default false */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Show an "optional" tag next to the label. @default false */
+    optionalTag = input(false, ...(ngDevMode ? [{ debugName: "optionalTag" }] : /* istanbul ignore next */ []));
+    /** Max selectable options in multiple mode (0 = unlimited). @default 0 */
+    maxSelected = input(0, ...(ngDevMode ? [{ debugName: "maxSelected" }] : /* istanbul ignore next */ []));
+    /** Explicit id for the control (for external <label for>). */
+    inputId = input('', ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the trigger when there is no visible `label`.
+     * Use this instead of a native `aria-label` on the host element (which is
+     * not a labelable role and would be an ARIA violation). Falls back to the
+     * `placeholder` so the combobox always has an accessible name.
+     */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Extra CSS classes for the control. */
+    customClass = input('', ...(ngDevMode ? [{ debugName: "customClass" }] : /* istanbul ignore next */ []));
+    // ── Outputs ────────────────────────────────────────────────────────────────
+    /** Emitted with the new selection (string or string[]). */
+    selectionChange = output();
+    /** Emitted when the dropdown opens. */
+    dropdownOpen = output();
+    /** Emitted when the dropdown closes. */
+    dropdownClose = output();
+    /** Emitted with the search query whenever it changes (for remote filtering). */
+    searchChange = output();
+    // ── Internal state ─────────────────────────────────────────────────────────
+    isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    /** How many chips to render; 999 = uncapped (all visible). */
+    visibleChipCount = signal(999, ...(ngDevMode ? [{ debugName: "visibleChipCount" }] : /* istanbul ignore next */ []));
+    // ── Panel portal style (set in computePanelPosition, consumed by the portal template) ──
+    panelStyle = signal({}, ...(ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []));
+    /** Tracks disabled state set programmatically via formControl.disable(). */
+    _formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Merged disabled state — true when either the [disabled] input or the
+     * parent FormControl is disabled. Use this everywhere instead of disabled().
+     */
+    resolvedDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "resolvedDisabled" }] : /* istanbul ignore next */ []));
+    /** Stable unique fallback id so label + ARIA associations always work. */
+    _autoId = `sv-select-${++_svSelectUid}`;
+    /** Effective id used by the combobox, label and ARIA references. */
+    resolvedId = computed(() => this.inputId() || this._autoId, ...(ngDevMode ? [{ debugName: "resolvedId" }] : /* istanbul ignore next */ []));
+    /** id of the listbox popup (referenced by aria-controls). */
+    listboxId = computed(() => `${this.resolvedId()}-listbox`, ...(ngDevMode ? [{ debugName: "listboxId" }] : /* istanbul ignore next */ []));
+    /** id of the visible label (referenced by aria-labelledby). */
+    labelId = computed(() => `${this.resolvedId()}-label`, ...(ngDevMode ? [{ debugName: "labelId" }] : /* istanbul ignore next */ []));
+    /** id of the hint/error description (referenced by aria-describedby). */
+    describedById = computed(() => `${this.resolvedId()}-desc`, ...(ngDevMode ? [{ debugName: "describedById" }] : /* istanbul ignore next */ []));
+    /** True when a hint or error description is rendered. */
+    hasDescription = computed(() => !!this.errorMessage() || !!this.hint(), ...(ngDevMode ? [{ debugName: "hasDescription" }] : /* istanbul ignore next */ []));
+    /** DOM id for an option row — used by aria-activedescendant. */
+    optionDomId(value) {
+        return `${this.resolvedId()}-opt-${value.replace(/[^a-zA-Z0-9_-]/g, '-')}`;
+    }
+    /** id of the currently keyboard-active option, or null. */
+    activeDescendantId = computed(() => {
+        const active = this.activeOption();
+        return active ? this.optionDomId(active.value) : null;
+    }, ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    panelTpl;
+    searchRef = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "searchRef" }] : /* istanbul ignore next */ []));
+    triggerRef = viewChild('trigger', ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    listRef = viewChild('listbox', ...(ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []));
+    chipWrapperRef = viewChild('chipWrapper', ...(ngDevMode ? [{ debugName: "chipWrapperRef" }] : /* istanbul ignore next */ []));
+    host = inject((ElementRef));
+    appRef = inject(ApplicationRef);
+    /** Container div appended to document.body while the panel is open. */
+    portalEl = null;
+    /** Embedded view holding the panel template nodes. */
+    portalView = null;
+    /** Capture-phase scroll handler — registered once, removed on destroy. */
+    _boundScrollClose;
+    constructor() {
+        // When the selected values change in uncapped multi-mode, reset visible
+        // count to all, then measure which chips actually fit after the next render.
+        effect(() => {
+            this.selectedValues(); // track
+            if (this.multiple() && !this.maxSelected()) {
+                this.visibleChipCount.set(999);
+                setTimeout(() => this.measureVisibleChips());
+            }
+        });
+        this._boundScrollClose = (e) => {
+            if (!this.isOpen())
+                return;
+            if (this.portalEl?.contains(e.target))
+                return;
+            this.closeDropdown();
+        };
+        document.addEventListener('scroll', this._boundScrollClose, { capture: true, passive: true });
+    }
+    // CVA callbacks
+    onChange = () => { };
+    onTouched = () => { };
+    // ── Flatten all options (groups + flat) ────────────────────────────────────
+    allOptions = computed(() => {
+        const flat = this.options();
+        const grouped = this.groups().flatMap(g => g.options);
+        return [...flat, ...grouped];
+    }, ...(ngDevMode ? [{ debugName: "allOptions" }] : /* istanbul ignore next */ []));
+    // ── Filtered options / groups ──────────────────────────────────────────────
+    filteredOptions = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+        const opts = this.options();
+        if (!q)
+            return opts;
+        return opts.filter(o => o.label.toLowerCase().includes(q) || o.sublabel?.toLowerCase().includes(q));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    filteredGroups = computed(() => {
+        const q = this.searchQuery().toLowerCase().trim();
+        const grps = this.groups();
+        if (!q)
+            return grps;
+        return grps
+            .map(g => ({
+            ...g,
+            options: g.options.filter(o => o.label.toLowerCase().includes(q) || o.sublabel?.toLowerCase().includes(q)),
+        }))
+            .filter(g => g.options.length > 0);
+    }, ...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
+    noResults = computed(() => this.filteredOptions().length === 0 && this.filteredGroups().length === 0, ...(ngDevMode ? [{ debugName: "noResults" }] : /* istanbul ignore next */ []));
+    // ── Flat navigable list (for keyboard nav) ─────────────────────────────────
+    navigableOptions = computed(() => [
+        ...this.filteredOptions(),
+        ...this.filteredGroups().flatMap(g => g.options),
+    ], ...(ngDevMode ? [{ debugName: "navigableOptions" }] : /* istanbul ignore next */ []));
+    // ── Selected option helpers ────────────────────────────────────────────────
+    selectedValues = computed(() => {
+        const v = this.value();
+        if (Array.isArray(v))
+            return v;
+        return v ? [v] : [];
+    }, ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+    selectedOptions = computed(() => this.allOptions().filter(o => this.selectedValues().includes(o.value)), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+    displayLabel = computed(() => {
+        const sel = this.selectedOptions();
+        if (!sel.length)
+            return '';
+        if (this.multiple())
+            return '';
+        return sel[0].label;
+    }, ...(ngDevMode ? [{ debugName: "displayLabel" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => this.selectedValues().length > 0, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    showClear = computed(() => this.clearable() && this.hasValue() && !this.resolvedDisabled() && !this.loading(), ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    // ── Overflow chip count ────────────────────────────────────────────────────
+    visibleChips = computed(() => {
+        const sel = this.selectedOptions();
+        // When maxSelected is set use legacy cap of 3; otherwise use measured count.
+        const cap = this.maxSelected() > 0 ? 3 : this.visibleChipCount();
+        return sel.slice(0, cap);
+    }, ...(ngDevMode ? [{ debugName: "visibleChips" }] : /* istanbul ignore next */ []));
+    overflowCount = computed(() => {
+        const total = this.selectedOptions().length;
+        const cap = this.maxSelected() > 0 ? 3 : this.visibleChipCount();
+        return Math.max(0, total - cap);
+    }, ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
+    // ── Max reached ───────────────────────────────────────────────────────────
+    maxReached = computed(() => this.multiple() && this.maxSelected() > 0 && this.selectedValues().length >= this.maxSelected(), ...(ngDevMode ? [{ debugName: "maxReached" }] : /* istanbul ignore next */ []));
+    // ── Trigger label ─────────────────────────────────────────────────────────
+    triggerText = computed(() => {
+        if (this.multiple())
+            return '';
+        return this.displayLabel() || '';
+    }, ...(ngDevMode ? [{ debugName: "triggerText" }] : /* istanbul ignore next */ []));
+    // ── CSS helpers ───────────────────────────────────────────────────────────
+    labelSizeClass = computed(() => ({
+        sm: 'text-xs',
+        md: 'text-sm',
+        lg: 'text-base',
+    })[this.size()], ...(ngDevMode ? [{ debugName: "labelSizeClass" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => {
+        const s = this.size();
+        const v = this.variant();
+        const err = !!this.errorMessage();
+        const focus = this.isFocused();
+        const dis = this.resolvedDisabled();
+        const isFloat = false;
+        const heights = isFloat
+            ? { sm: 'min-h-12', md: 'min-h-14', lg: 'min-h-16' }
+            : { sm: 'min-h-8', md: 'min-h-10', lg: 'min-h-11' };
+        const pads = isFloat
+            ? { sm: 'px-2.5 pt-1 pb-1', md: 'px-3 pt-3 pb-2', lg: 'px-4 pt-3 pb-2' }
+            : { sm: 'px-2.5 py-1', md: 'px-3 py-2', lg: 'px-4 py-2.5' };
+        const text = { sm: 'text-xs', md: 'text-sm', lg: 'text-base' };
+        const base = [
+            'relative flex w-full items-center gap-2 text-left transition-all duration-150',
+            'disabled:cursor-not-allowed disabled:opacity-50',
+            heights[s], pads[s], text[s],
+        ];
+        if (v === 'flushed') {
+            base.push('rounded-none border-0 border-b bg-transparent px-0', err
+                ? 'border-red-500 dark:border-red-400'
+                : focus
+                    ? 'border-blue-500 dark:border-blue-400'
+                    : 'border-gray-300 dark:border-gray-600', 'focus:outline-none');
+        }
+        else if (v === 'filled') {
+            base.push('rounded-md border', 'bg-gray-100 dark:bg-gray-800/60', err
+                ? 'border-red-400 dark:border-red-500'
+                : focus
+                    ? 'border-blue-500 ring-2 ring-blue-500/20 dark:border-blue-400 dark:ring-blue-400/20'
+                    : 'border-transparent hover:border-gray-300 dark:hover:border-gray-600', 'focus:outline-none');
+        }
+        else {
+            // default and floating — both use a bordered card style
+            base.push('rounded-md border bg-white dark:bg-gray-900', err
+                ? 'border-red-400 dark:border-red-500 ring-1 ring-red-400/30'
+                : focus
+                    ? 'border-blue-500 ring-2 ring-blue-500/20 dark:border-blue-400 dark:ring-blue-400/20'
+                    : 'border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-600', 'focus:outline-none');
+        }
+        if (dis)
+            base.push('bg-gray-50 dark:bg-gray-800/40');
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    iconSizeClass = computed(() => ({ sm: 'h-3.5 w-3.5', md: 'h-4 w-4', lg: 'h-5 w-5' })[this.size()], ...(ngDevMode ? [{ debugName: "iconSizeClass" }] : /* istanbul ignore next */ []));
+    chevronSizeClass = computed(() => ({ sm: 'h-3 w-3', md: 'h-4 w-4', lg: 'h-4 w-4' })[this.size()], ...(ngDevMode ? [{ debugName: "chevronSizeClass" }] : /* istanbul ignore next */ []));
+    chipTextClass = computed(() => ({ sm: 'text-xs', md: 'text-xs', lg: 'text-sm' })[this.size()], ...(ngDevMode ? [{ debugName: "chipTextClass" }] : /* istanbul ignore next */ []));
+    optionPadClass = computed(() => ({ sm: 'px-2.5 py-1.5', md: 'px-3 py-2', lg: 'px-4 py-2.5' })[this.size()], ...(ngDevMode ? [{ debugName: "optionPadClass" }] : /* istanbul ignore next */ []));
+    optionTextClass = computed(() => ({ sm: 'text-xs', md: 'text-sm', lg: 'text-base' })[this.size()], ...(ngDevMode ? [{ debugName: "optionTextClass" }] : /* istanbul ignore next */ []));
+    /**
+     * Static color-class map for option badge chips.
+     * `readonly` so the reference is stable; accessed directly in the template
+     * as `badgeColorMap[opt.badgeColor ?? 'gray']` — no method call needed.
+     */
+    badgeColorMap = {
+        gray: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
+        blue: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+        green: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
+        red: 'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300',
+        yellow: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/40 dark:text-yellow-300',
+        purple: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+    };
+    // ── Dropdown / keyboard ────────────────────────────────────────────────────
+    openDropdown() {
+        if (this.resolvedDisabled() || this.loading())
+            return;
+        this.computePanelPosition();
+        this.isOpen.set(true);
+        this.activeIndex.set(-1);
+        this.dropdownOpen.emit();
+        if (this.panelTpl) {
+            this.portalEl = document.createElement('div');
+            this.portalEl.className = 'sv-sd-portal';
+            document.body.appendChild(this.portalEl);
+            this.portalView = this.panelTpl.createEmbeddedView({});
+            this.appRef.attachView(this.portalView);
+            this.portalView.rootNodes.forEach((n) => this.portalEl.appendChild(n));
+            this.portalView.detectChanges();
+        }
+        if (this.searchable()) {
+            setTimeout(() => this.searchRef()?.nativeElement.focus(), 30);
+        }
+    }
+    closeDropdown() {
+        this.destroyPortal();
+        this.isOpen.set(false);
+        this.searchQuery.set('');
+        this.activeIndex.set(-1);
+        this.isFocused.set(false);
+        this.dropdownClose.emit();
+    }
+    toggleDropdown() {
+        this.isOpen() ? this.closeDropdown() : this.openDropdown();
+    }
+    ngOnDestroy() {
+        this.destroyPortal();
+        document.removeEventListener('scroll', this._boundScrollClose, { capture: true });
+    }
+    destroyPortal() {
+        if (this.portalView) {
+            this.appRef.detachView(this.portalView);
+            this.portalView.destroy();
+            this.portalView = null;
+        }
+        if (this.portalEl) {
+            this.portalEl.remove();
+            this.portalEl = null;
+        }
+    }
+    onDocumentMousedown(e) {
+        const t = e.target;
+        if (this.host.nativeElement.contains(t))
+            return;
+        if (this.portalEl?.contains(t))
+            return;
+        this.closeDropdown();
+    }
+    onWindowScroll(e) {
+        if (this.isOpen() && !this.portalEl?.contains(e.target)) {
+            this.closeDropdown();
+        }
+    }
+    onWindowResize() {
+        if (this.isOpen())
+            this.closeDropdown();
+    }
+    computePanelPosition() {
+        const trigger = this.triggerRef()?.nativeElement;
+        if (!trigger)
+            return;
+        const rect = trigger.getBoundingClientRect();
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const MARGIN = 8;
+        const GAP = 4;
+        const PREFERRED_HEIGHT = 240;
+        const spaceBelow = vh - rect.bottom - MARGIN;
+        const spaceAbove = rect.top - MARGIN;
+        const openUpward = spaceBelow < PREFERRED_HEIGHT && spaceAbove > spaceBelow;
+        const alignRight = rect.left + rect.width > vw - MARGIN;
+        const maxHeight = Math.max(120, openUpward ? spaceAbove : spaceBelow);
+        const style = {
+            position: 'fixed',
+            zIndex: '9999',
+            width: `${rect.width}px`,
+            maxHeight: `${maxHeight}px`,
+        };
+        style[openUpward ? 'bottom' : 'top'] = openUpward
+            ? `${vh - rect.top + GAP}px`
+            : `${rect.bottom + GAP}px`;
+        style[alignRight ? 'right' : 'left'] = alignRight
+            ? `${vw - rect.right}px`
+            : `${rect.left}px`;
+        this.panelStyle.set(style);
+    }
+    /**
+     * Measures the chip wrapper element to determine how many chips fit in one
+     * row, then updates `visibleChipCount` accordingly. Called after render via
+     * a `setTimeout` inside the `effect` so DOM positions are available.
+     */
+    measureVisibleChips() {
+        const wrapper = this.chipWrapperRef()?.nativeElement;
+        if (!wrapper)
+            return;
+        const chips = Array.from(wrapper.querySelectorAll('[data-chip]'));
+        if (!chips.length) {
+            this.visibleChipCount.set(0);
+            return;
+        }
+        const wrapperRight = wrapper.getBoundingClientRect().right;
+        // Check if every chip fits inside the wrapper (no overflow)
+        const allFit = chips.every(c => c.getBoundingClientRect().right <= wrapperRight + 1);
+        if (allFit) {
+            this.visibleChipCount.set(chips.length);
+            return;
+        }
+        // Some chips overflow — find how many fit while leaving ~60 px for "+N more"
+        const BADGE_RESERVE = 60;
+        const availRight = wrapperRight - BADGE_RESERVE;
+        let count = 0;
+        for (const chip of chips) {
+            if (chip.getBoundingClientRect().right > availRight)
+                break;
+            count++;
+        }
+        this.visibleChipCount.set(Math.max(1, count));
+    }
+    onTriggerKeydown(e) {
+        if (['ArrowDown', 'ArrowUp', ' ', 'Enter', 'Home', 'End'].includes(e.key)) {
+            e.preventDefault();
+            if (!this.isOpen()) {
+                this.openDropdown();
+                this.activeIndex.set(0);
+            }
+            else {
+                this.navigateList(e.key);
+            }
+        }
+        if (e.key === 'Escape')
+            this.closeDropdown();
+        if (e.key === 'Tab')
+            this.closeDropdown();
+    }
+    onSearchKeydown(e) {
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.navigateList('ArrowDown');
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            this.navigateList('ArrowUp');
+        }
+        if (e.key === 'Home') {
+            e.preventDefault();
+            this.navigateList('Home');
+        }
+        if (e.key === 'End') {
+            e.preventDefault();
+            this.navigateList('End');
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            this.selectActive();
+        }
+        if (e.key === 'Escape') {
+            this.closeDropdown();
+            this.triggerRef()?.nativeElement.focus();
+        }
+    }
+    /** Updates the search query and notifies listeners (for remote filtering). */
+    setSearch(q) {
+        this.searchQuery.set(q);
+        this.activeIndex.set(-1);
+        this.searchChange.emit(q);
+    }
+    navigateList(key) {
+        const opts = this.navigableOptions().filter(o => !o.disabled);
+        if (!opts.length)
+            return;
+        const cur = this.activeIndex();
+        let next = cur;
+        if (key === 'ArrowDown' || key === ' ')
+            next = cur < opts.length - 1 ? cur + 1 : 0;
+        if (key === 'ArrowUp')
+            next = cur > 0 ? cur - 1 : opts.length - 1;
+        if (key === 'Home')
+            next = 0;
+        if (key === 'End')
+            next = opts.length - 1;
+        if (key === 'Enter') {
+            this.selectActive();
+            return;
+        }
+        this.activeIndex.set(next);
+        this.scrollActiveIntoView();
+    }
+    selectActive() {
+        const opts = this.navigableOptions().filter(o => !o.disabled);
+        const idx = this.activeIndex();
+        if (idx >= 0 && idx < opts.length)
+            this.selectOption(opts[idx]);
+    }
+    scrollActiveIntoView() {
+        setTimeout(() => {
+            const list = this.listRef()?.nativeElement;
+            if (!list)
+                return;
+            const active = list.querySelector('[data-active="true"]');
+            active?.scrollIntoView({ block: 'nearest' });
+        });
+    }
+    selectOption(opt) {
+        if (opt.disabled)
+            return;
+        if (this.multiple()) {
+            const current = [...this.selectedValues()];
+            const idx = current.indexOf(opt.value);
+            if (idx > -1) {
+                current.splice(idx, 1);
+            }
+            else {
+                if (this.maxReached())
+                    return;
+                current.push(opt.value);
+            }
+            this.value.set(current);
+            this.onChange(current);
+            this.selectionChange.emit(current);
+        }
+        else {
+            this.value.set(opt.value);
+            this.onChange(opt.value);
+            this.selectionChange.emit(opt.value);
+            this.closeDropdown();
+            this.triggerRef()?.nativeElement.focus();
+        }
+    }
+    removeChip(value, e) {
+        e.stopPropagation();
+        if (this.resolvedDisabled())
+            return;
+        const current = this.selectedValues().filter(v => v !== value);
+        this.value.set(current);
+        this.onChange(current);
+        this.selectionChange.emit(current);
+    }
+    clearAll(e) {
+        e.stopPropagation();
+        const empty = this.multiple() ? [] : '';
+        this.value.set(empty);
+        this.onChange(empty);
+        this.selectionChange.emit(empty);
+    }
+    /**
+     * The currently keyboard-active option, or `null` when nothing is active.
+     * Computed once per change-detection cycle so the template can do a cheap
+     * identity check (`opt === activeOption()`) instead of calling the O(n)
+     * `isActive(opt)` method for every option row.
+     */
+    activeOption = computed(() => {
+        const opts = this.navigableOptions().filter(o => !o.disabled);
+        const idx = this.activeIndex();
+        return (idx >= 0 && idx < opts.length) ? opts[idx] : null;
+    }, ...(ngDevMode ? [{ debugName: "activeOption" }] : /* istanbul ignore next */ []));
+    isSelected(value) {
+        return this.selectedValues().includes(value);
+    }
+    // ── Floating label helpers ────────────────────────────────────────────
+    isFloating = computed(() => false, ...(ngDevMode ? [{ debugName: "isFloating" }] : /* istanbul ignore next */ []));
+    labelIsFloated = computed(() => this.isOpen() || this.hasValue(), ...(ngDevMode ? [{ debugName: "labelIsFloated" }] : /* istanbul ignore next */ []));
+    floatingLabelClasses = computed(() => {
+        const floated = this.labelIsFloated();
+        const err = !!this.errorMessage();
+        const active = this.isFocused() || this.isOpen();
+        const notFloatedLeft = 'left-3.5';
+        const floatedLeft = 'left-3';
+        const leftClass = floated ? floatedLeft : notFloatedLeft;
+        const topClass = floated ? '-top-px' : 'top-1/2';
+        const textSize = floated ? 'text-[0.7rem] leading-none' : this.labelSizeClass();
+        const bg = floated ? 'px-1 bg-white dark:bg-gray-900' : '';
+        let color;
+        if (floated && active) {
+            color = err ? 'text-red-500' : 'text-blue-600 dark:text-blue-400';
+        }
+        else if (floated) {
+            color = err ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400';
+        }
+        else {
+            color = 'text-gray-500 dark:text-gray-400';
+        }
+        return [
+            'absolute z-10 pointer-events-none select-none -translate-y-1/2',
+            'transition-[top,left,font-size,color,padding,background-color] duration-200 ease-in-out',
+            `${leftClass} ${topClass}`,
+            textSize, bg, color,
+        ].filter(Boolean).join(' ');
+    }, ...(ngDevMode ? [{ debugName: "floatingLabelClasses" }] : /* istanbul ignore next */ []));
+    onFocus() { this.isFocused.set(true); }
+    onBlur() { this.onTouched(); }
+    // ── ControlValueAccessor ───────────────────────────────────────────────────
+    writeValue(v) {
+        this.value.set(v ?? (this.multiple() ? [] : ''));
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    setDisabledState(isDisabled) { this._formDisabled.set(isDisabled); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvSelectDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: SvSelectDropdownComponent, isStandalone: true, selector: "sv-select-dropdown", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, optionalTag: { classPropertyName: "optionalTag", publicName: "optionalTag", isSignal: true, isRequired: false, transformFunction: null }, maxSelected: { classPropertyName: "maxSelected", publicName: "maxSelected", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", selectionChange: "selectionChange", dropdownOpen: "dropdownOpen", dropdownClose: "dropdownClose", searchChange: "searchChange" }, host: { listeners: { "document:mousedown": "onDocumentMousedown($event)", "window:scroll": "onWindowScroll($event)", "window:resize": "onWindowResize()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => SvSelectDropdownComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "searchRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "listRef", first: true, predicate: ["listbox"], descendants: true, isSignal: true }, { propertyName: "chipWrapperRef", first: true, predicate: ["chipWrapper"], descendants: true, isSignal: true }, { propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<!-- Root wrapper -->\n<div [ngClass]=\"['flex flex-col gap-1.5 w-full', customClass()]\">\n\n  <!-- Label row (hidden for floating variant) -->\n  @if (label()) {\n    <div class=\"flex items-baseline justify-between gap-2\">\n      <label\n        [attr.id]=\"labelId()\"\n        [ngClass]=\"['font-medium text-gray-700 dark:text-gray-200', labelSizeClass()]\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n        @if (optionalTag() && !required()) {\n          <span class=\"ml-1.5 font-normal text-gray-500 dark:text-gray-400 text-xs\">(optional)</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- Trigger button -->\n  <div class=\"relative\">\n\n    <!-- Floating label (renders inside trigger wrapper, animates to border on open/value) -->\n    @if (isFloating() && label()) {\n      <label\n        [attr.id]=\"labelId()\"\n        [ngClass]=\"floatingLabelClasses()\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n        @if (optionalTag() && !required()) {\n          <span class=\"ml-1 font-normal text-[0.65rem]\" aria-hidden=\"true\">(opt)</span>\n        }\n      </label>\n    }\n    <button\n      #trigger\n      type=\"button\"\n      role=\"combobox\"\n      [attr.id]=\"resolvedId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"!!errorMessage() || null\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || placeholder())\"\n      [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n      [disabled]=\"resolvedDisabled() || loading()\"\n      [ngClass]=\"triggerClasses()\"\n      (click)=\"toggleDropdown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    >\n\n      <!-- Loading spinner -->\n      @if (loading()) {\n        <span class=\"flex shrink-0 items-center text-gray-400\" aria-hidden=\"true\">\n          <svg [ngClass]=\"iconSizeClass()\" class=\"animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"/>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n          </svg>\n        </span>\n      }\n\n      <!-- Selected value(s) display -->\n      <span class=\"flex min-w-0 flex-1 items-center gap-1.5\">\n\n        @if (multiple()) {\n          <!-- Multi: single-row chip strip (clips overflow visually) -->\n          <span #chipWrapper\n                class=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-hidden\">\n            @for (chip of visibleChips(); track chip.value) {\n              <span\n                data-chip\n                [ngClass]=\"[\n                  'inline-flex shrink-0 items-center gap-1 rounded-md border border-gray-200 bg-gray-100',\n                  'text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200',\n                  chipTextClass(), 'px-1.5 py-0.5 font-medium leading-none'\n                ]\"\n              >\n                @if (chip.iconPath) {\n                  <svg [ngClass]=\"'h-3 w-3'\" viewBox=\"0 0 24 24\" fill=\"none\"\n                       stroke=\"currentColor\" stroke-width=\"2\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path [attr.d]=\"chip.iconPath\"/>\n                  </svg>\n                }\n                {{ chip.label }}\n                @if (!resolvedDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"ml-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-200\n                           focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n                    [attr.aria-label]=\"'Remove ' + chip.label\"\n                    (click)=\"removeChip(chip.value, $event)\"\n                    tabindex=\"-1\"\n                  >\n                    <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\"\n                         stroke=\"currentColor\" stroke-width=\"2.5\"\n                         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                      <path d=\"M18 6 6 18M6 6l12 12\"/>\n                    </svg>\n                  </button>\n                }\n              </span>\n            }\n\n            @if (!hasValue() && (!isFloating() || labelIsFloated())) {\n              <span class=\"text-gray-500 dark:text-gray-400 truncate\">{{ placeholder() }}</span>\n            }\n          </span>\n\n          <!-- Overflow badge \u2014 lives OUTSIDE the clipping wrapper so it's always visible -->\n          @if (overflowCount() > 0) {\n            <span [ngClass]=\"[chipTextClass(), 'shrink-0 text-gray-500 dark:text-gray-400 font-medium']\">\n              +{{ overflowCount() }} more\n            </span>\n          }\n\n        } @else {\n          <!-- Single: label or placeholder -->\n          @if (displayLabel()) {\n            @let selectedOpt = selectedOptions()[0];\n            <span class=\"flex min-w-0 items-center gap-2\">\n              @if (selectedOpt?.avatarUrl) {\n                <img [src]=\"selectedOpt.avatarUrl\" alt=\"\"\n                     class=\"h-5 w-5 shrink-0 rounded-full object-cover\" aria-hidden=\"true\"/>\n              } @else if (selectedOpt?.iconPath) {\n                <svg [ngClass]=\"iconSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path [attr.d]=\"selectedOpt.iconPath\"/>\n                </svg>\n              }\n              <span class=\"truncate text-gray-900 dark:text-gray-100\">{{ displayLabel() }}</span>\n            </span>\n          } @else if (!isFloating() || labelIsFloated()) {\n            <span class=\"truncate text-gray-500 dark:text-gray-400\">{{ placeholder() }}</span>\n          }\n        }\n      </span>\n\n      <!-- Right-side controls -->\n      <span class=\"ml-auto flex shrink-0 items-center gap-1 pl-1\">\n\n        <!-- Clear button -->\n        @if (showClear()) {\n          <span\n            role=\"button\"\n            tabindex=\"-1\"\n            class=\"flex items-center rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300\n                   focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n            aria-label=\"Clear selection\"\n            (click)=\"clearAll($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n          >\n            <svg [ngClass]=\"chevronSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2.5\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M18 6 6 18M6 6l12 12\"/>\n            </svg>\n          </span>\n          <span class=\"h-4 w-px bg-gray-300 dark:bg-gray-600\"></span>\n        }\n\n        <!-- Chevron -->\n        <svg\n          [ngClass]=\"[chevronSizeClass(), 'text-gray-400 transition-transform duration-200', isOpen() ? 'rotate-180' : '']\"\n          viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2.5\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"m6 9 6 6 6-6\"/>\n        </svg>\n\n      </span>\n    </button>\n\n    <!-- \u2500\u2500 Dropdown panel \u2014 portaled into document.body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <ng-template #panelTpl>\n      <div\n        class=\"flex flex-col overflow-hidden rounded-xl border\n               border-gray-200 bg-white shadow-xl shadow-gray-900/10\n               dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900/40\"\n        [style.position]=\"panelStyle()['position']\"\n        [style.zIndex]=\"panelStyle()['zIndex']\"\n        [style.top]=\"panelStyle()['top']\"\n        [style.bottom]=\"panelStyle()['bottom']\"\n        [style.left]=\"panelStyle()['left']\"\n        [style.right]=\"panelStyle()['right']\"\n        [style.width]=\"panelStyle()['width']\"\n        [style.maxHeight]=\"panelStyle()['maxHeight']\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n      >\n\n        <!-- Search input -->\n        @if (searchable()) {\n          <div class=\"border-b border-gray-100 px-3 py-2.5 dark:border-gray-800\">\n            <div class=\"flex items-center gap-2\">\n              <svg class=\"h-4 w-4 shrink-0 text-gray-400\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n                <path d=\"m21 21-4.35-4.35\"/>\n              </svg>\n              <input\n                #searchInput\n                type=\"text\"\n                role=\"combobox\"\n                [attr.aria-expanded]=\"true\"\n                [attr.aria-controls]=\"listboxId()\"\n                [attr.aria-activedescendant]=\"activeDescendantId()\"\n                [attr.aria-label]=\"label() || 'Search options'\"\n                class=\"flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400\n                       outline-none dark:text-gray-100 dark:placeholder-gray-500\"\n                [attr.placeholder]=\"searchPlaceholder()\"\n                autocomplete=\"off\"\n                [value]=\"searchQuery()\"\n                (input)=\"setSearch($any($event.target).value)\"\n                (keydown)=\"onSearchKeydown($event)\"\n              />\n              @if (searchQuery()) {\n                <button type=\"button\"\n                        class=\"text-gray-400 hover:text-gray-600 dark:hover:text-gray-300\"\n                        (click)=\"setSearch('')\" tabindex=\"-1\" aria-label=\"Clear search\">\n                  <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                       stroke=\"currentColor\" stroke-width=\"2.5\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M18 6 6 18M6 6l12 12\"/>\n                  </svg>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Multi-select count bar -->\n        @if (multiple() && maxSelected() > 0) {\n          <div class=\"border-b border-gray-100 px-3 py-2 dark:border-gray-800\">\n            <p class=\"text-xs text-gray-500 dark:text-gray-400\" aria-live=\"polite\">\n              {{ selectedValues().length }} / {{ maxSelected() }} selected\n            </p>\n          </div>\n        }\n\n        <!-- Options list -->\n        <ul\n          #listbox\n          [attr.id]=\"listboxId()\"\n          role=\"listbox\"\n          [attr.aria-multiselectable]=\"multiple()\"\n          [attr.aria-label]=\"label() || placeholder()\"\n          class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain py-1.5\"\n        >\n\n          @if (noResults()) {\n            <li class=\"px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400\">\n              <svg class=\"mx-auto mb-2 h-8 w-8 opacity-40\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"1.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n                <path d=\"m21 21-4.35-4.35\"/>\n              </svg>\n              {{ noResultsText() }}\n            </li>\n          }\n\n          <!-- Flat options -->\n          @for (opt of filteredOptions(); track opt.value) {\n            <li\n              role=\"option\"\n              [attr.id]=\"optionDomId(opt.value)\"\n              [attr.aria-selected]=\"isSelected(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              [attr.data-active]=\"opt === activeOption()\"\n              [ngClass]=\"[\n                'flex cursor-pointer items-center gap-3 transition-colors duration-100',\n                optionPadClass(), optionTextClass(),\n                opt.disabled\n                  ? 'cursor-not-allowed opacity-40'\n                  : opt === activeOption()\n                    ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'\n                    : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60'\n              ]\"\n              (click)=\"selectOption(opt)\"\n              (mouseenter)=\"activeIndex.set(navigableOptions().indexOf(opt))\"\n            >\n\n              <!-- Checkbox for multi -->\n              @if (multiple()) {\n                <span\n                  [ngClass]=\"[\n                    'flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors',\n                    isSelected(opt.value)\n                      ? 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'\n                      : 'border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800'\n                  ]\"\n                  aria-hidden=\"true\"\n                >\n                  @if (isSelected(opt.value)) {\n                    <svg class=\"h-2.5 w-2.5 text-white dark:text-gray-900\" viewBox=\"0 0 24 24\" fill=\"none\"\n                         stroke=\"currentColor\" stroke-width=\"3\"\n                         stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"m20 6-11 11-5-5\"/>\n                    </svg>\n                  }\n                </span>\n              }\n\n              <!-- Avatar -->\n              @if (opt.avatarUrl) {\n                <img [src]=\"opt.avatarUrl\" alt=\"\" class=\"h-6 w-6 shrink-0 rounded-full object-cover\" aria-hidden=\"true\"/>\n              } @else if (opt.iconPath) {\n                <svg [ngClass]=\"['shrink-0', iconSizeClass()]\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path [attr.d]=\"opt.iconPath\"/>\n                </svg>\n              }\n\n              <!-- Label + sublabel -->\n              <span class=\"min-w-0 flex-1\">\n                <span class=\"block truncate font-medium\">{{ opt.label }}</span>\n                @if (opt.sublabel) {\n                  <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">{{ opt.sublabel }}</span>\n                }\n              </span>\n\n              <!-- Badge -->\n              @if (opt.badge) {\n                <span [ngClass]=\"['shrink-0 rounded-full px-2 py-0.5 text-xs font-medium', badgeColorMap[opt.badgeColor ?? 'gray'] ?? badgeColorMap['gray']]\">\n                  {{ opt.badge }}\n                </span>\n              }\n\n              <!-- Checkmark for single -->\n              @if (!multiple() && isSelected(opt.value)) {\n                <svg class=\"ml-auto h-4 w-4 shrink-0 text-primary-500 dark:text-primary-400\"\n                     viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2.5\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"m20 6-11 11-5-5\"/>\n                </svg>\n              }\n\n            </li>\n          }\n\n          <!-- Grouped options -->\n          @for (group of filteredGroups(); track group.label) {\n            <li role=\"presentation\">\n              <p class=\"px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 first:pt-1.5\">\n                {{ group.label }}\n              </p>\n              <ul role=\"group\" [attr.aria-label]=\"group.label\">\n                @for (opt of group.options; track opt.value) {\n                  <li\n                    role=\"option\"\n                    [attr.id]=\"optionDomId(opt.value)\"\n                    [attr.aria-selected]=\"isSelected(opt.value)\"\n                    [attr.aria-disabled]=\"opt.disabled || null\"\n                    [attr.data-active]=\"opt === activeOption()\"\n                    [ngClass]=\"[\n                      'flex cursor-pointer items-center gap-3 transition-colors duration-100',\n                      optionPadClass(), optionTextClass(),\n                      opt.disabled\n                        ? 'cursor-not-allowed opacity-40'\n                        : opt === activeOption()\n                          ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'\n                          : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60'\n                    ]\"\n                    (click)=\"selectOption(opt)\"\n                    (mouseenter)=\"activeIndex.set(navigableOptions().indexOf(opt))\"\n                  >\n                    @if (multiple()) {\n                      <span\n                        [ngClass]=\"[\n                          'flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors',\n                          isSelected(opt.value)\n                            ? 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'\n                            : 'border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800'\n                        ]\"\n                        aria-hidden=\"true\"\n                      >\n                        @if (isSelected(opt.value)) {\n                          <svg class=\"h-2.5 w-2.5 text-white dark:text-gray-900\" viewBox=\"0 0 24 24\" fill=\"none\"\n                               stroke=\"currentColor\" stroke-width=\"3\"\n                               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"m20 6-11 11-5-5\"/>\n                          </svg>\n                        }\n                      </span>\n                    }\n                    @if (opt.avatarUrl) {\n                      <img [src]=\"opt.avatarUrl\" alt=\"\" class=\"h-6 w-6 shrink-0 rounded-full object-cover\" aria-hidden=\"true\"/>\n                    } @else if (opt.iconPath) {\n                      <svg [ngClass]=\"['shrink-0', iconSizeClass()]\" viewBox=\"0 0 24 24\" fill=\"none\"\n                           stroke=\"currentColor\" stroke-width=\"2\"\n                           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path [attr.d]=\"opt.iconPath\"/>\n                      </svg>\n                    }\n                    <span class=\"min-w-0 flex-1\">\n                      <span class=\"block truncate font-medium\">{{ opt.label }}</span>\n                      @if (opt.sublabel) {\n                        <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">{{ opt.sublabel }}</span>\n                      }\n                    </span>\n                    @if (opt.badge) {\n                      <span [ngClass]=\"['shrink-0 rounded-full px-2 py-0.5 text-xs font-medium', badgeColorMap[opt.badgeColor ?? 'gray'] ?? badgeColorMap['gray']]\">\n                        {{ opt.badge }}\n                      </span>\n                    }\n                    @if (!multiple() && isSelected(opt.value)) {\n                      <svg class=\"ml-auto h-4 w-4 shrink-0 text-primary-500 dark:text-primary-400\"\n                           viewBox=\"0 0 24 24\" fill=\"none\"\n                           stroke=\"currentColor\" stroke-width=\"2.5\"\n                           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"m20 6-11 11-5-5\"/>\n                      </svg>\n                    }\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n\n        </ul>\n\n        <!-- Footer slot: multi select-all / clear -->\n        @if (multiple() && hasValue()) {\n          <div class=\"border-t border-gray-100 px-3 py-2 dark:border-gray-800\">\n            <button\n              type=\"button\"\n              class=\"text-xs font-medium text-gray-500 hover:text-gray-700\n                     dark:text-gray-400 dark:hover:text-gray-200 transition-colors\"\n              (click)=\"clearAll($event)\"\n            >\n              Clear all ({{ selectedValues().length }})\n            </button>\n          </div>\n        }\n\n      </div>\n    </ng-template>\n\n  </div><!-- /relative -->\n\n  <!-- Hint / error -->\n  @if (errorMessage() || hint()) {\n    <div>\n      @if (errorMessage()) {\n        <p [attr.id]=\"describedById()\" class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\" role=\"alert\">\n          <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n          </svg>\n          {{ errorMessage() }}\n        </p>\n      } @else if (hint()) {\n        <p [attr.id]=\"describedById()\" class=\"text-xs text-gray-500 dark:text-gray-400\">{{ hint() }}</p>\n      }\n    </div>\n  }\n\n</div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: SvSelectDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'sv-select-dropdown', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => SvSelectDropdownComponent),
+                            multi: true,
+                        },
+                    ], template: "<!-- Root wrapper -->\n<div [ngClass]=\"['flex flex-col gap-1.5 w-full', customClass()]\">\n\n  <!-- Label row (hidden for floating variant) -->\n  @if (label()) {\n    <div class=\"flex items-baseline justify-between gap-2\">\n      <label\n        [attr.id]=\"labelId()\"\n        [ngClass]=\"['font-medium text-gray-700 dark:text-gray-200', labelSizeClass()]\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n        @if (optionalTag() && !required()) {\n          <span class=\"ml-1.5 font-normal text-gray-500 dark:text-gray-400 text-xs\">(optional)</span>\n        }\n      </label>\n    </div>\n  }\n\n  <!-- Trigger button -->\n  <div class=\"relative\">\n\n    <!-- Floating label (renders inside trigger wrapper, animates to border on open/value) -->\n    @if (isFloating() && label()) {\n      <label\n        [attr.id]=\"labelId()\"\n        [ngClass]=\"floatingLabelClasses()\"\n        [attr.for]=\"resolvedId()\"\n      >\n        {{ label() }}\n        @if (required()) {\n          <span class=\"ml-0.5 text-red-500\" aria-hidden=\"true\">*</span>\n        }\n        @if (optionalTag() && !required()) {\n          <span class=\"ml-1 font-normal text-[0.65rem]\" aria-hidden=\"true\">(opt)</span>\n        }\n      </label>\n    }\n    <button\n      #trigger\n      type=\"button\"\n      role=\"combobox\"\n      [attr.id]=\"resolvedId()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n      [attr.aria-activedescendant]=\"isOpen() ? activeDescendantId() : null\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"!!errorMessage() || null\"\n      [attr.aria-labelledby]=\"label() ? labelId() : null\"\n      [attr.aria-label]=\"label() ? null : (ariaLabel() || placeholder())\"\n      [attr.aria-describedby]=\"hasDescription() ? describedById() : null\"\n      [disabled]=\"resolvedDisabled() || loading()\"\n      [ngClass]=\"triggerClasses()\"\n      (click)=\"toggleDropdown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n    >\n\n      <!-- Loading spinner -->\n      @if (loading()) {\n        <span class=\"flex shrink-0 items-center text-gray-400\" aria-hidden=\"true\">\n          <svg [ngClass]=\"iconSizeClass()\" class=\"animate-spin\" fill=\"none\" viewBox=\"0 0 24 24\">\n            <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"/>\n            <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"/>\n          </svg>\n        </span>\n      }\n\n      <!-- Selected value(s) display -->\n      <span class=\"flex min-w-0 flex-1 items-center gap-1.5\">\n\n        @if (multiple()) {\n          <!-- Multi: single-row chip strip (clips overflow visually) -->\n          <span #chipWrapper\n                class=\"flex min-w-0 flex-1 flex-nowrap items-center gap-1.5 overflow-hidden\">\n            @for (chip of visibleChips(); track chip.value) {\n              <span\n                data-chip\n                [ngClass]=\"[\n                  'inline-flex shrink-0 items-center gap-1 rounded-md border border-gray-200 bg-gray-100',\n                  'text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200',\n                  chipTextClass(), 'px-1.5 py-0.5 font-medium leading-none'\n                ]\"\n              >\n                @if (chip.iconPath) {\n                  <svg [ngClass]=\"'h-3 w-3'\" viewBox=\"0 0 24 24\" fill=\"none\"\n                       stroke=\"currentColor\" stroke-width=\"2\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path [attr.d]=\"chip.iconPath\"/>\n                  </svg>\n                }\n                {{ chip.label }}\n                @if (!resolvedDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"ml-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-200\n                           focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n                    [attr.aria-label]=\"'Remove ' + chip.label\"\n                    (click)=\"removeChip(chip.value, $event)\"\n                    tabindex=\"-1\"\n                  >\n                    <svg class=\"h-3 w-3\" viewBox=\"0 0 24 24\" fill=\"none\"\n                         stroke=\"currentColor\" stroke-width=\"2.5\"\n                         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                      <path d=\"M18 6 6 18M6 6l12 12\"/>\n                    </svg>\n                  </button>\n                }\n              </span>\n            }\n\n            @if (!hasValue() && (!isFloating() || labelIsFloated())) {\n              <span class=\"text-gray-500 dark:text-gray-400 truncate\">{{ placeholder() }}</span>\n            }\n          </span>\n\n          <!-- Overflow badge \u2014 lives OUTSIDE the clipping wrapper so it's always visible -->\n          @if (overflowCount() > 0) {\n            <span [ngClass]=\"[chipTextClass(), 'shrink-0 text-gray-500 dark:text-gray-400 font-medium']\">\n              +{{ overflowCount() }} more\n            </span>\n          }\n\n        } @else {\n          <!-- Single: label or placeholder -->\n          @if (displayLabel()) {\n            @let selectedOpt = selectedOptions()[0];\n            <span class=\"flex min-w-0 items-center gap-2\">\n              @if (selectedOpt?.avatarUrl) {\n                <img [src]=\"selectedOpt.avatarUrl\" alt=\"\"\n                     class=\"h-5 w-5 shrink-0 rounded-full object-cover\" aria-hidden=\"true\"/>\n              } @else if (selectedOpt?.iconPath) {\n                <svg [ngClass]=\"iconSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path [attr.d]=\"selectedOpt.iconPath\"/>\n                </svg>\n              }\n              <span class=\"truncate text-gray-900 dark:text-gray-100\">{{ displayLabel() }}</span>\n            </span>\n          } @else if (!isFloating() || labelIsFloated()) {\n            <span class=\"truncate text-gray-500 dark:text-gray-400\">{{ placeholder() }}</span>\n          }\n        }\n      </span>\n\n      <!-- Right-side controls -->\n      <span class=\"ml-auto flex shrink-0 items-center gap-1 pl-1\">\n\n        <!-- Clear button -->\n        @if (showClear()) {\n          <span\n            role=\"button\"\n            tabindex=\"-1\"\n            class=\"flex items-center rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-300\n                   focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-400\"\n            aria-label=\"Clear selection\"\n            (click)=\"clearAll($event)\"\n            (mousedown)=\"$event.preventDefault()\"\n          >\n            <svg [ngClass]=\"chevronSizeClass()\" viewBox=\"0 0 24 24\" fill=\"none\"\n                 stroke=\"currentColor\" stroke-width=\"2.5\"\n                 stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n              <path d=\"M18 6 6 18M6 6l12 12\"/>\n            </svg>\n          </span>\n          <span class=\"h-4 w-px bg-gray-300 dark:bg-gray-600\"></span>\n        }\n\n        <!-- Chevron -->\n        <svg\n          [ngClass]=\"[chevronSizeClass(), 'text-gray-400 transition-transform duration-200', isOpen() ? 'rotate-180' : '']\"\n          viewBox=\"0 0 24 24\" fill=\"none\"\n          stroke=\"currentColor\" stroke-width=\"2.5\"\n          stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"m6 9 6 6 6-6\"/>\n        </svg>\n\n      </span>\n    </button>\n\n    <!-- \u2500\u2500 Dropdown panel \u2014 portaled into document.body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n    <ng-template #panelTpl>\n      <div\n        class=\"flex flex-col overflow-hidden rounded-xl border\n               border-gray-200 bg-white shadow-xl shadow-gray-900/10\n               dark:border-gray-700 dark:bg-gray-900 dark:shadow-gray-900/40\"\n        [style.position]=\"panelStyle()['position']\"\n        [style.zIndex]=\"panelStyle()['zIndex']\"\n        [style.top]=\"panelStyle()['top']\"\n        [style.bottom]=\"panelStyle()['bottom']\"\n        [style.left]=\"panelStyle()['left']\"\n        [style.right]=\"panelStyle()['right']\"\n        [style.width]=\"panelStyle()['width']\"\n        [style.maxHeight]=\"panelStyle()['maxHeight']\"\n        role=\"dialog\"\n        aria-modal=\"false\"\n      >\n\n        <!-- Search input -->\n        @if (searchable()) {\n          <div class=\"border-b border-gray-100 px-3 py-2.5 dark:border-gray-800\">\n            <div class=\"flex items-center gap-2\">\n              <svg class=\"h-4 w-4 shrink-0 text-gray-400\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"2\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n                <path d=\"m21 21-4.35-4.35\"/>\n              </svg>\n              <input\n                #searchInput\n                type=\"text\"\n                role=\"combobox\"\n                [attr.aria-expanded]=\"true\"\n                [attr.aria-controls]=\"listboxId()\"\n                [attr.aria-activedescendant]=\"activeDescendantId()\"\n                [attr.aria-label]=\"label() || 'Search options'\"\n                class=\"flex-1 bg-transparent text-sm text-gray-900 placeholder-gray-400\n                       outline-none dark:text-gray-100 dark:placeholder-gray-500\"\n                [attr.placeholder]=\"searchPlaceholder()\"\n                autocomplete=\"off\"\n                [value]=\"searchQuery()\"\n                (input)=\"setSearch($any($event.target).value)\"\n                (keydown)=\"onSearchKeydown($event)\"\n              />\n              @if (searchQuery()) {\n                <button type=\"button\"\n                        class=\"text-gray-400 hover:text-gray-600 dark:hover:text-gray-300\"\n                        (click)=\"setSearch('')\" tabindex=\"-1\" aria-label=\"Clear search\">\n                  <svg class=\"h-3.5 w-3.5\" viewBox=\"0 0 24 24\" fill=\"none\"\n                       stroke=\"currentColor\" stroke-width=\"2.5\"\n                       stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M18 6 6 18M6 6l12 12\"/>\n                  </svg>\n                </button>\n              }\n            </div>\n          </div>\n        }\n\n        <!-- Multi-select count bar -->\n        @if (multiple() && maxSelected() > 0) {\n          <div class=\"border-b border-gray-100 px-3 py-2 dark:border-gray-800\">\n            <p class=\"text-xs text-gray-500 dark:text-gray-400\" aria-live=\"polite\">\n              {{ selectedValues().length }} / {{ maxSelected() }} selected\n            </p>\n          </div>\n        }\n\n        <!-- Options list -->\n        <ul\n          #listbox\n          [attr.id]=\"listboxId()\"\n          role=\"listbox\"\n          [attr.aria-multiselectable]=\"multiple()\"\n          [attr.aria-label]=\"label() || placeholder()\"\n          class=\"min-h-0 flex-1 overflow-y-auto overscroll-contain py-1.5\"\n        >\n\n          @if (noResults()) {\n            <li class=\"px-4 py-6 text-center text-sm text-gray-500 dark:text-gray-400\">\n              <svg class=\"mx-auto mb-2 h-8 w-8 opacity-40\" viewBox=\"0 0 24 24\" fill=\"none\"\n                   stroke=\"currentColor\" stroke-width=\"1.5\"\n                   stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n                <path d=\"m21 21-4.35-4.35\"/>\n              </svg>\n              {{ noResultsText() }}\n            </li>\n          }\n\n          <!-- Flat options -->\n          @for (opt of filteredOptions(); track opt.value) {\n            <li\n              role=\"option\"\n              [attr.id]=\"optionDomId(opt.value)\"\n              [attr.aria-selected]=\"isSelected(opt.value)\"\n              [attr.aria-disabled]=\"opt.disabled || null\"\n              [attr.data-active]=\"opt === activeOption()\"\n              [ngClass]=\"[\n                'flex cursor-pointer items-center gap-3 transition-colors duration-100',\n                optionPadClass(), optionTextClass(),\n                opt.disabled\n                  ? 'cursor-not-allowed opacity-40'\n                  : opt === activeOption()\n                    ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'\n                    : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60'\n              ]\"\n              (click)=\"selectOption(opt)\"\n              (mouseenter)=\"activeIndex.set(navigableOptions().indexOf(opt))\"\n            >\n\n              <!-- Checkbox for multi -->\n              @if (multiple()) {\n                <span\n                  [ngClass]=\"[\n                    'flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors',\n                    isSelected(opt.value)\n                      ? 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'\n                      : 'border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800'\n                  ]\"\n                  aria-hidden=\"true\"\n                >\n                  @if (isSelected(opt.value)) {\n                    <svg class=\"h-2.5 w-2.5 text-white dark:text-gray-900\" viewBox=\"0 0 24 24\" fill=\"none\"\n                         stroke=\"currentColor\" stroke-width=\"3\"\n                         stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                      <path d=\"m20 6-11 11-5-5\"/>\n                    </svg>\n                  }\n                </span>\n              }\n\n              <!-- Avatar -->\n              @if (opt.avatarUrl) {\n                <img [src]=\"opt.avatarUrl\" alt=\"\" class=\"h-6 w-6 shrink-0 rounded-full object-cover\" aria-hidden=\"true\"/>\n              } @else if (opt.iconPath) {\n                <svg [ngClass]=\"['shrink-0', iconSizeClass()]\" viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path [attr.d]=\"opt.iconPath\"/>\n                </svg>\n              }\n\n              <!-- Label + sublabel -->\n              <span class=\"min-w-0 flex-1\">\n                <span class=\"block truncate font-medium\">{{ opt.label }}</span>\n                @if (opt.sublabel) {\n                  <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">{{ opt.sublabel }}</span>\n                }\n              </span>\n\n              <!-- Badge -->\n              @if (opt.badge) {\n                <span [ngClass]=\"['shrink-0 rounded-full px-2 py-0.5 text-xs font-medium', badgeColorMap[opt.badgeColor ?? 'gray'] ?? badgeColorMap['gray']]\">\n                  {{ opt.badge }}\n                </span>\n              }\n\n              <!-- Checkmark for single -->\n              @if (!multiple() && isSelected(opt.value)) {\n                <svg class=\"ml-auto h-4 w-4 shrink-0 text-primary-500 dark:text-primary-400\"\n                     viewBox=\"0 0 24 24\" fill=\"none\"\n                     stroke=\"currentColor\" stroke-width=\"2.5\"\n                     stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                  <path d=\"m20 6-11 11-5-5\"/>\n                </svg>\n              }\n\n            </li>\n          }\n\n          <!-- Grouped options -->\n          @for (group of filteredGroups(); track group.label) {\n            <li role=\"presentation\">\n              <p class=\"px-3 pb-1 pt-3 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 first:pt-1.5\">\n                {{ group.label }}\n              </p>\n              <ul role=\"group\" [attr.aria-label]=\"group.label\">\n                @for (opt of group.options; track opt.value) {\n                  <li\n                    role=\"option\"\n                    [attr.id]=\"optionDomId(opt.value)\"\n                    [attr.aria-selected]=\"isSelected(opt.value)\"\n                    [attr.aria-disabled]=\"opt.disabled || null\"\n                    [attr.data-active]=\"opt === activeOption()\"\n                    [ngClass]=\"[\n                      'flex cursor-pointer items-center gap-3 transition-colors duration-100',\n                      optionPadClass(), optionTextClass(),\n                      opt.disabled\n                        ? 'cursor-not-allowed opacity-40'\n                        : opt === activeOption()\n                          ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300'\n                          : 'text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-gray-800/60'\n                    ]\"\n                    (click)=\"selectOption(opt)\"\n                    (mouseenter)=\"activeIndex.set(navigableOptions().indexOf(opt))\"\n                  >\n                    @if (multiple()) {\n                      <span\n                        [ngClass]=\"[\n                          'flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors',\n                          isSelected(opt.value)\n                            ? 'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400'\n                            : 'border-gray-300 bg-white dark:border-gray-600 dark:bg-gray-800'\n                        ]\"\n                        aria-hidden=\"true\"\n                      >\n                        @if (isSelected(opt.value)) {\n                          <svg class=\"h-2.5 w-2.5 text-white dark:text-gray-900\" viewBox=\"0 0 24 24\" fill=\"none\"\n                               stroke=\"currentColor\" stroke-width=\"3\"\n                               stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"m20 6-11 11-5-5\"/>\n                          </svg>\n                        }\n                      </span>\n                    }\n                    @if (opt.avatarUrl) {\n                      <img [src]=\"opt.avatarUrl\" alt=\"\" class=\"h-6 w-6 shrink-0 rounded-full object-cover\" aria-hidden=\"true\"/>\n                    } @else if (opt.iconPath) {\n                      <svg [ngClass]=\"['shrink-0', iconSizeClass()]\" viewBox=\"0 0 24 24\" fill=\"none\"\n                           stroke=\"currentColor\" stroke-width=\"2\"\n                           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path [attr.d]=\"opt.iconPath\"/>\n                      </svg>\n                    }\n                    <span class=\"min-w-0 flex-1\">\n                      <span class=\"block truncate font-medium\">{{ opt.label }}</span>\n                      @if (opt.sublabel) {\n                        <span class=\"block truncate text-xs text-gray-500 dark:text-gray-400\">{{ opt.sublabel }}</span>\n                      }\n                    </span>\n                    @if (opt.badge) {\n                      <span [ngClass]=\"['shrink-0 rounded-full px-2 py-0.5 text-xs font-medium', badgeColorMap[opt.badgeColor ?? 'gray'] ?? badgeColorMap['gray']]\">\n                        {{ opt.badge }}\n                      </span>\n                    }\n                    @if (!multiple() && isSelected(opt.value)) {\n                      <svg class=\"ml-auto h-4 w-4 shrink-0 text-primary-500 dark:text-primary-400\"\n                           viewBox=\"0 0 24 24\" fill=\"none\"\n                           stroke=\"currentColor\" stroke-width=\"2.5\"\n                           stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <path d=\"m20 6-11 11-5-5\"/>\n                      </svg>\n                    }\n                  </li>\n                }\n              </ul>\n            </li>\n          }\n\n        </ul>\n\n        <!-- Footer slot: multi select-all / clear -->\n        @if (multiple() && hasValue()) {\n          <div class=\"border-t border-gray-100 px-3 py-2 dark:border-gray-800\">\n            <button\n              type=\"button\"\n              class=\"text-xs font-medium text-gray-500 hover:text-gray-700\n                     dark:text-gray-400 dark:hover:text-gray-200 transition-colors\"\n              (click)=\"clearAll($event)\"\n            >\n              Clear all ({{ selectedValues().length }})\n            </button>\n          </div>\n        }\n\n      </div>\n    </ng-template>\n\n  </div><!-- /relative -->\n\n  <!-- Hint / error -->\n  @if (errorMessage() || hint()) {\n    <div>\n      @if (errorMessage()) {\n        <p [attr.id]=\"describedById()\" class=\"flex items-center gap-1 text-xs font-medium text-red-600 dark:text-red-400\" role=\"alert\">\n          <svg class=\"h-3.5 w-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\"\n               stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n          </svg>\n          {{ errorMessage() }}\n        </p>\n      } @else if (hint()) {\n        <p [attr.id]=\"describedById()\" class=\"text-xs text-gray-500 dark:text-gray-400\">{{ hint() }}</p>\n      }\n    </div>\n  }\n\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], optionalTag: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionalTag", required: false }] }], maxSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelected", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], dropdownOpen: [{ type: i0.Output, args: ["dropdownOpen"] }], dropdownClose: [{ type: i0.Output, args: ["dropdownClose"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], panelTpl: [{
+                type: ViewChild,
+                args: ['panelTpl', { read: TemplateRef }]
+            }], searchRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], listRef: [{ type: i0.ViewChild, args: ['listbox', { isSignal: true }] }], chipWrapperRef: [{ type: i0.ViewChild, args: ['chipWrapper', { isSignal: true }] }], onDocumentMousedown: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }], onWindowScroll: [{
+                type: HostListener,
+                args: ['window:scroll', ['$event']]
+            }], onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SvSelectDropdownComponent };
+//# sourceMappingURL=styloviz-select-dropdown.mjs.map