@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/esm/sui-radio-card.entry.js

@@ -0,0 +1,180 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiRadioCardCss = () => `@charset "UTF-8";.sc-sui-radio-card-h{display:inline-flex;box-sizing:border-box;align-items:flex-start;gap:14px;padding:16px;width:100%;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-12, 12px);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));cursor:pointer;outline:none;user-select:none;font-family:var(--sui-font-sans, var(--font-sans, sans-serif));touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), transform var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}@media (hover: hover) and (pointer: fine){.sc-sui-radio-card-h:hover:not([data-sui-disabled]):not([data-sui-checked]){background:var(--sui-bg-weak-50, #f7f7f7);border-color:transparent;box-shadow:none}}[data-sui-checked].sc-sui-radio-card-h{border-color:var(--sui-primary-base, #fa7319);box-shadow:none;background:var(--sui-bg-white-0, #fff)}@media (hover: hover) and (pointer: fine){[data-sui-checked].sc-sui-radio-card-h:hover:not([data-sui-disabled]){background:var(--sui-bg-weak-50, #f7f7f7)}}.sc-sui-radio-card-h:focus-visible:not([data-sui-disabled]){border-color:var(--sui-primary-base, #fa7319);box-shadow:0 0 0 3px color-mix(in oklab, var(--sui-primary-base, #fa7319) 16%, transparent)}[data-sui-disabled].sc-sui-radio-card-h{cursor:not-allowed;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:none}[data-sui-disabled].sc-sui-radio-card-h .sui-radio-card__label.sc-sui-radio-card{color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-disabled].sc-sui-radio-card-h .sui-radio-card__sublabel.sc-sui-radio-card,[data-sui-disabled].sc-sui-radio-card-h .sui-radio-card__description.sc-sui-radio-card{color:var(--sui-text-soft-400, #a3a3a3)}[data-sui-disabled].sc-sui-radio-card-h .sui-radio-card__badge.sc-sui-radio-card{background:transparent;border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-disabled-300, #d1d1d1)}[data-sui-disabled].sc-sui-radio-card-h .sui-radio-card__radio-bg.sc-sui-radio-card,[data-sui-disabled][data-sui-checked].sc-sui-radio-card-h .sui-radio-card__radio-bg.sc-sui-radio-card{background:var(--sui-bg-soft-200, #ebebeb)}[data-sui-disabled].sc-sui-radio-card-h:not([data-sui-checked]) .sui-radio-card__radio-box.sc-sui-radio-card{display:none}@media (hover: hover) and (pointer: fine){.sc-sui-radio-card-h:active:not([data-sui-disabled]){transform:scale(0.99)}}.sui-radio-card__leading.sc-sui-radio-card{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}.sui-radio-card__leading--icon.sc-sui-radio-card{box-sizing:border-box;width:40px;height:40px;padding:10px;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);box-shadow:var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));color:var(--sui-text-sub-600, #5c5c5c)}[data-sui-leading-fill].sc-sui-radio-card-h .sui-radio-card__leading--icon.sc-sui-radio-card{padding:0;border:none;background:none;box-shadow:none;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center}[data-sui-leading-fill].sc-sui-radio-card-h .sui-radio-card__leading--icon.sc-sui-radio-card sui-emoji.sc-sui-radio-card{display:block;width:100%;height:100%}[data-sui-type=avatar].sc-sui-radio-card-h .sui-radio-card__leading--avatar.sc-sui-radio-card{width:40px;height:40px}.sui-radio-card__text.sc-sui-radio-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;flex:1 1 auto;min-width:0;align-self:stretch}.sui-radio-card__text.sc-sui-radio-card:not(:has(.sui-radio-card__description)){justify-content:center}.sui-radio-card__title.sc-sui-radio-card{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.sui-radio-card__label.sc-sui-radio-card{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950, #171717);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-radio-card__sublabel.sc-sui-radio-card{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-radio-card__description.sc-sui-radio-card{margin:0;font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-radio-card__radio.sc-sui-radio-card{position:relative;flex-shrink:0;width:20px;height:20px;align-self:flex-start}.sui-radio-card__radio-bg.sc-sui-radio-card{position:absolute;inset:10%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-soft-200, #ebebeb);transition:background-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}.sui-radio-card__radio-box.sc-sui-radio-card{position:absolute;inset:17.5%;border-radius:var(--sui-radius-full, 999px);background:var(--sui-bg-white-0, #fff);box-shadow:0 2px 4px -2px rgba(27, 28, 29, 0.12);transition:inset var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}@media (hover: hover) and (pointer: fine){.sc-sui-radio-card-h:hover:not([data-sui-disabled]):not([data-sui-checked]) .sui-radio-card__radio-bg.sc-sui-radio-card{background:var(--sui-bg-sub-300, #d1d1d1)}}[data-sui-checked].sc-sui-radio-card-h .sui-radio-card__radio-bg.sc-sui-radio-card{background:var(--sui-primary-base, #fa7319)}[data-sui-checked].sc-sui-radio-card-h .sui-radio-card__radio-box.sc-sui-radio-card{inset:30%;box-shadow:none;background:var(--sui-static-white, #ffffff)}.sui-radio-card__leading--provider.sc-sui-radio-card{width:32px;height:24px;border-radius:4px;overflow:hidden;flex-shrink:0}.sui-radio-card__leading--provider.sc-sui-radio-card img.sc-sui-radio-card{width:100%;height:100%;object-fit:cover;display:block}.sui-radio-card__leading--brand.sc-sui-radio-card{width:40px;height:40px;flex-shrink:0}.sui-radio-card__leading--brand.sc-sui-radio-card img.sc-sui-radio-card{width:100%;height:100%;object-fit:cover;border-radius:999px;display:block}.sui-radio-card__leading--company.sc-sui-radio-card{width:40px;height:40px;border-radius:var(--sui-radius-full, 999px);overflow:hidden;flex-shrink:0}.sui-radio-card__leading--company.sc-sui-radio-card img.sc-sui-radio-card{width:100%;height:100%;object-fit:cover;display:block}`;
+
+const SuiRadioCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        this.selected = createEvent(this, "selected");
+        this.suiRadioSelect = createEvent(this, "suiRadioSelect");
+        /** Tipo del leading slot — gobierna qué se renderiza a la izquierda. Default `basic`. */
+        this.type = 'basic';
+        /** Tamaño del radio interno: medium 20 (default) · large 24 · xlarge 28. */
+        this.size = 'medium';
+        /** Título principal del card (label de la fila Title). */
+        this.label = '';
+        /** Sublabel opcional (12/16 regular sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción secundaria opcional (12/16 regular sub-600 debajo del Title). */
+        this.description = null;
+        /**
+         * RemixIcon name (sin prefijo "ri-") para type='left-icon'. Si está, se usa.
+         * Precedencia: icon > emoji > iconSrc.
+         */
+        this.icon = null;
+        /**
+         * Emoji del catálogo SUI_EMOJI_MAP — alternativa a `icon` para type='left-icon'.
+         * Si ambos están, `icon` tiene precedencia.
+         */
+        this.emoji = null;
+        /**
+         * URL directa al emoji para type='left-icon'. Útil cuando el consumer ya tiene
+         * la URL y no quiere registrar el emoji en SUI_EMOJI_MAP.
+         * Precedencia: icon > emoji > iconSrc.
+         */
+        this.iconSrc = null;
+        /**
+         * URL de imagen para type='avatar' — se renderiza con `<sui-avatar size="lg">`
+         * (40×40 redonda). Si la imagen falla, fallback automático a iniciales del
+         * label. Para los otros types se ignora.
+         */
+        this.imageUrl = null;
+        /**
+         * Company del `<sui-brand-logo>` para type='brand' (Figma 515:4383 — logo 40px).
+         * Para logos fuera del catálogo, usar `imageUrl` (fallback circular).
+         */
+        this.brand = null;
+        /**
+         * Badge junto al label: string (`badge="NEW"`) o `{ label, color?, variant?,
+         * size? }` por property. `null` = sin badge. Default visual blue light small.
+         */
+        this.badge = null;
+        /** Deshabilitado: bloquea selección, tokens grises, no focusable. Default `false`. */
+        this.disabled = false;
+        /**
+         * Estado marcado. Mutable + reflect. En modo standalone equivale al
+         * `[(checked)]` model del Angular (el consumer setea `el.checked` o lo lee tras
+         * un toggle). En modo grupo lo gobierna el `<sui-radio-group>` padre vía
+         * `setChecked()`.
+         */
+        this.checked = false;
+        /** True cuando el card vive dentro de un `<sui-radio-group>`. Autodetectado. */
+        this.inGroup = false;
+        /** En grupo: único tab stop del roving (lo fija el group vía `setChecked`). */
+        this.tabStop = false;
+    }
+    componentWillLoad() {
+        this.inGroup = !!this.el.closest('sui-radio-group');
+    }
+    /**
+     * Fija el estado checked desde el `<sui-radio-group>` padre (selección
+     * exclusiva). API interna del DS — el group la llama tras cada cambio de su
+     * `value`. No dispara eventos (el group ya emite el suyo).
+     */
+    async setChecked(checked, tabStop = false) {
+        this.checked = checked;
+        this.tabStop = tabStop;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     * Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    onClick(event) {
+        this.activate(event);
+    }
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+            this.activate(event);
+        }
+    }
+    /**
+     * Selecciona el card. Disabled bloquea todo. En modo grupo emite
+     * `suiRadioSelect` con su `value` y deja que el group resuelva la selección
+     * exclusiva. En standalone fija `checked=true` y emite `suiChange`. En ambos
+     * casos emite `selected` con el `value` (≈ output del Angular).
+     */
+    activate(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        if (this.inGroup) {
+            this.suiRadioSelect.emit(this.value);
+        }
+        else {
+            this.checked = true;
+            this.suiChange.emit(this.checked);
+        }
+        this.selected.emit(this.value);
+    }
+    /**
+     * Iniciales para el fallback de `<sui-avatar>` cuando la imagen no carga.
+     * Toma la 1ra letra de cada palabra (max 2). Si label vacío, vacío.
+     */
+    get initialsFromLabel() {
+        const l = this.label.trim();
+        if (!l)
+            return '';
+        return l
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((w) => { var _a, _b; return (_b = (_a = w[0]) === null || _a === void 0 ? void 0 : _a.toUpperCase()) !== null && _b !== void 0 ? _b : ''; })
+            .join('');
+    }
+    /** Renderiza el contenido del leading slot según el type. */
+    renderLeading() {
+        var _a;
+        if (this.type === 'left-icon') {
+            const emojiSize = this.iconSrc ? 'full' : 'md';
+            return (h("div", { class: "sui-radio-card__leading sui-radio-card__leading--icon", "aria-hidden": "true" }, this.icon ? (h("sui-icon", { name: this.icon, size: 20 })) : this.emoji ? (h("sui-emoji", { name: this.emoji, size: emojiSize })) : this.iconSrc ? (h("sui-emoji", { src: this.iconSrc, size: "full" })) : null));
+        }
+        if (this.type === 'avatar') {
+            return (h("sui-avatar", { class: "sui-radio-card__leading sui-radio-card__leading--avatar", size: "lg", src: (_a = this.imageUrl) !== null && _a !== void 0 ? _a : undefined, initials: this.initialsFromLabel }));
+        }
+        if (this.type === 'card-provider') {
+            /* Figma 515:4374 — tile 32×24 rounded-4 con el logo del provider. */
+            return (h("div", { class: "sui-radio-card__leading sui-radio-card__leading--provider", "aria-hidden": "true" }, this.imageUrl && h("img", { src: this.imageUrl, alt: "" })));
+        }
+        if (this.type === 'brand') {
+            /* Figma 515:4383 — brand logo 40px (catálogo sui-brand-logo o imageUrl). */
+            if (this.brand) {
+                return (h("sui-brand-logo", { class: "sui-radio-card__leading sui-radio-card__leading--brand", company: this.brand, size: "xl" }));
+            }
+            return this.imageUrl ? (h("div", { class: "sui-radio-card__leading sui-radio-card__leading--brand", "aria-hidden": "true" }, h("img", { src: this.imageUrl, alt: "" }))) : null;
+        }
+        if (this.type === 'company') {
+            /* Figma 515:4392 — logo circular 40×40 radius-full. */
+            return (h("div", { class: "sui-radio-card__leading sui-radio-card__leading--company", "aria-hidden": "true" }, this.imageUrl ? (h("img", { src: this.imageUrl, alt: "" })) : (h("sui-avatar", { size: "lg", initials: this.initialsFromLabel }))));
+        }
+        return null;
+    }
+    /** Config resuelta del badge (string → { label }). */
+    get badgeCfg() {
+        const b = this.badge;
+        return b ? (typeof b === 'string' ? { label: b } : b) : null;
+    }
+    /** Lado en px del radio: medium 20 · large 24 · xlarge 28 (los insets son %). */
+    get radioPx() {
+        return this.size === 'xlarge' ? 28 : this.size === 'large' ? 24 : 20;
+    }
+    render() {
+        var _a, _b, _c;
+        const badge = this.badgeCfg;
+        return (h(Host, { key: '4633d83304994961303c920080a0e35b2c3c3aa8', role: "radio", tabindex: this.disabled || (this.inGroup && !this.tabStop) ? '-1' : '0', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-label": this.label || null, "data-sui-type": this.type, "data-sui-checked": this.checked ? '' : null, "data-sui-disabled": this.disabled ? '' : null, "data-sui-leading-fill": this.iconSrc ? '' : null }, this.renderLeading(), h("div", { key: '088d4f7094d748462432c05839a4bbcb5721f6bc', class: "sui-radio-card__text" }, h("div", { key: 'd861ec18a615d38902743d0c3203ef2dc59b4934', class: "sui-radio-card__title" }, this.label && h("span", { key: '74844d368e25282e016b4a481f7cdf3747841ec3', class: "sui-radio-card__label" }, this.label), this.sublabel && h("span", { key: '439f6fb63ea0a5571dd9b7a2d5c028ac6b72ee55', class: "sui-radio-card__sublabel" }, this.sublabel), badge && (h("sui-badge", { key: '3c471a2dba4ee91613eeacd636c7e7ae767208df', class: "sui-radio-card__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'blue', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'light', size: (_c = badge.size) !== null && _c !== void 0 ? _c : 'small' }, badge.label))), this.description && h("p", { key: '52ff5da25324234d505b1478493b0cbc6f0eb6e0', class: "sui-radio-card__description" }, this.description)), h("span", { key: '683e22d88f2dbd205e7552de53619923bf7e55fc', class: "sui-radio-card__radio", "aria-hidden": "true", style: { width: `${this.radioPx}px`, height: `${this.radioPx}px` } }, h("span", { key: '76f730f92a3a6d4bc8ae6de97037feac9211700d', class: "sui-radio-card__radio-bg" }), h("span", { key: '9a5727685530fa6e7afabd0f36a789f8440ac080', class: "sui-radio-card__radio-box" }))));
+    }
+    get el() { return getElement(this); }
+};
+SuiRadioCard.style = suiRadioCardCss();
+
+export { SuiRadioCard as sui_radio_card };

