@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,113 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+const suiSwitchCardCss = () => `@charset "UTF-8";.sc-sui-switch-card-h{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));overflow:hidden;cursor:pointer;outline:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}@media (hover: hover) and (pointer: fine){.sc-sui-switch-card-h:hover:not([data-sui-disabled]):not([data-sui-checked]){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}[data-sui-checked].sc-sui-switch-card-h:not([data-sui-disabled]){border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media (hover: hover) and (pointer: fine){[data-sui-checked].sc-sui-switch-card-h:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7)}}.sc-sui-switch-card-h:focus-within:not([data-sui-disabled]) .sui-switch-card__switch.sc-sui-switch-card:focus-visible{outline:2px solid var(--sui-primary-base, #fa7319);outline-offset:2px;border-radius:var(--sui-radius-full, 999px)}[data-sui-disabled].sc-sui-switch-card-h{cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}[data-sui-disabled].sc-sui-switch-card-h .sui-switch-card__label.sc-sui-switch-card{color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-disabled].sc-sui-switch-card-h .sui-switch-card__sublabel.sc-sui-switch-card,[data-sui-disabled].sc-sui-switch-card-h .sui-switch-card__description.sc-sui-switch-card{color:var(--sui-text-soft-400, #a3a3a3)}.sui-switch-card__leading.sc-sui-switch-card{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-switch-card__leading--icon.sc-sui-switch-card{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-disabled].sc-sui-switch-card-h .sui-switch-card__leading--icon.sc-sui-switch-card{box-shadow:none;opacity:0.5}[data-sui-leading-fill].sc-sui-switch-card-h .sui-switch-card__leading--icon.sc-sui-switch-card{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}[data-sui-leading-fill].sc-sui-switch-card-h .sui-switch-card__leading--icon.sc-sui-switch-card sui-emoji.sc-sui-switch-card{display:block;width:100%;height:100%}[data-sui-type=avatar].sc-sui-switch-card-h .sui-switch-card__leading--avatar.sc-sui-switch-card{width:40px;height:40px}[data-sui-disabled].sc-sui-switch-card-h .sui-switch-card__leading.sc-sui-switch-card{opacity:0.5}.sui-switch-card__leading--slot.sc-sui-switch-card{box-sizing:border-box;overflow:hidden}.sui-switch-card__leading--slot.sc-sui-switch-card>*.sc-sui-switch-card{display:block;width:100%;height:100%;object-fit:contain}[data-sui-type=card-provider].sc-sui-switch-card-h .sui-switch-card__leading--slot.sc-sui-switch-card{width:32px;height:24px;border-radius:4px}[data-sui-type=brand].sc-sui-switch-card-h .sui-switch-card__leading--slot.sc-sui-switch-card{width:40px;height:40px}[data-sui-type=company].sc-sui-switch-card-h .sui-switch-card__leading--slot.sc-sui-switch-card{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px)}.sui-switch-card__text.sc-sui-switch-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-switch-card__text.sc-sui-switch-card:not(:has(.sui-switch-card__description)){justify-content:center}.sui-switch-card__title.sc-sui-switch-card{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-switch-card__label.sc-sui-switch-card{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-switch-card__sublabel.sc-sui-switch-card{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-switch-card__description.sc-sui-switch-card{margin:0;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}[data-sui-disabled].sc-sui-switch-card-h .sui-switch-card__badge.sc-sui-switch-card{background:transparent;border-color:var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}.sui-switch-card__switch.sc-sui-switch-card{flex-shrink:0;align-self:flex-start;margin-top:2px}`;
+
+let nextId = 0;
+const SuiSwitchCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChange = index.createEvent(this, "checkedChange");
+        /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+        this.type = 'basic';
+        /** Título principal del card (label de la fila Title). */
+        this.label = '';
+        /** Sublabel opcional (12/16 regular sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción secundaria opcional debajo del Title. */
+        this.description = null;
+        /** RemixIcon name (sin prefijo "ri-") para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+        this.icon = null;
+        /** Emoji del catálogo SUI_EMOJI_MAP — alternativa a icon para type='left-icon'. */
+        this.emoji = null;
+        /** URL directa al emoji para type='left-icon'. Precedencia: icon > emoji > iconSrc. */
+        this.iconSrc = null;
+        /** URL de imagen para type='avatar'. Si falla, fallback a iniciales del label. */
+        this.imageUrl = null;
+        /** Tamaño del switch interno — lo decide el padre (D16: xlarge táctil, large computadora). Default `medium`. */
+        this.size = 'medium';
+        /**
+         * Badge junto al label: string (`'NEW'`) o `SuiBadgeConfig` (default
+         * blue/light/small). `null` = sin badge.
+         */
+        this.badge = null;
+        /** Deshabilitado: bloquea toggle, tokens grises, switch fuera del Tab. Default `false`. */
+        this.disabled = false;
+        /** Estado del switch. Controlled: no se muta solo; escucha `checkedChange` y escríbelo. */
+        this.checked = false;
+        this.labelId = `sui-switch-card-${++nextId}`;
+        this.descriptionId = `${this.labelId}-desc`;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    /** Click en la card togglea; el click en el switch lo maneja el switch (sin doble disparo). */
+    onClick(event) {
+        var _a;
+        if (this.disabled)
+            return;
+        if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('sui-switch'))
+            return;
+        this.emit(!this.checked);
+    }
+    onSwitchChange(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.emit(event.detail);
+    }
+    emit(next) {
+        this.checkedChange.emit(next);
+    }
+    /** True si type requiere render del slot leading proyectado. */
+    get hasProjectedLeading() {
+        return this.type === 'card-provider' || this.type === 'brand' || this.type === 'company';
+    }
+    /** Iniciales para fallback de sui-avatar (1ras 2 palabras del label). */
+    get initialsFromLabel() {
+        const l = this.label.trim();
+        if (!l)
+            return '';
+        return l
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((w) => { var _a, _b; return (_b = (_a = w[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ''; })
+            .join('');
+    }
+    /** Render del leading interno (left-icon / avatar). El proyectado va aparte. */
+    renderLeading() {
+        var _a;
+        if (this.type === 'left-icon') {
+            return (index.h("div", { class: "sui-switch-card__leading sui-switch-card__leading--icon", "aria-hidden": "true" }, this.icon ? (index.h("sui-icon", { name: this.icon, size: 20 })) : this.emoji ? (index.h("sui-emoji", { name: this.emoji, size: "md" })) : this.iconSrc ? (index.h("sui-emoji", { src: this.iconSrc, size: "full" })) : null));
+        }
+        if (this.type === 'avatar') {
+            return (index.h("sui-avatar", { class: "sui-switch-card__leading sui-switch-card__leading--avatar", size: "lg", src: (_a = this.imageUrl) !== null && _a !== void 0 ? _a : undefined, initials: this.initialsFromLabel }));
+        }
+        if (this.hasProjectedLeading) {
+            // Leading: imageUrl si viene, si no el slot del consumer (logo de proveedor /
+            // brand / company). El contenedor fija dimensiones + clipping por type
+            // (Figma 385:4760/4769/4778).
+            return (index.h("div", { class: "sui-switch-card__leading sui-switch-card__leading--slot", "aria-hidden": "true" }, this.imageUrl ? index.h("img", { src: this.imageUrl, alt: "" }) : index.h("slot", { name: "leading" })));
+        }
+        return null;
+    }
+    render() {
+        var _a, _b, _c;
+        const badge = suiConfigs.resolverBadge(this.badge);
+        return (index.h(index.Host, { key: 'd74a7f83c8f9d7c60c22c66788df3aebc3f43300', role: "group", "aria-labelledby": this.labelId, "aria-disabled": this.disabled ? 'true' : undefined, "data-sui-type": this.type, "data-sui-checked": this.checked ? '' : undefined, "data-sui-disabled": this.disabled ? '' : undefined, "data-sui-leading-fill": this.iconSrc ? '' : undefined }, this.renderLeading(), index.h("div", { key: 'b408341389f332a625063cbae13307e8e2dc3ee6', class: "sui-switch-card__text" }, index.h("div", { key: '407f7e431720f0d80ac782c0bf52b02b00171d8f', class: "sui-switch-card__title" }, index.h("span", { key: 'c8e8ad7b9bae3c91b754757603db413af05a5ab1', class: "sui-switch-card__label", id: this.labelId }, this.label), this.sublabel && index.h("span", { key: '23ac334767870c68d7ee9c30c5b4a112cc5c994b', class: "sui-switch-card__sublabel" }, this.sublabel), badge && (index.h("sui-badge", { key: 'ba26d391d460840108ffc1518760c2940fdf9eaf', class: "sui-switch-card__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'blue', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'light', size: (_c = badge.size) !== null && _c !== void 0 ? _c : 'small' }, badge.label))), this.description && (index.h("p", { key: '7977536ec1a9063e4710732f4323939c2bcd6d62', class: "sui-switch-card__description", id: this.descriptionId }, this.description))), index.h("sui-switch", { key: '47cbfbee99da980bb2184aa9fedaa6106fc7cde4', class: "sui-switch-card__switch", size: this.size, checked: this.checked, disabled: this.disabled, "aria-labelledby": this.labelId, "aria-describedby": this.description ? this.descriptionId : null, onCheckedChange: (e) => this.onSwitchChange(e) })));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiSwitchCard.style = suiSwitchCardCss();
+
+exports.sui_switch_card = SuiSwitchCard;

package/dist/cjs/sui-switch-label.cjs.entry.js

@@ -0,0 +1,106 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiConfigs = require('./sui-configs-W3MqDkhn.js');
+
+// Tipos y normalizador de link compartidos por sui-switch-label y sui-switch-card
+// (Stencil exige que el módulo de un @Component exporte solo la clase).
+/** Normaliza el prop `link`: string → { label }; rel automático para `_blank`. */
+function resolveLink(l) {
+    var _a;
+    if (!l)
+        return null;
+    const cfg = typeof l === 'string' ? { label: l } : l;
+    if (!cfg.label)
+        return null;
+    return Object.assign(Object.assign({}, cfg), { rel: (_a = cfg.rel) !== null && _a !== void 0 ? _a : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) });
+}
+
+const suiSwitchLabelCss = () => `@charset "UTF-8";.sc-sui-switch-label-h{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;-webkit-tap-highlight-color:transparent}[data-sui-flip].sc-sui-switch-label-h .sui-switch-label__switch.sc-sui-switch-label{order:2}[data-sui-flip].sc-sui-switch-label-h .sui-switch-label__content.sc-sui-switch-label{order:1}[data-sui-disabled].sc-sui-switch-label-h{cursor:not-allowed}[data-sui-disabled].sc-sui-switch-label-h .sui-switch-label__content.sc-sui-switch-label{opacity:0.5}[data-sui-disabled].sc-sui-switch-label-h .sui-switch-label__switch.sc-sui-switch-label{opacity:0.5}.sui-switch-label__switch.sc-sui-switch-label{flex-shrink:0}.sui-switch-label__content.sc-sui-switch-label{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}[data-sui-with-description].sc-sui-switch-label-h .sui-switch-label__content.sc-sui-switch-label{gap:10px}.sui-switch-label__title.sc-sui-switch-label{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label.sc-sui-switch-label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950)}[data-sui-with-description].sc-sui-switch-label-h .sui-switch-label__label.sc-sui-switch-label{font-weight:500}.sui-switch-label__sublabel.sc-sui-switch-label{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge.sc-sui-switch-label{flex-shrink:0}.sui-switch-label__description.sc-sui-switch-label{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}[data-sui-size=large].sc-sui-switch-label-h .sui-switch-label__label.sc-sui-switch-label,[data-sui-size=xlarge].sc-sui-switch-label-h .sui-switch-label__label.sc-sui-switch-label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}[data-sui-size=xlarge].sc-sui-switch-label-h .sui-switch-label__content.sc-sui-switch-label{padding-top:2px}[data-sui-size="2xlarge"].sc-sui-switch-label-h{min-height:44px;align-items:center}[data-sui-size="2xlarge"].sc-sui-switch-label-h .sui-switch-label__label.sc-sui-switch-label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}[data-sui-size="2xlarge"][data-sui-with-description].sc-sui-switch-label-h{align-items:flex-start}[data-sui-size="2xlarge"][data-sui-with-description].sc-sui-switch-label-h .sui-switch-label__content.sc-sui-switch-label{padding-top:2px}`;
+
+let nextId = 0;
+const SuiSwitchLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.activeChange = index.createEvent(this, "activeChange");
+        this.linkClick = index.createEvent(this, "linkClick");
+        this.labelId = `sui-switch-label-${++nextId}`;
+        this.descriptionId = `${this.labelId}-desc`;
+        /** Texto principal del label. Dice qué hace prenderlo, no el estado. */
+        this.label = '';
+        /** Sublabel opcional (12/16 sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción opcional debajo del título (label pasa a Medium). */
+        this.description = null;
+        /**
+         * Tamaño del switch y del texto. `large`/`xlarge` → label 16/24; `2xlarge` =
+         * fila de 44 de alto (piso táctil del teléfono) con el switch en xlarge. Default `medium`.
+         */
+        this.size = 'medium';
+        /**
+         * Badge junto al label: string (`'NEW'`) o `SuiBadgeConfig`. Default naranja
+         * light small. `null` = sin badge.
+         */
+        this.badge = null;
+        /**
+         * Link Button bajo la descripción: string (solo label, emite `linkClick`) o
+         * `SuiLinkConfig` `{ label, href?, target?, rel? }` (con href renderiza `<a>`).
+         * Solo se ve si hay `description`.
+         */
+        this.link = null;
+        /** Si true, invierte el orden: [texto] [switch] (label a la izquierda). */
+        this.flip = false;
+        /** Deshabilita el switch + wrapper. Default `false`. */
+        this.disabled = false;
+        /** Estado del switch. Controlled: el componente no lo muta; escucha `activeChange` y escríbelo. */
+        this.active = false;
+    }
+    /** iOS WKWebView fix (listeners pasivos): la presencia de touchstart engancha el pipeline táctil. */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() suelta el :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    /** Click en cualquier parte de la fila togglea (salvo el switch y el link, que tienen su handler). */
+    onLabelClick(event) {
+        if (this.disabled)
+            return;
+        const target = event.target;
+        if (target.closest('sui-switch'))
+            return;
+        if (target.closest('.sui-switch-label__link'))
+            return;
+        this.emit(!this.active);
+    }
+    onSwitchChange(event) {
+        event.stopPropagation();
+        if (this.disabled || event.detail === this.active)
+            return;
+        this.emit(event.detail);
+    }
+    onLinkClick(event) {
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        this.linkClick.emit(event);
+    }
+    emit(next) {
+        this.activeChange.emit(next);
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const withDescription = this.description != null && this.description !== '';
+        const badge = suiConfigs.resolverBadge(this.badge);
+        const link = withDescription ? resolveLink(this.link) : null;
+        const controlSize = this.size === '2xlarge' ? 'xlarge' : this.size;
+        return (index.h(index.Host, { key: 'f064c87b3dbc7fb54de63e351ef3be35fb84e541', "data-sui-size": this.size, "data-sui-flip": this.flip ? '' : null, "data-sui-with-description": withDescription ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, index.h("sui-switch", { key: '501998d34a19f1dc85074573b29eb03ad3900ab3', class: "sui-switch-label__switch", size: controlSize, checked: this.active, disabled: this.disabled, "aria-labelledby": this.labelId, "aria-describedby": withDescription ? this.descriptionId : null, onCheckedChange: (e) => this.onSwitchChange(e) }), index.h("div", { key: '300a14d526465b83838916e69539303ad193a193', class: "sui-switch-label__content" }, index.h("div", { key: '4ab368aff0144e62d3dcd3c31618d5c0d55e571c', class: "sui-switch-label__title" }, index.h("span", { key: 'efa72cdba47eda0138ef5b9040244b911dc49771', class: "sui-switch-label__label", id: this.labelId }, this.label), this.sublabel != null && this.sublabel !== '' && (index.h("span", { key: 'ec91f79a796c0be612018f47f68c965eec33dc61', class: "sui-switch-label__sublabel" }, this.sublabel)), badge && (index.h("sui-badge", { key: '45f97b17f813732222a95c0673d74b2358b8886d', class: "sui-switch-label__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'orange', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'light', size: (_c = badge.size) !== null && _c !== void 0 ? _c : 'small' }, badge.label))), withDescription && (index.h("p", { key: 'af4ed2a8b89baff2fe1ac2142717349b49f2f26c', class: "sui-switch-label__description", id: this.descriptionId }, this.description)), link && (index.h("sui-link-button", { key: 'c53d67c6b63d44d91b632cf38fe714bbed67afc9', class: "sui-switch-label__link", variant: "primary", size: "small", disabled: this.disabled, href: (_d = link.href) !== null && _d !== void 0 ? _d : null, target: (_e = link.target) !== null && _e !== void 0 ? _e : null, rel: (_f = link.rel) !== null && _f !== void 0 ? _f : null, onClicked: (e) => this.onLinkClick(e.detail) }, link.label)))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiSwitchLabel.style = suiSwitchLabelCss();
+
+exports.sui_switch_label = SuiSwitchLabel;

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

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiSwitchCss = () => `@charset "UTF-8";.sc-sui-switch-h{display:inline-block;position:relative;width:32px;height:20px;cursor:pointer;outline:none;box-sizing:border-box;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sui-switch__track.sc-sui-switch{position:absolute;top:2px;left:2px;width:28px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__thumb.sc-sui-switch{position:absolute;top:4px;left:4px;width:12px;height:12px;border-radius:999px;background:var(--sui-static-white, #ffffff);box-shadow:var(--sui-shadow-switch-thumb);display:flex;align-items:center;justify-content:center;transition:left var(--sui-motion-duration-fast) var(--sui-motion-ease-out), top var(--sui-motion-duration-fast) var(--sui-motion-ease-out), width var(--sui-motion-duration-fast) var(--sui-motion-ease-out), height var(--sui-motion-duration-fast) var(--sui-motion-ease-out), box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-switch__dot.sc-sui-switch{width:4px;height:4px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}[data-sui-checked].sc-sui-switch-h .sui-switch__track.sc-sui-switch{background:var(--sui-primary-base)}[data-sui-checked].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{left:16px}[data-sui-checked].sc-sui-switch-h .sui-switch__dot.sc-sui-switch{background:var(--sui-primary-base)}.sc-sui-switch-h:hover:not([data-sui-disabled]):not([data-sui-checked]) .sui-switch__track.sc-sui-switch{background:var(--sui-bg-sub-300)}.sc-sui-switch-h:hover:not([data-sui-disabled]):not([data-sui-checked]) .sui-switch__dot.sc-sui-switch{background:var(--sui-bg-sub-300)}.sc-sui-switch-h:hover:not([data-sui-disabled])[data-sui-checked] .sui-switch__track.sc-sui-switch{background:var(--sui-primary-dark)}.sc-sui-switch-h:hover:not([data-sui-disabled])[data-sui-checked] .sui-switch__dot.sc-sui-switch{background:var(--sui-primary-dark)}.sc-sui-switch-h:active:not([data-sui-disabled]) .sui-switch__thumb.sc-sui-switch{width:10px;height:10px;top:5px}.sc-sui-switch-h:active:not([data-sui-disabled]):not([data-sui-checked]) .sui-switch__thumb.sc-sui-switch{left:5px}.sc-sui-switch-h:active:not([data-sui-disabled])[data-sui-checked] .sui-switch__thumb.sc-sui-switch{left:17px}[data-sui-disabled].sc-sui-switch-h{cursor:not-allowed;pointer-events:none}[data-sui-disabled].sc-sui-switch-h .sui-switch__track.sc-sui-switch{background:var(--sui-bg-white-0);box-shadow:inset 0 0 0 1px var(--sui-stroke-soft-200)}[data-sui-disabled].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{width:10px;height:10px;top:5px;background:var(--sui-bg-soft-200);box-shadow:none}[data-sui-disabled].sc-sui-switch-h:not([data-sui-checked]) .sui-switch__thumb.sc-sui-switch{left:5px}[data-sui-disabled][data-sui-checked].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{left:17px}[data-sui-disabled].sc-sui-switch-h .sui-switch__dot.sc-sui-switch{display:none}[data-sui-size=large].sc-sui-switch-h{width:40px;height:24px}[data-sui-size=large].sc-sui-switch-h .sui-switch__track.sc-sui-switch{width:36px;height:20px}[data-sui-size=large].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{width:16px;height:16px;top:4px;left:4px}[data-sui-size=large][data-sui-checked].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{left:20px}[data-sui-size=large].sc-sui-switch-h:active:not([data-sui-disabled]) .sui-switch__thumb.sc-sui-switch{width:14px;height:14px;top:5px}[data-sui-size=large].sc-sui-switch-h:active:not([data-sui-disabled]):not([data-sui-checked]) .sui-switch__thumb.sc-sui-switch{left:5px}[data-sui-size=large].sc-sui-switch-h:active:not([data-sui-disabled])[data-sui-checked] .sui-switch__thumb.sc-sui-switch{left:21px}[data-sui-size=large][data-sui-disabled].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{width:14px;height:14px;top:5px}[data-sui-size=large][data-sui-disabled].sc-sui-switch-h:not([data-sui-checked]) .sui-switch__thumb.sc-sui-switch{left:5px}[data-sui-size=large][data-sui-disabled][data-sui-checked].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{left:21px}[data-sui-size=xlarge].sc-sui-switch-h{width:48px;height:28px}[data-sui-size=xlarge].sc-sui-switch-h .sui-switch__track.sc-sui-switch{width:44px;height:24px}[data-sui-size=xlarge].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{width:20px;height:20px;top:4px;left:4px}[data-sui-size=xlarge][data-sui-checked].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{left:24px}[data-sui-size=xlarge].sc-sui-switch-h:active:not([data-sui-disabled]) .sui-switch__thumb.sc-sui-switch{width:18px;height:18px;top:5px}[data-sui-size=xlarge].sc-sui-switch-h:active:not([data-sui-disabled]):not([data-sui-checked]) .sui-switch__thumb.sc-sui-switch{left:5px}[data-sui-size=xlarge].sc-sui-switch-h:active:not([data-sui-disabled])[data-sui-checked] .sui-switch__thumb.sc-sui-switch{left:25px}[data-sui-size=xlarge][data-sui-disabled].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{width:18px;height:18px;top:5px}[data-sui-size=xlarge][data-sui-disabled].sc-sui-switch-h:not([data-sui-checked]) .sui-switch__thumb.sc-sui-switch{left:5px}[data-sui-size=xlarge][data-sui-disabled][data-sui-checked].sc-sui-switch-h .sui-switch__thumb.sc-sui-switch{left:25px}`;
+
+const SuiSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChange = index.createEvent(this, "checkedChange");
+        /** Tamaño. Default `medium` (track 28×16). `large`/`xlarge` son extensiones del proyecto (no-Figma). */
+        this.size = 'medium';
+        /** Estado visible del switch. Controlled: el thumb se posiciona según este prop. Default `false`. */
+        this.checked = false;
+        /** Deshabilitado: bloquea el toggle, tokens grises, no focusable. Default `false`. */
+        this.disabled = false;
+        /**
+         * `false` = fuera del orden de Tab (tabindex -1). Para cuando un padre es el
+         * control enfocable y este switch solo dibuja el estado (switch-label,
+         * switch-card). Default `true`.
+         */
+        this.focusable = true;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` fuerza al
+     * browser a engage el touch event pipeline, lo cual hace que `:active`
+     * dispare y se libere correctamente. Sin esto, `:active` "stickea" 300-500ms
+     * en pages standalone. (Ver CLAUDE.md "iOS :active stuck en custom buttons".)
+     */
+    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() {
+        this.el.blur();
+    }
+    onClick(event) {
+        this.toggle(event);
+    }
+    onKeydown(event) {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            this.toggle(event);
+        }
+    }
+    /**
+     * Patrón controlled: SOLO emite el intent (valor invertido). NO muta `checked`
+     * directamente — el consumer decide si lo acepta. Disabled bloquea todo.
+     */
+    toggle(event) {
+        if (this.disabled)
+            return;
+        event.preventDefault();
+        this.checkedChange.emit(!this.checked);
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f769d85c174653272a117a3300643c4bfbecb123', role: "switch", tabindex: this.disabled || !this.focusable ? '-1' : '0', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-sui-size": this.size, "data-sui-checked": this.checked ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, index.h("span", { key: '9dce2a48c77925424762cae3bd72bf893bdb6a07', class: "sui-switch__track" }), index.h("span", { key: 'a1ad2c830f0aff6d68d2a5fd8a0509d994c175d6', class: "sui-switch__thumb" }, index.h("span", { key: 'ee2e68c41d58c2c88c916fb0ea67436aacc1ac67', class: "sui-switch__dot", "aria-hidden": "true" }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiSwitch.style = suiSwitchCss();
+
+exports.sui_switch = SuiSwitch;

package/dist/cjs/sui-tab-chips.cjs.entry.js

@@ -0,0 +1,249 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var rovingFocus = require('./roving-focus-J_7U6aRM.js');
+var pistaDeScrollMarco = require('./pista-de-scroll-marco-DELFl1zU.js');
+
+/* ═══ SUI Tab Chips — data / helpers ════════════════════════════════════════
+ * Tipos y helpers del compuesto `sui-tab-chips`. Viven en este archivo hermano
+ * (no en el .tsx) porque Stencil PROHÍBE `export const`/`export function` en el
+ * archivo del componente — rompe el build de todo el proyecto. Solo
+ * `export class` / `export type` / `export interface` se permiten en el .tsx.
+ * ════════════════════════════════════════════════════════════════════════ */
+/**
+ * Normaliza el input a `SuiTabChipItem[]` para iteración uniforme en el render.
+ * Un string `'foo'` se convierte en `{ value: 'foo', label: 'foo' }`.
+ *
+ * Acepta también un string JSON (caso de uso DOM/Storybook: el atributo HTML
+ * `chips='["a","b"]'` llega como string) y lo parsea de forma defensiva.
+ */
+function normalizeChips(input) {
+    let raw;
+    if (typeof input === 'string') {
+        try {
+            raw = JSON.parse(input);
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    else if (Array.isArray(input)) {
+        raw = input;
+    }
+    else {
+        return [];
+    }
+    return raw.map((c) => (typeof c === 'string' ? { value: c, label: c } : c));
+}
+
+const suiTabChipsCss = () => `@charset "UTF-8";.sui-pista.sc-sui-tab-chips{position:relative;display:block;min-width:0}.sui-pista__borde.sc-sui-tab-chips{position:absolute;top:0;bottom:0;width:var(--sui-pista-de-scroll-ancho, 56px);pointer-events:none;z-index:2}.sui-pista__borde--inicio.sc-sui-tab-chips{left:0;background:linear-gradient(to right, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 30%, transparent 100%)}.sui-pista__borde--fin.sc-sui-tab-chips{right:0;background:linear-gradient(to left, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 30%, transparent 100%)}.sui-pista__flecha.sc-sui-tab-chips{display:none}@media (hover: hover) and (pointer: fine){.sui-pista__flecha.sc-sui-tab-chips{position:absolute;top:var(--sui-pista-de-scroll-flecha-top, 50%);z-index:3;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--sui-pista-de-scroll-flecha-size, 32px);height:var(--sui-pista-de-scroll-flecha-size, 32px);padding:0;border-radius:999px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);color:var(--sui-text-sub-600, #5c5c5c);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(10, 13, 20, 0.03));transform:translateY(-50%);cursor:pointer;pointer-events:auto;transition:background var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease)}.sui-pista__flecha.sc-sui-tab-chips:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-pista__flecha--inicio.sc-sui-tab-chips{left:4px}.sui-pista__flecha--fin.sc-sui-tab-chips{right:4px}}.sc-sui-tab-chips-h{display:block;width:100%}.sui-tab-chips--host-sticky.sc-sui-tab-chips-h{display:contents}.sui-tab-chips__sentinel.sc-sui-tab-chips{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips__pista.sc-sui-tab-chips{width:100%}.sui-tab-chips__pista--sticky.sc-sui-tab-chips{position:sticky;top:0;z-index:20}.sui-tab-chips__pista--stuck.sc-sui-tab-chips{--sui-pista-de-scroll-fondo:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips.sc-sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips.sc-sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky.sc-sui-tab-chips{transition:padding-top var(--sui-motion-duration-fast, 150ms) var(--sui-motion-ease-out, ease), background var(--sui-motion-duration-fast, 150ms) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck.sc-sui-tab-chips{padding-top:calc(env(safe-area-inset-top, 0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip.sc-sui-tab-chips{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);white-space:nowrap;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease), border-color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease), transform var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip.sc-sui-tab-chips:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip.sc-sui-tab-chips:active{transform:scale(0.96)}.sui-tab-chips__chip.sc-sui-tab-chips:active:not(:disabled),.sui-tab-chips__chip.sc-sui-tab-chips:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active.sc-sui-tab-chips{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active.sc-sui-tab-chips:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count.sc-sui-tab-chips{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}[data-sui-size=small].sc-sui-tab-chips-h .sui-tab-chips__chip.sc-sui-tab-chips{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}[data-sui-size=large].sc-sui-tab-chips-h .sui-tab-chips__chip.sc-sui-tab-chips{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}[data-sui-size=xlarge].sc-sui-tab-chips-h .sui-tab-chips__chip.sc-sui-tab-chips{box-sizing:border-box;height:44px;padding:0 18px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}[data-sui-size=small].sc-sui-tab-chips-h .sui-tab-chips__chip-count.sc-sui-tab-chips{min-width:16px;height:16px;padding:0 5px}[data-sui-size=large].sc-sui-tab-chips-h .sui-tab-chips__chip-count.sc-sui-tab-chips,[data-sui-size=xlarge].sc-sui-tab-chips-h .sui-tab-chips__chip-count.sc-sui-tab-chips{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active.sc-sui-tab-chips .sui-tab-chips__chip-count.sc-sui-tab-chips{background:color-mix(in srgb, var(--sui-bg-white-0, #fff) 22%, transparent);color:var(--sui-bg-white-0, #fff)}`;
+
+const SuiTabChips = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        /**
+         * Lista de chips. Acepta un array de strings (`label === value`) o un array de
+         * `SuiTabChipItem` (con `count` opcional). Vía atributo HTML también acepta un
+         * string JSON (`chips='["a","b"]'`) — útil en demos/Storybook.
+         */
+        this.chips = [];
+        /** Valor seleccionado (two-way: mutable + emite `valueChange`). */
+        this.value = '';
+        /** Si `true`, el componente queda sticky al top del scroll container. */
+        this.sticky = false;
+        /** Tamaño de los chips: small 32 · medium 36 (default) · large 40 · xlarge 44 (teléfono). */
+        this.size = 'medium';
+        /** Auto-scroll horizontal del chip activo al cambiar `value`. Default `true`. */
+        this.autoScroll = true;
+        /**
+         * Pista de desborde: degradado en el borde con chips ocultos y, con mouse,
+         * flechas que desplazan. `false` la apaga (atributo `pista-de-scroll="false"`).
+         */
+        this.pistaDeScroll = true;
+        /** Estado interno: chip pegado al top del viewport (solo si `sticky=true`). */
+        this.stuck = false;
+        /**
+         * Chip con el tab stop (roving tabindex). `null` = el activo. Las flechas
+         * mueven el foco SIN seleccionar (activación manual: cada filtro recarga
+         * datos); Enter/Espacio —el click nativo del <button>— selecciona.
+         */
+        this.focusValue = null;
+        /** Lados con chips ocultos (lo mide `SuiPistaDeScroll`). */
+        this.pistaEstado = { antes: false, despues: false };
+        /** Al salir del grupo el tab stop vuelve al chip activo (patrón de tabs). */
+        this.onFocusout = (event) => {
+            var _a;
+            const to = event.relatedTarget;
+            if (to && ((_a = this.navEl) === null || _a === void 0 ? void 0 : _a.contains(to)))
+                return;
+            this.focusValue = null;
+        };
+        /** Flechas ← → / Home / End: mueven el foco entre chips (con wrap), sin seleccionar. */
+        this.onKeydown = (event) => {
+            var _a, _b;
+            const chips = this.normalizedChips;
+            const current = chips.findIndex((c) => c.value === this.tabStopValue);
+            const next = rovingFocus.suiRovingIndex(event.key, current, chips.length, 'horizontal');
+            if (next === null)
+                return;
+            event.preventDefault();
+            this.focusValue = chips[next].value;
+            (_b = (_a = this.navEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.sui-tab-chips__chip')[next]) === null || _b === void 0 ? void 0 : _b.focus();
+        };
+    }
+    /** Normaliza el input crudo a `SuiTabChipItem[]` para iterar en el render. */
+    get normalizedChips() {
+        return normalizeChips(this.chips);
+    }
+    /** Valor del único chip con tabindex 0: el enfocado con flechas, o el activo. */
+    get tabStopValue() {
+        var _a, _b;
+        const chips = this.normalizedChips;
+        const f = this.focusValue;
+        if (f !== null && chips.some((c) => c.value === f))
+            return f;
+        if (chips.some((c) => c.value === this.value))
+            return this.value;
+        return (_b = (_a = chips[0]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    }
+    /**
+     * Default al PRIMER chip: si `value` está vacío o no corresponde a ningún chip
+     * (quedó uno viejo tras cambiar la lista), se selecciona el primero y se emite.
+     */
+    ensureValue() {
+        const chips = this.normalizedChips;
+        if (!chips.length || chips.some((c) => c.value === this.value))
+            return;
+        this.value = chips[0].value;
+        this.valueChange.emit(this.value);
+    }
+    componentWillLoad() {
+        this.ensureValue();
+    }
+    /** Reconexión (el nodo se movió en el DOM): `componentDidLoad` no vuelve a correr. */
+    connectedCallback() {
+        if (this.navEl)
+            this.conectar();
+    }
+    conectar() {
+        this.setupStickyObserver();
+        if (this.navEl && !this.pista) {
+            this.pista = new pistaDeScrollMarco.SuiPistaDeScroll(this.navEl, (e) => (this.pistaEstado = e), this.pistaDeScroll);
+        }
+    }
+    componentDidLoad() {
+        this.conectar();
+        /* Centrar el chip activo en el primer paint si ya viene un value. */
+        if (this.value && this.autoScroll) {
+            this.scrollToChip(this.value);
+        }
+    }
+    /** Chips o size cambian el ancho del contenido sin cambiar el del nav: el ResizeObserver no lo ve. */
+    componentDidRender() {
+        var _a;
+        (_a = this.pista) === null || _a === void 0 ? void 0 : _a.medir();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.intersectionObserver = undefined;
+        (_b = this.pista) === null || _b === void 0 ? void 0 : _b.destroy();
+        this.pista = undefined;
+    }
+    onPistaChange(activa) {
+        var _a;
+        (_a = this.pista) === null || _a === void 0 ? void 0 : _a.setActiva(activa);
+    }
+    /** Auto-scroll al chip activo cuando cambia `value` (UX típica de catnavs). */
+    onValueChange(next) {
+        this.ensureValue();
+        if (!next || !this.autoScroll)
+            return;
+        /* microtask para que el DOM ya tenga la clase `--active` aplicada. */
+        queueMicrotask(() => this.scrollToChip(next));
+    }
+    /** Re-arma el observer si `sticky` cambia en runtime. */
+    onStickyChange() {
+        var _a;
+        (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.intersectionObserver = undefined;
+        if (!this.sticky) {
+            this.stuck = false;
+            return;
+        }
+        /* el sentinel se (re)renderiza recién en el próximo tick. */
+        queueMicrotask(() => this.setupStickyObserver());
+    }
+    setupStickyObserver() {
+        if (!this.sticky ||
+            typeof IntersectionObserver === 'undefined' ||
+            !this.sentinelEl ||
+            this.intersectionObserver) {
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver(([entry]) => {
+            this.stuck = !entry.isIntersecting;
+        }, { rootMargin: '0px', threshold: 0 });
+        this.intersectionObserver.observe(this.sentinelEl);
+    }
+    select(value) {
+        this.focusValue = value;
+        if (this.value === value)
+            return;
+        this.value = value;
+        this.valueChange.emit(value);
+    }
+    scrollToChip(value) {
+        const nav = this.navEl;
+        if (!nav)
+            return;
+        const target = nav.querySelector(`[data-sui-chip-value="${typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(value) : value}"]`);
+        if (!target)
+            return;
+        const navRect = nav.getBoundingClientRect();
+        const targetRect = target.getBoundingClientRect();
+        const offset = targetRect.left - navRect.left + nav.scrollLeft - (navRect.width - targetRect.width) / 2;
+        nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
+    }
+    render() {
+        const chips = this.normalizedChips;
+        const isSticky = this.sticky;
+        const isStuck = isSticky && this.stuck;
+        const tabStop = this.tabStopValue;
+        return (index.h(index.Host, { key: '57f102d50f1c65afa611140f7ce9336d924526de', class: { 'sui-tab-chips--host-sticky': isSticky }, "data-sui-size": this.size }, isSticky && (index.h("div", { key: '04c633daf25663d0ed62731ad9f3e0275349345b', class: "sui-tab-chips__sentinel", "aria-hidden": "true", ref: (node) => (this.sentinelEl = node) })), index.h("div", { key: 'd8f53a6dd400ca1bb102f4e99611e10ce6c676e1', class: {
+                'sui-pista': true,
+                'sui-tab-chips__pista': true,
+                'sui-tab-chips__pista--sticky': isSticky,
+                'sui-tab-chips__pista--stuck': isStuck,
+            } }, index.h("nav", { key: '917069540cbe4edb543f591327d42c51552dc8e2', class: {
+                'sui-tab-chips': true,
+                'sui-tab-chips--sticky': isSticky,
+                'sui-tab-chips--stuck': isStuck,
+            }, role: "tablist", onKeyDown: this.onKeydown, onFocusout: this.onFocusout, ref: (node) => (this.navEl = node) }, chips.map((chip) => {
+            const active = this.value === chip.value;
+            return (index.h("button", { type: "button", key: chip.value, class: {
+                    'sui-tab-chips__chip': true,
+                    'sui-tab-chips__chip--active': active,
+                }, role: "tab", "data-sui-chip-value": chip.value, "aria-selected": active ? 'true' : 'false', "aria-label": chip.count ? `${chip.label}, ${chip.count}` : undefined, tabindex: tabStop === chip.value ? 0 : -1, onClick: () => this.select(chip.value) }, index.h("span", { class: "sui-tab-chips__chip-label" }, chip.label), chip.count ? (index.h("span", { class: "sui-tab-chips__chip-count", "aria-hidden": "true" }, chip.count)) : null));
+        })), index.h(pistaDeScrollMarco.PistaMarco, { key: '84ac7a4d8de1a3e4d71b3ae5d641d87886e9cae9', estado: this.pistaEstado, pista: this.pista }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "chips": [{
+                "ensureValue": 0
+            }],
+        "pistaDeScroll": [{
+                "onPistaChange": 0
+            }],
+        "value": [{
+                "onValueChange": 0
+            }],
+        "sticky": [{
+                "onStickyChange": 0
+            }]
+    }; }
+};
+SuiTabChips.style = suiTabChipsCss();
+
+exports.sui_tab_chips = SuiTabChips;

package/dist/cjs/sui-tab-menu-horizontal.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var rovingFocus = require('./roving-focus-J_7U6aRM.js');
+
+const suiTabMenuHorizontalCss = () => `@charset "UTF-8";.sc-sui-tab-menu-horizontal-h{display:block}.sui-tab-menu-horizontal__track.sc-sui-tab-menu-horizontal{display:flex;align-items:flex-start;gap:24px;padding:0;border-top:1px solid var(--sui-stroke-soft-200);border-bottom:1px solid var(--sui-stroke-soft-200);background:var(--sui-bg-white-0);box-sizing:border-box;width:100%}.sui-tab-menu-horizontal__badge.sc-sui-tab-menu-horizontal{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:14px 0;border:none;background:transparent;cursor:pointer;position:relative;flex-shrink:0;font-family:var(--sui-font-sans);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);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto;color:var(--sui-text-sub-600);white-space:nowrap;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal .sui-tab-menu-horizontal__leading.sc-sui-tab-menu-horizontal{flex-shrink:0}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal .sui-tab-menu-horizontal__text.sc-sui-tab-menu-horizontal{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal .sui-tab-menu-horizontal__chevron.sc-sui-tab-menu-horizontal{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);overflow:hidden;color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tab-menu-horizontal__item--active.sc-sui-tab-menu-horizontal{color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item--active.sc-sui-tab-menu-horizontal .sui-tab-menu-horizontal__leading.sc-sui-tab-menu-horizontal{color:var(--sui-icon-strong-950)}.sui-tab-menu-horizontal__item--active.sc-sui-tab-menu-horizontal::after{background:var(--sui-primary-base)}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active){color:var(--sui-text-strong-950)}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__leading.sc-sui-tab-menu-horizontal{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal:hover:not(:disabled):not(.sui-tab-menu-horizontal__item--active) .sui-tab-menu-horizontal__chevron.sc-sui-tab-menu-horizontal{color:var(--sui-icon-sub-600)}.sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal:disabled{cursor:not-allowed;opacity:0.4}[data-sui-size=small].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__track.sc-sui-tab-menu-horizontal{gap:20px}[data-sui-size=small].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal{padding:10px 0}[data-sui-size=large].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal,[data-sui-size=xlarge].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal{font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}[data-sui-size=large].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal{padding:14px 0}[data-sui-size=xlarge].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__track.sc-sui-tab-menu-horizontal{gap:28px}[data-sui-size=xlarge].sc-sui-tab-menu-horizontal-h .sui-tab-menu-horizontal__item.sc-sui-tab-menu-horizontal{padding:16px 0}`;
+
+const SuiTabMenuHorizontal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange");
+        /** Ítems `{ value, label, icon?, rightIcon?, number?, disabled? }`. Requerido. */
+        this.tabs = [];
+        /** Alto de la franja tocable: small 40 · medium 48 (Figma) · large 52 · xlarge 56. */
+        this.size = 'medium';
+        this.onKeydown = (event) => {
+            var _a;
+            const idx = rovingFocus.suiTabStopIndex(this.tabs, this.active);
+            const next = rovingFocus.suiRovingIndexEnabled(event.key, idx, this.tabs, 'horizontal');
+            if (next === null)
+                return;
+            event.preventDefault();
+            if (next !== idx)
+                this.select(this.tabs[next]);
+            (_a = this.el.querySelectorAll('.sui-tab-menu-horizontal__item')[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    /** iOS WKWebView: la presencia del listener touchstart libera `:active` a tiempo. */
+    onTouchStart() {
+        /* no-op a propósito */
+    }
+    onTouchEnd(event) {
+        var _a, _b;
+        (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('button')) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active = tab.value;
+        this.tabChange.emit(tab.value);
+    }
+    render() {
+        const tabStop = rovingFocus.suiTabStopIndex(this.tabs, this.active);
+        const iconSize = this.size === 'xlarge' ? 24 : 20;
+        return (index.h(index.Host, { key: '28c0c0bcb620c08276defffd462237df21bb7923', "data-sui-size": this.size }, index.h("div", { key: '8eb2f78e41f1fc133760ea873c51668451e7c17e', class: "sui-tab-menu-horizontal__track", role: "tablist", onKeyDown: this.onKeydown }, this.tabs.map((tab, i) => {
+            const isActive = this.active === tab.value;
+            return (index.h("button", { key: tab.value, type: "button", class: {
+                    'sui-tab-menu-horizontal__item': true,
+                    'sui-tab-menu-horizontal__item--active': isActive,
+                }, disabled: tab.disabled, role: "tab", "aria-selected": isActive ? 'true' : 'false', tabindex: tabStop === i ? '0' : '-1', "aria-disabled": tab.disabled ? 'true' : undefined, onClick: () => this.select(tab) }, tab.icon && (index.h("sui-icon", { class: "sui-tab-menu-horizontal__leading", name: tab.icon, size: iconSize })), index.h("span", { class: "sui-tab-menu-horizontal__text" }, index.h("span", { class: "sui-tab-menu-horizontal__label" }, tab.label), !!tab.number && index.h("span", { class: "sui-tab-menu-horizontal__badge" }, tab.number)), tab.rightIcon && (index.h("span", { class: "sui-tab-menu-horizontal__chevron" }, index.h("sui-icon", { name: "arrow-right-s-line", size: 18 })))));
+        }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiTabMenuHorizontal.style = suiTabMenuHorizontalCss();
+
+exports.sui_tab_menu_horizontal = SuiTabMenuHorizontal;