@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-select.cjs.entry.js

@@ -0,0 +1,419 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+/**
+ * Datos / catalogos de `<sui-select>`.
+ *
+ * Separado del .tsx porque Stencil prohibe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aqui viven los shapes y los catalogos de
+ * variantes; el .tsx importa lo que necesita sin re-exportarlo con llaves.
+ *
+ * Homologado con el SUI Angular (sui-design-system, lib/sui-select).
+ */
+/**
+ * RemixIcon de placeholder por type — Figma confirma uno distinto por type en el
+ * state Default/empty.
+ */
+const SUI_SELECT_DEFAULT_ICON_BY_TYPE = {
+    basic: 'flashlight-line',
+    country: 'global-line',
+    avatar: 'user-line',
+    provider: 'bank-card-line',
+    brand: 'award-line',
+    company: 'building-line',
+};
+/** Dataset largo (probar scroll + auto-flip del panel). */
+Array.from({ length: 14 }, (_v, i) => ({ value: `opt-${i + 1}`, label: `Opcion ${i + 1}` }));
+
+const suiSelectCss = () => `@charset "UTF-8";.sc-sui-select-h{display:block;font-family:var(--sui-font-sans)}.sui-select__label-host.sc-sui-select{display:block;margin-bottom:4px;cursor:default}.sui-select__field.sc-sui-select{position:relative;display:block}.sui-select__trigger.sc-sui-select{position:relative;z-index:1;box-sizing:border-box;display:flex;align-items:center;max-width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:pointer;user-select:none;outline:none;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-size=xsmall].sc-sui-select-h .sui-select__trigger.sc-sui-select{gap:6px;padding:5px 6px 5px 8px;border-radius:var(--sui-radius-8);min-height:32px}[data-sui-size=small].sc-sui-select-h .sui-select__trigger.sc-sui-select{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}[data-sui-size=medium].sc-sui-select-h .sui-select__trigger.sc-sui-select,.sc-sui-select-h:not([data-sui-size]) .sui-select__trigger.sc-sui-select{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}[data-sui-size=large].sc-sui-select-h .sui-select__trigger.sc-sui-select{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}[data-sui-size=xlarge].sc-sui-select-h .sui-select__trigger.sc-sui-select{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-select__trigger.sc-sui-select:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sui-select__trigger.sc-sui-select:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error):focus,.sui-select__trigger.sc-sui-select:not(.sui-select__trigger--disabled):not(.sui-select__trigger--error).sui-select__trigger--open{outline:none;border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}.sui-select__trigger--error.sc-sui-select{border-color:var(--sui-state-error-base);box-shadow:none}.sui-select__trigger--error.sc-sui-select:not(.sui-select__trigger--disabled):hover{border-color:var(--sui-state-error-base)}.sui-select__trigger--error.sc-sui-select:not(.sui-select__trigger--disabled):focus,.sui-select__trigger--error.sc-sui-select:not(.sui-select__trigger--disabled).sui-select__trigger--open{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-16)}.sui-select__trigger--disabled.sc-sui-select{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed;pointer-events:none}.sui-select__leading.sc-sui-select{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600)}[data-sui-disabled].sc-sui-select-h .sui-select__leading.sc-sui-select{color:var(--sui-icon-disabled-300);opacity:0.48}.sui-select__leading-icon.sc-sui-select{display:inline-flex}.sui-select__leading-img.sc-sui-select{width:100%;height:100%;object-fit:cover;border-radius:var(--sui-radius-full)}.sui-select__leading-flag.sc-sui-select{flex-shrink:0}.sui-select__badge.sc-sui-select{flex-shrink:0}[data-sui-disabled].sc-sui-select-h .sui-select__badge.sc-sui-select{opacity:0.48}.sui-select__value.sc-sui-select{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}[data-sui-size=large].sc-sui-select-h .sui-select__value.sc-sui-select,[data-sui-size=xlarge].sc-sui-select-h .sui-select__value.sc-sui-select{font-size:var(--sui-type-paragraph-md-size, 16px);font-weight:var(--sui-type-paragraph-md-weight, 400);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}[data-sui-disabled].sc-sui-select-h .sui-select__value.sc-sui-select{color:var(--sui-text-disabled-300)}.sui-select__placeholder.sc-sui-select{color:var(--sui-text-sub-600)}[data-sui-disabled].sc-sui-select-h .sui-select__placeholder.sc-sui-select{color:var(--sui-text-disabled-300)}.sui-select__chevron.sc-sui-select{flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-sub-600);transition:transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-open].sc-sui-select-h .sui-select__chevron.sc-sui-select{transform:rotate(180deg)}[data-sui-disabled].sc-sui-select-h .sui-select__chevron.sc-sui-select{color:var(--sui-icon-disabled-300)}.sui-select__hint-host.sc-sui-select{display:block;margin-top:4px}.sui-select__menu.sc-sui-select{position:absolute;left:0;right:0;top:100%;height:0;display:block}.sui-select__menu[data-sui-flip].sc-sui-select{top:0}[data-sui-size=large].sc-sui-select-h sui-dropdown-item.sc-sui-select{min-height:44px;padding:10px 8px}[data-sui-size=xlarge].sc-sui-select-h sui-dropdown-item.sc-sui-select{min-height:48px;padding:12px 8px}[data-sui-size=large].sc-sui-select-h sui-dropdown-item.sc-sui-select,[data-sui-size=xlarge].sc-sui-select-h sui-dropdown-item.sc-sui-select{--sui-type-paragraph-sm-size:var(--sui-type-paragraph-md-size, 16px);--sui-type-paragraph-sm-weight:var(--sui-type-paragraph-md-weight, 400);--sui-type-paragraph-sm-line:var(--sui-type-paragraph-md-line, 24px);--sui-type-paragraph-sm-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}@media (max-width: 767px){[data-sui-size=xsmall].sc-sui-select-h sui-dropdown-item.sc-sui-select,[data-sui-size=small].sc-sui-select-h sui-dropdown-item.sc-sui-select,[data-sui-size=medium].sc-sui-select-h sui-dropdown-item.sc-sui-select{min-height:44px;padding:12px 8px}}`;
+
+let nextId = 0;
+const SuiSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        /* ── Variantes ── */
+        /** Tamano del trigger: xsmall 32 / small 36 / medium 40 / large 48 / xlarge 52. Default `medium`. */
+        this.size = 'medium';
+        /** Tipo de left-decoration (Figma Type variant). Default `basic`. */
+        this.type = 'basic';
+        /* ── Contenido / valor ── */
+        /** Texto de placeholder cuando no hay value. Default `Elige…`. */
+        this.placeholder = 'Elige…';
+        /** Opciones del menu. Bindear con `.options` (es un array). Default `[]`. */
+        this.options = [];
+        /**
+         * Value seleccionado (matchea `option.value`). `''`/null = sin seleccion.
+         * Resuelve la option para pintar el label del trigger + el item seleccionado.
+         * Default `''`.
+         */
+        this.value = '';
+        /* ── Left-decoration (slot leading) ── */
+        /**
+         * Left-decoration del trigger: `true` (o el atributo `leading-icon` a secas) =
+         * icono default por type · un nombre de RemixIcon = ese icono · `false` = sin
+         * icono (default, opt-in).
+         */
+        this.leadingIcon = false;
+        /**
+         * sui-flag name para `type="country"` (sino la trae la option seleccionada). Se
+         * muestra SOLO con seleccion hecha; vacio, el left slot muestra el globo.
+         */
+        this.flag = null;
+        /** Imagen del left slot cuando hay value (avatar/brand/provider/company logo). `''`/null = sin imagen. */
+        this.imageUrl = null;
+        /**
+         * Badge inline entre value y chevron: string ('New') o, por property, un
+         * `SuiSelectBadgeConfig` (label + color/variant/size del `<sui-badge>`).
+         * `''`/null = sin badge.
+         */
+        this.badge = null;
+        /* ── Label / hint slots (delegados a sui-form-label / sui-form-hint) ── */
+        /** Texto del label (renderea sui-form-label arriba del trigger). `''`/null = sin label. */
+        this.label = null;
+        /** Texto secundario del label (ej. "Optional"). */
+        this.sublabel = null;
+        /** Asterisco rojo en el label. Default false. */
+        this.required = false;
+        /** Tooltip en el icono info del label. */
+        this.tooltip = null;
+        /** Texto del hint debajo del trigger. `''`/null = sin hint. */
+        this.hint = null;
+        /* ── Estados ── */
+        /** Estado de error (border rojo + focus ring rojo + muestra errorMessage). Default false. */
+        this.error = false;
+        /** Mensaje de error (reemplaza al hint cuando error=true). */
+        this.errorMessage = null;
+        /** Deshabilitado (no abre, no emite). Default false. */
+        this.disabled = false;
+        /* ── Estado interno ── */
+        /** Panel abierto. Refleja a `data-sui-open` para el visual state del host. */
+        this.open = false;
+        /** Option resuelta desde `value` (o null). Se deriva en updateSelected(). */
+        this.selected = null;
+        /** Indice keyboard-highlighted dentro del panel (-1 = ninguno). */
+        this.highlightedIndex = -1;
+        /* ids a11y: label visible, listbox, hint y cada opcion (aria-activedescendant). */
+        this.uid = `sui-select-${++nextId}`;
+        this.labelId = `${this.uid}-label`;
+        this.listboxId = `${this.uid}-listbox`;
+        this.hintId = `${this.uid}-hint`;
+        /* ── Trigger interaction ── */
+        this.onTriggerClick = () => {
+            void this.toggleMenu();
+        };
+        /** Keyboard nav del trigger (Enter/Space/Arrows/Escape/Tab). Espeja el Angular. */
+        this.onTriggerKeydown = (event) => {
+            if (this.disabled)
+                return;
+            switch (event.key) {
+                case 'Enter':
+                case ' ':
+                case 'Spacebar':
+                    event.preventDefault();
+                    if (!this.open) {
+                        void this.openMenu();
+                    }
+                    else {
+                        const opt = this.options[this.highlightedIndex];
+                        if (opt)
+                            this.selectOption(opt);
+                    }
+                    break;
+                case 'ArrowDown':
+                    event.preventDefault();
+                    if (!this.open)
+                        void this.openMenu();
+                    else
+                        this.moveHighlight(1);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (!this.open)
+                        void this.openMenu();
+                    else
+                        this.moveHighlight(-1);
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        event.preventDefault();
+                        this.highlightedIndex = this.firstEnabledIndex();
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        event.preventDefault();
+                        this.highlightedIndex = this.lastEnabledIndex();
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        event.preventDefault();
+                        void this.closeMenu();
+                    }
+                    break;
+                case 'Tab':
+                    if (this.open)
+                        void this.closeMenu();
+                    break;
+            }
+        };
+        /**
+         * Sincroniza el estado interno con el sui-dropdown-menu. Cubre TODOS los paths de
+         * close (programatico, backdrop click, Escape, resize/scroll detach) — single
+         * point of truth, igual que onMenuOpenedChange del Angular.
+         */
+        this.onMenuOpenedChange = (event) => {
+            /* El `openedChange` del menu interno no sale del select: el Angular no tiene ese output. */
+            event.stopPropagation();
+            const open = event.detail;
+            this.open = open;
+            if (open) {
+                /* El sui-dropdown-menu hace focusFirstItem() al abrir (mueve foco al panel).
+                   El select sigue el patron combobox del Angular: el foco se queda en el
+                   trigger y la navegacion (Arrow/Enter) la maneja onTriggerKeydown via el
+                   highlightedIndex. Devolvemos el foco al trigger tras el focus del menu. */
+                requestAnimationFrame(() => {
+                    var _a, _b;
+                    (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+                    /* shortcut: el panel role=listbox lo renderea sui-dropdown-menu y no expone
+                       id/aria-label; se le ponen aca para aria-controls. Pasar a props del menu
+                       cuando las tenga. */
+                    const panel = (_b = this.menuEl) === null || _b === void 0 ? void 0 : _b.querySelector('[role="listbox"]');
+                    panel === null || panel === void 0 ? void 0 : panel.setAttribute('id', this.listboxId);
+                    panel === null || panel === void 0 ? void 0 : panel.setAttribute('aria-label', this.label || this.placeholder);
+                });
+            }
+            else {
+                this.highlightedIndex = -1;
+            }
+        };
+    }
+    optionId(i) {
+        return `${this.listboxId}-opcion-${i}`;
+    }
+    componentWillLoad() {
+        this.updateSelected();
+    }
+    /** Strip del `title` nativo del host (evita el tooltip gris del OS; regla del DS). */
+    componentWillRender() {
+        this.el.removeAttribute('title');
+    }
+    componentDidLoad() {
+        /* Anclar el menu al trigger DESPUES del primer render (cuando el ref existe).
+           El Angular pasaba [origin]=triggerEl; aca asignamos originElement por JS. */
+        if (this.menuEl && this.triggerEl)
+            this.menuEl.originElement = this.triggerEl;
+    }
+    onValueChange() {
+        this.updateSelected();
+    }
+    onOptionsChange() {
+        this.updateSelected();
+    }
+    onDisabledChange(value) {
+        if (value && this.open)
+            void this.closeMenu();
+    }
+    /** Resuelve `selected` desde `value` (re-resuelve cuando options llega async). */
+    updateSelected() {
+        var _a;
+        const value = this.value;
+        if (value === '' || value === null || value === undefined) {
+            this.selected = null;
+            return;
+        }
+        this.selected = (_a = this.options.find((o) => o.value === value)) !== null && _a !== void 0 ? _a : null;
+    }
+    /* ── Derived (getters) ── */
+    /** Label de la option seleccionada (mostrado en el trigger). null = placeholder. */
+    get selectedLabel() {
+        var _a, _b;
+        return (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : null;
+    }
+    /**
+     * `leadingIcon` normalizado: false = sin icono · true = default por type ·
+     * string = RemixIcon. Por atributo llega como string ('' / 'true' / 'false').
+     */
+    get leadingCfg() {
+        const li = this.leadingIcon;
+        if (li === true || li === 'true' || li === '')
+            return true;
+        if (!li || li === 'false')
+            return false;
+        return li;
+    }
+    /** Icono efectivo del left slot: string custom > default-por-type. */
+    get leadingIconName() {
+        const cfg = this.leadingCfg;
+        return typeof cfg === 'string' ? cfg : SUI_SELECT_DEFAULT_ICON_BY_TYPE[this.type];
+    }
+    /** Flag efectivo del left slot: prop > la de la option seleccionada. */
+    get effectiveFlag() {
+        var _a, _b, _c;
+        return (_c = (_a = this.flag) !== null && _a !== void 0 ? _a : (_b = this.selected) === null || _b === void 0 ? void 0 : _b.flag) !== null && _c !== void 0 ? _c : null;
+    }
+    /** Muestra la imagen (avatar/logo) en vez del icono cuando hay imageUrl. */
+    get showLeadingImage() {
+        return !!this.imageUrl;
+    }
+    /** Se renderea el left slot? (leadingIcon activo O hay imageUrl/flag). */
+    get showLeading() {
+        return !!this.leadingCfg || !!this.imageUrl || !!this.effectiveFlag;
+    }
+    /** Badge normalizado: string -> { label }. */
+    get badgeCfg() {
+        const b = this.badge;
+        return b ? (typeof b === 'string' ? { label: b } : b) : null;
+    }
+    /** El rotulo y el hint no crecen con el control: su escala llega a `medium`. */
+    get labelSize() {
+        return this.size === 'large' || this.size === 'xlarge' ? 'medium' : this.size;
+    }
+    get hasLabel() {
+        return !!this.label;
+    }
+    /** Mensaje del hint slot: errorMessage si error, sino hint. */
+    get hintMessage() {
+        return this.error ? this.errorMessage : this.hint;
+    }
+    get hasHint() {
+        return !!this.hintMessage;
+    }
+    /* ── iOS :active fix (presencia del binding engage el touch pipeline) ── */
+    onTouchStart() {
+        /* no-op a proposito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd(event) {
+        const t = event.target;
+        const el = t === null || t === void 0 ? void 0 : t.closest('.sui-select__trigger, sui-dropdown-item');
+        if (el)
+            el.blur();
+    }
+    /* ── Open / close (API publica — espeja open()/close()/toggle() del Angular -> openMenu/closeMenu/toggleMenu) ── */
+    /**
+     * Abre el panel. Pre-highlightea la option seleccionada (o la primera habilitada)
+     * ANTES de abrir, igual que el Angular. Nombre `openMenu` (consistente con sui-compact-select; `open` es State).
+     */
+    async openMenu() {
+        var _a;
+        if (this.disabled || this.open)
+            return;
+        const idx = this.selected
+            ? this.options.findIndex((o) => o.value === this.selected.value)
+            : -1;
+        this.highlightedIndex = idx >= 0 ? idx : this.firstEnabledIndex();
+        await ((_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.openMenu());
+    }
+    /** Cierra el panel. El sync de estado pasa por onMenuOpenedChange(false). */
+    async closeMenu() {
+        var _a;
+        if (!this.open)
+            return;
+        await ((_a = this.menuEl) === null || _a === void 0 ? void 0 : _a.closeMenu());
+    }
+    /** Alterna el panel. */
+    async toggleMenu() {
+        if (this.disabled)
+            return;
+        if (this.open)
+            await this.closeMenu();
+        else
+            await this.openMenu();
+    }
+    /* ── Selection ── */
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value = option.value;
+        this.selected = option;
+        this.valueChange.emit(option.value);
+        void this.closeMenu();
+    }
+    /* ── Keyboard highlight helpers (skip disabled) ── */
+    moveHighlight(dir) {
+        var _a;
+        const opts = this.options;
+        const n = opts.length;
+        if (n === 0)
+            return;
+        let i = this.highlightedIndex;
+        for (let step = 0; step < n; step++) {
+            i = (i + dir + n) % n;
+            if (i < 0)
+                i = n - 1;
+            if (!((_a = opts[i]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                this.highlightedIndex = i;
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        const idx = this.options.findIndex((o) => !o.disabled);
+        return idx >= 0 ? idx : 0;
+    }
+    lastEnabledIndex() {
+        var _a;
+        for (let i = this.options.length - 1; i >= 0; i--) {
+            if (!((_a = this.options[i]) === null || _a === void 0 ? void 0 : _a.disabled))
+                return i;
+        }
+        return -1;
+    }
+    /* ── Render helpers ── */
+    /** Left-decoration (Figma Type variant): imagen / flag / icono 20x20. */
+    renderLeadingInner() {
+        var _a, _b;
+        if (this.showLeadingImage) {
+            if (this.type === 'avatar') {
+                return index.h("sui-avatar", { size: "xs", src: (_a = this.imageUrl) !== null && _a !== void 0 ? _a : undefined });
+            }
+            return index.h("img", { class: "sui-select__leading-img", src: (_b = this.imageUrl) !== null && _b !== void 0 ? _b : undefined, alt: "" });
+        }
+        /* La bandera, SOLO con seleccion hecha: vacio muestra el globo (fiel a Figma). */
+        if (this.type === 'country' && this.effectiveFlag && this.selectedLabel !== null) {
+            return (index.h("sui-flag", { class: "sui-select__leading-flag", name: this.effectiveFlag, size: "md" }));
+        }
+        return (index.h("sui-icon", { class: "sui-select__leading-icon", name: this.leadingIconName, size: 20 }));
+    }
+    /** Slot leading de cada item del panel segun el type del select. */
+    renderItemLeading(option) {
+        if (this.type === 'country' && option.flag) {
+            return index.h("sui-flag", { slot: "leading", name: option.flag, size: "sm" });
+        }
+        if (option.icon) {
+            return index.h("sui-icon", { slot: "leading", name: option.icon, size: 20 });
+        }
+        return null;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const badge = this.badgeCfg;
+        return (index.h(index.Host, { key: '62bacbd1582107fa127bfed47033e6a63802663b', "data-sui-size": this.size, "data-sui-type": this.type, "data-sui-error": this.error ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "data-sui-open": this.open ? '' : null, "data-sui-filled": this.selectedLabel !== null ? '' : null }, this.hasLabel && (index.h("sui-form-label", { key: '728957bbb1a2ec57af37364fa4c4bc1c8d1be11c', class: "sui-select__label-host", label: this.label, sublabel: (_a = this.sublabel) !== null && _a !== void 0 ? _a : undefined, required: this.required, tooltip: (_b = this.tooltip) !== null && _b !== void 0 ? _b : undefined, size: this.labelSize, id: this.labelId, onClick: this.onTriggerClick })), index.h("div", { key: 'd4c225db1418df077720d9339e2a4be95425f834', class: "sui-select__field" }, index.h("div", { key: '585093a9d252ae4a17e929b28a1bd817c8ce3c2e', class: {
+                'sui-select__trigger': true,
+                'sui-select__trigger--error': this.error,
+                'sui-select__trigger--disabled': this.disabled,
+                'sui-select__trigger--open': this.open,
+                'sui-select__trigger--filled': this.selectedLabel !== null,
+            }, ref: (el) => (this.triggerEl = el), role: "combobox", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-labelledby": this.hasLabel ? this.labelId : undefined, "aria-label": this.hasLabel ? undefined : this.placeholder, "aria-controls": this.open ? this.listboxId : undefined, "aria-activedescendant": this.open && this.highlightedIndex >= 0 ? this.optionId(this.highlightedIndex) : undefined, "aria-describedby": this.hasHint ? this.hintId : undefined, "aria-invalid": this.error ? 'true' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeydown, onTouchStart: (e) => e.currentTarget, onTouchEnd: (e) => e.currentTarget.blur() }, this.showLeading && (index.h("span", { key: '03b722a4858f15dd0726af519fd21dec42e360eb', class: "sui-select__leading" }, index.h("slot", { key: '4226b83e178f5f583db2444e9a8313a19583b9f3', name: "leading" }), this.renderLeadingInner())), index.h("span", { key: '430a89f683b50064695ac2fa013d9ef16d25f8a6', class: "sui-select__value" }, this.selectedLabel !== null ? (this.selectedLabel) : (index.h("span", { class: "sui-select__placeholder" }, this.placeholder))), badge && (index.h("sui-badge", { key: '07b716788ecefae35b52d957d835b733f3c4f72f', class: "sui-select__badge", color: (_c = badge.color) !== null && _c !== void 0 ? _c : 'orange', variant: (_d = badge.variant) !== null && _d !== void 0 ? _d : 'lighter', size: (_e = badge.size) !== null && _e !== void 0 ? _e : 'medium' }, badge.label)), index.h("sui-icon", { key: '0e69c90214d601038bfe9c027133105f07d414e7', class: "sui-select__chevron", name: "arrow-down-s-line", size: 20, "aria-hidden": "true" })), index.h("sui-dropdown-menu", { key: 'd8eae013b67d4f4ab2f9cc1f4c47760e37c08ce6', ref: (el) => (this.menuEl = el), class: "sui-select__menu", matchWidth: true, disabled: this.disabled, popupRole: "listbox", panelClass: "sui-select__overlay-pane", onOpenedChange: this.onMenuOpenedChange }, this.options.map((option, i) => (index.h("sui-dropdown-item", { slot: "panel", key: option.value, id: this.optionId(i), mode: "option", label: option.label, selected: option.value === this.value, highlighted: this.highlightedIndex === i, disabled: !!option.disabled, onClicked: () => this.selectOption(option), onMouseEnter: () => {
+                if (!option.disabled)
+                    this.highlightedIndex = i;
+            } }, this.renderItemLeading(option)))))), this.hasHint && (index.h("sui-form-hint", { key: 'c23c1575b979db74b5d58222ea618313098a5656', class: "sui-select__hint-host", message: (_f = this.hintMessage) !== null && _f !== void 0 ? _f : undefined, variant: this.error ? 'error' : 'neutral', id: this.hintId }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "options": [{
+                "onOptionsChange": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+SuiSelect.style = suiSelectCss();
+
+exports.sui_select = SuiSelect;