@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-command-menu-footer.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+const suiCommandMenuFooterCss = () => `@charset "UTF-8";.sc-sui-command-menu-footer-h{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:13px 20px 14px;background:var(--sui-bg-white-0, #fff);border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box;overflow:hidden}.sui-cmd-footer__group.sc-sui-command-menu-footer{display:flex;align-items:center;gap:8px;flex-shrink:0}.sui-cmd-footer__help.sc-sui-command-menu-footer{display:flex;align-items:center;gap:4px;flex:1 0 0;min-width:0;justify-content:flex-end;white-space:nowrap}.sui-cmd-footer__label.sc-sui-command-menu-footer{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap}.sui-cmd-footer__help.sc-sui-command-menu-footer .sui-cmd-footer__label.sc-sui-command-menu-footer{min-width:0;overflow:hidden;text-overflow:ellipsis}@media (max-width: 600px){.sui-cmd-footer__help.sc-sui-command-menu-footer .sui-cmd-footer__label.sc-sui-command-menu-footer{display:none}}.sc-sui-command-menu-footer-h sui-kbd.sc-sui-command-menu-footer sui-icon.sc-sui-command-menu-footer{color:var(--sui-icon-sub-600, #5c5c5c)}`;
+
+const SuiCommandMenuFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.helpClicked = index.createEvent(this, "helpClicked");
+        /** Label del grupo de navegación (↑ ↓). Default `Navegar`. */
+        this.navigateLabel = 'Navegar';
+        /** Label del grupo de selección (↵). Default `Seleccionar`. */
+        this.selectLabel = 'Seleccionar';
+        /**
+         * Texto previo al link de ayuda. `null` oculta TODO el bloque (label + link).
+         * Default `¿No es lo que buscas? Prueba el`.
+         */
+        this.helpText = '¿No es lo que buscas? Prueba el';
+        /**
+         * Link de ayuda — string shorthand (solo label: renderiza `<button>` y emite
+         * `helpClicked`) o `SuiLinkConfig { label, href?, target?, rel? }`: con href
+         * renderiza `<a>` real; rel automático `noopener noreferrer` para `_blank`.
+         * `null` = sin link. Default `Centro de ayuda`.
+         */
+        this.helpLink = 'Centro de ayuda';
+        this.onHelpClick = (event) => {
+            this.helpClicked.emit(event.detail);
+        };
+    }
+    render() {
+        var _a, _b, _c;
+        const link = suiConfigs.resolverLink(this.helpLink);
+        return (index.h(index.Host, { key: '647c318c64f7585aa355e9647f636082a9aca2e4' }, index.h("div", { key: '081f06a562cf9d0939e25223b9927533424adcdc', class: "sui-cmd-footer__group" }, index.h("sui-kbd", { key: '0b9236a8cb70e644f6c4c40f3447e966d6c57bbc', variant: "subtle" }, index.h("sui-icon", { key: 'c6137c6dbe0463a079245814f3025fedc13a5a86', name: "arrow-up-line", size: 16 })), index.h("sui-kbd", { key: 'a1e01f4912c39de984da6b0453dd14a46373961b', variant: "subtle" }, index.h("sui-icon", { key: '5cf457b69f7c68ceca827b1c1abc024c738a0e10', name: "arrow-down-line", size: 16 })), index.h("span", { key: '77859cd6a8f3b5ff3d449d0568ad74f809de889a', class: "sui-cmd-footer__label" }, this.navigateLabel)), index.h("div", { key: '918fccae5925ae1a5f3145326103cd50ee647b88', class: "sui-cmd-footer__group" }, index.h("sui-kbd", { key: '5cdd6aaafd84dc5e35055777da909edf8c11d43d', variant: "subtle" }, index.h("sui-icon", { key: '4ac54e5d0f429b87d4e70ede1485999f9ac4fd84', name: "corner-down-left-line", size: 16 })), index.h("span", { key: 'e7045e1f72a17e7396feae7ffc745978ad104834', class: "sui-cmd-footer__label" }, this.selectLabel)), this.helpText && (index.h("div", { key: '49bcedca64b076ee1b8231170c8dd35ba968f848', class: "sui-cmd-footer__help" }, index.h("span", { key: '87018c8eefe83eeb3fb58aaeb5bcf21405558035', class: "sui-cmd-footer__label" }, this.helpText), link && (index.h("sui-link-button", { key: '83d0912bef11ec080f94fd82bf89b069c73e982e', variant: "primary", size: "small", href: (_a = link.href) !== null && _a !== void 0 ? _a : undefined, target: (_b = link.target) !== null && _b !== void 0 ? _b : undefined, rel: (_c = link.rel) !== null && _c !== void 0 ? _c : undefined, onClicked: this.onHelpClick }, link.label))))));
+    }
+};
+SuiCommandMenuFooter.style = suiCommandMenuFooterCss();
+
+exports.sui_command_menu_footer = SuiCommandMenuFooter;

