@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,173 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiTabsCss = () => `@charset "UTF-8";.sc-sui-tabs-h{display:block}.sui-tabs__segment-track.sc-sui-tabs{position:relative;display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--sui-radius-10);background:var(--sui-bg-weak-50);box-sizing:border-box;width:100%}.sui-tabs__segment-indicator.sc-sui-tabs{position:absolute;top:4px;left:0;height:calc(100% - 8px);background:var(--sui-bg-white-0);border-radius:var(--sui-radius-6);box-shadow:0 6px 10px 0 rgba(14, 18, 27, 0.06), 0 2px 4px 0 rgba(14, 18, 27, 0.03);transition:transform var(--sui-motion-duration-fast) cubic-bezier(0.16, 1, 0.3, 1), width var(--sui-motion-duration-fast) cubic-bezier(0.16, 1, 0.3, 1);pointer-events:none;z-index:0}.sui-tabs__segment-item.sc-sui-tabs{position:relative;z-index:1;display:flex;flex:1 0 0;align-items:center;justify-content:center;gap:6px;padding:4px;min-width:0;overflow:hidden;border-radius:var(--sui-radius-6);border:none;background:transparent;cursor:pointer;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);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-soft-400);text-align:center;white-space:nowrap}.sui-tabs__segment-item--icon-only.sc-sui-tabs{gap:0}.sui-tabs__segment-item--active.sc-sui-tabs{color:var(--sui-text-strong-950)}.sui-tabs__segment-item.sc-sui-tabs:hover:not(:disabled):not(.sui-tabs__segment-item--active){color:var(--sui-text-sub-600)}.sui-tabs__segment-item.sc-sui-tabs:disabled{cursor:not-allowed;color:var(--sui-text-disabled-300)}.sui-tabs__badge.sc-sui-tabs{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-tabs__line-track.sc-sui-tabs{display:flex;align-items:flex-start;gap:24px;padding:14px 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-tabs__line-item.sc-sui-tabs{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding: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-tabs__line-item.sc-sui-tabs .sui-tabs__line-leading.sc-sui-tabs{flex-shrink:0}.sui-tabs__line-item.sc-sui-tabs .sui-tabs__line-text.sc-sui-tabs{display:inline-flex;align-items:center;gap:4px;min-width:0}.sui-tabs__line-item.sc-sui-tabs .sui-tabs__line-chevron.sc-sui-tabs{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-tabs__line-item.sc-sui-tabs::after{content:"";position:absolute;bottom:-14px;left:0;right:0;height:2px;background:transparent;transition:background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-tabs__line-item--active.sc-sui-tabs{color:var(--sui-text-strong-950)}.sui-tabs__line-item--active.sc-sui-tabs .sui-tabs__line-leading.sc-sui-tabs{color:var(--sui-icon-strong-950)}.sui-tabs__line-item--active.sc-sui-tabs::after{background:var(--sui-primary-base)}.sui-tabs__line-item.sc-sui-tabs:hover:not(:disabled):not(.sui-tabs__line-item--active){color:var(--sui-text-strong-950)}.sui-tabs__line-item.sc-sui-tabs:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-leading.sc-sui-tabs{color:var(--sui-icon-sub-600)}.sui-tabs__line-item.sc-sui-tabs:hover:not(:disabled):not(.sui-tabs__line-item--active) .sui-tabs__line-chevron.sc-sui-tabs{color:var(--sui-icon-sub-600)}.sui-tabs__line-item.sc-sui-tabs:disabled{cursor:not-allowed;opacity:0.4}.sui-tabs__vertical-track.sc-sui-tabs{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}[data-sui-vstyle=card].sc-sui-tabs-h .sui-tabs__vertical-track.sc-sui-tabs{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}[data-sui-vstyle=list].sc-sui-tabs-h .sui-tabs__vertical-track.sc-sui-tabs{padding:0;border:none;background:transparent;box-shadow:none}.sui-tabs__vertical-divider.sc-sui-tabs{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;text-transform:uppercase}.sui-tabs__vertical-item.sc-sui-tabs{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tabs__vertical-item.sc-sui-tabs .sui-tabs__vertical-leading.sc-sui-tabs{flex-shrink:0}.sui-tabs__vertical-item.sc-sui-tabs .sui-tabs__vertical-label.sc-sui-tabs{flex:1 0 0;min-width: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;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tabs__vertical-item.sc-sui-tabs .sui-tabs__chevron.sc-sui-tabs{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);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tabs__vertical-item--active.sc-sui-tabs{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item--active.sc-sui-tabs .sui-tabs__vertical-leading.sc-sui-tabs{color:var(--sui-icon-strong-950)}.sui-tabs__vertical-item.sc-sui-tabs:hover:not(:disabled):not(.sui-tabs__vertical-item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tabs__vertical-item.sc-sui-tabs:disabled{cursor:not-allowed;opacity:0.4}[data-sui-vstyle=card].sc-sui-tabs-h .sui-tabs__vertical-item.sc-sui-tabs:not(.sui-tabs__vertical-item--active):not(:hover){background:var(--sui-bg-white-0)}[data-sui-size=small].sc-sui-tabs-h .sui-tabs__segment-item.sc-sui-tabs{font-size:var(--sui-type-label-xs-size)}[data-sui-size=large].sc-sui-tabs-h .sui-tabs__segment-item.sc-sui-tabs{padding:6px}`;
+
+const SuiTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.suiTabChange = index.createEvent(this, "suiTabChange");
+        /** Entradas a renderizar (data-driven). Requerido. */
+        this.tabs = [];
+        /** Variante visual. Default `line`. */
+        this.variant = 'line';
+        /**
+         * Tamaño (extra feature SUI; el Tab Menu de Figma no expone eje size).
+         * Solo afecta line/segment. Default `medium`.
+         */
+        this.size = 'medium';
+        /** Estilo del contenedor cuando variant='vertical' (Card|List). Default `card`. */
+        this.verticalStyle = 'card';
+        /**
+         * Label de sección renderizado sobre el menú vertical (prop `divider` del
+         * Figma — ej. 'SELECT MENU'). Vacío = sin divider. Solo variant='vertical'.
+         */
+        this.dividerLabel = '';
+        /** Estilo inline del indicator del segment (transform + width), animado. */
+        this.indicatorStyle = {
+            transform: 'translateX(0)',
+            width: '0',
+        };
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline para que `:active` dispare/se libere correctamente.
+     * `touchend.blur()` empuja la deselección inmediata. Sin esto `:active`
+     * "stickea" 300-500ms en pages standalone. Igual que el Angular original.
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    onTouchEnd(event) {
+        const target = event.target;
+        const btn = target === null || target === void 0 ? void 0 : target.closest('button');
+        if (btn)
+            btn.blur();
+    }
+    componentDidLoad() {
+        // Posicionamiento inicial del indicator + observa el resize del track
+        // (mismo flujo que ngAfterViewInit del Angular: setTimeout 0 + ResizeObserver).
+        if (this.variant !== 'segment')
+            return;
+        this.attachResizeObserver();
+        this.scheduleIndicatorUpdate();
+    }
+    componentDidRender() {
+        // El track puede aparecer/desaparecer al cambiar variant; re-engancha el
+        // observer si hace falta y recoloca el indicator.
+        if (this.variant === 'segment') {
+            this.attachResizeObserver();
+            this.scheduleIndicatorUpdate();
+        }
+        else {
+            this.detachResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.detachResizeObserver();
+    }
+    /** Reposiciona el indicator cuando cambia el tab activo (≈ effect del Angular). */
+    onActiveChange() {
+        if (this.variant === 'segment')
+            this.scheduleIndicatorUpdate();
+    }
+    onTabsChange() {
+        if (this.variant === 'segment')
+            this.scheduleIndicatorUpdate();
+    }
+    attachResizeObserver() {
+        const track = this.el.querySelector('.sui-tabs__segment-track');
+        if (!track)
+            return;
+        if (this.trackEl === track && this.resizeObserver)
+            return;
+        this.detachResizeObserver();
+        this.trackEl = track;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+        this.resizeObserver.observe(track);
+    }
+    detachResizeObserver() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        this.trackEl = undefined;
+    }
+    /** setTimeout 0 para esperar el layout (igual al Angular). */
+    scheduleIndicatorUpdate() {
+        setTimeout(() => this.updateIndicator(), 0);
+    }
+    /** Mide el item activo vs el track y setea transform/width del indicator. */
+    updateIndicator() {
+        const track = this.el.querySelector('.sui-tabs__segment-track');
+        if (!track)
+            return;
+        const items = Array.from(track.querySelectorAll('.sui-tabs__segment-item'));
+        const idx = this.tabs.findIndex((t) => t.value === this.active);
+        const resolvedIdx = idx >= 0 ? idx : 0;
+        const item = items[resolvedIdx];
+        if (!item)
+            return;
+        const trackRect = track.getBoundingClientRect();
+        const itemRect = item.getBoundingClientRect();
+        this.indicatorStyle = {
+            transform: `translateX(${itemRect.left - trackRect.left}px)`,
+            width: `${itemRect.width}px`,
+        };
+    }
+    isActive(tab) {
+        return this.active === tab.value;
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active = tab.value;
+        this.suiTabChange.emit(tab.value);
+    }
+    renderSegment() {
+        return (index.h("div", { class: "sui-tabs__segment-track", role: "tablist" }, index.h("div", { class: "sui-tabs__segment-indicator", style: {
+                transform: this.indicatorStyle.transform,
+                width: this.indicatorStyle.width,
+            } }), this.tabs.map((tab) => {
+            const iconOnly = !!(tab.iconOnly && tab.icon);
+            return (index.h("button", { key: tab.value, type: "button", class: {
+                    'sui-tabs__segment-item': true,
+                    'sui-tabs__segment-item--active': this.isActive(tab),
+                    'sui-tabs__segment-item--icon-only': iconOnly,
+                }, disabled: tab.disabled, "aria-selected": this.isActive(tab) ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, "aria-label": iconOnly ? tab.label : undefined, role: "tab", onClick: () => this.select(tab) }, tab.icon && index.h("sui-icon", { name: tab.icon, size: 20 }), !tab.iconOnly && index.h("span", null, tab.label)));
+        })));
+    }
+    renderVertical() {
+        return (index.h("div", { class: "sui-tabs__vertical-track", role: "tablist" }, this.dividerLabel && (index.h("div", { class: "sui-tabs__vertical-divider" }, this.dividerLabel)), this.tabs.map((tab) => (index.h("button", { key: tab.value, type: "button", class: {
+                'sui-tabs__vertical-item': true,
+                'sui-tabs__vertical-item--active': this.isActive(tab),
+            }, disabled: tab.disabled, "aria-selected": this.isActive(tab) ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, role: "tab", onClick: () => this.select(tab) }, tab.icon && (index.h("sui-icon", { class: "sui-tabs__vertical-leading", name: tab.icon, size: 20 })), index.h("span", { class: "sui-tabs__vertical-label" }, tab.label), tab.badge ? index.h("span", { class: "sui-tabs__badge" }, tab.badge) : null, tab.chevron && (index.h("span", { class: "sui-tabs__chevron" }, index.h("sui-icon", { name: "arrow-right-s-line", size: 18 }))))))));
+    }
+    renderLine() {
+        return (index.h("div", { class: "sui-tabs__line-track", role: "tablist" }, this.tabs.map((tab) => (index.h("button", { key: tab.value, type: "button", class: {
+                'sui-tabs__line-item': true,
+                'sui-tabs__line-item--active': this.isActive(tab),
+            }, disabled: tab.disabled, "aria-selected": this.isActive(tab) ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : undefined, role: "tab", onClick: () => this.select(tab) }, tab.icon && (index.h("sui-icon", { class: "sui-tabs__line-leading", name: tab.icon, size: 20 })), index.h("span", { class: "sui-tabs__line-text" }, index.h("span", { class: "sui-tabs__line-label" }, tab.label), tab.badge ? index.h("span", { class: "sui-tabs__badge" }, tab.badge) : null), tab.chevron && (index.h("span", { class: "sui-tabs__line-chevron" }, index.h("sui-icon", { name: "arrow-right-s-line", size: 18 }))))))));
+    }
+    render() {
+        return (index.h(index.Host, { key: '3b9235217a08d9a4f82f07dabdcc6cba162e9e5b', "data-sui-variant": this.variant, "data-sui-size": this.size, "data-sui-vstyle": this.variant === 'vertical' ? this.verticalStyle : null }, this.variant === 'segment'
+            ? this.renderSegment()
+            : this.variant === 'vertical'
+                ? this.renderVertical()
+                : this.renderLine()));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "active": [{
+                "onActiveChange": 0
+            }],
+        "tabs": [{
+                "onTabsChange": 0
+            }]
+    }; }
+};
+SuiTabs.style = suiTabsCss();
+
+exports.sui_tabs = SuiTabs;

