@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/cjs/sui-password-strength.cjs.entry.js

@@ -0,0 +1,90 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiPasswordStrength_data = require('./sui-password-strength.data-CnkwEx6s.js');
+
+const suiPasswordStrengthCss = () => `@charset "UTF-8";.sc-sui-password-strength-h{font-family:var(--sui-font-sans);display:flex;flex-direction:column;gap:8px;padding-top:6px;width:100%;box-sizing:border-box}.sui-password-strength__level.sc-sui-password-strength{display:flex;gap:8px;width:100%}.sui-password-strength__bar.sc-sui-password-strength{flex:1 1 0;min-width:1px;height:4px;border-radius:1.2px;background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}.sui-password-strength__bar--error.sui-password-strength__bar--on.sc-sui-password-strength{background:var(--sui-state-error-base, #fb3748)}.sui-password-strength__bar--warning.sui-password-strength__bar--on.sc-sui-password-strength{background:var(--sui-state-warning-base, #fa7319)}.sui-password-strength__bar--success.sui-password-strength__bar--on.sc-sui-password-strength{background:var(--sui-state-success-base, #1fc16b)}.sui-password-strength__caption.sc-sui-password-strength{margin:0;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;overflow-wrap:break-word;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-password-strength__conditions.sc-sui-password-strength{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;width:100%}.sui-password-strength__condition.sc-sui-password-strength{display:flex;align-items:center;gap:4px;width:100%}.sui-password-strength__condition-icon.sc-sui-password-strength{flex:none;color:var(--sui-icon-soft-400, #a3a3a3)}.sui-password-strength__condition--met.sc-sui-password-strength .sui-password-strength__condition-icon.sc-sui-password-strength{color:var(--sui-state-success-base, #1fc16b)}.sui-password-strength__condition-label.sc-sui-password-strength{flex:1 1 0;min-width:1px;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;overflow-wrap:break-word;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}@media (prefers-reduced-motion: reduce){.sui-password-strength__bar.sc-sui-password-strength{transition:none}}`;
+
+const SEGMENTS = { empty: 0, weak: 1, moderate: 2, strong: 3 };
+const SuiPasswordStrength = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.strengthChange = index.createEvent(this, "strengthChange");
+        /** Contraseña a evaluar — deriva las condiciones cumplidas y el nivel. */
+        this.value = '';
+        /** Override manual del nivel — presente gana sobre el derivado de `value`. */
+        this.strength = null;
+        /** Caption sobre la checklist. `''` = oculto. Default «Debe contener al menos:». */
+        this.caption = null;
+        /** Checklist de condiciones (propiedad JS). `[]` = sin checklist. Sin pasar: las 3 default. */
+        this.conditions = null;
+        /** Textos del nivel para lectores de pantalla (merge sobre los defaults ES). */
+        this.levelLabels = {};
+        /** Label accesible del progressbar. Default «Seguridad de la contraseña». */
+        this.ariaLabel = null;
+        this.previousStrength = null;
+    }
+    get conditionStates() {
+        var _a;
+        return ((_a = this.conditions) !== null && _a !== void 0 ? _a : suiPasswordStrength_data.SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS).map((c) => {
+            var _a, _b;
+            return ({
+                label: c.label,
+                met: (_a = c.met) !== null && _a !== void 0 ? _a : this.runTest(c.test, (_b = this.value) !== null && _b !== void 0 ? _b : ''),
+            });
+        });
+    }
+    /** Nivel resuelto: override explícito o derivado de las condiciones. */
+    resolve(states) {
+        if (this.strength)
+            return this.strength;
+        if (!this.value)
+            return 'empty';
+        if (!states.length)
+            return 'strong';
+        const met = states.filter((s) => s.met).length;
+        if (met === states.length)
+            return 'strong';
+        if (met >= states.length / 2)
+            return 'moderate';
+        return 'weak';
+    }
+    componentWillLoad() {
+        this.previousStrength = this.resolve(this.conditionStates);
+    }
+    componentDidRender() {
+        const s = this.resolve(this.conditionStates);
+        if (this.previousStrength !== s) {
+            this.previousStrength = s;
+            this.strengthChange.emit(s);
+        }
+    }
+    runTest(test, value) {
+        if (!test)
+            return false;
+        /* RegExp con flag /g es stateful (lastIndex) — se clona sin flags de estado. */
+        if (test instanceof RegExp)
+            return new RegExp(test.source, test.flags.replace(/[gy]/g, '')).test(value);
+        return test(value);
+    }
+    render() {
+        var _a, _b;
+        const states = this.conditionStates;
+        const level = this.resolve(states);
+        const filled = SEGMENTS[level];
+        const levelLabel = Object.assign(Object.assign({}, suiPasswordStrength_data.SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS), this.levelLabels)[level];
+        const caption = (_a = this.caption) !== null && _a !== void 0 ? _a : 'Debe contener al menos:';
+        const bar = (n, color) => (index.h("span", { key: '7bb6c51ef0c7b2d7e19d927205fef22f6c4d152b', class: {
+                'sui-password-strength__bar': true,
+                [`sui-password-strength__bar--${color}`]: true,
+                'sui-password-strength__bar--on': filled >= n,
+            } }));
+        return (index.h(index.Host, { key: '47c567d1296cf0352864291e8015e87b9894b05f', "data-sui-strength": level }, index.h("div", { key: '453b12fc575206f69a8898b64922c48c63116471', class: "sui-password-strength__level", role: "progressbar", "aria-label": (_b = this.ariaLabel) !== null && _b !== void 0 ? _b : 'Seguridad de la contraseña', "aria-valuemin": "0", "aria-valuemax": "3", "aria-valuenow": String(filled), "aria-valuetext": levelLabel }, bar(1, 'error'), bar(2, 'warning'), bar(3, 'success')), caption && index.h("p", { key: '77973630f5aee254073deba334b4adb4b5c0e4b4', class: "sui-password-strength__caption" }, caption), states.length > 0 && (index.h("ul", { key: 'f558ad14faeafdfb2e7e5961828b34838a743f91', class: "sui-password-strength__conditions" }, states.map((c) => (index.h("li", { class: {
+                'sui-password-strength__condition': true,
+                'sui-password-strength__condition--met': c.met,
+            } }, index.h("sui-icon", { class: "sui-password-strength__condition-icon", name: c.met || level === 'empty' ? 'checkbox-circle-fill' : 'close-circle-fill', size: 16, "aria-hidden": "true" }), index.h("span", { class: "sui-password-strength__condition-label" }, c.label))))))));
+    }
+};
+SuiPasswordStrength.style = suiPasswordStrengthCss();
+
+exports.sui_password_strength = SuiPasswordStrength;

