@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,61 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var rovingFocus = require('./roving-focus-J_7U6aRM.js');
+
+const suiTabMenuVerticalCss = () => `@charset "UTF-8";.sc-sui-tab-menu-vertical-h{display:block}.sui-tab-menu-vertical__track.sc-sui-tab-menu-vertical{display:flex;flex-direction:column;align-items:stretch;gap:8px;box-sizing:border-box;width:100%}[data-sui-style=card].sc-sui-tab-menu-vertical-h .sui-tab-menu-vertical__track.sc-sui-tab-menu-vertical{padding:10px;border:1px solid var(--sui-stroke-soft-200);border-radius:var(--sui-radius-16);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);overflow:hidden}[data-sui-style=list].sc-sui-tab-menu-vertical-h .sui-tab-menu-vertical__track.sc-sui-tab-menu-vertical{padding:0;border:none;background:transparent;box-shadow:none}.sui-tab-menu-vertical__divider.sc-sui-tab-menu-vertical{display:flex;align-items:center;padding:4px 8px;color:var(--sui-text-soft-400);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-xs-size);font-weight:var(--sui-type-subheading-xs-weight);line-height:var(--sui-type-subheading-xs-line);letter-spacing:var(--sui-type-subheading-xs-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;text-transform:uppercase}.sui-tab-menu-vertical__badge.sc-sui-tab-menu-vertical{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:12px;padding:2px;border-radius:var(--sui-radius-full);background:var(--sui-state-error-base);color:var(--sui-static-white);font-family:var(--sui-font-sans);font-size:var(--sui-type-subheading-2xs-size);font-weight:var(--sui-type-subheading-2xs-weight);line-height:var(--sui-type-subheading-2xs-line);letter-spacing:var(--sui-type-subheading-2xs-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;text-align:center;text-transform:uppercase}.sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical{display:flex;align-items:center;gap:6px;padding:8px;border:none;border-radius:var(--sui-radius-8);background:transparent;cursor:pointer;text-align:left;box-sizing:border-box;width:100%;overflow:hidden;transition:color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), background var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);color:var(--sui-text-sub-600)}.sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical .sui-tab-menu-vertical__leading.sc-sui-tab-menu-vertical{flex-shrink:0}.sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical .sui-tab-menu-vertical__label.sc-sui-tab-menu-vertical{flex:1 0 0;min-width:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size);font-weight:var(--sui-type-label-sm-weight);line-height:var(--sui-type-label-sm-line);letter-spacing:var(--sui-type-label-sm-spacing);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical .sui-tab-menu-vertical__chevron.sc-sui-tab-menu-vertical{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:1px;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);box-shadow:var(--sui-shadow-x-small);color:var(--sui-icon-sub-600)}.sui-tab-menu-vertical__item--active.sc-sui-tab-menu-vertical{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item--active.sc-sui-tab-menu-vertical .sui-tab-menu-vertical__leading.sc-sui-tab-menu-vertical{color:var(--sui-primary-base)}.sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical:hover:not(:disabled):not(.sui-tab-menu-vertical__item--active){background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}.sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical:disabled{cursor:not-allowed;opacity:0.4}[data-sui-style=card].sc-sui-tab-menu-vertical-h .sui-tab-menu-vertical__item.sc-sui-tab-menu-vertical:not(.sui-tab-menu-vertical__item--active):not(:hover){background:var(--sui-bg-white-0)}`;
+
+let suiTabMenuVerticalUid = 0;
+const SuiTabMenuVertical = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabChange = index.createEvent(this, "tabChange");
+        /** Ítems `{ value, label, icon?, rightIcon?, number?, disabled? }`. Requerido. */
+        this.tabs = [];
+        /** Estilo del contenedor: Card (borde/fondo/sombra) o List (plano). */
+        this.menuStyle = 'card';
+        /** Label de sección sobre el menú (prop `divider` de Figma, ej. 'SELECT MENU'). Vacío = sin divider. */
+        this.dividerLabel = '';
+        /** id del divider: nombra el tablist (aria-labelledby). */
+        this.dividerId = `sui-tab-menu-vertical-divider-${++suiTabMenuVerticalUid}`;
+        this.onKeydown = (event) => {
+            var _a;
+            const idx = rovingFocus.suiTabStopIndex(this.tabs, this.active);
+            const next = rovingFocus.suiRovingIndexEnabled(event.key, idx, this.tabs, 'vertical');
+            if (next === null)
+                return;
+            event.preventDefault();
+            if (next !== idx)
+                this.select(this.tabs[next]);
+            (_a = this.el.querySelectorAll('.sui-tab-menu-vertical__item')[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+    }
+    /** iOS WKWebView: la presencia del listener touchstart libera `:active` a tiempo. */
+    onTouchStart() {
+        /* no-op a propósito */
+    }
+    onTouchEnd(event) {
+        var _a, _b;
+        (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('button')) === null || _b === void 0 ? void 0 : _b.blur();
+    }
+    select(tab) {
+        if (tab.disabled)
+            return;
+        this.active = tab.value;
+        this.tabChange.emit(tab.value);
+    }
+    render() {
+        const tabStop = rovingFocus.suiTabStopIndex(this.tabs, this.active);
+        return (index.h(index.Host, { key: '09cbf0e3741c34f0613b24beafc1db055ac38742', "data-sui-style": this.menuStyle }, index.h("div", { key: '76ac62515eb95444708cd00aa99a42408070361c', class: "sui-tab-menu-vertical__track", role: "tablist", "aria-orientation": "vertical", "aria-labelledby": this.dividerLabel ? this.dividerId : undefined, onKeyDown: this.onKeydown }, this.dividerLabel && (index.h("div", { key: '0b4f1a9864b20e8a6cdfad0ad660afe9e4b205b9', class: "sui-tab-menu-vertical__divider", id: this.dividerId, "aria-hidden": "true" }, this.dividerLabel)), this.tabs.map((tab, i) => {
+            const isActive = this.active === tab.value;
+            return (index.h("button", { key: tab.value, type: "button", class: {
+                    'sui-tab-menu-vertical__item': true,
+                    'sui-tab-menu-vertical__item--active': isActive,
+                }, disabled: tab.disabled, role: "tab", "aria-selected": isActive ? 'true' : 'false', tabindex: tabStop === i ? '0' : '-1', "aria-disabled": tab.disabled ? 'true' : undefined, onClick: () => this.select(tab) }, tab.icon && index.h("sui-icon", { class: "sui-tab-menu-vertical__leading", name: tab.icon, size: 20 }), index.h("span", { class: "sui-tab-menu-vertical__label" }, tab.label), !!tab.number && index.h("span", { class: "sui-tab-menu-vertical__badge" }, tab.number), tab.rightIcon && (index.h("span", { class: "sui-tab-menu-vertical__chevron" }, index.h("sui-icon", { name: "arrow-right-s-line", size: 18 })))));
+        }))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiTabMenuVertical.style = suiTabMenuVerticalCss();
+
+exports.sui_tab_menu_vertical = SuiTabMenuVertical;

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

@@ -0,0 +1,481 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var pistaDeScrollMarco = require('./pista-de-scroll-marco-DELFl1zU.js');
+
+/**
+ * Tipos compartidos del `<sui-table>`. Viven en este archivo hermano (no en el
+ * `.tsx`) por la regla del proyecto Stencil: en el `.tsx` solo se permite
+ * `export class` / `export type` / `export interface`. Cualquier
+ * `export const`/`export function`/`export enum` rompe el build de TODO el
+ * proyecto, así que los catálogos / interfaces data-driven se aíslan acá.
+ *
+ * Port 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-table/). Misma API
+ * pública (columns / rows / size / loading / selectable / striped / sort),
+ * todas las variantes/sizes/states (eje Priority x State x Misc x Size de
+ * Figma), mismo comportamiento (sort cycle asc->desc->null, selection model,
+ * tooltip en truncate, leading key-icon frame, divider entre filas, scroll
+ * horizontal mobile con sticky column opcional) y mismos VALORES exactos
+ * (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319 =
+ * --sui-primary-base), NO el azul de Figma.
+ */
+/**
+ * Touch scroll passthrough (fix Android) — port de `bindTouchScroll` del SUI Angular.
+ *
+ * En Android/Chromium un container con `overflow-x: auto` ABSORBE el touch
+ * vertical y NO lo delega al scroll de la página (verificado en device: ningún
+ * `touch-action` lo arregla). Se maneja por JS: el gesto horizontal queda
+ * NATIVO (`touch-action: pan-x`, con su momentum) y el vertical mueve el scroll
+ * container padre, con fling de fricción exponencial al soltar. Solo afecta
+ * touch; mouse/wheel siguen nativos.
+ *
+ * iOS no lo necesita (WKWebView delega solo y su scroll nativo es superior):
+ * ahí no engancha nada. Devuelve la función que quita los listeners.
+ */
+function bindTouchScroll(el) {
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+        (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    if (isIOS)
+        return () => undefined;
+    const doc = el.ownerDocument;
+    el.style.touchAction = 'pan-x';
+    let sx = 0, sy = 0, ly = 0;
+    let axis = null;
+    let pageScroller = null;
+    /* Velocidad vertical (px/ms) para el fling. Se estima con una ventana de
+       samples (~100ms) tipo VelocityTracker de Android — NO con el último move
+       suelto: el dedo desacelera antes de soltar y el fling moría. */
+    let vy = 0, momentumRaf = 0, momentumTs = 0;
+    const samples = [];
+    const VELOCITY_WINDOW_MS = 100;
+    const findPageScroller = () => {
+        var _a;
+        let n = el.parentElement;
+        while (n && n !== doc.body) {
+            const oy = getComputedStyle(n).overflowY;
+            if ((oy === 'auto' || oy === 'scroll') && n.scrollHeight > n.clientHeight)
+                return n;
+            n = n.parentElement;
+        }
+        return (_a = doc.scrollingElement) !== null && _a !== void 0 ? _a : null;
+    };
+    const stopMomentum = () => {
+        if (momentumRaf)
+            cancelAnimationFrame(momentumRaf);
+        momentumRaf = 0;
+    };
+    const onStart = (e) => {
+        stopMomentum();
+        if (e.touches.length !== 1) {
+            axis = null;
+            return;
+        }
+        const t = e.touches[0];
+        sx = t.clientX;
+        sy = ly = t.clientY;
+        axis = null;
+        vy = 0;
+        samples.length = 0;
+        samples.push({ y: t.clientY, t: e.timeStamp });
+        pageScroller = findPageScroller();
+    };
+    const onMove = (e) => {
+        if (e.touches.length !== 1)
+            return;
+        /* Si la tabla ENTRA (no desborda en X) no hay trap que evitar: scroll
+           nativo de la página, idéntico al resto. */
+        if (el.scrollWidth <= el.clientWidth + 1)
+            return;
+        const t = e.touches[0];
+        if (axis === null) {
+            const dx = Math.abs(t.clientX - sx);
+            const dy = Math.abs(t.clientY - sy);
+            if (dx < 5 && dy < 5)
+                return; // umbral para decidir dirección
+            axis = dx > dy ? 'x' : 'y';
+        }
+        /* Horizontal: NO interceptar — con touch-action:pan-x lo hace el browser. */
+        if (axis === 'x') {
+            ly = t.clientY;
+            return;
+        }
+        if (pageScroller)
+            pageScroller.scrollTop -= t.clientY - ly;
+        samples.push({ y: t.clientY, t: e.timeStamp });
+        while (samples.length > 1 && e.timeStamp - samples[0].t > VELOCITY_WINDOW_MS)
+            samples.shift();
+        e.preventDefault();
+        ly = t.clientY;
+    };
+    const onEnd = () => {
+        /* Fling: sigue el scroll de la página con la velocidad de salida (promedio
+           de la ventana) y fricción frame-rate-independent (en 120Hz no vuela). */
+        const first = samples[0];
+        const last = samples[samples.length - 1];
+        const win = last && first ? last.t - first.t : 0;
+        if (!pageScroller)
+            return;
+        vy = win > 0 ? (last.y - first.y) / win : 0;
+        if (Math.abs(vy) < 0.05)
+            return;
+        const scroller = pageScroller;
+        momentumTs = 0;
+        const step = (ts) => {
+            if (!momentumTs)
+                momentumTs = ts;
+            const dt = Math.min(ts - momentumTs, 32);
+            momentumTs = ts;
+            scroller.scrollTop -= vy * dt;
+            vy *= Math.pow(0.95, dt / 16); // ~0.95 por frame de 16ms, normalizado
+            momentumRaf = Math.abs(vy) > 0.02 ? requestAnimationFrame(step) : 0;
+        };
+        momentumRaf = requestAnimationFrame(step);
+    };
+    el.addEventListener('touchstart', onStart, { passive: true });
+    el.addEventListener('touchmove', onMove, { passive: false });
+    el.addEventListener('touchend', onEnd, { passive: true });
+    el.addEventListener('touchcancel', stopMomentum, { passive: true });
+    return () => {
+        stopMomentum();
+        el.removeEventListener('touchstart', onStart);
+        el.removeEventListener('touchmove', onMove);
+        el.removeEventListener('touchend', onEnd);
+        el.removeEventListener('touchcancel', stopMomentum);
+    };
+}
+
+const suiTableCss = () => `@charset "UTF-8";.sui-pista.sc-sui-table{position:relative;display:block;min-width:0}.sui-pista__borde.sc-sui-table{position:absolute;top:0;bottom:0;width:var(--sui-pista-de-scroll-ancho, 56px);pointer-events:none;z-index:2}.sui-pista__borde--inicio.sc-sui-table{left:0;background:linear-gradient(to right, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 30%, transparent 100%)}.sui-pista__borde--fin.sc-sui-table{right:0;background:linear-gradient(to left, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%, var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 30%, transparent 100%)}.sui-pista__flecha.sc-sui-table{display:none}@media (hover: hover) and (pointer: fine){.sui-pista__flecha.sc-sui-table{position:absolute;top:var(--sui-pista-de-scroll-flecha-top, 50%);z-index:3;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--sui-pista-de-scroll-flecha-size, 32px);height:var(--sui-pista-de-scroll-flecha-size, 32px);padding:0;border-radius:999px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);color:var(--sui-text-sub-600, #5c5c5c);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(10, 13, 20, 0.03));transform:translateY(-50%);cursor:pointer;pointer-events:auto;transition:background var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease), color var(--sui-motion-duration-x-fast, 100ms) var(--sui-motion-ease-out, ease)}.sui-pista__flecha.sc-sui-table:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-pista__flecha--inicio.sc-sui-table{left:4px}.sui-pista__flecha--fin.sc-sui-table{right:4px}}.sc-sui-table-h{display:block;width:100%}.sui-table__pista.sc-sui-table{width:100%;--sui-pista-de-scroll-flecha-top:18px;--sui-pista-de-scroll-flecha-size:28px}.sui-table.sc-sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0;font-optical-sizing:auto}[data-sui-sticky].sc-sui-table-h .sui-table__header.sc-sui-table,[data-sui-sticky].sc-sui-table-h .sui-table__row.sc-sui-table{overflow:visible}@media (max-width: 767px){.sui-table.sc-sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none;display:grid;grid-template-columns:minmax(max-content, 1fr)}}@media (max-width: 767px) and (max-width: 767px){.sui-table.sc-sui-table{scrollbar-width:none}.sui-table.sc-sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media (max-width: 767px){.sui-table.sc-sui-table .sui-table__header.sc-sui-table,.sui-table.sc-sui-table .sui-table__body.sc-sui-table{min-width:100%}.sui-table.sc-sui-table .sui-table__cell.sc-sui-table,.sui-table.sc-sui-table .sui-table__header-cell.sc-sui-table{min-width:120px}.sui-table.sc-sui-table .sui-table__cell--checkbox.sc-sui-table,.sui-table.sc-sui-table .sui-table__header-cell--checkbox.sc-sui-table{min-width:44px}.sui-table.sc-sui-table .sui-table__header-cell--empty.sc-sui-table{min-width:0}}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media (max-width: 767px){[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table{scrollbar-width:none}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table::-webkit-scrollbar{display:none;width:0;height:0}}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table{display:grid;grid-template-columns:minmax(max-content, 1fr)}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__header.sc-sui-table,[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__body.sc-sui-table{min-width:100%}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__cell.sc-sui-table,[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__header-cell.sc-sui-table{min-width:120px}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__cell--checkbox.sc-sui-table,[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__header-cell--checkbox.sc-sui-table{min-width:44px}[data-sui-sticky].sc-sui-table-h .sui-table.sc-sui-table .sui-table__header-cell--empty.sc-sui-table{min-width:0}.sui-table__header.sc-sui-table{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell.sc-sui-table{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;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)}.sui-table__header-cell--sortable.sc-sui-table{cursor:pointer;user-select:none}.sui-table__header-cell--sortable.sc-sui-table:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable.sc-sui-table:hover .sui-table__sort-icon.sc-sui-table{opacity:1}.sui-table__header-cell--sortable.sc-sui-table:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted.sc-sui-table{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled.sc-sui-table{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled.sc-sui-table .sui-table__sort-icon.sc-sui-table{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty.sc-sui-table{flex-shrink:0;padding:0}.sui-table__header-cell--center.sc-sui-table{justify-content:center}.sui-table__header-cell--right.sc-sui-table{justify-content:flex-end}.sui-table__header-cell--checkbox.sc-sui-table{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky.sc-sui-table{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label.sc-sui-table{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon.sc-sui-table{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:0.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active.sc-sui-table{color:var(--sui-text-strong-950);opacity:1}.sui-table__body.sc-sui-table{display:flex;flex-direction:column;width:100%}.sui-table__row.sc-sui-table{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}@media (hover: hover) and (pointer: fine){.sui-table__row.sc-sui-table:hover{background:var(--sui-bg-weak-50)}.sui-table__row.sc-sui-table:hover .sui-table__cell.sc-sui-table{background:var(--sui-bg-weak-50)}}.sui-table__row.sc-sui-table:active{background:var(--sui-bg-weak-50)}.sui-table__row.sc-sui-table:active .sui-table__cell.sc-sui-table{background:var(--sui-bg-weak-50)}.sui-table__row--selected.sc-sui-table{background:var(--sui-primary-alpha-10)}.sui-table__row--selected.sc-sui-table:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped.sc-sui-table{background:var(--sui-bg-weak-25, var(--sui-bg-weak-50))}.sui-table__row--skeleton.sc-sui-table{pointer-events:none;cursor:default}.sui-table__row--skeleton.sc-sui-table:hover{background:transparent}.sui-table__row--skeleton.sc-sui-table:hover .sui-table__cell.sc-sui-table{background:var(--sui-bg-white-0)}[data-sui-size=medium].sc-sui-table-h .sui-table__cell.sc-sui-table{min-height:64px;padding:12px 20px 12px 12px}[data-sui-size=small].sc-sui-table-h .sui-table__cell.sc-sui-table{min-height:48px;padding:8px 16px 8px 12px}[data-sui-size=large].sc-sui-table-h .sui-table__cell.sc-sui-table{min-height:80px;padding:16px 20px 16px 12px}[data-sui-size=xlarge].sc-sui-table-h .sui-table__cell.sc-sui-table{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell.sc-sui-table{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);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-strong-950)}.sui-table__cell--center.sc-sui-table{justify-content:center}.sui-table__cell--right.sc-sui-table{justify-content:flex-end}.sui-table__cell--checkbox.sc-sui-table{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading.sc-sui-table{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive.sc-sui-table{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky.sc-sui-table{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected.sc-sui-table .sui-table__cell.sc-sui-table{background:transparent}.sui-table__row--selected.sc-sui-table .sui-table__cell.sui-table__cell--sticky.sc-sui-table{background:var(--sui-primary-alpha-10)}.sui-table__cell-text.sc-sui-table{min-width:0}.sui-table__cell-text--truncate.sc-sui-table{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block.sc-sui-table{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc.sc-sui-table,.sc-sui-table-s .sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading.sc-sui-table .sui-table__cell-text.sc-sui-table{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive.sc-sui-table .sui-table__cell-text.sc-sui-table{font-weight:inherit;color:inherit}.sui-table__leading-icon.sc-sui-table,.sc-sui-table-s .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}[data-sui-size=small].sc-sui-table-h .sui-table__leading-icon.sc-sui-table,.sc-sui-table-h[data-sui-size=small] .sc-sui-table-s .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider.sc-sui-table{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider.sc-sui-table::after{content:"";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty.sc-sui-table{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon.sc-sui-table{color:var(--sui-text-disabled-300)}.sui-table__empty-msg.sc-sui-table{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box.sc-sui-table{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg, var(--sui-bg-soft-200) 25%, var(--sui-bg-weak-50) 50%, var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm.sc-sui-table{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}100%{background-position:0% 50%}}`;
+
+const SuiTable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rowClicked = index.createEvent(this, "rowClicked");
+        this.sortChanged = index.createEvent(this, "sortChanged");
+        this.sortKeyChange = index.createEvent(this, "sortKeyChange");
+        this.sortDirChange = index.createEvent(this, "sortDirChange");
+        this.selectedRowsChange = index.createEvent(this, "selectedRowsChange");
+        /** Definicion de columnas. Pasar como PROPERTY (`el.columns = [...]`). */
+        this.columns = [];
+        /** Array de datos a mostrar. Pasar como PROPERTY (`el.rows = [...]`). */
+        this.rows = [];
+        /** Tamaño: 'small' 48 · 'medium' 64 (default) · 'large' 80 · 'xlarge' 96. */
+        this.size = 'medium';
+        /** Muestra el skeleton loader. Default `false`. */
+        this.loading = false;
+        /** Mensaje cuando rows esta vacio y loading=false. */
+        this.emptyMessage = 'No hay datos';
+        /** Filas alternadas con fondo levemente grisado. Default `false`. */
+        this.striped = false;
+        /** Activa la columna de checkbox de seleccion. Default `false`. */
+        this.selectable = false;
+        /**
+         * Key o funcion para identificar filas en seleccion (equivale al `rowKey`
+         * del Angular). Si es funcion, pasar `columns` como PROPERTY.
+         */
+        this.rowKey = null;
+        /**
+         * Set de keys de filas seleccionadas (espeja el `model(selectedRows)`).
+         * Mutable: el consumer puede setear `el.selectedRows` o leerlo tras un toggle.
+         */
+        this.selectedRows = new Set();
+        /** Columna con sort activo (espeja `model(sortKey)`). Mutable. */
+        this.sortKey = null;
+        /** Direccion de sort activa (espeja `model(sortDir)`). Mutable. */
+        this.sortDir = null;
+        /**
+         * Pista de desborde: degradado en el borde con columnas ocultas y, con mouse,
+         * flechas que desplazan. `false` la apaga (atributo `pista-de-scroll="false"`).
+         */
+        this.pistaDeScroll = true;
+        /**
+         * Bump interno para re-render cuando muta `selectedRows` (un Set mutado
+         * in-place no dispara el render por identidad; lo forzamos por State).
+         */
+        this.rev = 0;
+        /** Lados con columnas ocultas (lo mide `SuiPistaDeScroll`). */
+        this.pistaEstado = { antes: false, despues: false };
+        /** Skeleton: 5 filas (igual al Angular). */
+        this.skeletonRows = [0, 1, 2, 3, 4];
+        // ── Sort ────────────────────────────────────────────────────────────────
+        /** Ciclo de sort: ninguno -> asc -> desc -> ninguno. Emite sortChanged. */
+        this.onSort = (col) => {
+            if (!col.sortable || col.disabled)
+                return;
+            const prevKey = this.sortKey;
+            const dir = prevKey !== col.key ? 'asc' : this.sortDir === 'asc' ? 'desc' : null;
+            this.sortKey = dir ? col.key : null;
+            this.sortDir = dir;
+            if (this.sortKey !== prevKey)
+                this.sortKeyChange.emit(this.sortKey);
+            this.sortDirChange.emit(dir);
+            const detail = { key: col.key, dir };
+            this.sortChanged.emit(detail);
+        };
+    }
+    onSelectedRowsChange() {
+        this.rev++;
+    }
+    onPistaChange(activa) {
+        var _a;
+        (_a = this.pista) === null || _a === void 0 ? void 0 : _a.setActiva(activa);
+    }
+    /** Reconexión (el nodo se movió en el DOM): `componentDidLoad` no vuelve a correr. */
+    connectedCallback() {
+        if (this.scrollEl)
+            this.conectar();
+    }
+    componentDidLoad() {
+        this.conectar();
+    }
+    conectar() {
+        const el = this.scrollEl;
+        if (!el || this.pista)
+            return;
+        this.pista = new pistaDeScrollMarco.SuiPistaDeScroll(el, (e) => (this.pistaEstado = e), this.pistaDeScroll);
+        this.unbindTouch = bindTouchScroll(el);
+    }
+    /** Columnas/filas/size cambian el ancho del contenido sin cambiar el del scroller: el ResizeObserver no lo ve. */
+    componentDidRender() {
+        var _a;
+        (_a = this.pista) === null || _a === void 0 ? void 0 : _a.medir();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.pista) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.pista = undefined;
+        (_b = this.unbindTouch) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.unbindTouch = undefined;
+    }
+    /** Si la columna tiene sort activo. */
+    isSortActive(key) {
+        return this.sortKey === key;
+    }
+    // ── Selection ─────────────────────────────────────────────────────────────
+    /** Obtiene el rowKey de una fila (key | funcion | indice). */
+    getRowKey(row, index) {
+        const rk = this.rowKey;
+        if (rk === null || rk === undefined)
+            return index;
+        if (typeof rk === 'function')
+            return rk(row);
+        return row[rk];
+    }
+    /** Toggle de seleccion de una fila. Reemplaza el Set (nueva identidad). */
+    toggleRow(row, index) {
+        const k = this.getRowKey(row, index);
+        const next = new Set(this.selectedRows);
+        if (next.has(k)) {
+            next.delete(k);
+        }
+        else {
+            next.add(k);
+        }
+        this.emitSelection(next);
+    }
+    emitSelection(next) {
+        this.selectedRows = next;
+        this.selectedRowsChange.emit(next);
+    }
+    /** Selecciona / deselecciona todas las filas. */
+    toggleAll() {
+        var _a;
+        const all = (_a = this.rows) !== null && _a !== void 0 ? _a : [];
+        const allSelected = this.selectedRows.size === all.length && all.length > 0;
+        this.emitSelection(allSelected ? new Set() : new Set(all.map((r, i) => this.getRowKey(r, i))));
+    }
+    /** True si TODAS las filas estan seleccionadas. */
+    get allSelected() {
+        var _a;
+        const all = (_a = this.rows) !== null && _a !== void 0 ? _a : [];
+        return all.length > 0 && this.selectedRows.size === all.length;
+    }
+    /** True si hay seleccion parcial (indeterminate). */
+    get partialSelected() {
+        var _a;
+        const all = (_a = this.rows) !== null && _a !== void 0 ? _a : [];
+        return this.selectedRows.size > 0 && this.selectedRows.size < all.length;
+    }
+    // ── Cell rendering ──────────────────────────────────────────────────────
+    /** Valor de celda como string ('' si null/undefined). */
+    getCellValue(row, key) {
+        const val = row === null || row === void 0 ? void 0 : row[key];
+        if (val === null || val === undefined)
+            return '';
+        return String(val);
+    }
+    /** Sub-texto (2da linea) — '' si la columna no define descriptionKey. */
+    getCellDescription(row, col) {
+        return col.descriptionKey ? this.getCellValue(row, col.descriptionKey) : '';
+    }
+    /** Prioridad de la celda (default 'regular'). */
+    cellPriority(col) {
+        var _a;
+        return (_a = col.priority) !== null && _a !== void 0 ? _a : 'regular';
+    }
+    /**
+     * min-width inline de una columna para el modo scroll horizontal (mobile).
+     * Precedencia: minWidth explicito > width explicito > undefined. Bloquear el
+     * min-width al width en columnas fijas evita que el default de scroll-mode del
+     * SCSS (120px) ensanche columnas angostas (ej. acciones width:64px).
+     */
+    colMinWidth(col) {
+        var _a, _b;
+        return (_b = (_a = col.minWidth) !== null && _a !== void 0 ? _a : col.width) !== null && _b !== void 0 ? _b : undefined;
+    }
+    /** True si alguna columna pide sticky (activa el modo scroll-sticky). */
+    get hasStickyColumn() {
+        var _a;
+        return ((_a = this.columns) !== null && _a !== void 0 ? _a : []).some((c) => c.sticky === true);
+    }
+    /**
+     * Detecta si el consumer proyecto contenido custom para una celda via slot
+     * declarativo: `cell-<key>-<rowIndex>` (especifico por fila) o `cell-<key>`
+     * (compartido por todas las filas). Equivale al `getTemplate(key)` del Angular.
+     * Se consulta el light DOM del host (scoped) buscando un hijo con ese `slot`.
+     */
+    slotNameFor(col, rowIndex) {
+        const perRow = `cell-${col.key}-${rowIndex}`;
+        const shared = `cell-${col.key}`;
+        if (this.el.querySelector(`[slot="${perRow}"]`))
+            return perRow;
+        if (this.el.querySelector(`[slot="${shared}"]`))
+            return shared;
+        return null;
+    }
+    // ── Render helpers ────────────────────────────────────────────────────────
+    /** Estilos de ancho/flex inline comunes a header-cell y cell. */
+    colStyle(col) {
+        const style = {};
+        if (col.width) {
+            style.width = col.width;
+            style.flex = `0 0 ${col.width}`;
+        }
+        else {
+            style.flex = '1';
+        }
+        const min = this.colMinWidth(col);
+        if (min)
+            style['min-width'] = min;
+        if (col.maxWidth)
+            style['max-width'] = col.maxWidth;
+        return style;
+    }
+    renderHeader() {
+        var _a;
+        return (index.h("div", { class: "sui-table__header" }, this.selectable && (index.h("div", { class: "sui-table__header-cell sui-table__header-cell--checkbox" }, index.h("sui-checkbox", { checked: this.allSelected, indeterminate: this.partialSelected, "aria-label": "Seleccionar todas las filas", onSuiChange: () => this.toggleAll(), onClick: (e) => e.stopPropagation() }))), ((_a = this.columns) !== null && _a !== void 0 ? _a : []).map((col) => {
+            const sortable = !!col.sortable && !col.disabled;
+            const active = this.isSortActive(col.key);
+            const cls = {
+                'sui-table__header-cell': true,
+                'sui-table__header-cell--sortable': sortable,
+                'sui-table__header-cell--sorted': active,
+                'sui-table__header-cell--disabled': !!col.disabled,
+                'sui-table__header-cell--center': col.align === 'center',
+                'sui-table__header-cell--right': col.align === 'right',
+                'sui-table__header-cell--empty': !col.label,
+                'sui-table__header-cell--sticky': !!col.sticky,
+            };
+            const ariaSort = col.sortable
+                ? active
+                    ? this.sortDir === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : 'none'
+                : undefined;
+            return (index.h("div", { class: cls, style: this.colStyle(col), tabindex: sortable ? '0' : undefined, role: col.sortable ? 'columnheader' : undefined, "aria-disabled": col.disabled ? 'true' : undefined, "aria-sort": ariaSort, onClick: () => !col.disabled && this.onSort(col), onTouchStart: () => undefined, onTouchEnd: (e) => e.currentTarget.blur(), onKeyDown: (e) => {
+                    if (col.disabled)
+                        return;
+                    if (e.key === 'Enter') {
+                        this.onSort(col);
+                    }
+                    else if (e.key === ' ' || e.key === 'Spacebar') {
+                        e.preventDefault();
+                        this.onSort(col);
+                    }
+                } }, col.label && index.h("span", { class: "sui-table__header-label" }, col.label), col.sortable && (index.h("span", { class: {
+                    'sui-table__sort-icon': true,
+                    'sui-table__sort-icon--active': active,
+                } }, !active ? (index.h("sui-icon", { name: "expand-up-down-line", size: 20 })) : this.sortDir === 'asc' ? (index.h("sui-icon", { name: "arrow-up-s-fill", size: 20 })) : (index.h("sui-icon", { name: "arrow-down-s-fill", size: 20 }))))));
+        })));
+    }
+    renderSkeleton() {
+        return (index.h("div", { class: "sui-table__body" }, this.skeletonRows.map((sk) => {
+            var _a;
+            return (index.h("div", { class: "sui-table__row sui-table__row--skeleton", key: `sk-${sk}` }, this.selectable && (index.h("div", { class: "sui-table__cell sui-table__cell--checkbox" }, index.h("span", { class: "sui-table__skeleton-box sui-table__skeleton-box--sm" }))), ((_a = this.columns) !== null && _a !== void 0 ? _a : []).map((col) => (index.h("div", { class: {
+                    'sui-table__cell': true,
+                    'sui-table__cell--sticky': !!col.sticky,
+                }, style: this.colStyle(col) }, index.h("span", { class: "sui-table__skeleton-box" }))))));
+        })));
+    }
+    renderEmpty() {
+        return (index.h("div", { class: "sui-table__empty" }, index.h("sui-icon", { name: "inbox-line", size: 40, class: "sui-table__empty-icon" }), index.h("p", { class: "sui-table__empty-msg" }, this.emptyMessage)));
+    }
+    renderCellContent(row, col, rowIndex) {
+        // (1) render programatico (callback) — equivale al ng-template del Angular.
+        if (typeof col.renderCell === 'function') {
+            return col.renderCell(row, rowIndex);
+        }
+        // (2) slot declarativo proyectado por el consumer.
+        const slotName = this.slotNameFor(col, rowIndex);
+        if (slotName) {
+            return index.h("slot", { name: slotName });
+        }
+        // (3) texto + sub-texto (Figma Priority=Leading, 2da linea XSmall).
+        const desc = this.getCellDescription(row, col);
+        const value = this.getCellValue(row, col.key);
+        if (desc) {
+            return (index.h("span", { class: "sui-table__cell-block" }, col.truncate ? (index.h("sui-tooltip", { content: value, position: "top" }, index.h("span", { class: "sui-table__cell-text sui-table__cell-text--truncate" }, value))) : (index.h("span", { class: "sui-table__cell-text" }, value)), index.h("span", { class: "sui-table__cell-desc" }, desc)));
+        }
+        // (4) texto truncado + tooltip con el valor completo.
+        if (col.truncate) {
+            return (index.h("sui-tooltip", { content: value, position: "top" }, index.h("span", { class: "sui-table__cell-text sui-table__cell-text--truncate" }, value)));
+        }
+        // (5) texto por defecto.
+        return index.h("span", { class: "sui-table__cell-text" }, value);
+    }
+    renderBody() {
+        var _a;
+        const rows = (_a = this.rows) !== null && _a !== void 0 ? _a : [];
+        return (index.h("div", { class: "sui-table__body" }, rows.map((row, i) => {
+            var _a;
+            return [
+                index.h("div", { class: {
+                        'sui-table__row': true,
+                        'sui-table__row--selected': this.selectedRows.has(this.getRowKey(row, i)),
+                        'sui-table__row--striped': this.striped && i % 2 === 1,
+                    }, key: `row-${this.getRowKey(row, i)}`, onClick: () => this.rowClicked.emit(row) }, this.selectable && (index.h("div", { class: "sui-table__cell sui-table__cell--checkbox", onClick: (e) => e.stopPropagation() }, index.h("sui-checkbox", { checked: this.selectedRows.has(this.getRowKey(row, i)), "aria-label": "Seleccionar fila", onSuiChange: () => this.toggleRow(row, i) }))), ((_a = this.columns) !== null && _a !== void 0 ? _a : []).map((col) => (index.h("div", { class: {
+                        'sui-table__cell': true,
+                        'sui-table__cell--center': col.align === 'center',
+                        'sui-table__cell--right': col.align === 'right',
+                        'sui-table__cell--sticky': !!col.sticky,
+                        'sui-table__cell--leading': this.cellPriority(col) === 'leading',
+                        'sui-table__cell--passive': this.cellPriority(col) === 'passive',
+                        'sui-table__cell--none': this.cellPriority(col) === 'none',
+                    }, style: this.colStyle(col) }, this.renderCellContent(row, col, i))))),
+                // Divider (no despues de la ultima fila).
+                i < rows.length - 1 && index.h("div", { class: "sui-table__divider" }),
+            ];
+        })));
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: 'd1d4bc75bcd5a3fb47bfd5ddb0490dc6b2dcf62a', "data-sui-size": this.size, "data-sui-striped": this.striped ? '' : undefined, "data-sui-selectable": this.selectable ? '' : undefined, "data-sui-loading": this.loading ? '' : undefined, "data-sui-sticky": this.hasStickyColumn ? '' : undefined }, index.h("div", { key: '73326540399beb8d4ca707c9cd04bfd1b1878c87', class: "sui-pista sui-table__pista" }, index.h("div", { key: 'dfdba9e05edc49c947334999082952a2d14194da', class: "sui-table", ref: (node) => (this.scrollEl = node) }, this.renderHeader(), this.loading
+            ? this.renderSkeleton()
+            : ((_a = this.rows) !== null && _a !== void 0 ? _a : []).length === 0
+                ? this.renderEmpty()
+                : this.renderBody()), index.h(pistaDeScrollMarco.PistaMarco, { key: '20b69ca35042a83c99c2b43e9d8229c974cba2ed', estado: this.pistaEstado, pista: this.pista, ocultarInicio: this.hasStickyColumn }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selectedRows": [{
+                "onSelectedRowsChange": 0
+            }],
+        "pistaDeScroll": [{
+                "onPistaChange": 0
+            }]
+    }; }
+};
+SuiTable.style = suiTableCss();
+
+exports.sui_table = SuiTable;