package/dist/esm/sui-radio-group.entry.js

@@ -0,0 +1,105 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiRadioGroupCss = () => `@charset "UTF-8";.sc-sui-radio-group-h{display:inline-flex;gap:16px;align-items:center}`;
+
+const SuiRadioGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        /**
+         * Valor seleccionado del grupo. Mutable + reflect. El radio cuyo `value`
+         * matchee queda checked; el resto, unchecked. Equivale al `value` signal +
+         * `writeValue` del group Angular.
+         */
+        this.value = null;
+        /**
+         * Deshabilita el grupo entero: `aria-disabled`, sin tab stop, las flechas y los
+         * clicks no cambian el valor. Equivale al `setDisabledState` (forms) del Angular.
+         */
+        this.disabled = false;
+    }
+    componentDidLoad() {
+        // Sync inicial: marca el radio que matchee el value inicial (≈ writeValue).
+        this.syncChildren();
+    }
+    /** Re-sincroniza el checked de los hijos cuando el consumer cambia `value`. */
+    onValueChange() {
+        this.syncChildren();
+    }
+    /**
+     * Captura el evento burbujeante de un `<sui-radio>` hijo. Fija el `value` del
+     * group, sincroniza la selección exclusiva y emite `suiChange`.
+     */
+    onRadioSelect(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const next = event.detail;
+        this.value = next;
+        this.suiChange.emit(next);
+        // El @Watch('value') dispara syncChildren tras setear `this.value`.
+    }
+    /**
+     * Marca el hijo cuyo `value` matchee el del group; desmarca el resto.
+     * Cubre tanto `<sui-radio>` como `<sui-radio-card>` (ambos exponen
+     * `value` + el `@Method setChecked()`).
+     */
+    syncChildren() {
+        var _a, _b, _c;
+        const radios = this.children();
+        /* Roving (a11y 04-10-2026): un solo tab stop = el marcado habilitado o el
+           primero habilitado. */
+        const enabled = this.enabledChildren();
+        const stop = this.disabled ? null : ((_b = (_a = enabled.find((r) => r.value === this.value)) !== null && _a !== void 0 ? _a : enabled[0]) !== null && _b !== void 0 ? _b : null);
+        for (const radio of radios) {
+            // setChecked es el @Method del hijo; refleja el checked exclusivo.
+            void ((_c = radio.setChecked) === null || _c === void 0 ? void 0 : _c.call(radio, radio.value === this.value, radio === stop));
+        }
+    }
+    children() {
+        // El <sui-radio> interno de un sui-radio-label es solo visual: lo gobierna su label.
+        return Array.from(this.el.querySelectorAll('sui-radio, sui-radio-card, sui-radio-label')).filter((r) => r.tagName !== 'SUI-RADIO' || !r.closest('sui-radio-label'));
+    }
+    /** Hijos que participan del roving, en orden de documento. */
+    enabledChildren() {
+        return this.children().filter((r) => !r.disabled && r.focusable !== false);
+    }
+    /** ↑ ← / ↓ → mueven el foco y seleccionan (con vuelta), como el SuiRadioGroup Angular. */
+    onKeydown(event) {
+        const dir = event.key === 'ArrowDown' || event.key === 'ArrowRight'
+            ? 1
+            : event.key === 'ArrowUp' || event.key === 'ArrowLeft'
+                ? -1
+                : 0;
+        if (!dir || this.disabled)
+            return;
+        const target = event.target;
+        const enabled = this.enabledChildren();
+        const idx = enabled.findIndex((r) => !!target && (r === target || r.contains(target)));
+        if (idx === -1)
+            return;
+        event.preventDefault();
+        const next = enabled[(idx + dir + enabled.length) % enabled.length];
+        /* El click del hijo hace lo mismo que el usuario: emite suiRadioSelect (y
+           `selected` en la card), el group fija el value y emite suiChange. */
+        next.click();
+        /* En sui-radio-label el role=radio es el control interno, no el host. */
+        const focusTarget = next.tagName === 'SUI-RADIO-LABEL' ? next.querySelector('.sui-radio-label__control') : null;
+        (focusTarget !== null && focusTarget !== void 0 ? focusTarget : next).focus();
+    }
+    render() {
+        return (h(Host, { key: '4391cfd8a309c8d76a216afca913ffc2b4f0a249', role: "radiogroup", "aria-disabled": this.disabled ? 'true' : null }, h("slot", { key: '0d785def013ae158621afc3fa276731c139e2924' })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }],
+        "disabled": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SuiRadioGroup.style = suiRadioGroupCss();
+
+export { SuiRadioGroup as sui_radio_group };

package/dist/esm/sui-radio-label.entry.js

@@ -0,0 +1,138 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiRadioLabelCss = () => `@charset "UTF-8";.sc-sui-radio-label-h{--_sui-rl-radio:20px;--_sui-rl-gap:8px;display:inline-flex;flex-direction:column;align-items:stretch;gap:10px;cursor:pointer;font-family:var(--sui-font-sans, "Inter", system-ui, sans-serif);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;-webkit-tap-highlight-color:transparent}[data-sui-flip].sc-sui-radio-label-h .sui-radio-label__radio.sc-sui-radio-label{order:2}[data-sui-flip].sc-sui-radio-label-h .sui-radio-label__content.sc-sui-radio-label{order:1}[data-sui-flip].sc-sui-radio-label-h .sui-radio-label__link.sc-sui-radio-label{margin-inline-start:0}.sui-radio-label__control.sc-sui-radio-label{display:flex;align-items:flex-start;gap:var(--_sui-rl-gap)}.sui-radio-label__link.sc-sui-radio-label{align-self:flex-start;margin-inline-start:calc(var(--_sui-rl-radio) + var(--_sui-rl-gap));max-width:calc(100% - var(--_sui-rl-radio) - var(--_sui-rl-gap))}[data-sui-disabled].sc-sui-radio-label-h{cursor:not-allowed}[data-sui-disabled].sc-sui-radio-label-h .sui-radio-label__content.sc-sui-radio-label,[data-sui-disabled].sc-sui-radio-label-h .sui-radio-label__link.sc-sui-radio-label{opacity:0.5}.sui-radio-label__radio.sc-sui-radio-label{flex-shrink:0}.sui-radio-label__content.sc-sui-radio-label{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start}.sui-radio-label__text.sc-sui-radio-label{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%}.sui-radio-label__title.sc-sui-radio-label{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-radio-label__label.sc-sui-radio-label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.084px;color:var(--sui-text-strong-950)}[data-sui-with-description].sc-sui-radio-label-h .sui-radio-label__label.sc-sui-radio-label{font-weight:500}.sui-radio-label__sublabel.sc-sui-radio-label{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-radio-label__badge.sc-sui-radio-label{flex-shrink:0}.sui-radio-label__description.sc-sui-radio-label{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}.sc-sui-radio-label-h sui-radio.sc-sui-radio-label{pointer-events:none}[data-sui-size=large].sc-sui-radio-label-h{--_sui-rl-radio:24px;--_sui-rl-gap:10px}[data-sui-size=xlarge].sc-sui-radio-label-h{--_sui-rl-radio:28px;--_sui-rl-gap:12px}[data-sui-size=large].sc-sui-radio-label-h .sui-radio-label__label.sc-sui-radio-label,[data-sui-size=xlarge].sc-sui-radio-label-h .sui-radio-label__label.sc-sui-radio-label{font-size:var(--sui-type-paragraph-md-size);line-height:var(--sui-type-paragraph-md-line);letter-spacing:var(--sui-type-paragraph-md-spacing)}[data-sui-size=xlarge].sc-sui-radio-label-h .sui-radio-label__content.sc-sui-radio-label{padding-top:2px}[data-sui-size="2xlarge"].sc-sui-radio-label-h{--_sui-rl-radio:28px;--_sui-rl-gap:12px}[data-sui-size="2xlarge"].sc-sui-radio-label-h .sui-radio-label__control.sc-sui-radio-label{min-height:44px;align-items:center}[data-sui-size="2xlarge"].sc-sui-radio-label-h .sui-radio-label__label.sc-sui-radio-label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -0.011em)}[data-sui-size="2xlarge"][data-sui-with-description].sc-sui-radio-label-h .sui-radio-label__control.sc-sui-radio-label{align-items:flex-start}[data-sui-size="2xlarge"][data-sui-with-description].sc-sui-radio-label-h .sui-radio-label__content.sc-sui-radio-label{padding-top:2px}`;
+
+let nextId = 0;
+const SuiRadioLabel = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        this.selected = createEvent(this, "selected");
+        this.linkClick = createEvent(this, "linkClick");
+        this.suiRadioSelect = createEvent(this, "suiRadioSelect");
+        this.labelId = `sui-radio-label-${++nextId}`;
+        this.descriptionId = `${this.labelId}-desc`;
+        /** Texto principal del label. */
+        this.label = '';
+        /** Sublabel opcional (12/16 sub-600 al lado del label). */
+        this.sublabel = null;
+        /** Descripción opcional debajo del title (variant «with description»). */
+        this.description = null;
+        /** Badge junto al label — string ('NEW') u objeto `{ label, color?, variant?, size? }`. */
+        this.badge = null;
+        /**
+         * Link Button bajo la descripción (solo con `description`) — string (solo
+         * label, emite `linkClick`) u objeto `{ label, href?, target?, rel? }`.
+         */
+        this.link = null;
+        /**
+         * Tamaño. `medium` (Figma): control 20, label 14/20. `large`: control 24,
+         * label 16/24, badge medium. `xlarge`: control 28. `2xlarge`: fila de 44 como
+         * mínimo (piso táctil), control 28. Sublabel y descripción quedan en 12/16.
+         */
+        this.size = 'medium';
+        /** Si true, invierte el orden: [contenido] [radio]. */
+        this.flip = false;
+        /** Deshabilita el radio y la fila. */
+        this.disabled = false;
+        /** Estado marcado. Standalone: lo fija el click; en grupo lo gobierna el group. */
+        this.checked = false;
+        /** True cuando vive dentro de un `<sui-radio-group>`. Autodetectado. */
+        this.inGroup = false;
+        /**
+         * Roving del grupo: `true` = este es el único tab stop, `false` = fuera del
+         * Tab (se llega con flechas). `null` = el group no lo fijó: queda enfocable.
+         */
+        this.tabStop = null;
+        this.onKeydown = (event) => {
+            if (event.key !== ' ' && event.key !== 'Enter')
+                return;
+            event.preventDefault();
+            this.select();
+        };
+        this.onLinkClick = (event) => {
+            var _a, _b;
+            event.stopPropagation();
+            const mouse = event.detail;
+            (_a = mouse === null || mouse === void 0 ? void 0 : mouse.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(mouse);
+            if (this.disabled) {
+                (_b = mouse === null || mouse === void 0 ? void 0 : mouse.preventDefault) === null || _b === void 0 ? void 0 : _b.call(mouse);
+                return;
+            }
+            this.linkClick.emit(mouse);
+        };
+    }
+    componentWillLoad() {
+        this.inGroup = !!this.el.closest('sui-radio-group');
+    }
+    /**
+     * API interna del DS: el `<sui-radio-group>` fija el checked exclusivo y,
+     * si lo pasa, si esta opción es el tab stop del grupo. No emite eventos.
+     */
+    async setChecked(checked, tabStop) {
+        this.checked = checked;
+        if (tabStop !== undefined)
+            this.tabStop = tabStop;
+    }
+    /** iOS WKWebView: la presencia del touchstart (pasivo) engancha el `:active`. */
+    onTouchStart() {
+        /* no-op a propósito */
+    }
+    /** touchend.blur() suelta el foco del control al instante en iOS. */
+    onTouchEnd() {
+        var _a;
+        (_a = this.el.querySelector('.sui-radio-label__control')) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+    onLabelClick(event) {
+        if (event.target.closest('sui-link-button'))
+            return;
+        this.select();
+    }
+    select() {
+        if (this.disabled || this.checked)
+            return;
+        if (this.inGroup) {
+            this.suiRadioSelect.emit(this.value);
+        }
+        else {
+            this.checked = true;
+            this.suiChange.emit(true);
+        }
+        this.selected.emit(this.value);
+    }
+    /** Size del sui-radio interno: `2xlarge` es un alto de fila, el control queda en 28. */
+    get controlSize() {
+        return this.size === '2xlarge' ? 'xlarge' : this.size;
+    }
+    /** Badge default por tamaño: medium → small · large → medium · xlarge/2xlarge → large. */
+    get badgeSize() {
+        if (this.size === 'medium')
+            return 'small';
+        return this.size === 'large' ? 'medium' : 'large';
+    }
+    get badgeCfg() {
+        const b = this.badge;
+        return b ? (typeof b === 'string' ? { label: b } : b) : null;
+    }
+    get linkCfg() {
+        var _a;
+        const l = this.link;
+        if (!l)
+            return null;
+        const cfg = typeof l === 'string' ? { label: l } : l;
+        if (!cfg.label)
+            return null;
+        return Object.assign(Object.assign({}, cfg), { rel: (_a = cfg.rel) !== null && _a !== void 0 ? _a : (cfg.target === '_blank' ? 'noopener noreferrer' : undefined) });
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const hasDesc = !!this.description;
+        const badge = this.badgeCfg;
+        const link = hasDesc ? this.linkCfg : null;
+        return (h(Host, { key: '763e3736e58f060e1ba96f841c7aaeca65ca9c87', "data-sui-checked": this.checked ? '' : null, "data-sui-size": this.size, "data-sui-flip": this.flip ? '' : null, "data-sui-with-description": hasDesc ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, h("div", { key: '232ea994b88aa83701838324e8e9616ff336534c', class: "sui-radio-label__control", role: "radio", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-labelledby": this.labelId, "aria-describedby": hasDesc ? this.descriptionId : null, tabindex: this.disabled || (this.inGroup && this.tabStop === false) ? '-1' : '0', onKeyDown: this.onKeydown }, h("sui-radio", { key: '93a7ba36d4437f9a67f37a31f43ef20a804b3ff3', class: "sui-radio-label__radio", size: this.controlSize, checked: this.checked, disabled: this.disabled, focusable: false, "aria-hidden": "true", inert: true }), h("div", { key: 'fc778e806053370d4a4c3d559575a35d7d7ddaa2', class: "sui-radio-label__content" }, h("div", { key: '59451d3f56cd58d66fecf4e29d42b4c6f86acb5a', class: "sui-radio-label__text" }, h("div", { key: '0d8b8d885905961f68682b1bb599919e31aeea9a', class: "sui-radio-label__title" }, h("span", { key: '0b7490a53dac3b1976137ddaebe77be3b203921a', class: "sui-radio-label__label", id: this.labelId }, this.label), this.sublabel && h("span", { key: 'b86dd8cf019b8a48c4598d1bd9aa68f081027e6e', class: "sui-radio-label__sublabel" }, this.sublabel), badge && (h("sui-badge", { key: 'bdc8c68bc0fb76e8ea242d289c57a2b21d9470a9', class: "sui-radio-label__badge", color: (_a = badge.color) !== null && _a !== void 0 ? _a : 'orange', variant: (_b = badge.variant) !== null && _b !== void 0 ? _b : 'light', size: (_c = badge.size) !== null && _c !== void 0 ? _c : this.badgeSize }, badge.label))), hasDesc && (h("p", { key: '641984cb98c5ae633f2287f712b4973f7e3a2fc1', class: "sui-radio-label__description", id: this.descriptionId }, this.description))))), link && (h("sui-link-button", { key: 'dd1287a7f10e094809c7dc59e3c84c0209ffca7b', class: "sui-radio-label__link", variant: "primary", size: this.size === 'medium' ? 'small' : 'medium', disabled: this.disabled, href: (_d = link.href) !== null && _d !== void 0 ? _d : null, target: (_e = link.target) !== null && _e !== void 0 ? _e : null, rel: (_f = link.rel) !== null && _f !== void 0 ? _f : null, onClicked: this.onLinkClick }, link.label))));
+    }
+    get el() { return getElement(this); }
+};
+SuiRadioLabel.style = suiRadioLabelCss();
+
+export { SuiRadioLabel as sui_radio_label };

package/dist/esm/sui-radio.entry.js

@@ -0,0 +1,97 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CHeoPpKZ.js';
+
+const suiRadioCss = () => `@charset "UTF-8";.sc-sui-radio-h{display:inline-flex;align-items:center;justify-content:center;position:relative;box-sizing:border-box;cursor:pointer;outline:none;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sc-sui-radio-h{width:20px;height:20px}.sui-radio__bg.sc-sui-radio{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:999px;background:var(--sui-bg-soft-200);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-radio__box.sc-sui-radio{position:absolute;background:var(--sui-bg-white-0);border-radius:999px;box-shadow:var(--sui-shadow-radio-box);width:13px;height:13px;transition:width var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), height 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-checked].sc-sui-radio-h .sui-radio__box.sc-sui-radio{width:8px;height:8px;box-shadow:none;background:var(--sui-static-white, #ffffff)}.sc-sui-radio-h:hover:not([data-sui-disabled]):not([data-sui-checked]) .sui-radio__bg.sc-sui-radio{background:var(--sui-bg-sub-300)}.sc-sui-radio-h:focus-visible:not([data-sui-disabled]):not([data-sui-checked]) .sui-radio__bg.sc-sui-radio{background:var(--sui-primary-base)}[data-sui-checked].sc-sui-radio-h .sui-radio__bg.sc-sui-radio{background:var(--sui-primary-base)}[data-sui-checked].sc-sui-radio-h:hover:not([data-sui-disabled]) .sui-radio__bg.sc-sui-radio{background:var(--sui-primary-dark)}[data-sui-checked].sc-sui-radio-h:focus-visible:not([data-sui-disabled]) .sui-radio__bg.sc-sui-radio{background:var(--sui-primary-darkest)}[data-sui-disabled].sc-sui-radio-h{cursor:not-allowed;pointer-events:none}[data-sui-disabled].sc-sui-radio-h .sui-radio__bg.sc-sui-radio{background:var(--sui-bg-soft-200)}[data-sui-disabled].sc-sui-radio-h:not([data-sui-checked]) .sui-radio__box.sc-sui-radio{display:none}[data-sui-disabled][data-sui-checked].sc-sui-radio-h .sui-radio__box.sc-sui-radio{background:var(--sui-icon-disabled-300)}[data-sui-size=large].sc-sui-radio-h{width:24px;height:24px}[data-sui-size=large].sc-sui-radio-h .sui-radio__bg.sc-sui-radio{width:20px;height:20px}[data-sui-size=large].sc-sui-radio-h .sui-radio__box.sc-sui-radio{width:17px;height:17px}[data-sui-size=large][data-sui-checked].sc-sui-radio-h .sui-radio__box.sc-sui-radio{width:10px;height:10px}[data-sui-size=xlarge].sc-sui-radio-h{width:28px;height:28px}[data-sui-size=xlarge].sc-sui-radio-h .sui-radio__bg.sc-sui-radio{width:24px;height:24px}[data-sui-size=xlarge].sc-sui-radio-h .sui-radio__box.sc-sui-radio{width:21px;height:21px}[data-sui-size=xlarge][data-sui-checked].sc-sui-radio-h .sui-radio__box.sc-sui-radio{width:12px;height:12px}`;
+
+const SuiRadio = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.suiChange = createEvent(this, "suiChange");
+        this.suiRadioSelect = createEvent(this, "suiRadioSelect");
+        /** Tamaño. `medium` 20 (default) · `large` 24 · `xlarge` 28. */
+        this.size = 'medium';
+        /**
+         * Valor de este radio dentro de un `<sui-radio-group>`. El group compara su
+         * propio `value` contra este para resolver el estado checked exclusivo.
+         * Ignorado en modo standalone.
+         */
+        this.value = null;
+        /** Deshabilitado: bloquea toggle, tokens grises, no focusable. Default `false`. */
+        this.disabled = false;
+        /**
+         * `false` = fuera del orden de Tab y del roving del grupo. Para cuando un padre
+         * (sui-radio-label) es el radio enfocable y este solo dibuja. Default `true`.
+         */
+        this.focusable = true;
+        /**
+         * Estado marcado. Mutable + reflect. En modo standalone equivale al
+         * `[(standaloneChecked)]` de Angular (el consumer puede setear `el.checked` o
+         * leerlo tras un toggle). En modo grupo lo gobierna el `<sui-radio-group>`
+         * padre vía `setChecked()`.
+         */
+        this.checked = false;
+        /** True cuando el radio vive dentro de un `<sui-radio-group>`. Autodetectado. */
+        this.inGroup = false;
+        /** En grupo: único tab stop del roving (lo fija el group vía `setChecked`). */
+        this.tabStop = false;
+    }
+    componentWillLoad() {
+        this.inGroup = !!this.el.closest('sui-radio-group');
+    }
+    /**
+     * Fija el estado checked desde el `<sui-radio-group>` padre (selección
+     * exclusiva). API interna del DS — el group la llama tras cada cambio de su
+     * `value`. No dispara `suiChange` (el group ya emite el suyo).
+     */
+    async setChecked(checked, tabStop = false) {
+        this.checked = checked;
+        this.tabStop = tabStop;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere bien.
+     * Sin esto, `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart() {
+        /* no-op a propósito: la presencia del binding es el fix. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    onClick(event) {
+        this.toggle(event);
+    }
+    onKeydown(event) {
+        if (event.key === ' ' || event.key === 'Spacebar' || event.key === 'Enter') {
+            this.toggle(event);
+        }
+    }
+    /**
+     * Activa el radio. Disabled bloquea todo. En modo grupo emite `suiRadioSelect`
+     * con su `value` y deja que el group resuelva la selección exclusiva. En modo
+     * standalone togglea `checked` y emite `suiChange` (comportamiento toggle
+     * legacy, igual que el Angular).
+     */
+    toggle(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        event.preventDefault();
+        if (this.inGroup) {
+            this.suiRadioSelect.emit(this.value);
+        }
+        else {
+            this.checked = !this.checked;
+            this.suiChange.emit(this.checked);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'a1ed053becb51d53bfd8aa6f2d299216d2b0fc9d', role: "radio", tabindex: this.disabled || !this.focusable || (this.inGroup && !this.tabStop) ? '-1' : '0', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "data-sui-size": this.size, "data-sui-checked": this.checked ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, h("span", { key: '13ae144c279a4f9ee99554a5bd5d7745cce14c46', class: "sui-radio__bg" }, h("span", { key: '50cab173895a0d755bdddc44db57a2e1304b162b', class: "sui-radio__box" }))));
+    }
+    get el() { return getElement(this); }
+};
+SuiRadio.style = suiRadioCss();
+
+export { SuiRadio as sui_radio };