@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,333 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiSliderCss = () => `@charset "UTF-8";.sc-sui-slider-h{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:100%;box-sizing:border-box;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;-webkit-user-select:none;user-select:none}.sui-slider__label-row.sc-sui-slider{display:flex;align-items:flex-start;gap:2px;width:100%;font-size:12px;line-height:16px;font-weight:400}.sui-slider__label.sc-sui-slider{color:var(--sui-text-sub-600);white-space:nowrap}.sui-slider__sublabel.sc-sui-slider{color:var(--sui-text-soft-400);white-space:nowrap}.sui-slider__amount.sc-sui-slider{flex:1 0 0;min-width:0;text-align:right;color:var(--sui-text-sub-600)}.sui-slider__track.sc-sui-slider{position:relative;width:100%;height:16px;cursor:pointer;touch-action:none}.sui-slider__bg.sc-sui-slider{position:absolute;left:0;right:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-bg-soft-200)}.sui-slider__progress.sc-sui-slider{position:absolute;left:0;top:5px;height:6px;border-radius:var(--sui-radius-full);background:var(--sui-primary-base)}.sui-slider__thumb.sc-sui-slider{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--sui-static-white, #ffffff);filter:drop-shadow(0px 6px 5px rgba(14, 18, 27, 0.06)) drop-shadow(0px 2px 2px rgba(14, 18, 27, 0.03));display:flex;align-items:center;justify-content:center;cursor:grab;outline:none;box-sizing:border-box}.sui-slider__thumb.sc-sui-slider:active{cursor:grabbing}.sui-slider__thumb--range-min.sc-sui-slider{margin-left:-5px}.sui-slider__thumb.sc-sui-slider:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-base)}.sui-slider__dot.sc-sui-slider{width:6px;height:6px;border-radius:50%;background:var(--sui-primary-base);box-sizing:border-box}.sui-slider__thumb--zero.sc-sui-slider .sui-slider__dot.sc-sui-slider{background:var(--sui-bg-soft-200)}[data-sui-size=large].sc-sui-slider-h{gap:8px}[data-sui-size=large].sc-sui-slider-h .sui-slider__label-row.sc-sui-slider{font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing)}[data-sui-size=large].sc-sui-slider-h .sui-slider__track.sc-sui-slider{height:24px}[data-sui-size=large].sc-sui-slider-h .sui-slider__bg.sc-sui-slider,[data-sui-size=large].sc-sui-slider-h .sui-slider__progress.sc-sui-slider{top:8px;height:8px}[data-sui-size=large].sc-sui-slider-h .sui-slider__thumb.sc-sui-slider{width:24px;height:24px;margin-left:-12px}[data-sui-size=large].sc-sui-slider-h .sui-slider__thumb--range-min.sc-sui-slider{margin-left:-9px}[data-sui-size=large].sc-sui-slider-h .sui-slider__dot.sc-sui-slider{width:8px;height:8px}.sui-slider__tooltip.sc-sui-slider{position:absolute;left:50%;top:-28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:2}.sui-slider__tooltip-text.sc-sui-slider{display:flex;align-items:center;justify-content:center;padding:2px 6px;border-radius:var(--sui-radius-4);background:var(--sui-bg-strong-950);color:var(--sui-text-white-0);font-size:12px;line-height:16px;font-weight:400;white-space:nowrap;box-shadow:0px 12px 24px 0px rgba(14, 18, 27, 0.06), 0px 1px 2px 0px rgba(14, 18, 27, 0.03)}.sui-slider__tooltip-tail.sc-sui-slider{width:8px;height:4px;background:var(--sui-bg-strong-950);clip-path:polygon(0 0, 100% 0, 50% 100%)}[data-sui-disabled].sc-sui-slider-h{cursor:not-allowed}[data-sui-disabled].sc-sui-slider-h .sui-slider__track.sc-sui-slider{cursor:not-allowed}[data-sui-disabled].sc-sui-slider-h .sui-slider__thumb.sc-sui-slider{cursor:not-allowed}[data-sui-disabled].sc-sui-slider-h .sui-slider__progress.sc-sui-slider{background:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-slider-h .sui-slider__dot.sc-sui-slider{background:var(--sui-text-disabled-300)}[data-sui-disabled].sc-sui-slider-h .sui-slider__label.sc-sui-slider,[data-sui-disabled].sc-sui-slider-h .sui-slider__amount.sc-sui-slider{color:var(--sui-text-disabled-300)}`;
+
+let sliderSeq = 0;
+const SuiSlider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChange = index.createEvent(this, "valueChange");
+        this.minValueChange = index.createEvent(this, "minValueChange");
+        this.maxValueChange = index.createEvent(this, "maxValueChange");
+        /** `single` (un thumb) o `range` (dos thumbs). Default `single`. */
+        this.type = 'single';
+        /** `medium` (default, Figma) o `large` (mobile, extensión SUI). */
+        this.size = 'medium';
+        /** Borde inferior de la escala numérica. Default `0`. */
+        this.min = 0;
+        /** Borde superior de la escala numérica. Default `100`. */
+        this.max = 100;
+        /** Salto discreto del valor (snap). Default `1`. */
+        this.step = 1;
+        /** Label row (Figma `label` bool). Vacío => fila oculta. */
+        this.label = '';
+        /** Sublabel opcional (Figma `sublabel` bool). Solo aparece junto a label. */
+        this.sublabel = '';
+        /**
+         * Texto a la derecha del label (Figma `editAmount`). `null` => cae al valor
+         * numérico actual (value en single; "min–max" en range).
+         */
+        this.amount = null;
+        /** Unidad para el lector de pantalla (`aria-valuetext`: «12 km»). En single, si se pasa `amount` manda ese texto. */
+        this.unit = null;
+        /** Nombre accesible cuando no hay `label` visible (o para reemplazarlo). */
+        this.ariaLabel = null;
+        /** Muestra tooltip flotante sobre el thumb activo (hover/drag). Default `false`. */
+        this.tooltip = false;
+        /** Fuerza el tooltip siempre visible (no solo hover/drag). Default `false`. */
+        this.tooltipAlways = false;
+        /** Deshabilitado: bloquea drag/teclado, tokens grises. Default `false`. */
+        this.disabled = false;
+        // ── single value ───────────────────────────────────────────────────────────
+        /** Valor en modo single (0–100 por default). Default `0`. */
+        this.value = 0;
+        // ── range values ────────────────────────────────────────────────────────────
+        /** Handle izquierdo en modo range. Default `0`. */
+        this.minValue = 0;
+        /** Handle derecho en modo range. Default `0`. */
+        this.maxValue = 0;
+        // ── estado interno ───────────────────────────────────────────────────────────
+        /** Handle siendo arrastrado: null | 'single' | 'min' | 'max'. */
+        this.dragging = null;
+        /** Handle bajo hover (para tooltip): mismo dominio que dragging. */
+        this.hovering = null;
+        // ── a11y (04-10-2026) ─────────────────────────────────────────────────────────
+        /** El label visible nombra a la manija. */
+        this.labelId = `sui-slider-label-${++sliderSeq}`;
+        // ── eventos de pointer (mouse + touch unificados) ──────────────────────────────
+        this.onTrackPointerDown = (e) => {
+            var _a;
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            const raw = this.valueFromClientX(e.clientX);
+            let handle;
+            if (this.type === 'single') {
+                handle = 'single';
+                this.emitSingle(raw);
+            }
+            else {
+                // elegir el handle más cercano al click
+                const dMin = Math.abs(raw - this.effectiveMin);
+                const dMax = Math.abs(raw - this.effectiveMax);
+                handle = dMin <= dMax ? 'min' : 'max';
+                if (handle === 'min')
+                    this.emitMin(raw);
+                else
+                    this.emitMax(raw);
+            }
+            this.dragging = handle;
+            const target = e.target;
+            try {
+                (_a = target.setPointerCapture) === null || _a === void 0 ? void 0 : _a.call(target, e.pointerId);
+            }
+            catch (_b) {
+                /* noop */
+            }
+        };
+        this.onPointerMove = (e) => {
+            const handle = this.dragging;
+            if (!handle || this.disabled)
+                return;
+            e.preventDefault();
+            const raw = this.valueFromClientX(e.clientX);
+            if (handle === 'single')
+                this.emitSingle(raw);
+            else if (handle === 'min')
+                this.emitMin(raw);
+            else
+                this.emitMax(raw);
+        };
+        this.onPointerUp = () => {
+            if (this.dragging)
+                this.dragging = null;
+        };
+    }
+    // ── valores efectivos (clamped al rango) ─────────────────────────────────────
+    clamp(v) {
+        const lo = this.min;
+        const hi = this.max;
+        if (Number.isNaN(v))
+            return lo;
+        return Math.min(hi, Math.max(lo, v));
+    }
+    get effectiveValue() {
+        return this.clamp(this.value);
+    }
+    get effectiveMin() {
+        return this.clamp(this.minValue);
+    }
+    get effectiveMax() {
+        // collision avoidance: max nunca por debajo de min
+        const max = this.clamp(this.maxValue);
+        return Math.max(max, this.effectiveMin);
+    }
+    // ── porcentajes para posicionar (0–100) ──────────────────────────────────────
+    pct(v) {
+        const span = this.max - this.min;
+        if (span <= 0)
+            return 0;
+        return ((v - this.min) / span) * 100;
+    }
+    get valuePct() {
+        return this.pct(this.effectiveValue);
+    }
+    get minPct() {
+        return this.pct(this.effectiveMin);
+    }
+    get maxPct() {
+        return this.pct(this.effectiveMax);
+    }
+    /** Inner dot coloreado cuando hay progreso; gris en zero-state. */
+    get singleHasProgress() {
+        return this.effectiveValue > this.min;
+    }
+    get rangeMinColored() {
+        return this.effectiveMin > this.min || this.effectiveMax > this.min;
+    }
+    get rangeMaxColored() {
+        return this.effectiveMax > this.min;
+    }
+    /** Texto del label de la derecha. */
+    get amountText() {
+        if (this.amount !== null)
+            return this.amount;
+        if (this.type === 'range') {
+            return `${this.effectiveMin}–${this.effectiveMax}`;
+        }
+        return `${this.effectiveValue}`;
+    }
+    /** «12 km»: el valor con su unidad, o null si no hay unidad. */
+    valueText(v) {
+        return this.unit ? `${v} ${this.unit}` : null;
+    }
+    /** Single: el texto de `amount` (lo que se ve) o el valor con la unidad. */
+    get singleValueText() {
+        var _a;
+        return (_a = this.amount) !== null && _a !== void 0 ? _a : this.valueText(this.effectiveValue);
+    }
+    /** Range: cada manija dice cuál es («Precio, mínimo» / «Precio, máximo»). */
+    thumbLabel(cual) {
+        const extremo = cual === 'min' ? 'mínimo' : 'máximo';
+        const nombre = this.ariaLabel || this.label;
+        if (!nombre)
+            return extremo.charAt(0).toUpperCase() + extremo.slice(1);
+        return `${nombre}, ${extremo}`;
+    }
+    connectedCallback() {
+        // Strip del `title` nativo del host (patrón canon del Angular): evita el tooltip gris del browser.
+        this.el.removeAttribute('title');
+    }
+    /** iOS: listeners PASIVOS (igual que `SuiToque` del Angular) — engage del :active sin frenar el scroll. */
+    onTouchStart() {
+        /* presencia del listener = engage del touch pipeline iOS. */
+    }
+    onTouchEnd(e) {
+        var _a, _b, _c;
+        (_c = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.sui-slider__thumb')) === null || _c === void 0 ? void 0 : _c.blur();
+    }
+    // ── tooltip visibility por handle ─────────────────────────────────────────────
+    showTooltipFor(handle) {
+        if (!this.tooltip)
+            return false;
+        if (this.tooltipAlways)
+            return true;
+        return this.dragging === handle || this.hovering === handle;
+    }
+    get showSingleTooltip() {
+        return this.showTooltipFor('single');
+    }
+    get showMinTooltip() {
+        return this.showTooltipFor('min');
+    }
+    get showMaxTooltip() {
+        return this.showTooltipFor('max');
+    }
+    // ── snap al step + emisión de valor ───────────────────────────────────────────
+    snap(raw) {
+        const lo = this.min;
+        const st = this.step;
+        if (st <= 0)
+            return this.clamp(raw);
+        const snapped = lo + Math.round((raw - lo) / st) * st;
+        return this.clamp(snapped);
+    }
+    emitSingle(raw) {
+        const next = this.snap(raw);
+        this.value = next;
+        this.valueChange.emit(next);
+    }
+    emitMin(raw) {
+        let next = this.snap(raw);
+        next = Math.min(next, this.effectiveMax); // no rebasar el handle derecho
+        this.minValue = next;
+        this.minValueChange.emit(next);
+    }
+    emitMax(raw) {
+        let next = this.snap(raw);
+        next = Math.max(next, this.effectiveMin); // no rebasar el handle izquierdo
+        this.maxValue = next;
+        this.maxValueChange.emit(next);
+    }
+    // ── geometría del puntero → valor ──────────────────────────────────────────────
+    trackEl() {
+        return this.el.querySelector('.sui-slider__track');
+    }
+    valueFromClientX(clientX) {
+        const track = this.trackEl();
+        if (!track)
+            return this.min;
+        const rect = track.getBoundingClientRect();
+        if (rect.width <= 0)
+            return this.min;
+        const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
+        return this.min + ratio * (this.max - this.min);
+    }
+    // ── teclado (accesibilidad) ─────────────────────────────────────────────────────
+    onThumbKeydown(e, handle) {
+        if (this.disabled)
+            return;
+        const st = this.step || 1;
+        let delta = 0;
+        switch (e.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                delta = st;
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                delta = -st;
+                break;
+            case 'Home':
+                delta = -Infinity;
+                break;
+            case 'End':
+                delta = Infinity;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (handle === 'single') {
+            const base = delta === Infinity ? this.max : delta === -Infinity ? this.min : this.effectiveValue + delta;
+            this.emitSingle(base);
+        }
+        else if (handle === 'min') {
+            const base = delta === Infinity ? this.max : delta === -Infinity ? this.min : this.effectiveMin + delta;
+            this.emitMin(base);
+        }
+        else {
+            const base = delta === Infinity ? this.max : delta === -Infinity ? this.min : this.effectiveMax + delta;
+            this.emitMax(base);
+        }
+    }
+    onThumbEnter(handle) {
+        if (this.disabled)
+            return;
+        this.hovering = handle;
+    }
+    onThumbLeave() {
+        this.hovering = null;
+    }
+    // ── render helpers ───────────────────────────────────────────────────────────────
+    renderTooltip(text) {
+        return (index.h("div", { class: "sui-slider__tooltip" }, index.h("span", { class: "sui-slider__tooltip-text" }, text), index.h("span", { class: "sui-slider__tooltip-tail" })));
+    }
+    render() {
+        const dis = this.disabled;
+        return (index.h(index.Host, { key: '1f4a70701a0dafe65ccafe1c6c479cc764ab3dd6', "data-sui-type": this.type, "data-sui-size": this.size, "data-sui-disabled": dis ? '' : null, "data-sui-dragging": this.dragging ? '' : null }, this.label && (index.h("div", { key: '4b7fd2dce88a074ce6b703d4449a0e538a85ed45', class: "sui-slider__label-row" }, index.h("span", { key: '8eb8877763cbc8d3bdca0f0787866b0d9d8813af', class: "sui-slider__label", id: this.labelId }, this.label), this.sublabel && index.h("span", { key: 'bad5a1970be7f44ab0834e9563e009c1fece94f3', class: "sui-slider__sublabel" }, this.sublabel), index.h("span", { key: 'f227293736c23e864af0113f12a289343131a8d7', class: "sui-slider__amount" }, this.amountText))), index.h("div", { key: 'e4f3ea852881c544ecabef8bf741b7f70de85914', class: "sui-slider__track", onPointerDown: this.onTrackPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp }, index.h("div", { key: '8f78a7e3c85cd65707adac4f638c004b931be150', class: "sui-slider__bg" }), this.type === 'single'
+            ? [
+                // Progress fill 0 → value
+                index.h("div", { class: "sui-slider__progress", style: { width: `${this.valuePct}%` } }),
+                // Thumb único
+                index.h("div", { class: {
+                        'sui-slider__thumb': true,
+                        'sui-slider__thumb--zero': !this.singleHasProgress,
+                    }, style: { left: `${this.valuePct}%` }, role: "slider", "aria-valuemin": `${this.min}`, "aria-valuemax": `${this.max}`, "aria-valuenow": `${this.effectiveValue}`, "aria-valuetext": this.singleValueText, "aria-labelledby": this.label && !this.ariaLabel ? this.labelId : null, "aria-label": this.ariaLabel, "aria-disabled": dis ? 'true' : null, tabindex: dis ? '-1' : '0', onKeyDown: (e) => this.onThumbKeydown(e, 'single'), onPointerEnter: () => this.onThumbEnter('single'), onPointerLeave: () => this.onThumbLeave() }, index.h("span", { class: "sui-slider__dot" }), this.showSingleTooltip && this.renderTooltip(this.effectiveValue)),
+            ]
+            : [
+                // Progress fill min → max
+                index.h("div", { class: "sui-slider__progress", style: {
+                        left: `${this.minPct}%`,
+                        width: `${this.maxPct - this.minPct}%`,
+                    } }),
+                // Thumb min (izquierdo)
+                index.h("div", { class: {
+                        'sui-slider__thumb': true,
+                        'sui-slider__thumb--range-min': true,
+                        'sui-slider__thumb--zero': !this.rangeMinColored,
+                    }, style: { left: `${this.minPct}%` }, role: "slider", "aria-valuemin": `${this.min}`, "aria-valuemax": `${this.effectiveMax}`, "aria-valuenow": `${this.effectiveMin}`, "aria-valuetext": this.valueText(this.effectiveMin), "aria-label": this.thumbLabel('min'), "aria-disabled": dis ? 'true' : null, tabindex: dis ? '-1' : '0', onKeyDown: (e) => this.onThumbKeydown(e, 'min'), onPointerEnter: () => this.onThumbEnter('min'), onPointerLeave: () => this.onThumbLeave() }, index.h("span", { class: "sui-slider__dot" }), this.showMinTooltip && this.renderTooltip(this.effectiveMin)),
+                // Thumb max (derecho)
+                index.h("div", { class: {
+                        'sui-slider__thumb': true,
+                        'sui-slider__thumb--zero': !this.rangeMaxColored,
+                    }, style: { left: `${this.maxPct}%` }, role: "slider", "aria-valuemin": `${this.effectiveMin}`, "aria-valuemax": `${this.max}`, "aria-valuenow": `${this.effectiveMax}`, "aria-valuetext": this.valueText(this.effectiveMax), "aria-label": this.thumbLabel('max'), "aria-disabled": dis ? 'true' : null, tabindex: dis ? '-1' : '0', onKeyDown: (e) => this.onThumbKeydown(e, 'max'), onPointerEnter: () => this.onThumbEnter('max'), onPointerLeave: () => this.onThumbLeave() }, index.h("span", { class: "sui-slider__dot" }), this.showMaxTooltip && this.renderTooltip(this.effectiveMax)),
+            ])));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiSlider.style = suiSliderCss();
+
+exports.sui_slider = SuiSlider;

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

@@ -0,0 +1,164 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiHref = require('./sui-href-BNQgPKnK.js');
+
+const suiSocialButtonCss = () => `@charset "UTF-8";.sc-sui-social-button-h{display:inline-flex;align-items:stretch;vertical-align:middle}.sui-social-button__el.sc-sui-social-button{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px 10px 10px;border:0;border-radius:var(--sui-radius-10, 10px);background:transparent;color:inherit;text-decoration:none;cursor:pointer;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;min-height:40px;box-sizing:border-box;flex:1 1 auto;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background 120ms, transform var(--dur-instant, 80ms) var(--ease-ek, cubic-bezier(0.22, 1, 0.36, 1))}.sui-social-button__el.sc-sui-social-button:active:not(:disabled){transform:scale(0.97)}.sui-social-button__el.sc-sui-social-button:disabled{cursor:not-allowed}.sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button:active:not(:disabled),.sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}.sui-social-button__text.sc-sui-social-button{font-size:var(--sui-type-label-sm-size, 14px);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -0.006em);font-weight:var(--sui-type-label-sm-weight, 500);white-space:nowrap}.sui-social-button__spinner.sc-sui-social-button{display:inline-flex;animation:sui-social-button-spin 0.8s linear infinite}@keyframes sui-social-button-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.sui-social-button__spinner.sc-sui-social-button{animation:none}}[data-sui-only-icon].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button{padding:10px;width:40px;height:40px;flex:none}[data-sui-size=large].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button{padding:12px 18px 12px 12px;min-height:48px}[data-sui-size=large].sc-sui-social-button-h .sui-social-button__text.sc-sui-social-button{font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -0.011em)}[data-sui-size=large][data-sui-only-icon].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button{padding:14px;width:48px;height:48px}[data-sui-style=filled].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button{background:var(--sui-social-bg);color:var(--sui-static-white, #ffffff)}[data-sui-style=filled].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button:hover:not(:disabled){background:linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.16)) padding-box, var(--sui-social-bg)}[data-sui-style=filled].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button:active:not(:disabled){background:linear-gradient(rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.24)) padding-box, var(--sui-social-bg)}[data-sui-style=stroke].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button{background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}[data-sui-style=stroke].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button:hover:not(:disabled){background:var(--sui-bg-weak-50)}[data-sui-style=stroke].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button:active:not(:disabled){background:var(--sui-bg-soft-200)}[data-sui-disabled].sc-sui-social-button-h .sui-social-button__el.sc-sui-social-button,.sui-social-button__el.sc-sui-social-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
+
+/**
+ * Brand color map — exact bg-color por brand cuando style=filled.
+ * VALORES pulled de Figma 8p1k72aKKvzJV4XcvPS4VO (frame 180:4264), iguales al
+ * componente Angular homologado. NO son hex sueltos: son los colores de marca
+ * oficiales (cada marca define su propio bg), no parte de la paleta semántica
+ * del DS, por eso viven inline (igual que en el Angular original).
+ */
+const BRAND_FILLED_BG = {
+    apple: '#000000', //       var social/apple (verificado 2026-05-29)
+    'x-twitter': '#010101', //  var social/twitter #010101 (PULLED 2026-05-29)
+    google: '#f14336', //      node 181:4546 (Google red, verificado)
+    facebook: '#1977f3', //    node 181:4786 (Facebook blue)
+    linkedin: '#0077b5', //    node 181:4918 (LinkedIn blue)
+    github: '#24292f', //      node 181:5098 (GitHub dark gray)
+    dropbox: '#3984ff', //     node 181:5209 (Dropbox blue)
+};
+/** Default copy per brand. Override via `label` prop. */
+/** Nombre de cada marca para el texto por defecto («Continuar con {marca}»). */
+const BRAND_NAME = {
+    apple: 'Apple',
+    'x-twitter': 'X',
+    google: 'Google',
+    facebook: 'Facebook',
+    linkedin: 'LinkedIn',
+    github: 'GitHub',
+    dropbox: 'Dropbox',
+};
+/** Marcas con logo monocromático oscuro: en stroke + dark se usa el logo `white`. */
+const MONO_DARK_BRANDS = new Set(['apple', 'x-twitter', 'github']);
+const SuiSocialButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** Estilo visual: `filled` (bg de marca) o `stroke` (bordeado blanco). Default `filled`. */
+        this.variantStyle = 'filled';
+        /** Botón solo-ícono: cuadrado 40×40, sin texto. Default `false`. */
+        this.onlyIcon = false;
+        /** `medium` (40, default) · `large` (48, piso táctil 44 en el teléfono). */
+        this.size = 'medium';
+        /** Texto del botón. Si es null cae al copy por defecto de la marca («Continuar con {marca}»). */
+        this.label = null;
+        /** Deshabilitado: bloquea click, opacity 0.5, no emite clicked. Default `false`. */
+        this.disabled = false;
+        /**
+         * Loading: reemplaza el logo por un spinner y deshabilita el botón.
+         * ExtraFeature del proyecto (NO está en Figma). Default `false`.
+         */
+        this.loading = false;
+        /** Si está seteado (y no disabled/loading), renderiza `<a>` en vez de `<button>`. */
+        this.href = null;
+        /** Target del `<a>` (solo aplica con href). */
+        this.target = null;
+        /** Rel del `<a>` (solo aplica con href). Default `noopener noreferrer`. */
+        this.rel = 'noopener noreferrer';
+        /** Comportamiento de form (cuando NO es anchor): submit/reset disparan el form padre. Default `button`. */
+        this.type = 'button';
+        /** aria-label explícito. Si null y onlyIcon, cae al label resuelto. */
+        this.ariaLabel = null;
+        /** Dark mode leído del `data-theme` de <html> (mecanismo del DS): el logo es un asset por tema. */
+        this.isDark = false;
+        this.onClick = (event) => {
+            if (this.isDisabled) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+            this.clicked.emit(event);
+            /* Href interno: navegación SPA vía `suiNavigate` si la app la escucha (sui-href). */
+            if (this.isAnchor)
+                suiHref.suiHrefClick(event, this.href);
+            // type=submit/reset: dispara el form padre (el host es un custom element).
+            if (this.isAnchor || this.type === 'button')
+                return;
+            const form = this.el.closest('form');
+            if (!form)
+                return;
+            if (this.type === 'submit')
+                form.requestSubmit();
+            else if (this.type === 'reset')
+                form.reset();
+        };
+    }
+    /** Disabled efectivo: el prop disabled O el estado loading. */
+    get isDisabled() {
+        return this.disabled || this.loading;
+    }
+    /** Renderiza `<a>` solo si hay href y no está disabled/loading. */
+    get isAnchor() {
+        return !!this.href && !this.isDisabled;
+    }
+    connectedCallback() {
+        const read = () => (this.isDark = document.documentElement.getAttribute('data-theme') === 'dark');
+        read();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        this.themeObs = new MutationObserver(read);
+        this.themeObs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.themeObs) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /** filled → `white`; stroke → `original`, salvo dark + marca monocromática oscura. */
+    get logoStyle() {
+        if (this.variantStyle === 'filled')
+            return 'white';
+        if (this.isDark && MONO_DARK_BRANDS.has(this.brand))
+            return 'white';
+        return 'original';
+    }
+    /** Color de fondo brand-specific (solo aplica si style=filled). */
+    get filledBg() {
+        return this.variantStyle === 'filled' ? BRAND_FILLED_BG[this.brand] : null;
+    }
+    /** Label final: prop label > default por brand. */
+    get resolvedLabel() {
+        var _a;
+        return (_a = this.label) !== null && _a !== void 0 ? _a : `Continuar con ${BRAND_NAME[this.brand]}`;
+    }
+    /** aria-label: explícito > (si only-icon) label resuelto > null. */
+    get resolvedAriaLabel() {
+        if (this.ariaLabel)
+            return this.ariaLabel;
+        return this.onlyIcon ? this.resolvedLabel : null;
+    }
+    /**
+     * iOS WKWebView fix (listeners PASIVOS, igual que `SuiToque` del Angular): la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline para que `:active` dispare/se libere. Sin esto,
+     * `:active` "stickea" 300-500ms en pages standalone. (Mismo patrón que sui-button.)
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        this.el.blur();
+    }
+    /** El leading: spinner si loading, sino el logo de marca vía <sui-brand-logo>. */
+    renderLeading() {
+        if (this.loading) {
+            return index.h("sui-icon", { class: "sui-social-button__spinner", name: "loader-4-line", size: 20 });
+        }
+        return index.h("sui-brand-logo", { company: this.brand, variant: this.logoStyle, size: "sm" });
+    }
+    render() {
+        var _a, _b, _c;
+        const content = [
+            this.renderLeading(),
+            !this.onlyIcon ? index.h("span", { class: "sui-social-button__text" }, this.resolvedLabel) : null,
+        ];
+        return (index.h(index.Host, { key: '5ec66c6fe706f127bf0116317b04d4d27b952ac5', "data-sui-brand": this.brand, "data-sui-style": this.variantStyle, "data-sui-size": this.size, "data-sui-only-icon": this.onlyIcon ? '' : null, "data-sui-disabled": this.isDisabled ? '' : null, "data-sui-loading": this.loading ? '' : null, style: this.filledBg ? { '--sui-social-bg': this.filledBg } : undefined }, this.isAnchor ? (index.h("a", { class: "sui-social-button__el", href: (_a = this.href) !== null && _a !== void 0 ? _a : undefined, target: (_b = this.target) !== null && _b !== void 0 ? _b : undefined, rel: (_c = this.rel) !== null && _c !== void 0 ? _c : undefined, "aria-label": this.resolvedAriaLabel, onClick: this.onClick }, content)) : (index.h("button", { class: "sui-social-button__el", type: this.type, disabled: this.isDisabled || undefined, "aria-label": this.resolvedAriaLabel, onClick: this.onClick }, content))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiSocialButton.style = suiSocialButtonCss();
+
+exports.sui_social_button = SuiSocialButton;

package/dist/cjs/sui-status-badge.cjs.entry.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiStatusBadgeCss = () => `@charset "UTF-8";.sc-sui-status-badge-h{display:inline-flex;align-items:center;box-sizing:border-box;height:24px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:var(--sui-radius-6);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-xs-size);font-weight:var(--sui-type-label-xs-weight);line-height:var(--sui-type-label-xs-line);letter-spacing:var(--sui-type-label-xs-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;white-space:nowrap;vertical-align:middle;overflow:clip;gap:4px}[data-sui-with-dot].sc-sui-status-badge-h{gap:2px}.sui-status-badge__icon.sc-sui-status-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.sui-status-badge__dot.sc-sui-status-badge{display:inline-block;width:16px;height:16px;flex-shrink:0;background-image:radial-gradient(circle at center, currentColor 0, currentColor 3px, transparent 3.5px)}.sui-status-badge__label.sc-sui-status-badge{display:inline-flex;align-items:center}[data-sui-size=large].sc-sui-status-badge-h{height:28px;padding:4px 10px 4px 6px;font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing)}[data-sui-size=xlarge].sc-sui-status-badge-h{height:32px;padding:4px 12px 4px 6px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}[data-sui-size=large].sc-sui-status-badge-h .sui-status-badge__icon.sc-sui-status-badge,[data-sui-size=large].sc-sui-status-badge-h .sui-status-badge__dot.sc-sui-status-badge{width:20px;height:20px}[data-sui-size=xlarge].sc-sui-status-badge-h .sui-status-badge__icon.sc-sui-status-badge,[data-sui-size=xlarge].sc-sui-status-badge-h .sui-status-badge__dot.sc-sui-status-badge{width:24px;height:24px}[data-sui-size=large].sc-sui-status-badge-h .sui-status-badge__dot.sc-sui-status-badge,[data-sui-size=xlarge].sc-sui-status-badge-h .sui-status-badge__dot.sc-sui-status-badge{background-image:radial-gradient(circle at center, currentColor 0, currentColor 4px, transparent 4.5px)}[data-sui-status=completed][data-sui-appearance=stroke].sc-sui-status-badge-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-success-base)}[data-sui-status=completed][data-sui-appearance=stroke].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-text-sub-600)}[data-sui-status=completed][data-sui-appearance=light].sc-sui-status-badge-h{background:var(--sui-state-success-lighter);border-color:transparent;color:var(--sui-state-success-base)}[data-sui-status=completed][data-sui-appearance=light].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-state-success-base)}[data-sui-status=pending][data-sui-appearance=stroke].sc-sui-status-badge-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-warning-base)}[data-sui-status=pending][data-sui-appearance=stroke].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-text-sub-600)}[data-sui-status=pending][data-sui-appearance=light].sc-sui-status-badge-h{background:var(--sui-state-warning-lighter);border-color:transparent;color:var(--sui-state-warning-base)}[data-sui-status=pending][data-sui-appearance=light].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-state-warning-base)}[data-sui-status=failed][data-sui-appearance=stroke].sc-sui-status-badge-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-error-base)}[data-sui-status=failed][data-sui-appearance=stroke].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-text-sub-600)}[data-sui-status=failed][data-sui-appearance=light].sc-sui-status-badge-h{background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}[data-sui-status=failed][data-sui-appearance=light].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-state-error-base)}[data-sui-status=information][data-sui-appearance=stroke].sc-sui-status-badge-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-information-base)}[data-sui-status=information][data-sui-appearance=stroke].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-text-sub-600)}[data-sui-status=information][data-sui-appearance=light].sc-sui-status-badge-h{background:var(--sui-state-information-lighter);border-color:transparent;color:var(--sui-state-information-base)}[data-sui-status=information][data-sui-appearance=light].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-state-information-base)}[data-sui-status=disabled][data-sui-appearance=stroke].sc-sui-status-badge-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-state-faded-base)}[data-sui-status=disabled][data-sui-appearance=stroke].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-text-sub-600)}[data-sui-status=disabled][data-sui-appearance=light].sc-sui-status-badge-h{background:var(--sui-state-faded-lighter);border-color:transparent;color:var(--sui-state-faded-base)}[data-sui-status=disabled][data-sui-appearance=light].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-state-faded-base)}[data-sui-status=disabled][data-sui-appearance=light].sc-sui-status-badge-h .sui-status-badge__label.sc-sui-status-badge{color:var(--sui-text-sub-600)}`;
+
+const SuiStatusBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Status semántico. Default `completed`. Cada valor fija su icono Remix. */
+        this.status = 'completed';
+        /**
+         * Variante visual del badge (`stroke` vs `light`). Se llama `appearance`
+         * para no colisionar con el atributo HTML nativo `style="..."`. Default
+         * `stroke`.
+         */
+        this.appearance = 'stroke';
+        /**
+         * Si `true`, reemplaza el icono semántico por un dot 6×6 (diámetro 6px,
+         * radio 3px — confirmado en Figma 171:5156) del color del status. El gap
+         * baja a 2px. En appearance="stroke" el texto ya es gris neutro; en
+         * appearance="light" el texto mantiene state-base salvo status="disabled".
+         * Default `false`.
+         */
+        this.withDot = false;
+        /** Tamaño: medium 24 (default, Figma) · large 28 · xlarge 32 (mobile). */
+        this.size = 'medium';
+        /**
+         * Icono propio (nombre Remix SIN prefijo, igual que `sui-icon`) en lugar del
+         * que trae el status. El status sigue mandando el color. Vacío = el del status.
+         * No hace nada con `withDot`. El README desaconseja usarlo salvo esperas por hora.
+         */
+        this.icon = '';
+    }
+    /** Px del glyph del sui-icon interno por tamaño (12 / 16 / 20). */
+    get iconSize() {
+        return this.size === 'xlarge' ? 20 : this.size === 'large' ? 16 : 12;
+    }
+    /** El icono que se pinta: el propio si lo hay, si no el del status. Solo con withDot=false. */
+    get iconName() {
+        const propio = (this.icon || '').trim();
+        if (propio)
+            return propio;
+        switch (this.status) {
+            case 'completed':
+                return 'checkbox-circle-fill';
+            case 'pending':
+                return 'alert-fill';
+            case 'failed':
+                return 'error-warning-fill';
+            case 'information':
+                return 'information-fill';
+            case 'disabled':
+                return 'forbid-fill';
+            default:
+                return 'checkbox-circle-fill';
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '9f8c16f7148f6bc338780c77d4e825bdeb0f1d3d', role: "status", "data-sui-status": this.status, "data-sui-appearance": this.appearance, "data-sui-size": this.size, "data-sui-with-dot": this.withDot ? '' : null }, this.withDot ? (index.h("span", { class: "sui-status-badge__dot", "aria-hidden": "true" })) : (index.h("span", { class: "sui-status-badge__icon", "aria-hidden": "true" }, index.h("sui-icon", { name: this.iconName, size: this.iconSize }))), index.h("span", { key: '8b00c6025aa339033be6039015221972b2b55d0c', class: "sui-status-badge__label" }, index.h("slot", { key: 'cd555d7bf0d071aa6b4540298a97be80a30f64f6' }))));
+    }
+};
+SuiStatusBadge.style = suiStatusBadgeCss();
+
+exports.sui_status_badge = SuiStatusBadge;