package/dist/cjs/sui-password-strength.data-CnkwEx6s.js

@@ -0,0 +1,18 @@
+'use strict';
+
+/** Condiciones default — las 3 del set de Figma, en español (tuteo). */
+const SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS = [
+    { label: 'Al menos 1 mayúscula', test: (v) => /\p{Lu}/u.test(v) },
+    { label: 'Al menos 1 número', test: (v) => /\d/.test(v) },
+    { label: 'Al menos 8 caracteres', test: (v) => v.length >= 8 },
+];
+/** Labels por nivel para el `aria-valuetext` (configurables vía `levelLabels`). */
+const SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS = {
+    empty: 'Sin contraseña',
+    weak: 'Contraseña débil',
+    moderate: 'Contraseña moderada',
+    strong: 'Contraseña fuerte',
+};
+
+exports.SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS = SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS;
+exports.SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS = SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS;

package/dist/cjs/sui-payment-icon.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiPaymentIconCss = () => `@charset "UTF-8";.sc-sui-payment-icon-h{display:inline-flex;flex:0 0 auto;vertical-align:middle;line-height:1}`;
+
+const TYPE_ICON = {
+    water: 'drop-fill',
+    gas: 'fire-fill',
+    electricity: 'lightbulb-flash-fill',
+    donate: 'hand-heart-fill',
+    internet: 'wifi-fill',
+    phone: 'cellphone-fill',
+    rent: 'home-smile-fill',
+    tax: 'file-list-fill',
+};
+const TYPE_COLOR = {
+    water: 'teal',
+    gas: 'red',
+    electricity: 'yellow',
+    donate: 'pink',
+    internet: 'blue',
+    phone: 'orange',
+    rent: 'green',
+    tax: 'purple',
+};
+const SuiPaymentIcon = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Tamaño del contenedor en px. Canon Figma = 40; la escala es la de sui-key-icon. */
+        this.size = 40;
+        /**
+         * Aria-label opcional. Si se provee, se anuncia como imagen (`role="img"`);
+         * si no, es decorativo (`aria-hidden="true"`) — el caso típico, porque el
+         * ícono acompaña un texto que ya nombra el servicio.
+         */
+        this.ariaLabel = null;
+    }
+    /** Strip del `title` nativo del host (canon SUI: sin tooltip gris del browser). */
+    componentWillLoad() {
+        this.el.removeAttribute('title');
+    }
+    render() {
+        const type = this.type in TYPE_ICON ? this.type : 'water';
+        return (index.h(index.Host, { key: '64af9c0d101fe43fc3b98ed7b95a638df9fbb975', "data-sui-type": this.type, "aria-hidden": this.ariaLabel ? null : 'true', role: this.ariaLabel ? 'img' : null, "aria-label": this.ariaLabel || null }, index.h("sui-key-icon", { key: 'ffbd7b7c9690d2f2e1233307051d08f25e479725', class: "sui-payment-icon__key", name: TYPE_ICON[type], styleVariant: "lighter", color: TYPE_COLOR[type], size: this.size })));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiPaymentIcon.style = suiPaymentIconCss();
+
+exports.sui_payment_icon = SuiPaymentIcon;

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

@@ -0,0 +1,113 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+
+const suiPopoverCss = () => `@charset "UTF-8";.sc-sui-popover-h{display:inline-flex;flex-direction:column;align-items:flex-start;box-sizing:border-box;width:320px;position:relative;isolation:isolate;font-family:var(--sui-font-sans)}.sui-popover__panel.sc-sui-popover{display:flex;flex-direction:column;align-items:stretch;box-sizing:border-box;width:100%;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);box-shadow:var(--sui-regular-shadow-medium);overflow:clip;z-index:1}.sui-popover__content.sc-sui-popover{display:flex;flex-direction:column;align-items:flex-start;gap:16px;box-sizing:border-box;width:100%;padding:20px;background:var(--sui-bg-white-0);position:relative;overflow:clip}[data-sui-footer=stretch].sc-sui-popover-h .sui-popover__content.sc-sui-popover,[data-sui-footer=text-stepper].sc-sui-popover-h .sui-popover__content.sc-sui-popover,[data-sui-footer=stepper].sc-sui-popover-h .sui-popover__content.sc-sui-popover{border-bottom:1px solid var(--sui-stroke-soft-200)}.sui-popover__icon-wrap.sc-sui-popover{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:11px;flex-shrink:0;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-full);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-popover__text.sc-sui-popover{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;word-break:break-word}.sui-popover__title.sc-sui-popover{margin:0;width:100%;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);color:var(--sui-text-strong-950);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-popover__description.sc-sui-popover{margin:0;width:100%;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-popover__dismiss.sc-sui-popover{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:2px;margin:0;border:0;background:transparent;border-radius:var(--sui-radius-6);color:var(--sui-icon-sub-600);cursor:pointer;transition:background var(--sui-motion-duration-fast) var(--sui-motion-ease-out), color var(--sui-motion-duration-fast) var(--sui-motion-ease-out)}.sui-popover__dismiss.sc-sui-popover:hover{background:var(--sui-bg-weak-50);color:var(--sui-icon-strong-950)}.sui-popover__dismiss.sc-sui-popover:focus-visible{outline:2px solid var(--sui-stroke-strong-950);outline-offset:2px}.sui-popover__dismiss.sc-sui-popover:active{background:var(--sui-bg-soft-200)}.sui-popover__footer.sc-sui-popover{display:flex;align-items:center;box-sizing:border-box;width:100%;padding:16px 20px;background:var(--sui-bg-white-0);overflow:clip}[data-sui-footer=text-stepper].sc-sui-popover-h .sui-popover__footer.sc-sui-popover,[data-sui-footer=stepper].sc-sui-popover-h .sui-popover__footer.sc-sui-popover{gap:12px}.sui-popover__step-text.sc-sui-popover{flex-shrink:0;white-space:nowrap;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-popover__dots.sc-sui-popover{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}.sui-popover__dot.sc-sui-popover{display:block;width:8px;height:8px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-popover__dot--active.sc-sui-popover{background:var(--sui-primary-base)}.sui-popover__actions.sc-sui-popover{display:flex;flex:1 0 0;min-width:0;align-items:center;gap:12px}[data-sui-footer=text-stepper].sc-sui-popover-h .sui-popover__actions.sc-sui-popover,[data-sui-footer=stepper].sc-sui-popover-h .sui-popover__actions.sc-sui-popover{justify-content:flex-end}[data-sui-footer=stretch].sc-sui-popover-h .sui-popover__action.sc-sui-popover{flex-grow:1;flex-shrink:0;flex-basis:0;min-width:0}[data-sui-footer=text-stepper].sc-sui-popover-h .sui-popover__action.sc-sui-popover,[data-sui-footer=stepper].sc-sui-popover-h .sui-popover__action.sc-sui-popover{min-width:80px;flex-shrink:0}.sui-popover__tail.sc-sui-popover{display:block;position:absolute;z-index:2;width:16px;height:8px;pointer-events:none;line-height:0}.sui-popover__tail-arrow.sc-sui-popover{position:absolute;width:16px;height:8px;box-sizing:border-box;transform-origin:center;pointer-events:none}.sui-popover__tail-arrow.sc-sui-popover::before{content:"";position:absolute;inset:-1px -1px 0 -1px;background:var(--sui-stroke-soft-200);clip-path:polygon(50% 0, 100% 100%, 0 100%)}.sui-popover__tail-arrow.sc-sui-popover::after{content:"";position:absolute;inset:0;background:var(--sui-bg-white-0);clip-path:polygon(50% 0, 100% 100%, 0 100%)}[data-sui-position^=top].sc-sui-popover-h{flex-direction:column;padding-top:8px}[data-sui-position^=top].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{top:0}[data-sui-position^=top].sc-sui-popover-h .sui-popover__tail-arrow.sc-sui-popover{top:calc(50% + 1px);left:50%;transform:translate(-50%, -50%) rotate(0deg)}[data-sui-position^=bottom].sc-sui-popover-h{flex-direction:column;padding-bottom:8px}[data-sui-position^=bottom].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{bottom:0}[data-sui-position^=bottom].sc-sui-popover-h .sui-popover__tail-arrow.sc-sui-popover{top:calc(50% - 1px);left:50%;transform:translate(-50%, -50%) rotate(180deg)}[data-sui-position^=right].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position^=left].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{width:8px;height:16px}[data-sui-position^=right].sc-sui-popover-h{flex-direction:row;align-items:flex-start;padding-right:8px}[data-sui-position^=right].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{right:0}[data-sui-position^=right].sc-sui-popover-h .sui-popover__tail-arrow.sc-sui-popover{top:50%;left:calc(50% - 1px);transform:translate(-50%, -50%) rotate(90deg)}[data-sui-position^=left].sc-sui-popover-h{flex-direction:row;align-items:flex-start;padding-left:8px}[data-sui-position^=left].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{left:0}[data-sui-position^=left].sc-sui-popover-h .sui-popover__tail-arrow.sc-sui-popover{top:50%;left:calc(50% + 1px);transform:translate(-50%, -50%) rotate(-90deg)}[data-sui-position=top-left].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position=bottom-left].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{left:32px}[data-sui-position=top-center].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position=bottom-center].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{left:50%;margin-left:-8px}[data-sui-position=top-right].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position=bottom-right].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{right:32px}[data-sui-position=right-top].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position=left-top].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{top:32px}[data-sui-position=right-center].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position=left-center].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{top:50%;margin-top:-8px}[data-sui-position=right-bottom].sc-sui-popover-h .sui-popover__tail.sc-sui-popover,[data-sui-position=left-bottom].sc-sui-popover-h .sui-popover__tail.sc-sui-popover{bottom:32px}@media (prefers-reduced-motion: reduce){.sui-popover__dismiss.sc-sui-popover{transition:none}}.sui-popover__dismiss.sc-sui-popover::before{content:"";position:absolute;inset:-8px}`;
+
+const SuiPopover = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.dismissed = index.createEvent(this, "dismissed");
+        this.back = index.createEvent(this, "back");
+        this.next = index.createEvent(this, "next");
+        /* ── Tail / position ── */
+        /** Placement axis del tail relativo al trigger (12 variantes Figma). Default `top-left`. */
+        this.position = 'top-left';
+        /** Mostrar la cola/flecha (tail). Default `true`. */
+        this.tail = true;
+        /* ── Header / content ── */
+        /** RemixIcon name del header icon (ej. 'user-6-line'). `null` / `''` = sin icono. */
+        this.icon = 'user-6-line';
+        /**
+         * Título del popover (Label/Medium). Renombrado de `title` del Angular — `title`
+         * es reservado del DOM (tooltip nativo). Es el nombre accesible del diálogo. Si
+         * el host trae `title`, vale como `heading` y se quita.
+         */
+        this.heading = '';
+        /** Descripción (Paragraph/Small). `null` / `''` = sin descripción. */
+        this.description = null;
+        /** Mostrar el botón X de dismiss (top-right). Default `true`. */
+        this.dismissIcon = true;
+        /* ── Footer ── */
+        /** Tipo de footer. `none` oculta el footer y el separador. Default `stretch`. */
+        this.footer = 'stretch';
+        /** Texto del botón secundario (izquierda). En Angular sale de provideSuiTextos. */
+        this.backLabel = 'Atrás';
+        /** Texto del botón primario (derecha). En Angular sale de provideSuiTextos. */
+        this.nextLabel = 'Siguiente';
+        /** Renderear el botón secundario (Atrás). Si false, solo se muestra el primario. */
+        this.doubleButton = true;
+        /**
+         * Progreso del stepper `{ current (1-based), total }` (por property). Usado en
+         * text-stepper y stepper. `null` = el sample de Figma `{ current: 1, total: 4 }`.
+         */
+        this.step = null;
+        /** Botones del pie: `small` 36 (Figma, default) · `medium` 40 · `large` 48 (teléfono). */
+        this.size = 'small';
+        /** Nombre accesible de la X (en Angular sale de provideSuiTextos). */
+        this.closeLabel = 'Cerrar';
+        /**
+         * True cuando el consumer proyectó contenido en el slot `body`. Se evalúa una
+         * vez en componentWillLoad — el slot polyfill de Stencil 4 (scoped) NO renderea
+         * fallback content de slots con nombre de forma fiable, así que se decide en JS
+         * entre el slot proyectado y el title/description built-in.
+         */
+        this.hasBodySlot = false;
+    }
+    componentWillLoad() {
+        this.hasBodySlot = !!this.el.querySelector('[slot="body"]');
+        /* Host title={undefined} no borra el atributo y quedaba el tooltip nativo gris. */
+        const titleAttr = this.el.getAttribute('title');
+        if (titleAttr !== null) {
+            if (!this.heading)
+                this.heading = titleAttr;
+            this.el.removeAttribute('title');
+        }
+    }
+    /* ── iOS :active fix (listeners pasivos en el host, homólogo de SuiToque) ── */
+    onTouchStart() {
+        /* no-op a propósito; la presencia del listener engage el touch pipeline iOS. */
+    }
+    onTouchEnd(event) {
+        suiToque.soltarToque(event, 'button');
+    }
+    /* ── Derived ── */
+    get stepCfg() {
+        var _a;
+        return (_a = this.step) !== null && _a !== void 0 ? _a : { current: 1, total: 4 };
+    }
+    /** «Paso X de N» del text-stepper y nombre accesible de los puntos. */
+    get stepperText() {
+        const { current, total } = this.stepCfg;
+        return `Paso ${current} de ${total}`;
+    }
+    /** Array de dots: cada item = índice activo (1-based). */
+    get dots() {
+        const { current, total } = this.stepCfg;
+        return Array.from({ length: Math.max(1, total) }, (_v, i) => i + 1 === current);
+    }
+    render() {
+        const hasFooter = this.footer !== 'none';
+        return (index.h(index.Host, { key: '4e82be3fbec546d43c2d017158a0c672f9ae9c74', role: "dialog", "aria-label": this.heading || undefined, "data-sui-position": this.position, "data-sui-footer": this.footer, "data-sui-size": this.size, "data-sui-tail": this.tail ? '' : null }, this.tail && (
+        /* Tail / flecha. Triángulo isósceles 16×8 seamless: dos triángulos
+           clip-path superpuestos en `.sui-popover__tail-arrow` (::before =
+           hairline del borde en los 2 lados exteriores; ::after = fill que
+           solapa 1px sobre el panel y funde la base sin línea). El wrapper
+           posiciona/centra (12 variantes); el arrow se centra + rota. */
+        index.h("span", { key: '5f34c0c6264e5a4f00e88e407c0bf71b647b7372', class: "sui-popover__tail", "aria-hidden": "true" }, index.h("span", { key: '034387b21320ba0e8a41ba6767b8b6ae74144e69', class: "sui-popover__tail-arrow" }))), index.h("div", { key: '3e3972b5efcab311135eecf03b80b8088ab03512', class: "sui-popover__panel" }, index.h("div", { key: '9119211d716f32193d300d1edd2c0bf5d38d36b5', class: "sui-popover__content" }, !!this.icon && (index.h("span", { key: '34264678c6960bd242c09277e51223fce12e3b10', class: "sui-popover__icon-wrap" }, index.h("sui-icon", { key: '9b1708281a5397db3e31d834a513966a2511d660', name: this.icon, size: 24 }))), index.h("div", { key: 'b53ea421cf9efc0a00fc3c2e2b9c4fce4e26bc80', class: "sui-popover__text" }, index.h("slot", { key: '07b80155e51484f58a22546123c200e729b89c73', name: "body" }), !this.hasBodySlot && [
+            index.h("p", { key: '4c3ed6a769eee2705890c776110afe5dfa374c6c', class: "sui-popover__title" }, this.heading),
+            !!this.description && index.h("p", { key: 'bb0b6dae80f35a8830d3cc51ff20d77b40ead5ea', class: "sui-popover__description" }, this.description),
+        ]), this.dismissIcon && (
+        /* Figma modela el dismiss como instancia de Compact Button [1.1]. El
+           click se escucha en el host: así también cuenta el área táctil
+           extendida (::before del host). */
+        index.h("sui-compact-button", { key: '2b8e81bc389bc6680c221a8bbcf3369613c0ebe0', class: "sui-popover__dismiss", icon: "close-line", variantStyle: "ghost", size: "large", ariaLabel: this.closeLabel, onClick: () => this.dismissed.emit() }))), hasFooter && (index.h("div", { key: 'ea9929e79edfe46816245c8bb1036ff2d46a6e7f', class: "sui-popover__footer" }, this.footer === 'text-stepper' && (index.h("span", { key: '10d7763ea1a75688bcec0e4da4239b0b324f1081', class: "sui-popover__step-text" }, this.stepperText)), this.footer === 'stepper' && (
+        /* a11y 04-10-2026: los puntos dicen en qué paso va («Paso 2 de 4»). */
+        index.h("span", { key: 'f3063ce8dc5b3122a060fb253513a509cec506eb', class: "sui-popover__dots", role: "img", "aria-label": this.stepperText }, this.dots.map((active) => (index.h("span", { class: { 'sui-popover__dot': true, 'sui-popover__dot--active': active } }))))), index.h("div", { key: '139eeacb35ff6f7b26eaac4ff46a47beb26ef2a8', class: "sui-popover__actions" }, this.doubleButton && (index.h("sui-button", { key: 'a2435908b54834af1a3e05e26039c609544660b4', class: "sui-popover__action sui-popover__action--back", variant: "stroke", color: "neutral", size: this.size, type: "button", onClick: () => this.back.emit() }, this.backLabel)), index.h("sui-button", { key: '61cbe7059539c8ccfcfa27a4406c33f2d7e71e15', class: "sui-popover__action sui-popover__action--next", variant: "filled", color: "primary", size: this.size, type: "button", onClick: () => this.next.emit() }, this.nextLabel)))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiPopover.style = suiPopoverCss();
+
+exports.sui_popover = SuiPopover;

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

@@ -0,0 +1,144 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiProductCard_data = require('./sui-product-card.data-CzAmpxxz.js');
+
+const suiProductCardCss = () => `@charset "UTF-8";.sc-sui-product-card-h{font-family:var(--sui-font-sans);display:block;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 300px}@media print{.sc-sui-product-card-h{content-visibility:visible}}.product.sc-sui-product-card{position:relative;box-sizing:border-box;width:100%;height:100%;min-width:0;background:var(--sui-bg-white-0, #fff);border-radius:16px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;color:inherit;display:flex;flex-direction:column;border:1px solid var(--sui-stroke-soft-200, #ebebeb);padding:0;transition:transform 150ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 150ms cubic-bezier(0.16, 1, 0.3, 1)}.product.sc-sui-product-card:active{box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(0, 0, 0, 0.06))}@media (hover: hover) and (pointer: fine){.product.sc-sui-product-card:active{transform:scale(0.98)}}.product--unavailable.sc-sui-product-card{opacity:0.55;cursor:not-allowed}.product--unavailable.sc-sui-product-card .product__img.sc-sui-product-card{filter:grayscale(0.55)}.product--edit.sc-sui-product-card{cursor:pointer}.product.sc-sui-product-card:has(.product__hit:focus-visible){outline:2px solid var(--sui-primary-base, #fa7319);outline-offset:2px}.product__hit.sc-sui-product-card{position:absolute;inset:0;z-index:1;margin:0;padding:0;border:none;border-radius:inherit;background:transparent;cursor:inherit;-webkit-tap-highlight-color:transparent}.product__hit.sc-sui-product-card:focus{outline:none}.product__img.sc-sui-product-card{width:100%;aspect-ratio:1/1;background-color:var(--sui-bg-soft-200, #e5e7eb);background-size:cover;background-position:center;position:relative;overflow:hidden}.product__img.sc-sui-product-card img.sc-sui-product-card{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.product__img--cargando.sc-sui-product-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--sui-static-white) 55%, transparent) 50%, transparent 100%);animation:sui-product-shimmer 1.3s ease-in-out infinite}.product__img--icon.sc-sui-product-card{background:linear-gradient(135deg, var(--sui-orange-400) 0%, var(--sui-primary-base) 100%);display:flex;align-items:center;justify-content:center}.product__img--named.sc-sui-product-card{background:var(--sui-bg-soft-200, #e5e7eb);display:flex;align-items:center;justify-content:center}.product__icon.sc-sui-product-card{color:color-mix(in srgb, var(--sui-static-white, #fff) 70%, transparent)}.product__band.sc-sui-product-card{width:100%;height:100%;background:var(--fallback-color, var(--sui-neutral-400));display:flex;align-items:center;justify-content:center;padding:14px 16px}.product__band-name.sc-sui-product-card{color:var(--sui-static-white, #fff);font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-0.01em;text-align:center;word-break:break-word;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.product__tag.sc-sui-product-card{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:color-mix(in srgb, var(--sui-static-white) 92%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:10px;font-weight:600;color:var(--sui-primary-base);text-transform:uppercase;letter-spacing:0.05em}.product__tag--unavail.sc-sui-product-card{color:var(--sui-slate-500);background:color-mix(in srgb, var(--sui-static-white) 95%, transparent)}.product__body.sc-sui-product-card{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}.product__name.sc-sui-product-card{font-size:13.5px;font-weight:600;letter-spacing:-0.01em;color:var(--sui-text-strong-950);line-height:1.2;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.product__desc.sc-sui-product-card{font-size:11px;color:var(--sui-text-sub-600);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;margin:0}.product__footer.sc-sui-product-card{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}.product__price.sc-sui-product-card{font-size:14px;font-weight:700;letter-spacing:-0.01em;color:var(--sui-text-strong-950)}.product__add.sc-sui-product-card{position:relative;z-index:2;width:36px;height:36px;border-radius:50%;background:var(--sui-text-strong-950);color:var(--sui-bg-white-0, #fff);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform 150ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms cubic-bezier(0.16, 1, 0.3, 1)}.product__add.sc-sui-product-card:active{transform:scale(0.94)}.product__add.sc-sui-product-card:disabled{opacity:0.4;cursor:not-allowed}.product__stepper.sc-sui-product-card{position:relative;z-index:2;display:inline-flex;align-items:center;height:36px;border-radius:18px;background:var(--sui-text-strong-950);flex-shrink:0;overflow:hidden}.product__step.sc-sui-product-card{width:34px;height:36px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--sui-bg-white-0, #fff);cursor:pointer;flex-shrink:0;transition:transform 150ms cubic-bezier(0.16, 1, 0.3, 1)}.product__step.sc-sui-product-card:active{transform:scale(0.88)}.product__step.sc-sui-product-card:disabled{opacity:0.4;cursor:not-allowed}.product__step-qty.sc-sui-product-card{min-width:18px;text-align:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--sui-bg-white-0, #fff);user-select:none}.product__prices.sc-sui-product-card{flex:1 1 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;line-height:1.15}.product__price--oferta.sc-sui-product-card{white-space:nowrap;color:var(--sui-red-700, #d02533)}[data-theme=dark].sc-sui-product-card-h .product__price--oferta.sc-sui-product-card,[data-theme=dark] .sc-sui-product-card-h .product__price--oferta.sc-sui-product-card{white-space:nowrap;color:var(--sui-red-400, #ff6875)}.product__pct.sc-sui-product-card{padding:2px 5px;border-radius:4px;background:var(--sui-red-700, #d02533);color:var(--sui-static-white, #fff);font-size:11px;font-weight:600;line-height:12px;letter-spacing:0.02em;white-space:nowrap}.product__price-was.sc-sui-product-card{flex-basis:100%;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap}[data-sui-size=medium].sc-sui-product-card-h .product__footer.sc-sui-product-card{flex-wrap:wrap;row-gap:8px}[data-sui-size=medium].sc-sui-product-card-h .product__price.sc-sui-product-card{white-space:nowrap}[data-sui-size=medium].sc-sui-product-card-h .product__add.sc-sui-product-card{width:40px;height:40px;margin-left:auto}[data-sui-size=medium].sc-sui-product-card-h .product__stepper.sc-sui-product-card{height:40px;border-radius:20px;margin-left:auto}[data-sui-size=medium].sc-sui-product-card-h .product__step.sc-sui-product-card{width:40px;height:40px}[data-sui-size=medium].sc-sui-product-card-h .product__step-qty.sc-sui-product-card{min-width:24px;font-size:16px}[data-sui-size=large].sc-sui-product-card-h .product__footer.sc-sui-product-card{flex-wrap:wrap;row-gap:8px}[data-sui-size=large].sc-sui-product-card-h .product__price.sc-sui-product-card{white-space:nowrap}[data-sui-size=large].sc-sui-product-card-h .product__add.sc-sui-product-card{width:44px;height:44px;margin-left:auto}[data-sui-size=large].sc-sui-product-card-h .product__stepper.sc-sui-product-card{height:44px;border-radius:22px;margin-left:auto}[data-sui-size=large].sc-sui-product-card-h .product__step.sc-sui-product-card{width:44px;height:44px}[data-sui-size=large].sc-sui-product-card-h .product__step-qty.sc-sui-product-card{min-width:24px;font-size:16px}@keyframes sui-product-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (prefers-reduced-motion: reduce){.product__img--cargando.sc-sui-product-card::after{animation:none}}`;
+
+const SuiProductCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openDetail = index.createEvent(this, "openDetail");
+        this.add = index.createEvent(this, "add");
+        this.increment = index.createEvent(this, "increment");
+        this.decrement = index.createEvent(this, "decrement");
+        this.edit = index.createEvent(this, "edit");
+        /** Descripción corta (1 línea, opcional). */
+        this.description = '';
+        /** Imagen: URL (string) o `{ url, fallbackUrl?, position? }`. null → fallback. */
+        this.image = null;
+        /** false → card atenuada + chapa «Agotado», sin botón de agregar. */
+        this.available = true;
+        /** Cantidad en el carrito. > 0 → stepper en vez del «+». */
+        this.quantity = 0;
+        /** Local cerrado → deshabilita agregar / incrementar. */
+        this.closed = false;
+        /** Prefijo de moneda. */
+        this.currencySymbol = 'S/';
+        /** Fallback sin imagen — `{ variant?, color? }`. Sin color: determinista por nombre. */
+        this.fallback = null;
+        /** Texto de la chapa cuando no está disponible. */
+        this.unavailableLabel = 'Agotado';
+        /** `'add'` (default): «+» y stepper · `'edit'`: lápiz, visible siempre, nunca stepper. */
+        this.action = 'add';
+        /** Precio de referencia. Si es MAYOR que `price`: rebajado + «-N%» + tachado. */
+        this.precioLista = null;
+        /** Tamaño de los botones del pie: `small` 36 · `medium` 40 · `large` 44. */
+        this.size = 'small';
+        /** La foto está viajando: shimmer. Se apaga con load o con el error final. */
+        this.cargandoImagen = true;
+        /** La miniatura no cargó: se pasó a la foto grande. */
+        this.cayoAlOriginal = false;
+        this.imagenLista = () => {
+            this.cargandoImagen = false;
+        };
+        /* Un error en la miniatura no es el final: si hay foto grande se intenta con
+           ella. Recién cuando también falla (o no había alternativa) se apaga. */
+        this.imagenFallo = () => {
+            var _a;
+            if (((_a = this.imageCfg) === null || _a === void 0 ? void 0 : _a.fallbackUrl) && !this.cayoAlOriginal) {
+                this.cayoAlOriginal = true;
+                return;
+            }
+            this.cargandoImagen = false;
+        };
+        this.stop = (fn) => (ev) => {
+            ev.stopPropagation();
+            fn();
+        };
+    }
+    /** Cada imagen nueva vuelve a «cargando» (card reciclada en una lista). */
+    onImageChange() {
+        this.cargandoImagen = true;
+        this.cayoAlOriginal = false;
+    }
+    /** iOS WKWebView: la presencia del touchstart (pasivo) engancha el `:active`. */
+    onTouchStart() {
+        /* no-op a propósito */
+    }
+    /** touchend.blur() suelta el `:active` del botón tocado al instante en iOS. */
+    onTouchEnd(ev) {
+        var _a, _b, _c;
+        (_c = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'button')) === null || _c === void 0 ? void 0 : _c.blur();
+    }
+    get imageCfg() {
+        var _a, _b;
+        const i = this.image;
+        if (!i)
+            return null;
+        const cfg = typeof i === 'string' ? { url: i } : i;
+        return cfg.url ? { url: cfg.url, position: (_a = cfg.position) !== null && _a !== void 0 ? _a : 50, fallbackUrl: (_b = cfg.fallbackUrl) !== null && _b !== void 0 ? _b : null } : null;
+    }
+    get descuento() {
+        var _a;
+        const lista = this.precioLista;
+        const precio = (_a = this.price) !== null && _a !== void 0 ? _a : 0;
+        if (lista == null || !(lista > precio))
+            return null;
+        return { pct: Math.round((1 - precio / lista) * 100), antes: lista.toFixed(2) };
+    }
+    /** Color del fallback `'name'`: `fallback.color` o determinista por nombre. */
+    get fallbackColor() {
+        var _a, _b;
+        const explicit = (_a = this.fallback) === null || _a === void 0 ? void 0 : _a.color;
+        if (explicit)
+            return explicit;
+        const s = (_b = this.name) !== null && _b !== void 0 ? _b : '';
+        let h = 0;
+        for (let i = 0; i < s.length; i++)
+            h = (h * 31 + s.charCodeAt(i)) | 0;
+        return suiProductCard_data.SUI_PRODUCT_FALLBACK_COLORS[Math.abs(h) % suiProductCard_data.SUI_PRODUCT_FALLBACK_COLORS.length];
+    }
+    renderAction(iconSize, stepIconSize) {
+        if (this.action === 'edit') {
+            return (index.h("button", { type: "button", class: "product__add product__add--edit", "aria-label": "Editar", onClick: this.stop(() => this.edit.emit()) }, index.h("sui-icon", { name: "pencil-line", size: iconSize })));
+        }
+        if (!this.available)
+            return null;
+        if (this.quantity > 0) {
+            return (index.h("div", { class: "product__stepper", onClick: (e) => e.stopPropagation() }, index.h("button", { type: "button", class: "product__step", "aria-label": this.quantity === 1 ? 'Quitar del carrito' : 'Quitar uno', onClick: this.stop(() => this.decrement.emit()) }, index.h("sui-icon", { name: this.quantity === 1 ? 'delete-bin-line' : 'subtract-line', size: stepIconSize })), index.h("span", { class: "product__step-qty" }, this.quantity), index.h("button", { type: "button", class: "product__step", "aria-label": "Agregar uno", disabled: this.closed, onClick: this.stop(() => this.increment.emit()) }, index.h("sui-icon", { name: "add-line", size: stepIconSize }))));
+        }
+        return (index.h("button", { type: "button", class: "product__add", "aria-label": "Agregar al carrito", disabled: this.closed, onClick: this.stop(() => this.add.emit()) }, index.h("sui-icon", { name: "add-line", size: iconSize })));
+    }
+    render() {
+        var _a, _b, _c;
+        const img = this.imageCfg;
+        const variant = (_b = (_a = this.fallback) === null || _a === void 0 ? void 0 : _a.variant) !== null && _b !== void 0 ? _b : 'name';
+        const named = !img && variant === 'name';
+        const iconFallback = !img && variant === 'icon';
+        const url = img ? (this.cayoAlOriginal && img.fallbackUrl ? img.fallbackUrl : img.url) : null;
+        const d = this.descuento;
+        const price = ((_c = this.price) !== null && _c !== void 0 ? _c : 0).toFixed(2);
+        const iconSize = this.size === 'small' ? 18 : 20;
+        const stepIconSize = this.size === 'small' ? 16 : 20;
+        return (index.h(index.Host, { key: '1fa1bc338b896136ba877dac03bcb6ad03c19f50', "data-sui-size": this.size }, index.h("div", { key: '21b571a1e6c79c68d7cd4097839eff19aacf43c6', class: {
+                product: true,
+                'product--unavailable': !this.available,
+                'product--edit': this.action === 'edit',
+            }, onClick: () => this.openDetail.emit() }, index.h("button", { key: '64d4d7553f2c6e7c408a172d5c2acd6defdb02e3', type: "button", class: "product__hit", "aria-label": this.name }), index.h("div", { key: '99a676d49b7a330b9e3e2ae97e1e9ef8b082ce49', class: {
+                product__img: true,
+                'product__img--icon': iconFallback,
+                'product__img--named': named,
+                'product__img--cargando': !!img && this.cargandoImagen,
+            }, style: named ? { '--fallback-color': this.fallbackColor } : undefined }, img ? (index.h("img", { src: url, alt: this.name, loading: "lazy", decoding: "async", style: { objectPosition: `center ${img.position}%` }, onLoad: this.imagenLista, onError: this.imagenFallo })) : named ? (index.h("div", { class: "product__band" }, index.h("span", { class: "product__band-name" }, this.name))) : (index.h("sui-icon", { class: "product__icon", name: "image-line", size: 32 })), !this.available && index.h("span", { key: 'fc41da4480987afda1c132924615e6a41e058805', class: "product__tag product__tag--unavail" }, this.unavailableLabel)), index.h("div", { key: '9fced4b6205d94de1aac4a09344dd0de05d81d5c', class: "product__body" }, index.h("h3", { key: 'e16e87a9f556318fff8feb5c630262eda634fb71', class: "product__name" }, this.name), this.description && index.h("p", { key: 'ff0ad3aa74b7a334ce26cbe20741ec233474513f', class: "product__desc" }, this.description), index.h("div", { key: 'd02f155b809b0bd58c5dfa63e3c3916384c8ec40', class: "product__footer" }, d ? (index.h("div", { class: "product__prices" }, index.h("span", { class: "product__price product__price--oferta" }, this.currencySymbol, " ", price), index.h("span", { class: "product__pct" }, "-", d.pct, "%"), index.h("s", { class: "product__price-was" }, this.currencySymbol, " ", d.antes))) : (index.h("span", { class: "product__price" }, this.currencySymbol, " ", price)), this.renderAction(iconSize, stepIconSize))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "image": [{
+                "onImageChange": 0
+            }]
+    }; }
+};
+SuiProductCard.style = suiProductCardCss();
+
+exports.sui_product_card = SuiProductCard;

package/dist/cjs/sui-product-card.data-CzAmpxxz.js

@@ -0,0 +1,20 @@
+'use strict';
+
+/* Vive fuera del .tsx: Stencil solo admite la clase como export de valor en un módulo con @Component. */
+/**
+ * Paleta sugerida para el fallback `'name'`: tokens semánticos del DS
+ * (`--sui-state-*-base`), los mismos que el badge `filled` usa con texto
+ * blanco. Se exporta para que el consumer implemente su propia estrategia
+ * (ej. random por visita) y la pase en `fallback.color`. El componente no hace
+ * random: es presentacional y puro.
+ */
+const SUI_PRODUCT_FALLBACK_COLORS = [
+    'var(--sui-state-information-base)', // azul
+    'var(--sui-state-warning-base)', // naranja
+    'var(--sui-state-error-base)', // rojo
+    'var(--sui-state-success-base)', // verde
+    'var(--sui-state-feature-base)', // morado
+    'var(--sui-state-highlighted-base)', // rosa
+];
+
+exports.SUI_PRODUCT_FALLBACK_COLORS = SUI_PRODUCT_FALLBACK_COLORS;

package/dist/cjs/sui-progress-bar-label.cjs.entry.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiToque = require('./sui-toque-TviBCJ0g.js');
+var suiHref = require('./sui-href-BNQgPKnK.js');
+
+const suiProgressBarLabelCss = () => `@charset "UTF-8";.sc-sui-progress-bar-label-h{display:flex;flex-direction:column;gap:6px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans)}[data-type=on-right].sc-sui-progress-bar-label-h{flex-direction:row;align-items:center;gap:8px}[data-type=on-right].sc-sui-progress-bar-label-h .sui-progress-bar-label__bar.sc-sui-progress-bar-label{flex:1 1 0;min-width:0}.sui-progress-bar-label__head.sc-sui-progress-bar-label{display:flex;align-items:flex-start;gap:6px;width:100%}.sui-progress-bar-label__title.sc-sui-progress-bar-label{flex:1 1 0;min-width:0;color:var(--sui-text-strong-950, #171717);font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.084px;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-progress-bar-label__percent.sc-sui-progress-bar-label{flex:none;white-space:nowrap;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-progress-bar-label__bar.sc-sui-progress-bar-label{display:block;width:100%}.sui-progress-bar-label__bottom.sc-sui-progress-bar-label{display:flex;align-items:flex-start;gap:4px;width:100%}.sui-progress-bar-label__link.sc-sui-progress-bar-label{flex:none;white-space:nowrap;color:var(--sui-state-information-base, #335cff);text-decoration:underline;text-underline-position:from-font;font-size:12px;font-weight:500;line-height:16px;cursor:pointer;font-feature-settings:"cv09" 1, "ss11" 1, "calt" 0, "liga" 0;transition:opacity var(--sui-motion-duration-fast, 200ms) var(--sui-motion-ease-out, cubic-bezier(0, 0, 0.2, 1))}.sui-progress-bar-label__link.sc-sui-progress-bar-label:hover{opacity:0.85}.sui-progress-bar-label__link.sc-sui-progress-bar-label:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:2px;border-radius:2px}.sui-progress-bar-label__desc.sc-sui-progress-bar-label{flex:1 1 0;min-width:0;color:var(--sui-text-sub-600, #5c5c5c);font-size:12px;font-weight:400;line-height:16px;font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}@media (prefers-reduced-motion: reduce){.sui-progress-bar-label__link.sc-sui-progress-bar-label{transition:none}}`;
+
+/** Contador para el id del título (aria-labelledby de la barra). */
+let siguienteId = 0;
+const SuiProgressBarLabel = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.linkClick = index.createEvent(this, "linkClick");
+        /** Valor de progreso 0–100 (delegado a sui-progress-bar). Default 0. */
+        this.value = 0;
+        /** Layout. `on-top` (default) apila título/%/barra/bottom; `on-right` inline. */
+        this.type = 'on-top';
+        /** Título (sólo on-top). Es el `title` del Angular (ver NOTA). */
+        this.heading = '';
+        /** % textual — true = `${value}%` automático · string = texto propio · false = oculto. */
+        this.percentage = true;
+        /** Fila inferior link+descripción (sólo on-top). Default `false`. */
+        this.showBottom = false;
+        /** Texto descriptivo de la fila inferior. Default `''`. */
+        this.description = '';
+        /** Link de la fila inferior: string (solo label) o SuiLinkConfig (por property). null = sin link. */
+        this.link = null;
+        /** Color del fill (delegado a sui-progress-bar). Default `blue`. */
+        this.color = 'blue';
+        /** Altura de la barra (delegado a sui-progress-bar). Default `medium`. */
+        this.size = 'medium';
+        /** Nombre accesible de la barra (gana al título). Default `null`. */
+        this.ariaLabel = null;
+        /** a11y (04-10-2026): el título visible nombra la barra (aria-labelledby). */
+        this.titleId = `sui-progress-bar-title-${++siguienteId}`;
+        this.onLinkClick = (event) => {
+            var _a;
+            /* Sin href real el <a href="#"> de fallback NO navega; con href interno navega
+               por `suiNavigate` (sui-href) si la app lo escucha, y si no, la nativa. */
+            const href = (_a = this.linkCfg) === null || _a === void 0 ? void 0 : _a.href;
+            if (!href)
+                event.preventDefault();
+            this.linkClick.emit();
+            if (href)
+                suiHref.suiHrefClick(event, href);
+        };
+    }
+    componentWillLoad() {
+        const titleAttr = this.el.getAttribute('title');
+        if (titleAttr !== null) {
+            if (!this.heading)
+                this.heading = titleAttr;
+            this.el.removeAttribute('title');
+        }
+    }
+    alTocar() {
+        /* presencia del listener = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    alSoltar(event) {
+        suiToque.soltarToque(event, '.sui-progress-bar-label__link');
+    }
+    /** Config resuelta del link (string → { label }, rel automático). */
+    get linkCfg() {
+        var _a;
+        const l = this.link;
+        if (!l)
+            return null;
+        const cfg = typeof l === 'string' ? { label: l } : l;
+        return cfg.label
+            ? Object.assign(Object.assign({}, cfg), { rel: (_a = cfg.rel) !== null && _a !== void 0 ? _a : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) }) : null;
+    }
+    /** Valor clampeado a [0, 100], con NaN→0. Misma lógica que el computed Angular. */
+    get clampedValue() {
+        const v = this.value;
+        if (Number.isNaN(v))
+            return 0;
+        return Math.max(0, Math.min(100, v));
+    }
+    /** Mostrar el bloque de % (percentage !== false; como atributo llega «false»). */
+    get showPercent() {
+        return this.percentage !== false && this.percentage !== 'false';
+    }
+    /** Texto del % mostrado: override explícito o `${value}%`. */
+    get percentLabel() {
+        const p = this.percentage;
+        if (typeof p === 'string' && p !== '' && p !== 'true')
+            return p;
+        return `${Math.round(this.clampedValue)}%`;
+    }
+    renderBar(labelledby) {
+        var _a;
+        return (index.h("sui-progress-bar", { class: "sui-progress-bar-label__bar", value: this.value, color: this.color, size: this.size, ariaLabel: (_a = this.ariaLabel) !== null && _a !== void 0 ? _a : undefined, ariaLabelledby: labelledby !== null && labelledby !== void 0 ? labelledby : undefined }));
+    }
+    render() {
+        var _a;
+        const percent = this.showPercent && (index.h("span", { class: "sui-progress-bar-label__percent" }, this.percentLabel));
+        if (this.type === 'on-right') {
+            return (index.h(index.Host, { "data-type": this.type }, this.renderBar(null), percent));
+        }
+        const link = this.linkCfg;
+        return (index.h(index.Host, { "data-type": this.type }, (!!this.heading || this.showPercent) && (index.h("div", { class: "sui-progress-bar-label__head" }, !!this.heading && (index.h("span", { class: "sui-progress-bar-label__title", id: this.titleId }, this.heading)), percent)), this.renderBar(this.heading ? this.titleId : null), this.showBottom && (index.h("div", { class: "sui-progress-bar-label__bottom" }, link && (index.h("a", { class: "sui-progress-bar-label__link", href: (_a = link.href) !== null && _a !== void 0 ? _a : '#', target: link.target, rel: link.rel, onClick: this.onLinkClick }, link.label)), index.h("span", { class: "sui-progress-bar-label__desc" }, this.description)))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiProgressBarLabel.style = suiProgressBarLabelCss();
+
+exports.sui_progress_bar_label = SuiProgressBarLabel;