@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,353 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiCompactSelectCss = () => `@charset "UTF-8";.sc-sui-compact-select-h{position:relative;display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;vertical-align:middle;font-family:var(--sui-font-sans, sans-serif)}.sui-compact-select__trigger.sc-sui-compact-select{display:inline-flex;align-items:center;flex-shrink:0;box-sizing:border-box;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:0 1px 2px 0 rgba(10, 13, 20, 0.031372549);cursor:pointer;user-select:none;outline:none;transition:background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease;font-family:var(--sui-font-sans, sans-serif);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -0.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-size=medium].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:9px 10px;gap:4px;border-radius:var(--sui-radius-10, 10px)}[data-sui-size=small].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:7px 8px;gap:4px;border-radius:var(--sui-radius-8, 8px)}[data-sui-size=xsmall].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:5px 6px;gap:2px;border-radius:var(--sui-radius-8, 8px)}[data-sui-type=basic][data-sui-size=medium].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:9px 10px 9px 12px}[data-sui-type=basic][data-sui-size=small].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:7px 8px 7px 12px}[data-sui-type=basic][data-sui-size=xsmall].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:5px 6px 5px 10px}[data-sui-size=large].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:11px 12px;gap:6px;border-radius:var(--sui-radius-12, 12px);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-type=basic][data-sui-size=large].sc-sui-compact-select-h .sui-compact-select__trigger.sc-sui-compact-select{padding:11px 12px 11px 14px}.sui-compact-select__menu--large.sc-sui-compact-select .sui-compact-select__option.sc-sui-compact-select{min-height:44px;padding:10px 8px}.sui-compact-select__menu--large.sc-sui-compact-select .sui-compact-select__option-label.sc-sui-compact-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)}@media (max-width: 767px){.sui-compact-select__menu.sc-sui-compact-select:not(.sui-compact-select__menu--large) .sui-compact-select__option.sc-sui-compact-select{min-height:44px;padding:12px 8px}}.sui-compact-select__trigger.sc-sui-compact-select:not(.sui-compact-select__trigger--disabled):not(.sui-compact-select__trigger--error):not(.sui-compact-select__trigger--open):hover{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}.sui-compact-select__trigger.sc-sui-compact-select:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--open.sc-sui-compact-select:not(.sui-compact-select__trigger--disabled){outline:none;background:var(--sui-bg-white-0, #fff);border-color:var(--sui-stroke-strong-950, #171717);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px var(--sui-slate-alpha-16, rgba(153, 160, 174, 0.16))}.sui-compact-select__trigger--error.sc-sui-compact-select:not(.sui-compact-select__trigger--disabled){border-color:var(--sui-state-error-base, #fb3748)}.sui-compact-select__trigger--error.sc-sui-compact-select:not(.sui-compact-select__trigger--disabled):focus-visible,.sui-compact-select__trigger--error.sui-compact-select__trigger--open.sc-sui-compact-select:not(.sui-compact-select__trigger--disabled){outline:none;border-color:var(--sui-state-error-base, #fb3748);box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px var(--sui-red-alpha-16, rgba(251, 55, 72, 0.16))}.sui-compact-select__trigger--disabled.sc-sui-compact-select{background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;color:var(--sui-text-disabled-300, #d1d1d1);cursor:not-allowed;pointer-events:none;box-shadow:none}.sui-compact-select__trigger--disabled.sc-sui-compact-select .sui-compact-select__leading.sc-sui-compact-select{opacity:0.48}.sui-compact-select__trigger--disabled.sc-sui-compact-select .sui-compact-select__arrow.sc-sui-compact-select{color:var(--sui-icon-disabled-300, #d1d1d1)}.sui-compact-select__leading.sc-sui-compact-select{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-filled].sc-sui-compact-select-h .sui-compact-select__leading.sc-sui-compact-select{color:var(--sui-icon-strong-950, #171717)}.sui-compact-select__value.sc-sui-compact-select{flex:1 0 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.sui-compact-select__value[data-sui-placeholder].sc-sui-compact-select{color:var(--sui-text-sub-600, #5c5c5c)}.sui-compact-select__trigger--disabled.sc-sui-compact-select .sui-compact-select__value[data-sui-placeholder].sc-sui-compact-select{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__arrow.sc-sui-compact-select{flex-shrink:0;color:var(--sui-text-sub-600, #5c5c5c);transition:transform 120ms ease}.sui-compact-select__menu.sc-sui-compact-select{position:absolute;top:calc(100% + 4px);left:0;z-index:50;box-sizing:border-box;min-width:200px;width:max-content;max-width:min(320px, 100vw - 16px);max-height:min(320px, 100vh - 32px);overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-16, 16px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1019607843));cursor:default;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;animation:sui-compact-select-in 120ms ease-out}[data-sui-flip].sc-sui-compact-select-h .sui-compact-select__menu.sc-sui-compact-select{top:auto;bottom:calc(100% + 4px)}@keyframes sui-compact-select-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sui-compact-select__option.sc-sui-compact-select{display:flex;align-items:center;gap:8px;min-height:36px;padding:8px;border-radius:var(--sui-radius-8, 8px);background:var(--sui-bg-white-0, #fff);cursor:pointer;outline:none;box-sizing:border-box;transition:background 100ms ease-out, box-shadow 100ms ease-out}.sui-compact-select__option.sc-sui-compact-select:active:not(.sui-compact-select__option--disabled),.sui-compact-select__option.sc-sui-compact-select:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843))}.sui-compact-select__option--highlighted.sc-sui-compact-select{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-compact-select__option--selected.sc-sui-compact-select{background:var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843))}.sui-compact-select__option--selected.sc-sui-compact-select .sui-compact-select__option-label.sc-sui-compact-select,.sui-compact-select__option--selected.sc-sui-compact-select .sui-compact-select__option-sublabel.sc-sui-compact-select,.sui-compact-select__option--selected.sc-sui-compact-select .sui-compact-select__option-check.sc-sui-compact-select{color:var(--sui-primary-base, #fa7319)}.sui-compact-select__option--selected.sc-sui-compact-select:hover{background:var(--sui-primary-alpha-16, rgba(250, 115, 25, 0.1607843137))}.sui-compact-select__option--disabled.sc-sui-compact-select{cursor:not-allowed;pointer-events:none}.sui-compact-select__option--disabled.sc-sui-compact-select .sui-compact-select__option-label.sc-sui-compact-select,.sui-compact-select__option--disabled.sc-sui-compact-select .sui-compact-select__option-sublabel.sc-sui-compact-select{color:var(--sui-text-disabled-300, #d1d1d1)}.sui-compact-select__option--disabled.sc-sui-compact-select .sui-compact-select__option-leading.sc-sui-compact-select{color:var(--sui-icon-disabled-300, #d1d1d1);opacity:0.48}.sui-compact-select__option-leading.sc-sui-compact-select{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-compact-select__option-leading.sc-sui-compact-select:empty{display:none}.sui-compact-select__option-text.sc-sui-compact-select{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:4px}.sui-compact-select__option-label.sc-sui-compact-select{font-size:var(--sui-type-paragraph-sm-size, 14px);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -0.006em);font-weight:var(--sui-type-paragraph-sm-weight, 400);color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-compact-select__option-sublabel.sc-sui-compact-select{font-size:var(--sui-type-paragraph-xs-size, 12px);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:var(--sui-type-paragraph-xs-spacing, 0);font-weight:var(--sui-type-paragraph-xs-weight, 400);color:var(--sui-text-soft-400, #a3a3a3);flex-shrink:0}.sui-compact-select__option-check.sc-sui-compact-select{width:20px;height:20px;flex-shrink:0;color:var(--sui-primary-base, #fa7319)}`;
+
+const SuiCompactSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        this.selectedChange = index.createEvent(this, "selectedChange");
+        /* ── Variantes ── */
+        /** Tipo del trigger: basic (solo texto) / icon (RemixIcon leading) / country (sui-flag leading). Default `basic`. */
+        this.type = 'basic';
+        /** Tamaño: large 48 (extensión SUI, mobile) / medium 40 / small 36 / xsmall 32. Default `medium`. */
+        this.size = 'medium';
+        /* ── Contenido / valor ── */
+        /**
+         * Valor seleccionado (matchea `item.value`). En modo items, resuelve el item con
+         * `value === value` para pintar el estado seleccionado. En modo trigger-only, es
+         * el texto que se muestra directamente. Default `''`.
+         */
+        this.value = '';
+        /** Placeholder cuando no hay valor (types basic + country). Default `''`. */
+        this.placeholder = '';
+        /** RemixIcon name del leading estatico (type='icon', modo trigger-only). `''`/null = sin icono. */
+        this.icon = null;
+        /** Slug de bandera del leading estatico (type='country', modo trigger-only). `''`/null = sin bandera. */
+        this.flag = null;
+        /* ── Modo items (self-managed overlay) ── */
+        /** Items del menu. Si tiene length > 0, el componente gestiona su propio panel. Default `[]`. */
+        this.items = [];
+        /* ── Estados ── */
+        /** Estado de error (border rojo + focus ring rojo). Default `false`. */
+        this.error = false;
+        /** Deshabilitado (no abre, no emite). Default `false`. */
+        this.disabled = false;
+        /**
+         * Nombre accesible del trigger. Imprescindible con `type="icon"`, que no
+         * muestra texto: sin `ariaLabel` usa el label del ítem elegido o el placeholder.
+         * También con `type="country"` cuando solo se ve la bandera.
+         */
+        this.ariaLabel = null;
+        /* ── Estado interno ── */
+        /** Panel abierto. Refleja a `data-sui-open` para el visual state del host. */
+        this.open = false;
+        /** Item resuelto desde `value` (o null). Se deriva en updateSelected(). */
+        this.selected = null;
+        /** Indice keyboard-highlighted dentro del panel (-1 = ninguno). */
+        this.highlightedIndex = -1;
+        /* ── Trigger interaction ── */
+        /** Click del div trigger interno (patrón canon sui-select; el host ya no es el botón). */
+        this.onTriggerClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            }
+            this.clicked.emit(event);
+            if (this.hasItems)
+                this.toggleMenu();
+        };
+        this.onHostKeydown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+                // Si el panel esta abierto y hay un item highlighted, seleccionarlo.
+                if (this.open && this.highlightedIndex >= 0) {
+                    event.preventDefault();
+                    const item = this.items[this.highlightedIndex];
+                    if (item)
+                        this.selectItem(item);
+                    return;
+                }
+                event.preventDefault();
+                this.clicked.emit(event);
+                if (this.hasItems)
+                    this.toggleMenu();
+                return;
+            }
+            if (!this.hasItems)
+                return;
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                if (!this.open)
+                    this.openMenu();
+                this.moveHighlight(1);
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (!this.open)
+                    this.openMenu();
+                this.moveHighlight(-1);
+            }
+            else if (event.key === 'Escape') {
+                if (this.open) {
+                    event.preventDefault();
+                    this.closeMenu();
+                }
+            }
+            else if (event.key === 'Home' && this.open) {
+                event.preventDefault();
+                this.highlightedIndex = this.firstEnabledIndex();
+            }
+            else if (event.key === 'End' && this.open) {
+                event.preventDefault();
+                this.highlightedIndex = this.lastEnabledIndex();
+            }
+        };
+        this.onOptionClick = (event, item) => {
+            event.stopPropagation();
+            this.selectItem(item);
+        };
+        /* ── Auto-flip si el panel se sale del viewport inferior ── */
+        this.flipUp = false;
+    }
+    componentWillLoad() {
+        // Sin tooltip nativo: `title` del host fuera ('[attr.title]': 'null' del Angular).
+        this.el.removeAttribute('title');
+        this.updateSelected();
+    }
+    onValueChange() {
+        this.updateSelected();
+    }
+    onItemsChange() {
+        this.updateSelected();
+    }
+    onDisabledChange(value) {
+        if (value && this.open)
+            this.closeMenu();
+    }
+    /**
+     * Resuelve `selected` desde `value`. Si el value no matchea ningun item (items
+     * aun no llegaron), cuando items cambie el Watch (`onItemsChange`) reintenta.
+     */
+    updateSelected() {
+        const value = this.value;
+        if (value === '' || value === null || value === undefined) {
+            this.selected = null;
+            return;
+        }
+        const match = this.items.find((i) => i.value === value);
+        if (match) {
+            this.selected = match;
+        }
+        else {
+            // value seteado pero sin item que matchee todavia: limpiar selected
+            // y esperar a que onItemsChange reintente con los items nuevos.
+            this.selected = null;
+        }
+    }
+    /* ── Derived (getters) ── */
+    get hasItems() {
+        return this.items.length > 0;
+    }
+    /** Icon del arrow trailing: down (closed) / up (open). */
+    get arrowIcon() {
+        return this.open ? 'arrow-up-s-line' : 'arrow-down-s-line';
+    }
+    /**
+     * Tamano del sui-flag del trigger segun size (Figma 377:5083):
+     *   medium/small -> sm (20px), xsmall -> xs (16px).
+     */
+    get flagSize() {
+        return this.size === 'xsmall' ? 'xs' : 'sm';
+    }
+    get displayValue() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '';
+    }
+    get displayIcon() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.icon) !== null && _b !== void 0 ? _b : this.icon) !== null && _c !== void 0 ? _c : null;
+    }
+    get displayFlag() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.selected) === null || _a === void 0 ? void 0 : _a.flag) !== null && _b !== void 0 ? _b : this.flag) !== null && _c !== void 0 ? _c : null;
+    }
+    get hasValue() {
+        return !!this.displayValue;
+    }
+    get triggerAriaLabel() {
+        if (this.ariaLabel)
+            return this.ariaLabel;
+        if (this.type !== 'icon')
+            return undefined;
+        return (this.hasValue ? this.displayValue : this.placeholder) || undefined;
+    }
+    /* ── 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 opt = t === null || t === void 0 ? void 0 : t.closest('.sui-compact-select__option');
+        if (opt)
+            opt.blur();
+    }
+    /** Avanza el highlight saltando items disabled. dir = +1 (down) / -1 (up). */
+    moveHighlight(dir) {
+        var _a;
+        const n = this.items.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 = this.items[i]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                this.highlightedIndex = i;
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        return this.items.findIndex((it) => !it.disabled);
+    }
+    lastEnabledIndex() {
+        var _a;
+        for (let i = this.items.length - 1; i >= 0; i--) {
+            if (!((_a = this.items[i]) === null || _a === void 0 ? void 0 : _a.disabled))
+                return i;
+        }
+        return -1;
+    }
+    /* ── Outside / scroll / escape close (replica scrollStrategy + backdrop CDK) ── */
+    onDocumentClick(event) {
+        if (!this.open)
+            return;
+        const target = event.target;
+        if (target && !this.el.contains(target))
+            this.closeMenu();
+    }
+    onDocumentKeydown(event) {
+        if (this.open && event.key === 'Escape')
+            this.closeMenu();
+    }
+    /* Sin re-posicionar en scroll (lockedPosition del Angular): el lado se decide al
+       abrir y queda fijo; el panel es absolute dentro del host y acompaña al trigger. */
+    onWindowResize() {
+        if (this.open)
+            requestAnimationFrame(() => this.flipIfClipped());
+    }
+    /* ── Open / close ── */
+    /** Abre el panel imperativamente (no hace nada en modo trigger-only). */
+    async openMenu() {
+        if (this.disabled || !this.hasItems || this.open)
+            return;
+        this.open = true;
+        // Posicionar el highlight inicial en el selected (o el primero habilitado).
+        const selIdx = this.selected
+            ? this.items.findIndex((i) => i.value === this.selected.value)
+            : -1;
+        this.highlightedIndex = selIdx >= 0 ? selIdx : this.firstEnabledIndex();
+        requestAnimationFrame(() => this.flipIfClipped());
+    }
+    /** Cierra el panel imperativamente. */
+    async closeMenu() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.highlightedIndex = -1;
+        this.flipUp = false;
+    }
+    /** Alterna el panel imperativamente. */
+    async toggleMenu() {
+        if (this.open)
+            await this.closeMenu();
+        else
+            await this.openMenu();
+    }
+    /* ── Selection ── */
+    selectItem(item) {
+        if (item.disabled)
+            return;
+        this.value = item.value;
+        this.selected = item;
+        this.selectedChange.emit(item);
+        this.closeMenu();
+    }
+    flipIfClipped() {
+        const panel = this.el.querySelector('.sui-compact-select__menu');
+        if (!panel)
+            return;
+        const hostRect = this.el.getBoundingClientRect();
+        const panelHeight = panel.offsetHeight;
+        const spaceBelow = window.innerHeight - hostRect.bottom;
+        const spaceAbove = hostRect.top;
+        const flip = spaceBelow < panelHeight + 8 && spaceAbove > spaceBelow;
+        if (flip !== this.flipUp)
+            this.flipUp = flip;
+    }
+    /* ── Render helpers ── */
+    renderLeading() {
+        if (this.type === 'icon') {
+            const name = this.displayIcon;
+            if (!name)
+                return null;
+            return (index.h("sui-icon", { class: "sui-compact-select__leading", name: name, size: 20 }));
+        }
+        if (this.type === 'country') {
+            const name = this.displayFlag;
+            if (!name)
+                return null;
+            return (index.h("sui-flag", { class: "sui-compact-select__leading", name: name, size: this.flagSize }));
+        }
+        return null;
+    }
+    renderOption(item, index$1) {
+        const isSelected = !!this.selected && item.value === this.selected.value;
+        const isHighlighted = index$1 === this.highlightedIndex;
+        return (index.h("div", { class: {
+                'sui-compact-select__option': true,
+                'sui-compact-select__option--selected': isSelected,
+                'sui-compact-select__option--highlighted': isHighlighted && !isSelected,
+                'sui-compact-select__option--disabled': !!item.disabled,
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": item.disabled ? 'true' : undefined, "data-sui-selected": isSelected ? '' : undefined, tabindex: item.disabled ? -1 : 0, onClick: (e) => this.onOptionClick(e, item), onMouseEnter: () => {
+                if (!item.disabled)
+                    this.highlightedIndex = index$1;
+            } }, index.h("span", { class: "sui-compact-select__option-leading" }, item.flag ? (index.h("sui-flag", { name: item.flag, size: "sm" })) : item.icon ? (index.h("sui-icon", { name: item.icon, size: 20 })) : null), index.h("span", { class: "sui-compact-select__option-text" }, index.h("span", { class: "sui-compact-select__option-label" }, item.label), item.sublabel && (index.h("span", { class: "sui-compact-select__option-sublabel" }, item.sublabel))), isSelected && (index.h("sui-icon", { class: "sui-compact-select__option-check", name: "check-line", size: 20 }))));
+    }
+    render() {
+        return (index.h(index.Host
+        // SOLO data-attrs de styling. La interacción (click/role/aria/tabindex) vive
+        // en el div .sui-compact-select__trigger — patrón canon sui-select. El teclado
+        // se escucha acá porque también llega desde las opciones del panel.
+        , { key: '3d916667f0f5669b72fbd11c10a00f2a8d4dd6c0', "data-sui-type": this.type, "data-sui-size": this.size, "data-sui-error": this.error ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "data-sui-open": this.open ? '' : null, "data-sui-flip": this.flipUp ? '' : null, "data-sui-filled": this.hasValue ? '' : null, onKeyDown: this.onHostKeydown }, index.h("div", { key: '2da5f3caf4abb677e8a27fbc474af24208c82459', class: {
+                'sui-compact-select__trigger': true,
+                'sui-compact-select__trigger--open': this.open,
+                'sui-compact-select__trigger--error': this.error,
+                'sui-compact-select__trigger--disabled': this.disabled,
+            }, role: "button", tabindex: this.disabled ? undefined : 0, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onTriggerClick }, this.renderLeading(), this.type !== 'icon' && (index.h("span", { key: 'b7e8c9872b85cd81c9149d95092d1c473ae43884', class: "sui-compact-select__value", "data-sui-placeholder": this.hasValue ? null : '' }, this.hasValue ? this.displayValue : this.placeholder)), index.h("sui-icon", { key: '55c69187b1c553bd5d0372e26b7864b080cdc0c4', class: "sui-compact-select__arrow", name: this.arrowIcon, size: 20 })), this.open && this.hasItems && (index.h("div", { key: '23e5f323b3837d78e87e68f6c2342670b99fc65d', class: {
+                'sui-compact-select__menu': true,
+                'sui-compact-select__menu--large': this.size === 'large',
+            }, role: "listbox", onClick: (e) => e.stopPropagation() }, this.items.map((item, index) => this.renderOption(item, index))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "items": [{
+                "onItemsChange": 0
+            }],
+        "disabled": [{
+                "onDisabledChange": 0
+            }]
+    }; }
+};
+SuiCompactSelect.style = suiCompactSelectCss();
+
+exports.sui_compact_select = SuiCompactSelect;

package/dist/cjs/sui-configs-W3MqDkhn.js

@@ -0,0 +1,58 @@
+'use strict';
+
+/**
+ * Configs objeto que el SUI Angular usa en vez de N props sueltos (badge, link,
+ * avatar embebidos). Cada tipo vive en su componente (badge, avatar, button, link-button).
+ * String shorthand = el caso común (`badge="NEW"`, `link="Ver más"`, `avatar="url"`).
+ */
+/** `badge` → config (string = label; vacío = sin badge). Desde HTML un objeto llega como JSON. */
+function resolverBadge(badge) {
+    var _a;
+    if (!badge)
+        return null;
+    if (typeof badge === 'string')
+        return (_a = parsearJson(badge)) !== null && _a !== void 0 ? _a : { label: badge };
+    return badge;
+}
+/** `link` → config con `rel` automático para `_blank` (igual que Angular). */
+function resolverLink(link) {
+    var _a, _b;
+    if (!link)
+        return null;
+    const cfg = typeof link === 'string' ? (_a = parsearJson(link)) !== null && _a !== void 0 ? _a : { label: link } : link;
+    if (!cfg.label)
+        return null;
+    return Object.assign(Object.assign({}, cfg), { rel: (_b = cfg.rel) !== null && _b !== void 0 ? _b : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) });
+}
+/** Botón de pie → config (string = solo label; `null`/label vacío = oculto). */
+function resolverBotonPie(b) {
+    var _a;
+    if (!b)
+        return null;
+    const cfg = typeof b === 'string' ? (_a = parsearJson(b)) !== null && _a !== void 0 ? _a : { label: b } : b;
+    return cfg.label ? cfg : null;
+}
+/** `avatar` → config (string = src directo). */
+function resolverAvatar(avatar) {
+    var _a;
+    if (!avatar)
+        return null;
+    if (typeof avatar === 'string')
+        return (_a = parsearJson(avatar)) !== null && _a !== void 0 ? _a : { src: avatar };
+    return avatar;
+}
+function parsearJson(s) {
+    if (!s.startsWith('{'))
+        return null;
+    try {
+        return JSON.parse(s);
+    }
+    catch (_a) {
+        return null;
+    }
+}
+
+exports.resolverAvatar = resolverAvatar;
+exports.resolverBadge = resolverBadge;
+exports.resolverBotonPie = resolverBotonPie;
+exports.resolverLink = resolverLink;

package/dist/cjs/sui-content-card.cjs.entry.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+const suiContentCardCss = () => `@charset "UTF-8";.sc-sui-content-card-h{display:block;box-sizing:border-box;width:100%;padding:16px;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-12);box-shadow:var(--sui-shadow-x-small);font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-content-card__row.sc-sui-content-card{display:flex;align-items:center;gap:14px}.sui-content-card__leading.sc-sui-content-card{flex-shrink:0;display:flex;align-items:center;justify-content:center}.sui-content-card__card-box.sc-sui-content-card{box-sizing:border-box;flex-shrink:0;width:32px;height:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-4)}.sui-content-card__text.sc-sui-content-card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:4px}.sui-content-card__title-row.sc-sui-content-card{display:flex;align-items:center;gap:4px;min-width:0}.sui-content-card__title.sc-sui-content-card{min-width:0;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);color:var(--sui-text-strong-950);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-content-card__sublabel.sc-sui-content-card{flex-shrink:0;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600);white-space:nowrap}.sui-content-card__badge.sc-sui-content-card{flex-shrink:0}.sui-content-card__subtitle.sc-sui-content-card{font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600);overflow-wrap:break-word}.sui-content-card__dismiss.sc-sui-content-card{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;width:20px;height:20px;background:transparent;border:0;border-radius:var(--sui-radius-4);color:var(--sui-icon-sub-600);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 0.15s ease, color 0.15s ease, transform 0.12s ease}.sui-content-card__dismiss.sc-sui-content-card:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-content-card__dismiss.sc-sui-content-card:active{transform:scale(0.96)}.sui-content-card__dismiss.sc-sui-content-card:focus-visible{outline:2px solid var(--sui-primary-base);outline-offset:2px}.sui-content-card__dismiss.sc-sui-content-card:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none}[data-sui-size=large].sc-sui-content-card-h .sui-content-card__dismiss.sc-sui-content-card{position:relative;width:32px;height:32px;border-radius:var(--sui-radius-8, 8px);margin:-6px -6px -6px 0}[data-sui-size=large].sc-sui-content-card-h .sui-content-card__dismiss.sc-sui-content-card::before{content:"";position:absolute;inset:-4px}@media (max-width: 767px){[data-sui-size=large].sc-sui-content-card-h .sui-content-card__dismiss.sc-sui-content-card::before{inset:-6px}}[data-sui-disabled].sc-sui-content-card-h{pointer-events:none}[data-sui-disabled].sc-sui-content-card-h .sui-content-card__title.sc-sui-content-card,[data-sui-disabled].sc-sui-content-card-h .sui-content-card__sublabel.sc-sui-content-card,[data-sui-disabled].sc-sui-content-card-h .sui-content-card__subtitle.sc-sui-content-card{color:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-content-card-h .sui-content-card__leading.sc-sui-content-card,[data-sui-disabled].sc-sui-content-card-h .sui-content-card__card-box.sc-sui-content-card{opacity:0.5}`;
+
+const SuiContentCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss");
+        /** Tipo de leading visual. Default `basic` (sin leading). */
+        this.type = 'basic';
+        /**
+         * Título — Label/Small, text-strong-950.
+         * GOTCHA: NO se llama `title` (reservado del DOM en Stencil/HTML).
+         */
+        this.cardTitle = '';
+        /** Sublabel inline al lado del título — Paragraph/X Small 12/16, text-sub-600
+         *  (Figma 2942:9517). Vacío = no se renderiza. */
+        this.sublabel = '';
+        /** Subtítulo (la "description" del Content Label) — Paragraph/X Small 12/16, text-sub-600. */
+        this.subtitle = '';
+        /**
+         * Badge inline (Title row, después del sublabel) — string shorthand
+         * (`badge="Principal"`) o `SuiBadgeConfig` (label + color/variant/size).
+         * Fallbacks de la card: color `orange` (branding; el DS de Figma usa `blue`),
+         * variant `lighter`, size `small`. `null`/`''` = sin badge.
+         */
+        this.badge = null;
+        /** RemixIcon name (sin `ri-`) para type=left-icon. */
+        this.icon = null;
+        /**
+         * Avatar del leading (type=avatar / company) — string shorthand (src directo) o
+         * `SuiAvatarConfig { src?, initials?, color? }`. `null` = sin avatar.
+         */
+        this.avatar = null;
+        /** Logo de empresa para type=company (mini-avatar bottom-right del sui-avatar). */
+        this.companyLogoSrc = null;
+        /** Marca para type=brand / card-provider. */
+        this.brand = null;
+        /** Mostrar el botón X de dismiss. Default `true`. */
+        this.dismissible = true;
+        /** aria-label del botón X. Default `Descartar`. */
+        this.dismissAriaLabel = 'Descartar';
+        /**
+         * Tamaño de la X de quitar (la fila no cambia: sigue en 72).
+         * `medium` (default, Figma): 20 × 20 sin área extra.
+         * `large` — extensión SUI (03-10-2026) para mobile: caja de 32 × 32 con el
+         * glyph en 20 y un área táctil invisible de 40 × 40 (44 en ≤767).
+         */
+        this.size = 'medium';
+        /**
+         * Estado deshabilitado: atenúa contenido a tokens disabled-300, deshabilita el
+         * badge y el botón X (sin pointer-events), y setea aria-disabled en el host.
+         */
+        this.disabled = false;
+        this.onDismiss = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            this.dismiss.emit(event);
+        };
+    }
+    /** Sin tooltip nativo: `title={null}` del Host solo actúa desde el segundo render. */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo cual hace que `:active` dispare y se libere
+     * correctamente en el botón X. Sin esto `:active` "stickea" 300-500ms.
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        var _a;
+        (_a = this.el.querySelector('.sui-content-card__dismiss')) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    /** True si hay leading visual (todo menos basic). */
+    get hasLeading() {
+        return this.type !== 'basic';
+    }
+    /** Config del avatar (string = src). */
+    get avatarCfg() {
+        var _a;
+        return (_a = suiConfigs.resolverAvatar(this.avatar)) !== null && _a !== void 0 ? _a : {};
+    }
+    /** Render del leading según `type` (mismos primitivos y tamaños que sui-content-label medium). */
+    renderLeading() {
+        var _a, _b, _c;
+        const avatar = this.avatarCfg;
+        switch (this.type) {
+            case 'left-icon':
+                return (this.icon && (index.h("sui-key-icon", { name: this.icon, size: 40, styleVariant: "stroke", color: "gray" })));
+            case 'avatar':
+            case 'company':
+                return (index.h("sui-avatar", { size: "lg", src: (_a = avatar.src) !== null && _a !== void 0 ? _a : null, initials: (_b = avatar.initials) !== null && _b !== void 0 ? _b : '', color: (_c = avatar.color) !== null && _c !== void 0 ? _c : 'slate', alt: this.cardTitle, companyLogoSrc: this.type === 'company' ? this.companyLogoSrc : null, status: this.type === 'company' && this.companyLogoSrc ? 'company' : null }));
+            case 'brand':
+                return this.brand && index.h("sui-brand-logo", { company: this.brand, size: "xl" });
+            case 'card-provider':
+                return (index.h("div", { class: "sui-content-card__card-box" }, this.brand && index.h("sui-brand-logo", { company: this.brand, size: "sm" })));
+            default:
+                return null;
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        const badge = suiConfigs.resolverBadge(this.badge || null);
+        return (index.h(index.Host, { key: '52509bf7c4403a2ff6a1b6aacd7b8b458c744e22', title: null, role: "group", "aria-label": this.cardTitle || null, "aria-disabled": this.disabled ? 'true' : null, "data-sui-type": this.type, "data-sui-size": this.size, "data-sui-disabled": this.disabled ? '' : null }, index.h("div", { key: '1afb1c8a19a5f78a8daeb2ec26667f1e28234059', class: "sui-content-card__row" }, this.hasLeading && (index.h("div", { key: 'c119f477806a3bd239f6c3075a0b9ffc6edea9d7', class: "sui-content-card__leading" }, this.renderLeading())), index.h("div", { key: '3c4a88d0e414261ae9e17a4f1edf6759d872c649', class: "sui-content-card__text" }, index.h("div", { key: '1fe109720079e9ca2e03500de91a41d77dd71d89', class: "sui-content-card__title-row" }, index.h("span", { key: '214fac4b320a790541c2c279b3689a5b0ee3cf72', class: "sui-content-card__title" }, this.cardTitle), this.sublabel && index.h("span", { key: '0bb1a98d19a812584006b290b732635b821a8e0e', class: "sui-content-card__sublabel" }, this.sublabel), badge && (index.h("sui-badge", { key: '70b85bf33f007af7016c953abd86809f2e8f3c2e', class: "sui-content-card__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'orange', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'lighter', size: ((_c = badge.size) !== null && _c !== void 0 ? _c : 'small'), disabled: this.disabled }, badge.label))), this.subtitle && (index.h("span", { key: 'e4e8619c9472130fe356d7b84a713ff68fbc5c25', class: "sui-content-card__subtitle" }, this.subtitle))), this.dismissible && (index.h("button", { key: '0b9832529c442752af7f76e56393cb487f163f18', type: "button", class: "sui-content-card__dismiss", "aria-label": this.dismissAriaLabel, disabled: this.disabled, onClick: this.onDismiss }, index.h("sui-icon", { key: '0a7c2dd6dfbf0146fbd6e7a7a9b28092f482c644', name: "close-line", size: 20 }))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiContentCard.style = suiContentCardCss();
+
+exports.sui_content_card = SuiContentCard;