package/dist/cjs/sui-tag-input.cjs.entry.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiTagInputCss = () => `@charset "UTF-8";.sc-sui-tag-input-h{display:block;font-family:var(--sui-font-sans)}.sui-tag-input__label-host.sc-sui-tag-input{display:block;margin-bottom:4px}.sui-tag-input__field.sc-sui-tag-input{display:flex;align-items:center;width:100%;box-sizing:border-box;overflow:hidden;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);cursor:text;transition:border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), background-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)}[data-sui-size=xsmall].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input{gap:6px;padding:5px 6px 5px 10px;border-radius:var(--sui-radius-8);min-height:32px}[data-sui-size=small].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input{gap:8px;padding:7px 8px 7px 10px;border-radius:var(--sui-radius-8);min-height:36px}[data-sui-size=medium].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input,.sc-sui-tag-input-h:not([data-sui-size]) .sui-tag-input__field.sc-sui-tag-input{gap:8px;padding:9px 10px 9px 12px;border-radius:var(--sui-radius-10);min-height:40px}[data-sui-size=large].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input{gap:10px;padding:11px 12px 11px 14px;border-radius:var(--sui-radius-12);min-height:48px}[data-sui-size=xlarge].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input{gap:10px;padding:13px 14px 13px 16px;border-radius:var(--sui-radius-12);min-height:52px}.sui-tag-input__control.sc-sui-tag-input{flex:1 0 0;min-width:0;width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:var(--sui-text-strong-950);font-family:inherit;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}@media (max-width: 767px){.sui-tag-input__control.sc-sui-tag-input{font-size:16px}}[data-sui-size=large].sc-sui-tag-input-h .sui-tag-input__control.sc-sui-tag-input,[data-sui-size=xlarge].sc-sui-tag-input-h .sui-tag-input__control.sc-sui-tag-input{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)}.sui-tag-input__control.sc-sui-tag-input::placeholder{color:var(--sui-text-soft-400);opacity:1}.sui-tag-input__right.sc-sui-tag-input{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md);color:var(--sui-icon-soft-400);pointer-events:none}[data-sui-disabled].sc-sui-tag-input-h .sui-tag-input__right.sc-sui-tag-input{color:var(--sui-icon-disabled-300)}.sc-sui-tag-input-h:not([data-sui-disabled]):not([data-sui-error]) .sui-tag-input__field.sc-sui-tag-input:hover{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none}.sc-sui-tag-input-h:not([data-sui-disabled]):not([data-sui-error]) .sui-tag-input__field.sc-sui-tag-input:hover .sui-tag-input__control.sc-sui-tag-input::placeholder{color:var(--sui-text-sub-600)}.sc-sui-tag-input-h:not([data-sui-disabled]):not([data-sui-error]) .sui-tag-input__field.sc-sui-tag-input:focus-within{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}[data-sui-error].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input,.sui-tag-input__field--error.sc-sui-tag-input{border-color:var(--sui-state-error-base)}[data-sui-error].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input:focus-within{border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-16)}[data-sui-disabled].sc-sui-tag-input-h .sui-tag-input__field.sc-sui-tag-input,.sui-tag-input__field--disabled.sc-sui-tag-input{background:var(--sui-bg-weak-50);border-color:transparent;box-shadow:none;cursor:not-allowed}[data-sui-disabled].sc-sui-tag-input-h .sui-tag-input__control.sc-sui-tag-input{color:var(--sui-text-disabled-300);cursor:not-allowed}[data-sui-disabled].sc-sui-tag-input-h .sui-tag-input__control.sc-sui-tag-input::placeholder{color:var(--sui-text-disabled-300)}.sui-tag-input__tags.sc-sui-tag-input{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:4px;width:100%}.sui-tag-input__hint-host.sc-sui-tag-input{display:block;margin-top:4px}`;
+
+/** Contador por instancia para los ids de label/hint (a11y, 04-10-2026). */
+let nextId = 0;
+const SuiTagInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.tagAdded = index.createEvent(this, "tagAdded");
+        this.tagRemoved = index.createEvent(this, "tagRemoved");
+        // ── Core props (espejan los input() del Angular) ─────────────────────────
+        /** Tamaño del field. Default `medium` (40px). */
+        this.size = 'medium';
+        /** Placeholder del input de texto libre. */
+        this.placeholder = 'Agrega una etiqueta…';
+        /** Deshabilita el control (bg-weak-50, sin border, no editable). Default `false`. */
+        this.disabled = false;
+        /** Activa borde rojo + muestra `errorMessage`. Default `false`. */
+        this.error = false;
+        /** Mensaje de error (se muestra cuando `error`). */
+        this.errorMessage = null;
+        /**
+         * Renderiza el icono trailing del frame "Basic" (Figma `rightIcon`, node
+         * 428:4819). Default: `info-custom-fill` 20x20 coloreado text-soft-400. Para
+         * sustituir el contenido proyectá markup en el slot `right` (equivalente
+         * `pickRight`).
+         */
+        this.rightIcon = false;
+        /** a11y: ids propios por instancia. */
+        this.controlId = `sui-tag-input-${++nextId}`;
+        this.hintId = `${this.controlId}-hint`;
+        // ── Label props (delegados a sui-form-label) ─────────────────────────────
+        /** Texto del label arriba del field. */
+        this.label = null;
+        /** Sublabel opcional (texto secundario después del label). */
+        this.sublabel = null;
+        /** Muestra asterisco rojo de requerido en el label. Default `false`. */
+        this.required = false;
+        /** Tooltip (ícono info) en el label. Default `null` → sin ícono info. */
+        this.tooltip = null;
+        // ── Hint (delegado a sui-form-hint) ──────────────────────────────────────
+        /** Mensaje de ayuda debajo del field (se oculta cuando hay error). */
+        this.hint = null;
+        // ── Behavior props (custom — no en Figma) ────────────────────────────────
+        /** Permite que la coma además de Enter agregue un tag. Default `false` (solo Enter). */
+        this.commaSeparator = false;
+        /** Permite tags duplicados. Default `false` (dedupe case-sensitive). */
+        this.allowDuplicates = false;
+        /** Máximo de tags. `null` = sin tope. */
+        this.maxTags = null;
+        /** Commitea el texto pendiente como tag al perder el foco. Default `false`. */
+        this.addOnBlur = false;
+        /**
+         * Lista de tags — el value expuesto. Controlled: el consumer escucha
+         * `valueChange` y reescribe este prop. El componente igual lo muta localmente
+         * para feel inmediato (espejo del `model<string[]>` del Angular). El texto
+         * pendiente del input NO forma parte del value hasta commitearse como tag.
+         * Default `[]`.
+         */
+        this.value = [];
+        // ── Estado interno ───────────────────────────────────────────────────────
+        /** Texto pendiente en el input (no forma parte del value hasta commitearse). */
+        this.draft = '';
+        // ── Event handlers (espejan los del Angular) ─────────────────────────────
+        this.onInput = (e) => {
+            if (this.isDisabled)
+                return;
+            this.draft = e.target.value;
+        };
+        this.onKeydown = (e) => {
+            if (this.isDisabled)
+                return;
+            if (e.key === 'Enter' || (this.commaSeparator && e.key === ',')) {
+                e.preventDefault();
+                this.commitDraft();
+                return;
+            }
+            // Backspace con el input vacío → quita el último tag.
+            if (e.key === 'Backspace' && this.draft.length === 0 && this.value.length > 0) {
+                e.preventDefault();
+                this.removeLast();
+            }
+        };
+        this.onBlur = () => {
+            if (this.addOnBlur && !this.isDisabled) {
+                this.commitDraft();
+            }
+        };
+        /**
+         * Click en el field → focusea el input. UX nativa de tag inputs: tocar
+         * cualquier zona del campo (incluido el padding) lleva el caret al input.
+         * Espejo de `onFieldPointerDown` del Angular.
+         */
+        this.onFieldMouseDown = (e) => {
+            var _a;
+            if (this.isDisabled)
+                return;
+            // Solo redirige si el target no es ya un control interactivo (input/close).
+            const target = e.target;
+            if (target.closest('.sui-tag-input__control') || target.closest('sui-tag'))
+                return;
+            e.preventDefault();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        /**
+         * iOS WKWebView: un <div> NO recibe mousedown sintetizado a partir de touch
+         * a menos que tenga un listener de click explícito. onTouchStart replica la
+         * misma lógica de redirección al input para que el focus-on-padding funcione
+         * en mobile. El closeButton de <sui-tag> ya trae sus propios onTouchStart/
+         * onTouchEnd internamente — no hace falta coordinarlos desde acá.
+         */
+        this.onFieldTouchStart = (e) => {
+            var _a;
+            if (this.isDisabled)
+                return;
+            const target = e.target;
+            if (target.closest('.sui-tag-input__control') || target.closest('sui-tag'))
+                return;
+            e.preventDefault();
+            (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    /** Nombre resuelto del icono trailing (null = no se renderiza). */
+    get rightIconCfg() {
+        const r = this.rightIcon;
+        if (r === true || r === 'true' || r === '')
+            return 'info-custom-fill';
+        if (typeof r === 'string' && r.length > 0 && r !== 'false')
+            return r;
+        return null;
+    }
+    /** El label no crece con el campo: en large/xlarge queda en medium. */
+    get labelSize() {
+        const s = this.size;
+        return s === 'large' || s === 'xlarge' ? 'medium' : s;
+    }
+    /** Los chips acompañan al campo grande: large/xlarge → tag large/xlarge; resto medium. */
+    get tagSize() {
+        const s = this.size;
+        return s === 'large' || s === 'xlarge' ? s : 'medium';
+    }
+    // ── Computeds (getters — espejan los `computed` del Angular) ─────────────
+    /** `isDisabled` del Angular (sin `_disabledByForm` — Stencil no tiene Forms API). */
+    get isDisabled() {
+        return this.disabled;
+    }
+    /** True cuando hay al menos un tag (para renderizar la fila de tags). */
+    get hasTags() {
+        return this.value.length > 0;
+    }
+    // ── Core mutations (espejan los del Angular) ─────────────────────────────
+    /** Commitea el draft actual como tag (trim, dedupe, cap). Limpia el input. */
+    commitDraft() {
+        const raw = this.draft.trim();
+        if (!raw) {
+            this.draft = '';
+            return;
+        }
+        this.addTagInternal(raw);
+        this.draft = '';
+        if (this.inputEl)
+            this.inputEl.value = '';
+    }
+    /** Agrega un tag respetando dedupe y maxTags. Devuelve true si se agregó. */
+    addTagInternal(tag) {
+        const value = tag.trim();
+        if (!value)
+            return false;
+        const current = this.value;
+        const cap = this.maxTags;
+        if (cap !== null && current.length >= cap)
+            return false;
+        if (!this.allowDuplicates && current.includes(value))
+            return false;
+        const next = [...current, value];
+        this.value = next;
+        this.valueChange.emit(next);
+        this.tagAdded.emit(value);
+        return true;
+    }
+    /** Quita el tag en `index`. */
+    removeAtInternal(index) {
+        if (this.isDisabled)
+            return;
+        const current = this.value;
+        if (index < 0 || index >= current.length)
+            return;
+        const removed = current[index];
+        const next = current.filter((_, i) => i !== index);
+        this.value = next;
+        this.valueChange.emit(next);
+        this.tagRemoved.emit(removed);
+    }
+    /** Quita el último tag (usado por Backspace en input vacío). */
+    removeLast() {
+        this.removeAtInternal(this.value.length - 1);
+    }
+    // ── Public methods (API imperativa — espejan métodos públicos del Angular) ─
+    /** Agrega un tag programáticamente. Devuelve true si se agregó (dedupe/cap). */
+    async addTag(tag) {
+        return this.addTagInternal(tag);
+    }
+    /** Quita el tag en `index`. */
+    async removeAt(index) {
+        this.removeAtInternal(index);
+    }
+    /** Strip del `title` nativo del host (evita el tooltip gris del OS; regla del DS). */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        var _a, _b;
+        /* Detecta si el consumer proyectó contenido en slot="right". En Stencil
+           `scoped` el slot NO renderea fallback content de forma confiable, así que
+           replicamos la semántica del `<ng-content select="[slot=right]">` con
+           fallback del Angular consultando el light DOM (patrón canon del proyecto,
+           ver sui-empty-state). Si no hay nada proyectado, dibujamos el ícono default. */
+        const hasProjectedRight = !!this.el.querySelector('[slot="right"]');
+        const rightIconName = this.rightIconCfg;
+        const hintMessage = this.error ? this.errorMessage : this.hint;
+        return (index.h(index.Host, { key: '5189b03b310ba1e028dde91e09da0c07fbeefd1e', "data-sui-size": this.size, "data-sui-error": this.error ? '' : null, "data-sui-disabled": this.isDisabled ? '' : null }, this.label && (index.h("sui-form-label", { key: '81e5e41fa21b5163434d2d42b7281f616fa0fac1', class: "sui-tag-input__label-host", label: this.label, sublabel: (_a = this.sublabel) !== null && _a !== void 0 ? _a : undefined, required: this.required, tooltip: (_b = this.tooltip) !== null && _b !== void 0 ? _b : undefined, size: this.labelSize, htmlFor: this.controlId })), index.h("div", { key: 'a1fb973940895d7c6428f78ba8e5617da856cfcb', class: {
+                'sui-tag-input__field': true,
+                'sui-tag-input__field--error': this.error,
+                'sui-tag-input__field--disabled': this.isDisabled,
+            }, onMouseDown: this.onFieldMouseDown, onTouchStart: this.onFieldTouchStart }, index.h("input", { key: '40ed79febd8530d64345d7622acc46281c34d79d', class: "sui-tag-input__control", id: this.controlId, "aria-invalid": this.error ? 'true' : null, "aria-describedby": hintMessage ? this.hintId : null, ref: (el) => (this.inputEl = el), type: "text", placeholder: this.placeholder, disabled: this.isDisabled, value: this.draft, autocomplete: "off", onInput: this.onInput, onKeyDown: this.onKeydown, onBlur: this.onBlur }), rightIconName && (index.h("span", { key: 'a1189c6ba8f01d2c6c2f065501791747d063b044', class: "sui-tag-input__right" }, index.h("slot", { key: 'f360ffbf1daffe91ba02752d27effc5c33238c2a', name: "right" }), !hasProjectedRight && index.h("sui-icon", { key: 'af59a0a4272ea9779818a6aff9e4c3edc0910a5c', name: rightIconName, size: 20 })))), this.hasTags && (index.h("div", { key: 'ecbfb208a8cf6021b52dbf3be60e6fec1d3505af', class: "sui-tag-input__tags", role: "list" }, this.value.map((tag, index$1) => (index.h("sui-tag", { role: "listitem", tagStyle: "stroke", size: this.tagSize, dismissible: true, disabled: this.isDisabled, dismissLabel: `Quitar ${tag}`, onDismiss: () => this.removeAtInternal(index$1) }, tag))))), hintMessage && (index.h("sui-form-hint", { key: 'f49eac5d26c16637ae596d4fbbfa6e0a367ae4f2', class: "sui-tag-input__hint-host", id: this.hintId, message: hintMessage, variant: this.error ? 'error' : 'neutral', icon: this.error ? undefined : 'information-fill' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiTagInput.style = suiTagInputCss();
+
+exports.sui_tag_input = SuiTagInput;

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

@@ -0,0 +1,114 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiTagCss = () => `@charset "UTF-8";.sc-sui-tag-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:24px;padding:4px 8px;gap:0;border:1px solid transparent;border-radius:var(--sui-radius-6, 6px);font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto;font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);white-space:nowrap;vertical-align:middle}.sui-tag__text.sc-sui-tag{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:0}.sui-tag__label.sc-sui-tag{display:inline-flex;align-items:center;color:inherit;min-width:0;overflow:clip}.sui-tag__sublabel.sc-sui-tag{display:inline-flex;align-items:center;font-weight:400;color:var(--sui-text-soft-400)}.sc-sui-tag-s>[slot=start]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.sc-sui-tag-s>[slot=start]>*{width:16px;height:16px}.sc-sui-tag-s>[slot=start] img{width:16px;height:16px;object-fit:cover;display:block}[data-sui-leading].sc-sui-tag-h:not([data-sui-dismissible]){padding:4px 8px 4px 4px;gap:4px}[data-sui-leading][data-sui-dismissible].sc-sui-tag-h{padding:4px;gap:4px}.sui-tag__dismiss.sc-sui-tag{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px;margin:0;padding:0;border:0;background:transparent;color:var(--sui-icon-soft-400);cursor:pointer;border-radius:var(--sui-radius-4, 4px);transition:color var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out), background-color var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.sui-tag__dismiss.sc-sui-tag:hover{color:var(--sui-text-strong-950)}.sui-tag__dismiss.sc-sui-tag:disabled{cursor:not-allowed;color:inherit}[data-sui-dismissible].sc-sui-tag-h:not([data-sui-leading]){padding:4px 4px 4px 8px}[data-sui-size=large].sc-sui-tag-h{height:32px;padding:0 10px;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)}[data-sui-size=xlarge].sc-sui-tag-h{height:40px;padding:0 12px;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][data-sui-leading].sc-sui-tag-h:not([data-sui-dismissible]){padding:0 10px 0 6px;gap:6px}[data-sui-size=large][data-sui-leading][data-sui-dismissible].sc-sui-tag-h{padding:0 6px;gap:6px}[data-sui-size=large][data-sui-dismissible].sc-sui-tag-h:not([data-sui-leading]){padding:0 6px 0 10px}[data-sui-size=xlarge][data-sui-leading].sc-sui-tag-h:not([data-sui-dismissible]){padding:0 12px 0 8px;gap:8px}[data-sui-size=xlarge][data-sui-leading][data-sui-dismissible].sc-sui-tag-h{padding:0 8px;gap:8px}[data-sui-size=xlarge][data-sui-dismissible].sc-sui-tag-h:not([data-sui-leading]){padding:0 8px 0 12px}[data-sui-size=large].sc-sui-tag-h .sui-tag__text.sc-sui-tag,[data-sui-size=xlarge].sc-sui-tag-h .sui-tag__text.sc-sui-tag{gap:4px}.sc-sui-tag-h[data-sui-size=large].sc-sui-tag-s>[slot=start],.sc-sui-tag-h[data-sui-size=large] .sc-sui-tag-s>[slot=start],.sc-sui-tag-h[data-sui-size=large].sc-sui-tag-s>[slot=start]>*,.sc-sui-tag-h[data-sui-size=large] .sc-sui-tag-s>[slot=start]>*,.sc-sui-tag-h[data-sui-size=large].sc-sui-tag-s>[slot=start] img,.sc-sui-tag-h[data-sui-size=large] .sc-sui-tag-s>[slot=start] img,.sc-sui-tag-h[data-sui-size=xlarge].sc-sui-tag-s>[slot=start],.sc-sui-tag-h[data-sui-size=xlarge] .sc-sui-tag-s>[slot=start],.sc-sui-tag-h[data-sui-size=xlarge].sc-sui-tag-s>[slot=start]>*,.sc-sui-tag-h[data-sui-size=xlarge] .sc-sui-tag-s>[slot=start]>*,.sc-sui-tag-h[data-sui-size=xlarge].sc-sui-tag-s>[slot=start] img,.sc-sui-tag-h[data-sui-size=xlarge] .sc-sui-tag-s>[slot=start] img{width:20px;height:20px}[data-sui-size=large].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag{position:relative;width:20px;height:20px}[data-sui-size=xlarge].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag{position:relative;width:24px;height:24px}[data-sui-size=large].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag::before,[data-sui-size=xlarge].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag::before{content:"";position:absolute;inset:-6px}[data-sui-size=xlarge].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag::before{inset:-8px}@media (max-width: 767px){[data-sui-size=xlarge].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag::before{inset:-10px}}[data-sui-style=stroke].sc-sui-tag-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600)}[data-sui-style=gray].sc-sui-tag-h{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}.sc-sui-tag-h[data-sui-style=gray].sc-sui-tag-s>[slot=start] sui-icon,.sc-sui-tag-h[data-sui-style=gray] .sc-sui-tag-s>[slot=start] sui-icon,.sc-sui-tag-h[data-sui-style=gray].sc-sui-tag-s>sui-icon[slot=start],.sc-sui-tag-h[data-sui-style=gray] .sc-sui-tag-s>sui-icon[slot=start]{color:var(--sui-icon-soft-400)}[data-sui-interactive][data-sui-style=stroke].sc-sui-tag-h:hover{background:var(--sui-bg-weak-50)}[data-sui-interactive][data-sui-style=gray].sc-sui-tag-h:hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200)}[data-sui-interactive][data-sui-style=stroke].sc-sui-tag-h:active,[data-sui-interactive][data-sui-style=gray].sc-sui-tag-h:active{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950)}[data-sui-interactive][data-sui-style=stroke].sc-sui-tag-h:active .sui-tag__sublabel.sc-sui-tag,[data-sui-interactive][data-sui-style=gray].sc-sui-tag-h:active .sui-tag__sublabel.sc-sui-tag{color:var(--sui-text-sub-600)}[data-sui-interactive][data-sui-style=stroke].sc-sui-tag-h:active .sui-tag__dismiss.sc-sui-tag:not(:disabled):not(:hover),[data-sui-interactive][data-sui-style=gray].sc-sui-tag-h:active .sui-tag__dismiss.sc-sui-tag:not(:disabled):not(:hover){color:var(--sui-text-strong-950)}.sc-sui-tag-h[data-sui-interactive][data-sui-style=gray]:active.sc-sui-tag-s>[slot=start] sui-icon,.sc-sui-tag-h[data-sui-interactive][data-sui-style=gray]:active .sc-sui-tag-s>[slot=start] sui-icon,.sc-sui-tag-h[data-sui-interactive][data-sui-style=gray]:active.sc-sui-tag-s>sui-icon[slot=start],.sc-sui-tag-h[data-sui-interactive][data-sui-style=gray]:active .sc-sui-tag-s>sui-icon[slot=start]{color:var(--sui-icon-strong-950)}[data-sui-disabled].sc-sui-tag-h{pointer-events:none;background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-tag-h .sui-tag__sublabel.sc-sui-tag{color:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-tag-h .sui-tag__dismiss.sc-sui-tag{color:var(--sui-icon-disabled-300)}.sc-sui-tag-h[data-sui-disabled].sc-sui-tag-s>[slot=start] sui-icon,.sc-sui-tag-h[data-sui-disabled] .sc-sui-tag-s>[slot=start] sui-icon,.sc-sui-tag-h[data-sui-disabled].sc-sui-tag-s>sui-icon[slot=start],.sc-sui-tag-h[data-sui-disabled] .sc-sui-tag-s>sui-icon[slot=start]{color:var(--sui-icon-disabled-300)}`;
+
+const SuiTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismiss = index.createEvent(this, "dismiss");
+        /** Estilo visual. `stroke` = white bg + soft border; `gray` = weak-50 bg, sin border. Default `stroke`. */
+        this.tagStyle = 'stroke';
+        /** Tamaño: medium 24 (default, Figma) · large 32 · xlarge 40 (mobile). */
+        this.size = 'medium';
+        /**
+         * True cuando hay un leading element proyectado (icon/avatar/flag/brand) en
+         * `slot="start"`. Ajusta el padding (pl=4) y agrega gap=4 leading↔texto.
+         * El consumer DEBE setearlo cuando proyecta un start slot. Default `false`.
+         */
+        this.leading = false;
+        /** Texto secundario opcional (ej. '(4)'), render en text-soft-400, gap 2px tras el label. */
+        this.sublabel = '';
+        /** Muestra el botón de cierre (X 16×16) al final del tag. Emite `dismiss`. Default `false`. */
+        this.dismissible = false;
+        /**
+         * El tag entero es clickeable: estilos :hover / :active (Figma States) y, para
+         * teclado y lector, role=button + tab stop + Enter/Espacio hacen click.
+         * Default `false` (display puro, sin rol).
+         */
+        this.interactive = false;
+        /** Estado deshabilitado: override de tokens a disabled-300, pointer-events none. Default `false`. */
+        this.disabled = false;
+        /** aria-label opcional para el botón de cierre. Default 'Quitar'. */
+        this.dismissLabel = 'Quitar';
+        /** True cuando hay sublabel no vacío (espeja el `showsSublabel` computed del Angular). */
+        this.showsSublabel = false;
+        /**
+         * Click del close. Detiene la propagación para no disparar el click del host
+         * (cuando el tag entero es interactivo) y suprime el emit si está disabled.
+         */
+        this.onDismiss = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            this.dismiss.emit();
+        };
+        this.spacePressed = false;
+    }
+    componentWillLoad() {
+        this.recomputeSublabel();
+        // Strip native `title` attr del host — evita el tooltip nativo gris del OS
+        // (patrón canon Ontop/tooltip, ver CLAUDE.md). El consumer puede pasar
+        // `title="..."` al custom element y el browser lo interpretaría como
+        // tooltip nativo; lo removemos para que NO aparezca.
+        if (this.el.hasAttribute('title')) {
+            this.el.removeAttribute('title');
+        }
+    }
+    recomputeSublabel() {
+        this.showsSublabel = this.sublabel.trim().length > 0;
+    }
+    /** Solo el host interactivo y con el foco en él (no la X de adentro). */
+    teclaMia(event) {
+        return this.interactive && event.target === this.el;
+    }
+    onKeydown(event) {
+        if (event.key !== 'Enter' && event.key !== ' ')
+            return;
+        if (!this.teclaMia(event))
+            return;
+        event.preventDefault();
+        if (this.disabled || event.repeat)
+            return;
+        if (event.key === 'Enter')
+            this.el.click();
+        else
+            this.spacePressed = true;
+    }
+    /** Espacio hace click al soltar (como un <button> nativo). */
+    onKeyup(event) {
+        if (event.key !== ' ' || !this.teclaMia(event))
+            return;
+        event.preventDefault();
+        if (!this.spacePressed)
+            return;
+        this.spacePressed = false;
+        if (!this.disabled)
+            this.el.click();
+    }
+    /**
+     * iOS WKWebView fix con listeners PASIVOS (SuiToque del SUI Angular): la
+     * presencia de touchstart engancha el pipeline táctil; touchend.blur() suelta
+     * el :active de la X.
+     */
+    onTouchStart() {
+        /* no-op a propósito. */
+    }
+    onTouchEnd(event) {
+        var _a, _b;
+        (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('.sui-tag__dismiss')) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ad746fc8fc3107edf29afe9279ca706155676f4f', "data-sui-style": this.tagStyle, "data-sui-size": this.size, "data-sui-leading": this.leading ? '' : null, "data-sui-dismissible": this.dismissible ? '' : null, "data-sui-interactive": this.interactive ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "aria-disabled": this.disabled ? 'true' : null, role: this.interactive ? 'button' : null, tabindex: this.interactive ? (this.disabled ? '-1' : '0') : null }, index.h("slot", { key: 'addf75dca8eb992a3c3eb08f7a4a93d5d08d6d9d', name: "start" }), index.h("span", { key: '6f9fda3a045b0ee68c2b972e8aad730f056d01fc', class: "sui-tag__text" }, index.h("span", { key: '792b318a0f16cf5940efc607a94cfe830c57a78e', class: "sui-tag__label" }, index.h("slot", { key: '1e852cfc21dc387b728dedee0a34e59d37924fcb' })), this.showsSublabel && index.h("span", { key: 'a0654aa02f67d8402cc8fe56e7628c9c56d2c40c', class: "sui-tag__sublabel" }, this.sublabel), this.dismissible && (index.h("button", { key: '306e0293db7e879413a582701dfa93aa2888deb8', type: "button", class: "sui-tag__dismiss", "aria-label": this.dismissLabel, disabled: this.disabled, onClick: this.onDismiss }, index.h("sui-icon", { key: '44f9857adc3cd1a6181d9598b513cb910329fc49', name: "close-line", size: this.size === 'xlarge' ? 24 : this.size === 'large' ? 20 : 16, "aria-hidden": "true" }))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "sublabel": [{
+                "recomputeSublabel": 0
+            }]
+    }; }
+};
+SuiTag.style = suiTagCss();
+
+exports.sui_tag = SuiTag;