package/dist/cjs/sui-command-menu-item.cjs.entry.js

@@ -0,0 +1,156 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+const suiCommandMenuItemCss = () => `.sc-sui-command-menu-item-h{display:flex;align-items:center;gap:12px;width:100%;max-width:600px;padding:10px 12px;background:var(--sui-bg-white-0, #fff);border-radius:var(--sui-radius-10, 10px);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color 100ms ease}.sc-sui-command-menu-item-h:hover,.sc-sui-command-menu-item-h:focus-visible{background:var(--sui-bg-weak-50, #f7f7f7)}.sc-sui-command-menu-item-h:focus-visible{box-shadow:inset 0 0 0 2px var(--sui-primary-base, #fa7319)}[data-sui-size=medium].sc-sui-command-menu-item-h{padding:12px}.sui-cmd-item__leading.sc-sui-command-menu-item{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-cmd-item__leading--icon-box.sc-sui-command-menu-item,[data-sui-size=medium].sc-sui-command-menu-item-h .sui-cmd-item__leading--brand.sc-sui-command-menu-item,[data-sui-size=medium].sc-sui-command-menu-item-h .sui-cmd-item__leading--country.sc-sui-command-menu-item,[data-sui-size=medium].sc-sui-command-menu-item-h .sui-cmd-item__leading--company-box.sc-sui-command-menu-item{box-sizing:border-box;width:40px;height:40px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-full, 999px);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));overflow:hidden}.sui-cmd-item__leading--icon-box.sc-sui-command-menu-item{color:var(--sui-text-sub-600, #5c5c5c)}.sui-cmd-item__leading--icon.sc-sui-command-menu-item{color:var(--sui-text-sub-600, #5c5c5c)}.sui-cmd-item__leading--brand.sc-sui-command-menu-item{width:20px;height:20px;overflow:hidden}.sui-cmd-item__leading--country.sc-sui-command-menu-item{overflow:hidden}.sui-cmd-item__text.sc-sui-command-menu-item{display:flex;flex-direction:column;flex:1 0 0;min-width:0;gap:4px}[data-sui-size=small].sc-sui-command-menu-item-h .sui-cmd-item__text.sc-sui-command-menu-item{flex-direction:row;align-items:center;gap:4px;white-space:nowrap}.sui-cmd-item__title-row.sc-sui-command-menu-item{display:flex;align-items:center;gap:4px;min-width:0}.sui-cmd-item__title.sc-sui-command-menu-item{font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-sui-size=small].sc-sui-command-menu-item-h .sui-cmd-item__title.sc-sui-command-menu-item{font-weight:400}.sui-cmd-item__sublabel.sc-sui-command-menu-item,.sui-cmd-item__description.sc-sui-command-menu-item{font-family:var(--sui-font-sans, sans-serif);font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-cmd-item__sublabel.sc-sui-command-menu-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-cmd-item__description.sc-sui-command-menu-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-cmd-item__badge.sc-sui-command-menu-item,.sui-cmd-item__shortcut.sc-sui-command-menu-item,.sui-cmd-item__button.sc-sui-command-menu-item{flex-shrink:0}.sc-sui-command-menu-item-h:hover .sui-cmd-item__button.sc-sui-command-menu-item,.sc-sui-command-menu-item-h:focus-visible .sui-cmd-item__button.sc-sui-command-menu-item{background:var(--sui-bg-white-0, #fff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));border-radius:var(--sui-radius-6, 6px)}`;
+
+const SuiCommandMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        this.buttonClicked = index.createEvent(this, "buttonClicked");
+        /** Tipo del leading element. Default `basic`. */
+        this.type = 'basic';
+        /** Tamaño. Default `small` (single-line). `medium` = multi-line con box "lifted". */
+        this.size = 'small';
+        /** Texto secundario inline (gris al lado del title). Soportado en ambos sizes. */
+        this.sublabel = null;
+        /** Bloque de descripcion. Solo se renderiza en size=medium. */
+        this.description = null;
+        /** Type=left-icon: nombre RemixIcon (sin prefijo) para el leading. */
+        this.icon = null;
+        /**
+         * Type=avatar/company: avatar — string shorthand (src de la imagen) o
+         * `SuiAvatarConfig { src?, initials?, color? }`. `null` = sin datos
+         * (sui-avatar cae a su placeholder).
+         */
+        this.avatar = null;
+        /** Type=country: slug del pais (ej. 'peru'). */
+        this.flagName = null;
+        /**
+         * Right side: badge — string shorthand (pill gray/lighter, ej. "Pro") o
+         * `SuiBadgeConfig { label, color?, variant?, size? }`. `null` = sin badge.
+         */
+        this.badge = null;
+        /** Right side: shortcut text (sui-kbd, ej. "Cmd-K"). */
+        this.shortcut = null;
+        /** Right side: chevron button (arrow-right). Default `false`. */
+        this.showButton = false;
+        this.onItemClick = (event) => {
+            this.clicked.emit(event);
+        };
+        this.spacePressed = false;
+        /**
+         * Teclado como sui-button: Enter en keydown y Espacio en keyup despachan un
+         * click REAL del host, así el `click` nativo de quien lo usa y `clicked` salen
+         * una sola vez por tecla. Solo las teclas sobre el propio item: Enter en el
+         * botón de la flecha es de ese botón.
+         */
+        this.onItemKeyDown = (event) => {
+            if (event.target !== this.el)
+                return;
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (!event.repeat)
+                    this.el.click();
+            }
+            else if (event.key === ' ' || event.key === 'Spacebar') {
+                event.preventDefault(); // sin scroll de la página
+                if (!event.repeat)
+                    this.spacePressed = true;
+            }
+        };
+        this.onItemKeyUp = (event) => {
+            if (event.target !== this.el || (event.key !== ' ' && event.key !== 'Spacebar'))
+                return;
+            event.preventDefault();
+            if (!this.spacePressed)
+                return;
+            this.spacePressed = false;
+            this.el.click();
+        };
+        this.onButtonClick = (event) => {
+            event.stopPropagation();
+            this.buttonClicked.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`/`:hover` dispare y se
+     * libere correctamente. Sin esto "stickea" 300-500ms en pages standalone.
+     */
+    onHostTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a proposito. */
+    }
+    /** touchend.blur() empuja la deseleccion inmediata del :active en iOS. */
+    onHostTouchEnd() {
+        this.el.blur();
+    }
+    /** Para sui-avatar: traduce el size del item a SuiAvatarSize (lg/xs). */
+    get avatarSize() {
+        return this.size === 'medium' ? 'lg' : 'xs';
+    }
+    /** Config del avatar (string = src). */
+    get avatarCfg() {
+        var _a;
+        return (_a = suiConfigs.resolverAvatar(this.avatar)) !== null && _a !== void 0 ? _a : {};
+    }
+    /** Leading element segun type/size. Devuelve null cuando type=basic. */
+    renderLeading() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const avatar = this.avatarCfg;
+        switch (this.type) {
+            case 'left-icon':
+                return this.size === 'medium' ? (
+                // Medium: icon dentro del box "lifted" (border + shadow + rounded-full).
+                index.h("span", { class: "sui-cmd-item__leading sui-cmd-item__leading--icon-box" }, this.icon && index.h("sui-icon", { name: this.icon, size: 20 }))) : (
+                // Small: solo el icon, sin container.
+                index.h("sui-icon", { class: "sui-cmd-item__leading sui-cmd-item__leading--icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : 'apps-line', size: 20 }));
+            case 'avatar':
+                return (index.h("sui-avatar", { class: "sui-cmd-item__leading", size: this.avatarSize, src: (_b = avatar.src) !== null && _b !== void 0 ? _b : undefined, initials: (_c = avatar.initials) !== null && _c !== void 0 ? _c : '', color: (_d = avatar.color) !== null && _d !== void 0 ? _d : 'slate' }));
+            case 'brand':
+                return (
+                // El consumer proyecta el SVG/img de marca via slot=brand.
+                index.h("span", { class: "sui-cmd-item__leading sui-cmd-item__leading--brand" }, index.h("slot", { name: "brand" })));
+            case 'company':
+                return this.size === 'medium' ? (
+                // Medium: logo 24px (sm) dentro del box "lifted" 40px (Figma 4176:17588).
+                index.h("span", { class: "sui-cmd-item__leading sui-cmd-item__leading--company-box" }, index.h("sui-avatar", { size: "sm", initials: (_e = avatar.initials) !== null && _e !== void 0 ? _e : '', color: (_f = avatar.color) !== null && _f !== void 0 ? _f : 'slate', src: (_g = avatar.src) !== null && _g !== void 0 ? _g : undefined }))) : (
+                // Small: logo 20px (xs) directo, sin container (Figma 4176:17361).
+                index.h("sui-avatar", { class: "sui-cmd-item__leading", size: "xs", initials: (_h = avatar.initials) !== null && _h !== void 0 ? _h : '', color: (_j = avatar.color) !== null && _j !== void 0 ? _j : 'slate', src: (_k = avatar.src) !== null && _k !== void 0 ? _k : undefined }));
+            case 'country':
+                if (!this.flagName)
+                    return null;
+                return this.size === 'medium' ? (
+                // Medium: bandera 24px (md) dentro del box "lifted" 40px.
+                index.h("span", { class: "sui-cmd-item__leading sui-cmd-item__leading--country" }, index.h("sui-flag", { name: this.flagName, size: "md" }))) : (
+                // Small: bandera 20px (sm) directa, sin box — Figma 4171:15653: todos los
+                // leadings small miden 20px (avatar/company/left-icon/flag).
+                index.h("sui-flag", { class: "sui-cmd-item__leading", name: this.flagName, size: "sm" }));
+            default:
+                return null;
+        }
+    }
+    render() {
+        var _a, _b, _c;
+        const showDescription = this.size === 'medium' && !!this.description;
+        // `badge=""` aquí siempre fue «sin badge» (no el booleano viejo de las cards).
+        const badge = suiConfigs.resolverBadge(this.badge || null);
+        return (index.h(index.Host
+        // Strip native `title` attr (no aplica aqui porque usamos `heading`,
+        // pero se deja por seguridad contra herencia del consumer).
+        , { key: '85d089eea4e669c4bddf656ebaed7e5aadaab8d8',
+            // Strip native `title` attr (no aplica aqui porque usamos `heading`,
+            // pero se deja por seguridad contra herencia del consumer).
+            title: null, "data-sui-type": this.type, "data-sui-size": this.size, role: "button", tabindex: "0", onClick: this.onItemClick, onKeyDown: this.onItemKeyDown, onKeyUp: this.onItemKeyUp }, this.renderLeading(), index.h("div", { key: 'ebbbdb06f6e19c242288a33ce5f89d0c589c9aa9', class: "sui-cmd-item__text" }, index.h("div", { key: '0bb59e0bb1aef3071db34deabdcee4c51c19c620', class: "sui-cmd-item__title-row" }, index.h("span", { key: 'b2c3e6a023ff2b872519e4fca3ad67b8ea0b9a88', class: "sui-cmd-item__title" }, this.heading), this.sublabel && index.h("span", { key: '1b8537b2c875fe3c530e4373dc9892d8c2a6b745', class: "sui-cmd-item__sublabel" }, this.sublabel)), showDescription && index.h("span", { key: '455f6aef982d8fbe87fef763e09d829dec1a53e8', class: "sui-cmd-item__description" }, this.description)), badge && (index.h("sui-badge", { key: '26e95cbc94503e4d5b6973f03c7da40d98753497', class: "sui-cmd-item__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'gray', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'lighter', size: ((_c = badge.size) !== null && _c !== void 0 ? _c : 'small') }, badge.label)), this.shortcut && index.h("sui-kbd", { key: 'ee60ef7c64582ebddf68fc8156f78ba3b7cf2532', class: "sui-cmd-item__shortcut" }, this.shortcut), this.showButton && (index.h("sui-compact-button", { key: '2c2775d429cea27b0dd8bca35718f3294fb4e52d', class: "sui-cmd-item__button", icon: "arrow-right-s-line", variantStyle: "ghost", size: "medium", ariaLabel: "Abrir", onClick: this.onButtonClick }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiCommandMenuItem.style = suiCommandMenuItemCss();
+
+exports.sui_command_menu_item = SuiCommandMenuItem;

package/dist/cjs/sui-command-menu-search.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiCommandMenuSearchCss = () => `@charset "UTF-8";.sc-sui-command-menu-search-h{display:flex;align-items:center;gap:8px;width:100%;max-width:600px;padding:14px 20px 13px;background:var(--sui-bg-white-0, #fff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);box-sizing:border-box}.sui-cmd-search__icon.sc-sui-command-menu-search{flex-shrink:0;color:var(--sui-text-soft-400, #a3a3a3)}[data-sui-active].sc-sui-command-menu-search-h .sui-cmd-search__icon.sc-sui-command-menu-search{color:var(--sui-primary-base, #fa7319)}.sui-cmd-search__input.sc-sui-command-menu-search{flex:1 0 0;min-width:0;border:none;outline:none;background:transparent;padding:0;margin:0;font-family:var(--sui-font-sans, sans-serif);font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}@media (max-width: 767px){.sui-cmd-search__input.sc-sui-command-menu-search{font-size:16px}}.sui-cmd-search__input.sc-sui-command-menu-search::placeholder{color:var(--sui-text-soft-400, #a3a3a3);transition:color 120ms ease}.sc-sui-command-menu-search-h:hover:not([data-sui-active]) .sui-cmd-search__input.sc-sui-command-menu-search::placeholder{color:var(--sui-text-sub-600, #5c5c5c)}.sc-sui-command-menu-search-h:focus-within:not([data-sui-active]) .sui-cmd-search__input.sc-sui-command-menu-search::placeholder{color:var(--sui-text-strong-950, #171717)}.sui-cmd-search__kbd.sc-sui-command-menu-search{flex-shrink:0}.sui-cmd-search__info.sc-sui-command-menu-search{flex-shrink:0;color:var(--sui-text-soft-400, #a3a3a3)}`;
+
+const SuiCommandMenuSearch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.cleared = index.createEvent(this, "cleared");
+        /** Texto actual del input (controlado). Default ''. */
+        this.value = '';
+        /** Placeholder del input. Default `Buscar o ir a…`. */
+        this.placeholder = 'Buscar o ir a…';
+        /** Nombre accesible del campo. Sin pasarlo, el lector anuncia el placeholder. */
+        this.ariaLabel = null;
+        /** Mostrar el chip cmdK (visible en los 3 estados). Default `true`. */
+        this.shortcut = true;
+        /** Mostrar el boton derecho (info en default, close en active). Default `true`. */
+        this.button = true;
+        this.onInput = (event) => {
+            this.valueChange.emit(event.target.value);
+        };
+        this.onClear = () => {
+            var _a;
+            this.valueChange.emit('');
+            this.cleared.emit();
+            // Refocus del input nativo (espeja inputRef.focus() del Angular).
+            (_a = this.el.querySelector('.sui-cmd-search__input')) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    /** True cuando hay texto -> muestra close button, search icon primary-base. */
+    get isActive() {
+        return !!this.value;
+    }
+    render() {
+        return (index.h(index.Host, { key: 'be7af4b3655e0242b78f08ec96feaec49e662236', "data-sui-active": this.isActive ? '' : undefined }, index.h("sui-icon", { key: 'ff503d94cbf349262b66ee1d6a7e1850bcc6c7d0', name: "search-2-line", size: 20, class: "sui-cmd-search__icon" }), index.h("input", { key: 'fb1f6ed01f9e23ae2384746bc7df246ea25410fa', type: "text", class: "sui-cmd-search__input", value: this.value, placeholder: this.placeholder, "aria-label": this.ariaLabel || this.placeholder,
+            // Lupa en el teclado; SIN inputmode="search" (mata la lupa en Android).
+            enterkeyhint: "search", onInput: this.onInput, autocomplete: "off", spellcheck: "false" }), this.shortcut && index.h("sui-kbd", { key: '3872f7e19bb73ffdba54f9c217d88d171025635e', class: "sui-cmd-search__kbd" }, "\u2318K"), this.button &&
+            (!this.isActive ? (
+            // Default/Hover: info icon custom del DS SUI (Figma node 125:279).
+            index.h("sui-icon", { name: "info-custom-fill", size: 20, class: "sui-cmd-search__info" })) : (
+            // Active: close button (compact-button ghost).
+            index.h("sui-compact-button", { icon: "close-line", variantStyle: "ghost", size: "medium", ariaLabel: "Limpiar b\u00FAsqueda", onClicked: this.onClear })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiCommandMenuSearch.style = suiCommandMenuSearchCss();
+
+exports.sui_command_menu_search = SuiCommandMenuSearch;

package/dist/cjs/sui-compact-avatar-group.cjs.entry.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiCompactAvatarGroupCss = () => `@charset "UTF-8";.sc-sui-compact-avatar-group-h{display:inline-flex;align-items:center;flex-shrink:0;border-radius:999px;background:var(--sui-bg-white-0, #fff);padding-left:2px;padding-top:2px;padding-bottom:2px;box-shadow:0 1px 2px 0 rgba(10, 13, 20, 0.031372549);vertical-align:middle;box-sizing:border-box}[data-sui-appearance=stroke].sc-sui-compact-avatar-group-h{border:1px solid var(--sui-stroke-soft-200, #ebebeb)}.sui-compact-avatar-group__avatars.sc-sui-compact-avatar-group{display:inline-flex;align-items:center;flex-shrink:0}.sui-compact-avatar-group__item.sc-sui-compact-avatar-group{box-sizing:border-box;border:2px solid var(--sui-bg-white-0, #fff);border-radius:999px;flex-shrink:0}.sui-compact-avatar-group__item.sc-sui-compact-avatar-group:not(:last-child){margin-right:-2px}.sui-compact-avatar-group__count.sc-sui-compact-avatar-group{font-family:var(--sui-font-sans, sans-serif);font-weight:400;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;user-select:none}[data-sui-size="24"].sc-sui-compact-avatar-group-h{padding-right:8px}[data-sui-size="24"].sc-sui-compact-avatar-group-h .sui-compact-avatar-group__count.sc-sui-compact-avatar-group{margin-left:6px;font-size:12px;line-height:16px}[data-sui-size="32"].sc-sui-compact-avatar-group-h{padding-right:10px}[data-sui-size="32"].sc-sui-compact-avatar-group-h .sui-compact-avatar-group__count.sc-sui-compact-avatar-group{margin-left:8px;font-size:14px;line-height:20px;letter-spacing:-0.006em}[data-sui-size="40"].sc-sui-compact-avatar-group-h{padding-right:12px}[data-sui-size="40"].sc-sui-compact-avatar-group-h .sui-compact-avatar-group__count.sc-sui-compact-avatar-group{margin-left:10px;font-size:16px;line-height:24px;letter-spacing:-0.011em}`;
+
+const SuiCompactAvatarGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Tamaño del pill. Default `32`. 3 sizes canon: 24 / 32 / 40. */
+        this.size = '32';
+        /**
+         * Variante visual del pill. `default` (solo shadow) | `stroke` (border 1px).
+         * Se llama `appearance` (no `style`) para no colisionar con el atributo HTML
+         * nativo `style="..."`.
+         */
+        this.appearance = 'default';
+        /**
+         * Items del grupo (array de `{ src?, initials?, color?, alt? }`). Cada uno se
+         * renderiza como un `<sui-avatar>`. Se debe setear vía property JS (`.items`
+         * en Storybook/lit, o asignación directa en JS), NO como atributo.
+         */
+        this.items = [];
+        /** Máximo de avatares visibles antes del text count. Default 3. */
+        this.max = 3;
+        /**
+         * Texto del count (ej. "+4"). Si vacío/null, se calcula desde
+         * `items.length - max`. Si el cálculo da 0, no se renderiza count.
+         */
+        this.count = null;
+    }
+    /** Map del size compacto (24/32/40) al `SuiAvatarSize` equivalente. */
+    get avatarSize() {
+        return this.size === '24' ? 'sm' : this.size === '32' ? 'md' : 'lg';
+    }
+    /** Items efectivamente visibles (slice por `max`). */
+    get visibleItems() {
+        var _a;
+        return ((_a = this.items) !== null && _a !== void 0 ? _a : []).slice(0, this.max);
+    }
+    /**
+     * Label del count: usa el override `count` si viene; sino calcula el overflow
+     * (`items.length - max`) y devuelve `+N`. '' (vacío) = no renderizar count.
+     */
+    get countLabel() {
+        var _a;
+        const override = this.count;
+        if (override)
+            return override;
+        const overflow = Math.max(0, ((_a = this.items) !== null && _a !== void 0 ? _a : []).length - this.max);
+        return overflow > 0 ? `+${overflow}` : '';
+    }
+    render() {
+        const label = this.countLabel;
+        return (index.h(index.Host, { key: 'b71cc174fd14388de28e4ae171e381687528e437', "data-sui-size": this.size, "data-sui-appearance": this.appearance }, index.h("div", { key: 'f8d42bdf05d4e7e8b29fb26d538db44edcca9c81', class: "sui-compact-avatar-group__avatars" }, this.visibleItems.map((item) => {
+            var _a, _b, _c, _d;
+            return (index.h("sui-avatar", { class: "sui-compact-avatar-group__item", size: this.avatarSize, src: (_a = item.src) !== null && _a !== void 0 ? _a : undefined, initials: (_b = item.initials) !== null && _b !== void 0 ? _b : '', color: (_c = item.color) !== null && _c !== void 0 ? _c : 'slate', alt: (_d = item.alt) !== null && _d !== void 0 ? _d : '' }));
+        })), label && index.h("span", { key: '1062e646907c1c5d06e2f3b93f0b083c094d4657', class: "sui-compact-avatar-group__count" }, label)));
+    }
+};
+SuiCompactAvatarGroup.style = suiCompactAvatarGroupCss();
+
+exports.sui_compact_avatar_group = SuiCompactAvatarGroup;

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

@@ -0,0 +1,80 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiHref = require('./sui-href-BNQgPKnK.js');
+
+const suiCompactButtonCss = () => `@charset "UTF-8";.sc-sui-compact-button-h{display:inline-flex;vertical-align:middle;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sui-compact-button__el.sc-sui-compact-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:2px;border:0;background:transparent;color:inherit;text-decoration:none;cursor:pointer;box-sizing:border-box;border-radius:var(--sui-radius-6, 6px);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), 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), transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-compact-button__el.sc-sui-compact-button:active:not(:disabled){transform:scale(0.92)}.sui-compact-button__el.sc-sui-compact-button:disabled{cursor:not-allowed}.sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}[data-sui-size="5xlarge"].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:44px;height:44px}[data-sui-size="4xlarge"].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:40px;height:40px}[data-sui-size="3xlarge"].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:36px;height:36px}[data-sui-size="2xlarge"].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:32px;height:32px}[data-sui-size=xlarge].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:28px;height:28px}[data-sui-size=large].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:24px;height:24px}[data-sui-size=medium].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{width:20px;height:20px}[data-sui-full-radius].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{border-radius:var(--sui-radius-full, 999px)}[data-sui-style=stroke].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}[data-sui-style=stroke].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:hover:not(:disabled){background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-icon-strong-950)}[data-sui-style=stroke].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:active:not(:disabled){background:var(--sui-bg-surface-800);border-color:transparent;color:var(--sui-icon-white-0);box-shadow:none}[data-sui-style=ghost].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{background:transparent;color:var(--sui-icon-sub-600)}[data-sui-style=ghost].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}[data-sui-style=ghost].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0)}[data-sui-style=modifiable].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{background:transparent;color:currentColor}[data-sui-style=modifiable].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:hover:not(:disabled){background:var(--sui-compact-button-hover-bg, var(--sui-white-alpha-16))}[data-sui-style=modifiable].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:active:not(:disabled){background:var(--sui-compact-button-active-bg, var(--sui-white-alpha-16));border:1px solid var(--sui-static-white)}[data-sui-style=white].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button{background:var(--sui-bg-white-0);color:var(--sui-icon-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}[data-sui-style=white].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:hover:not(:disabled){background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}[data-sui-style=white].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button:active:not(:disabled){background:var(--sui-bg-surface-800);color:var(--sui-icon-white-0);box-shadow:none}[data-sui-disabled].sc-sui-compact-button-h .sui-compact-button__el.sc-sui-compact-button,.sui-compact-button__el.sc-sui-compact-button:disabled{color:var(--sui-icon-disabled-300);cursor:not-allowed;pointer-events:none;opacity:0.5}`;
+
+const SuiCompactButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** Estilo visual. Default `stroke`. */
+        this.variantStyle = 'stroke';
+        /** Tamaño. Default `large` (24×24, ícono 20). */
+        this.size = 'large';
+        /** Radio completo (circular). Default `false`. */
+        this.fullRadius = false;
+        /** Deshabilitado: bloquea click, ícono gris, no focusable. Default `false`. */
+        this.disabled = false;
+        /** Si se setea (y no disabled), renderiza un `<a>` en vez de `<button>`. */
+        this.href = null;
+        /** target del anchor (solo aplica cuando `href`). */
+        this.target = null;
+        /** rel del anchor (solo aplica cuando `href`). Default `noopener noreferrer`. */
+        this.rel = 'noopener noreferrer';
+        /** type del button (solo aplica cuando NO hay `href`). Default `button`. */
+        this.type = 'button';
+        this.onClick = (event) => {
+            if (this.disabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+            /* Href interno: navegación SPA vía `suiNavigate` si la app la escucha (sui-href). */
+            if (this.href)
+                suiHref.suiHrefClick(event, this.href);
+        };
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo cual hace que `:active` dispare y se libere
+     * correctamente. Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    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() {
+        const focused = this.el.querySelector('.sui-compact-button__el');
+        focused === null || focused === void 0 ? void 0 : focused.blur();
+    }
+    /** Ícono por size: 16 medium · 20 large/2xlarge/3xlarge · 24 xlarge/4xlarge/5xlarge
+     *  (en 5xlarge crece el área, no el dibujo). Espeja el computed del Angular. */
+    get iconSize() {
+        switch (this.size) {
+            case 'medium':
+                return 16;
+            case 'xlarge':
+            case '4xlarge':
+            case '5xlarge':
+                return 24;
+            default:
+                return 20; // large, 2xlarge, 3xlarge
+        }
+    }
+    /** Render anchor solo cuando hay href Y no está disabled. */
+    get isAnchor() {
+        return !!this.href && !this.disabled;
+    }
+    render() {
+        var _a, _b, _c;
+        const inner = index.h("sui-icon", { key: '05ed8bbef909e18f18eb16793db79ade0e9db17b', name: this.icon, size: this.iconSize });
+        return (index.h(index.Host, { key: '91d8c804affcffcd6ed5ad69562e80d3da3f29dc', "data-sui-style": this.variantStyle, "data-sui-size": this.size, "data-sui-full-radius": this.fullRadius ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, this.isAnchor ? (index.h("a", { class: "sui-compact-button__el", href: (_a = this.href) !== null && _a !== void 0 ? _a : undefined, target: (_b = this.target) !== null && _b !== void 0 ? _b : undefined, rel: (_c = this.rel) !== null && _c !== void 0 ? _c : undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, inner)) : (index.h("button", { class: "sui-compact-button__el", type: this.type, disabled: this.disabled || undefined, "aria-label": this.ariaLabel, onClick: this.onClick }, inner))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiCompactButton.style = suiCompactButtonCss();
+
+exports.sui_compact_button = SuiCompactButton;