@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiBreadcrumbsCss = () => `@charset "UTF-8";.sc-sui-breadcrumbs-h{display:inline-flex;align-items:center;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-breadcrumbs__list.sc-sui-breadcrumbs{display:inline-flex;align-items:flex-start;gap:6px;list-style:none;margin:0;padding:0}.sui-breadcrumbs__item.sc-sui-breadcrumbs{display:inline-flex;align-items:center;gap:6px}.sui-breadcrumbs__divider.sc-sui-breadcrumbs{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sui-icon-disabled-300);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)}.sui-breadcrumbs__divider-glyph.sc-sui-breadcrumbs{display:inline-flex;align-items:center;justify-content:center;width:20px;text-align:center;color:var(--sui-text-disabled-300);user-select:none}`;
+
+const SuiBreadcrumbs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.navigate = index.createEvent(this, "navigate");
+        /** Entradas a renderizar (data-driven). Requerido — pasar como propiedad JS. */
+        this.items = [];
+        /**
+         * Glifo divisor entre items. Default `arrow`. No se reflexiona como atributo
+         * `divider`: el host expone el contrato vía `data-sui-divider` (igual que el
+         * Angular original), seteado en el render.
+         */
+        this.divider = 'arrow';
+        /** aria-label del `<nav>`. Default «Ruta de navegación» (en Angular sale de provideSuiTextos → navegacion.migas). */
+        this.navLabel = 'Ruta de navegación';
+    }
+    /**
+     * Determina si un entry es active: override explícito (`entry.active`) o, en
+     * su ausencia, el último del array. Espeja el `it.active ?? i === lastIdx`
+     * del Angular (override aditivo, no exclusivo).
+     */
+    isActive(entry, index, lastIdx) {
+        var _a;
+        return (_a = entry.active) !== null && _a !== void 0 ? _a : index === lastIdx;
+    }
+    onItemClicked(entry) {
+        this.navigate.emit(entry);
+    }
+    /** Glifo del divider (slash / dot). Arrow se renderiza como `<sui-icon>`. */
+    renderDivider() {
+        if (this.divider === 'arrow') {
+            return index.h("sui-icon", { name: "arrow-right-s-line", size: 20 });
+        }
+        // slash → '/'  ·  dot → '•' (BULLET U+2022, NO middot U+00B7)
+        const glyph = this.divider === 'slash' ? '/' : '•';
+        return index.h("span", { class: "sui-breadcrumbs__divider-glyph" }, glyph);
+    }
+    render() {
+        const list = this.items;
+        const lastIdx = list.length - 1;
+        return (index.h(index.Host, { key: 'b89c7a93e2da17583f49404a5e383fd79a577f62', role: "navigation", "aria-label": this.navLabel, "data-sui-divider": this.divider }, index.h("ol", { key: '64ff35bcc7326cd0040f9335574d3549fc7ad4f1', class: "sui-breadcrumbs__list" }, list.map((entry, i) => {
+            var _a, _b, _c, _d;
+            const isLast = i === lastIdx;
+            return (index.h("li", { class: "sui-breadcrumbs__item", key: i }, index.h("sui-breadcrumb-item", { label: (_a = entry.label) !== null && _a !== void 0 ? _a : '', icon: (_b = entry.icon) !== null && _b !== void 0 ? _b : '', href: (_c = entry.href) !== null && _c !== void 0 ? _c : '', active: this.isActive(entry, i, lastIdx), ariaLabel: (_d = entry.ariaLabel) !== null && _d !== void 0 ? _d : '', onClicked: () => this.onItemClicked(entry) }), !isLast && (index.h("span", { class: "sui-breadcrumbs__divider", "aria-hidden": "true" }, this.renderDivider()))));
+        }))));
+    }
+};
+SuiBreadcrumbs.style = suiBreadcrumbsCss();
+
+exports.sui_breadcrumbs = SuiBreadcrumbs;

package/dist/cjs/sui-button-group-item.cjs.entry.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiButtonGroupItemCss = () => `@charset "UTF-8";.sc-sui-button-group-item-h{display:inline-flex;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-button-group-item__inner.sc-sui-button-group-item{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;appearance:none;background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-sizing:border-box;color:var(--sui-text-sub-600);text-align:center;cursor:pointer;overflow:clip;white-space:nowrap;font-family:inherit;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);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-button-group-item__inner.sc-sui-button-group-item:active{transform:none}[data-sui-first][data-sui-size=small].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-first][data-sui-size=xsmall].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-left-radius:var(--sui-radius-8);border-bottom-left-radius:var(--sui-radius-8)}[data-sui-last][data-sui-size=small].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-last][data-sui-size=xsmall].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-right-radius:var(--sui-radius-8);border-bottom-right-radius:var(--sui-radius-8)}[data-sui-first][data-sui-size="2xsmall"].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-left-radius:var(--sui-radius-6);border-bottom-left-radius:var(--sui-radius-6)}[data-sui-last][data-sui-size="2xsmall"].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-right-radius:var(--sui-radius-6);border-bottom-right-radius:var(--sui-radius-6)}[data-sui-size=small].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{gap:8px;padding:7px 16px;min-height:36px}[data-sui-size=small][data-sui-icons=left].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-size=small][data-sui-icons=right].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:7px 14px}[data-sui-size=small][data-sui-icons=both].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:7px 8px}[data-sui-size=small][data-sui-icons=only].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:8px;width:36px;height:36px}[data-sui-size=xsmall].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{gap:6px;padding:5px 14px;min-height:32px}[data-sui-size=xsmall][data-sui-icons=left].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-size=xsmall][data-sui-icons=right].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:5px 12px}[data-sui-size=xsmall][data-sui-icons=both].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:5px 6px}[data-sui-size=xsmall][data-sui-icons=only].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:6px;width:32px;height:32px}[data-sui-size="2xsmall"].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{gap:4px;padding:3px 12px;min-height:24px;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)}[data-sui-size="2xsmall"][data-sui-icons=left].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-size="2xsmall"][data-sui-icons=right].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:3px 10px}[data-sui-size="2xsmall"][data-sui-icons=both].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:3px 4px}[data-sui-size="2xsmall"][data-sui-icons=only].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:4px;width:24px;height:24px}[data-sui-size=medium].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{gap:8px;padding:9px 18px;min-height:40px}[data-sui-size=medium][data-sui-icons=left].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-size=medium][data-sui-icons=right].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:9px 16px}[data-sui-size=medium][data-sui-icons=both].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:9px}[data-sui-size=medium][data-sui-icons=only].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:9px;width:40px;height:40px}[data-sui-size=large].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{gap:8px;padding:11px 20px;min-height:48px;font-size:var(--sui-type-label-md-size);font-weight:var(--sui-type-label-md-weight);line-height:var(--sui-type-label-md-line);letter-spacing:var(--sui-type-label-md-spacing)}[data-sui-size=large][data-sui-icons=left].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item,[data-sui-size=large][data-sui-icons=right].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:11px 18px}[data-sui-size=large][data-sui-icons=both].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:11px}[data-sui-size=large][data-sui-icons=only].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{padding:11px;width:48px;height:48px}[data-sui-first][data-sui-size=medium].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-left-radius:var(--sui-radius-10);border-bottom-left-radius:var(--sui-radius-10)}[data-sui-last][data-sui-size=medium].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-right-radius:var(--sui-radius-10);border-bottom-right-radius:var(--sui-radius-10)}[data-sui-first][data-sui-size=large].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-left-radius:var(--sui-radius-12);border-bottom-left-radius:var(--sui-radius-12)}[data-sui-last][data-sui-size=large].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{border-top-right-radius:var(--sui-radius-12);border-bottom-right-radius:var(--sui-radius-12)}[data-sui-state=default].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item:hover{background:var(--sui-bg-weak-50)}[data-sui-state=active].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}[data-sui-state=disabled].sc-sui-button-group-item-h .sui-button-group-item__inner.sc-sui-button-group-item{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-disabled-300);pointer-events:none}.sui-button-group-item__inner.sc-sui-button-group-item:focus-visible{outline:2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));outline-offset:-2px;z-index:1;position:relative}.sui-button-group-item__icon.sc-sui-button-group-item{flex-shrink:0}.sui-button-group-item__label.sc-sui-button-group-item{display:inline-flex;align-items:center}`;
+
+const SuiButtonGroupItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clicked = index.createEvent(this, "clicked");
+        /** Texto del item. Omitible para render icon-only (debe pasar leftIcon o rightIcon entonces). */
+        this.label = '';
+        /** Nombre RemixIcon del ícono leading (ej. 'home-line'). Vacío → sin ícono. */
+        this.leftIcon = '';
+        /** Nombre RemixIcon del ícono trailing. Vacío → sin ícono. */
+        this.rightIcon = '';
+        /** Tamaño. Default `small` (36px). `medium` (40) y `large` (48) son la extensión SUI para tocar con el dedo en mobile. */
+        this.size = 'small';
+        /** Marca como seleccionado (state="active"). Default `false`. */
+        this.active = false;
+        /** Deshabilitado: bloquea click, sin border, no clickable. Default `false`. */
+        this.disabled = false;
+        /** aria-label para icon-only buttons. */
+        this.ariaLabel = '';
+        this.onClick = () => {
+            if (this.disabled)
+                return;
+            this.clicked.emit();
+        };
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline para que `:active` dispare/libere correctamente.
+     */
+    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() {
+        const inner = this.el.querySelector('.sui-button-group-item__inner');
+        inner === null || inner === void 0 ? void 0 : inner.blur();
+    }
+    /** Estado del data-attribute para CSS scoping (disabled gana sobre active). */
+    get state() {
+        if (this.disabled)
+            return 'disabled';
+        if (this.active)
+            return 'active';
+        return 'default';
+    }
+    /** True cuando solo tiene icon (left o right) sin label. */
+    get onlyIcon() {
+        const hasLabel = this.label.trim().length > 0;
+        const hasIcon = this.leftIcon.trim().length > 0 || this.rightIcon.trim().length > 0;
+        return !hasLabel && hasIcon;
+    }
+    /**
+     * Layout de iconos para padding adaptativo (Figma 226:4669):
+     *   - 'none'  → text-only:    padding px completo
+     *   - 'left'  → solo left:    px reducido
+     *   - 'right' → solo right:   px reducido
+     *   - 'both'  → ambos iconos: padding cuadrado (p)
+     *   - 'only'  → icon-only:    padding cuadrado (p) → square box
+     */
+    get iconLayout() {
+        const hasLabel = this.label.trim().length > 0;
+        const hasLeft = this.leftIcon.trim().length > 0;
+        const hasRight = this.rightIcon.trim().length > 0;
+        if (!hasLabel && (hasLeft || hasRight))
+            return 'only';
+        if (hasLeft && hasRight)
+            return 'both';
+        if (hasLeft)
+            return 'left';
+        if (hasRight)
+            return 'right';
+        return 'none';
+    }
+    /** Tamaño del icono en px: 20 en large/medium/small/xsmall (el ícono que acompaña texto no escala, igual que sui-button), 16 en 2xsmall. */
+    get iconSize() {
+        return this.size === '2xsmall' ? 16 : 20;
+    }
+    render() {
+        const iconSize = this.iconSize;
+        return (index.h(index.Host, { key: '79dd579cd45ff269bc58ff38c49de0f856b9bc8b', "data-sui-size": this.size, "data-sui-state": this.state, "data-sui-only-icon": this.onlyIcon ? '' : null, "data-sui-icons": this.iconLayout }, index.h("button", { key: '606330214a4200b5be1c3b03f6de62133da4975f', type: "button", class: "sui-button-group-item__inner", disabled: this.disabled || undefined, "aria-label": this.ariaLabel || undefined, "aria-pressed": this.active ? 'true' : 'false', onClick: this.onClick }, this.leftIcon && (index.h("sui-icon", { key: '59d70f95c1b01b1c4297a4ed51d492be6b9264f8', class: "sui-button-group-item__icon", name: this.leftIcon, size: iconSize })), this.label && index.h("span", { key: 'fe2c7f7fa6a8153c88d139383040b99324f2cc27', class: "sui-button-group-item__label" }, this.label), this.rightIcon && (index.h("sui-icon", { key: 'd9785937129eebb27284d461d0a549a032a71229', class: "sui-button-group-item__icon", name: this.rightIcon, size: iconSize })))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiButtonGroupItem.style = suiButtonGroupItemCss();
+
+exports.sui_button_group_item = SuiButtonGroupItem;

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiButtonGroupCss = () => `@charset "UTF-8";.sc-sui-button-group-h{display:inline-flex;align-items:flex-start;overflow:clip;box-sizing:border-box;isolation:isolate}[data-sui-size=small].sc-sui-button-group-h,[data-sui-size=xsmall].sc-sui-button-group-h{border-radius:var(--sui-radius-8)}[data-sui-size=medium].sc-sui-button-group-h{border-radius:var(--sui-radius-10)}[data-sui-size=large].sc-sui-button-group-h{border-radius:var(--sui-radius-12)}[data-sui-size="2xsmall"].sc-sui-button-group-h{flex-wrap:wrap;align-content:flex-start;gap:0;border-radius:var(--sui-radius-6)}.sui-button-group__item.sc-sui-button-group{margin-left:-1px}.sui-button-group__item[data-sui-first].sc-sui-button-group{margin-left:0}`;
+
+const SuiButtonGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.suiChange = index.createEvent(this, "suiChange");
+        this.valueChange = index.createEvent(this, "valueChange");
+        /** Entradas a renderizar (data-driven). Requerido. */
+        this.items = [];
+        /** Tamaño de los items. Default `small` (36px). `medium` (40, radius 10) y `large` (48, radius 12): extensión SUI para mobile. */
+        this.size = 'small';
+        /**
+         * Permite seleccionar múltiples items simultáneamente.
+         * - false (default): single-select, `value` es `string`.
+         * - true: multi-select, `value` es `string[]`.
+         */
+        this.multi = false;
+        /**
+         * Valor seleccionado (≈ el `[(value)]` model de Angular). Mutable.
+         * En single: string del item active. En multi: string[] de items active.
+         * En single, si value es null/'' nada está seleccionado.
+         */
+        this.value = '';
+        /** aria-label del group. Default ''. */
+        this.ariaLabel = '';
+    }
+    /** Set de valores selected (memo) para lookup O(1) por item. */
+    get selectedSet() {
+        const v = this.value;
+        if (Array.isArray(v))
+            return new Set(v);
+        if (typeof v === 'string' && v.length > 0)
+            return new Set([v]);
+        return new Set();
+    }
+    isActive(entry) {
+        return this.selectedSet.has(entry.value);
+    }
+    onItemClicked(entry) {
+        if (entry.disabled)
+            return;
+        if (this.multi) {
+            const next = new Set(this.selectedSet);
+            if (next.has(entry.value)) {
+                next.delete(entry.value);
+            }
+            else {
+                next.add(entry.value);
+            }
+            const arr = Array.from(next);
+            this.value = arr;
+            this.valueChange.emit(arr);
+            this.suiChange.emit(arr);
+        }
+        else {
+            // Single select: si ya está active, no hacer nada (no permite "deselect"
+            // tocando el mismo — patrón típico segmented control).
+            if (this.isActive(entry))
+                return;
+            this.value = entry.value;
+            this.valueChange.emit(entry.value);
+            this.suiChange.emit(entry.value);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '7816640e2669de909d31f833325ea1834467cf66', role: "group", "data-sui-size": this.size, "data-sui-multi": this.multi ? '' : null, "aria-label": this.ariaLabel || null }, this.items.map((entry, i) => {
+            var _a, _b, _c, _d, _e;
+            return (index.h("sui-button-group-item", { key: entry.value, class: "sui-button-group__item", "data-sui-first": i === 0 ? '' : null, "data-sui-last": i === this.items.length - 1 ? '' : null, size: this.size, label: (_a = entry.label) !== null && _a !== void 0 ? _a : '', leftIcon: (_b = entry.leftIcon) !== null && _b !== void 0 ? _b : '', rightIcon: (_c = entry.rightIcon) !== null && _c !== void 0 ? _c : '', active: this.isActive(entry), disabled: (_d = entry.disabled) !== null && _d !== void 0 ? _d : false, ariaLabel: (_e = entry.ariaLabel) !== null && _e !== void 0 ? _e : '', onClicked: () => this.onItemClicked(entry) }));
+        })));
+    }
+};
+SuiButtonGroup.style = suiButtonGroupCss();
+
+exports.sui_button_group = SuiButtonGroup;

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

@@ -0,0 +1,113 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiButtonCss = () => `@charset "UTF-8";.sc-sui-button-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid transparent;cursor:pointer;white-space:nowrap;vertical-align:middle;user-select:none;text-decoration:none;outline:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), border-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), box-shadow var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out), transform var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sc-sui-button-h:active:not([data-sui-disabled]){transform:scale(0.96)}.sc-sui-button-h{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}.sui-button__label.sc-sui-button{display:block;text-box:trim-both cap alphabetic}.sc-sui-button-h .sui-button__icon.sc-sui-button,.sc-sui-button-s>[slot=start],.sc-sui-button-s>[slot=end]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--sui-icon-size-md);height:var(--sui-icon-size-md)}[data-sui-size="2xsmall"].sc-sui-button-h{height:28px;padding:4px 6px;gap:6px;border-radius:999px}[data-sui-size=xsmall].sc-sui-button-h{height:32px;padding:6px;gap:6px;border-radius:999px}[data-sui-size=small].sc-sui-button-h{height:36px;padding:8px;gap:8px;border-radius:999px}[data-sui-size=medium].sc-sui-button-h{height:40px;padding:10px;gap:8px;border-radius:999px}[data-sui-size=large].sc-sui-button-h{height:48px;padding:12px 18px;gap:8px;border-radius:999px;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=xlarge].sc-sui-button-h{height:52px;padding:14px 20px;gap:8px;border-radius:999px;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-only-icon].sc-sui-button-h{gap:0}[data-sui-only-icon][data-sui-size="2xsmall"].sc-sui-button-h{width:28px;padding:4px}[data-sui-only-icon][data-sui-size=xsmall].sc-sui-button-h{width:32px;padding:6px}[data-sui-only-icon][data-sui-size=small].sc-sui-button-h{width:36px;padding:8px}[data-sui-only-icon][data-sui-size=medium].sc-sui-button-h{width:40px;padding:10px}[data-sui-only-icon][data-sui-size=large].sc-sui-button-h{width:48px;padding:12px}[data-sui-only-icon][data-sui-size=xlarge].sc-sui-button-h{width:52px;padding:14px}[data-sui-color=primary][data-sui-variant=filled].sc-sui-button-h{background:var(--sui-primary-base);border-color:transparent;color:var(--sui-static-white)}[data-sui-color=primary][data-sui-variant=filled].sc-sui-button-h:hover{background:var(--sui-primary-dark)}[data-sui-color=primary][data-sui-variant=filled].sc-sui-button-h:active,[data-sui-color=primary][data-sui-variant=filled].sc-sui-button-h:focus-visible{background:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}[data-sui-color=error][data-sui-variant=filled].sc-sui-button-h{background:var(--sui-state-error-base);border-color:transparent;color:var(--sui-static-white)}[data-sui-color=error][data-sui-variant=filled].sc-sui-button-h:hover{background:var(--sui-red-700)}[data-sui-color=error][data-sui-variant=filled].sc-sui-button-h:active,[data-sui-color=error][data-sui-variant=filled].sc-sui-button-h:focus-visible{background:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-10)}[data-sui-color=neutral][data-sui-variant=filled].sc-sui-button-h{background:var(--sui-bg-strong-950);border-color:transparent;color:var(--sui-text-white-0)}[data-sui-color=neutral][data-sui-variant=filled].sc-sui-button-h:hover{background:var(--sui-bg-surface-800)}[data-sui-color=neutral][data-sui-variant=filled].sc-sui-button-h:active,[data-sui-color=neutral][data-sui-variant=filled].sc-sui-button-h:focus-visible{background:var(--sui-bg-surface-800);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}[data-sui-variant=stroke].sc-sui-button-h{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-sub-600);box-shadow:var(--sui-regular-shadow-x-small)}[data-sui-variant=stroke].sc-sui-button-h:hover{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-strong-950)}[data-sui-variant=stroke].sc-sui-button-h:active,[data-sui-variant=stroke].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}[data-sui-color=primary][data-sui-variant=stroke].sc-sui-button-h{border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:none}[data-sui-color=primary][data-sui-variant=stroke].sc-sui-button-h:hover{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}[data-sui-color=primary][data-sui-variant=stroke].sc-sui-button-h:active,[data-sui-color=primary][data-sui-variant=stroke].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}[data-sui-color=error][data-sui-variant=stroke].sc-sui-button-h{border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:none}[data-sui-color=error][data-sui-variant=stroke].sc-sui-button-h:hover{background:var(--sui-red-alpha-10);border-color:transparent;color:var(--sui-state-error-base)}[data-sui-color=error][data-sui-variant=stroke].sc-sui-button-h:active,[data-sui-color=error][data-sui-variant=stroke].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-10)}[data-sui-color=primary][data-sui-variant=lighter].sc-sui-button-h{background:var(--sui-primary-alpha-10);border-color:transparent;color:var(--sui-primary-base)}[data-sui-color=primary][data-sui-variant=lighter].sc-sui-button-h:hover{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base)}[data-sui-color=primary][data-sui-variant=lighter].sc-sui-button-h:active,[data-sui-color=primary][data-sui-variant=lighter].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}[data-sui-color=neutral][data-sui-variant=lighter].sc-sui-button-h{background:var(--sui-bg-weak-50);border-color:transparent;color:var(--sui-text-sub-600)}[data-sui-color=neutral][data-sui-variant=lighter].sc-sui-button-h:hover{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-soft-200);color:var(--sui-text-strong-950);box-shadow:var(--sui-regular-shadow-x-small)}[data-sui-color=neutral][data-sui-variant=lighter].sc-sui-button-h:active,[data-sui-color=neutral][data-sui-variant=lighter].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}[data-sui-color=error][data-sui-variant=lighter].sc-sui-button-h{background:var(--sui-state-error-lighter);border-color:transparent;color:var(--sui-state-error-base)}[data-sui-color=error][data-sui-variant=lighter].sc-sui-button-h:hover{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base)}[data-sui-color=error][data-sui-variant=lighter].sc-sui-button-h:active,[data-sui-color=error][data-sui-variant=lighter].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-10)}[data-sui-color=primary][data-sui-variant=ghost].sc-sui-button-h{background:transparent;border-color:transparent;color:var(--sui-primary-base)}[data-sui-color=primary][data-sui-variant=ghost].sc-sui-button-h:hover{background:var(--sui-primary-alpha-10)}[data-sui-color=primary][data-sui-variant=ghost].sc-sui-button-h:active,[data-sui-color=primary][data-sui-variant=ghost].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-primary-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-primary-alpha-10)}[data-sui-color=neutral][data-sui-variant=ghost].sc-sui-button-h{background:transparent;border-color:transparent;color:var(--sui-text-sub-600)}[data-sui-color=neutral][data-sui-variant=ghost].sc-sui-button-h:hover{background:var(--sui-bg-weak-50);color:var(--sui-text-strong-950)}[data-sui-color=neutral][data-sui-variant=ghost].sc-sui-button-h:active,[data-sui-color=neutral][data-sui-variant=ghost].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-stroke-strong-950);color:var(--sui-text-strong-950);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-slate-alpha-16)}[data-sui-color=error][data-sui-variant=ghost].sc-sui-button-h{background:transparent;border-color:transparent;color:var(--sui-state-error-base)}[data-sui-color=error][data-sui-variant=ghost].sc-sui-button-h:hover{background:var(--sui-state-error-lighter)}[data-sui-color=error][data-sui-variant=ghost].sc-sui-button-h:active,[data-sui-color=error][data-sui-variant=ghost].sc-sui-button-h:focus-visible{background:var(--sui-bg-white-0);border-color:var(--sui-state-error-base);box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-red-alpha-10)}[data-sui-disabled].sc-sui-button-h{background:var(--sui-bg-weak-50) !important;border-color:transparent !important;color:var(--sui-text-disabled-300) !important;cursor:not-allowed;pointer-events:none;box-shadow:none !important}`;
+
+const SuiButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Estilo visual del botón. Default `filled`. */
+        this.variant = 'filled';
+        /** Color semántico. Default `primary` (naranja brand). */
+        this.color = 'primary';
+        /** Tamaño. Default `medium` (40px). */
+        this.size = 'medium';
+        /** Botón solo-ícono: cuadrado, sin label. Default `false`. */
+        this.onlyIcon = false;
+        /** Deshabilitado: bloquea click, tokens grises, no focusable. Default `false`. */
+        this.disabled = false;
+        /** Ícono a la izquierda (nombre RemixIcon, ej. `ri-add-line`). Con `onlyIcon`, es el ícono que se muestra. */
+        this.leftIcon = null;
+        /** Ícono a la derecha (nombre RemixIcon). */
+        this.rightIcon = null;
+        this.spacePressed = false;
+        /**
+         * Como el host es un custom element (no `<button>`), `type="submit"` no
+         * dispara submit del form padre por sí solo. Cuando es `submit`/`reset`,
+         * el click busca el form más cercano y llama `requestSubmit()` / `reset()`.
+         * Default `button`.
+         */
+        this.type = 'button';
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` fuerza al
+     * browser a engage el touch event pipeline, lo cual hace que `:active`
+     * dispare y se libere correctamente. Sin esto, `:active` "stickea" 300-500ms
+     * en pages standalone (sin scroll container que prime el state machine).
+     */
+    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();
+    }
+    onClick(event) {
+        this.handleActivate(event);
+    }
+    /* Teclado (fix a11y del SUI Angular, 04-10-2026): el host no es un <button>
+       nativo, así que Enter/Espacio no generan click solos. Se despacha un click
+       real (lo escucha el consumidor y onClick para submit/reset). Enter en
+       keydown y Espacio en keyup, como el <button> nativo; Espacio hace
+       preventDefault en keydown para que la página no scrollee. */
+    onKeydown(event) {
+        if (event.target !== this.el)
+            return;
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            if (this.disabled || event.repeat)
+                return;
+            this.el.click();
+        }
+        else if (event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            if (this.disabled || event.repeat)
+                return;
+            this.spacePressed = true;
+        }
+    }
+    onKeyup(event) {
+        if (event.target !== this.el || (event.key !== ' ' && event.key !== 'Spacebar'))
+            return;
+        event.preventDefault();
+        if (!this.spacePressed)
+            return;
+        this.spacePressed = false;
+        if (this.disabled)
+            return;
+        this.el.click();
+    }
+    /**
+     * Intercepta el click (también el que despachan Enter/Espacio). Disabled bloquea todo. Cuando type=submit/reset
+     * busca el form padre y dispara requestSubmit()/reset() — sin esto un
+     * `<sui-button type="submit">` dentro de un `<form>` no dispararía submit
+     * (no es un `<button>` nativo).
+     */
+    handleActivate(event) {
+        if (this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            return;
+        }
+        if (this.type === 'button')
+            return;
+        const form = this.el.closest('form');
+        if (!form)
+            return;
+        if (this.type === 'submit') {
+            // requestSubmit dispara submit + valida el form; dispatchEvent('submit') no.
+            form.requestSubmit();
+        }
+        else if (this.type === 'reset') {
+            form.reset();
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f6e3bb915828e81d86be3976738695ed9cec46ca', role: "button", tabindex: this.disabled ? '-1' : '0', "aria-disabled": this.disabled ? 'true' : null, "data-sui-variant": this.variant, "data-sui-color": this.color, "data-sui-size": this.size, "data-sui-only-icon": this.onlyIcon ? '' : null, "data-sui-disabled": this.disabled ? '' : null }, this.leftIcon && index.h("sui-icon", { key: '75d1fe0da80756f9b4cc7e110ff7d32814396609', class: "sui-button__icon", name: this.leftIcon, size: 20 }), index.h("slot", { key: '6ad2a5057cab19bbe39b1ace902ba50495292b60', name: "start" }), !this.onlyIcon && (index.h("span", { key: 'a7315d0f1a88870d33151622ad7094fb97bcae64', class: "sui-button__label" }, index.h("slot", { key: '61168e6747ef08ce4a740abd769051dd1470ee50' }))), index.h("slot", { key: '66a99b94d1b1a0100904fda32e49b729d23d6eb1', name: "end" }), this.rightIcon && index.h("sui-icon", { key: '5ac0646aa51a372d842559c10951f63960052746', class: "sui-button__icon", name: this.rightIcon, size: 20 })));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiButton.style = suiButtonCss();
+
+exports.sui_button = SuiButton;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiCardCss = () => `@charset "UTF-8";.sc-sui-card-h{display:flex;flex-direction:column;box-sizing:border-box;background:var(--sui-bg-white-0);border-radius:var(--sui-radius-16);border:1px solid transparent;overflow:hidden;outline:none;transition:box-shadow 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), transform var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out)}[data-sui-variant=default].sc-sui-card-h{border-color:var(--sui-stroke-soft-200);box-shadow:var(--sui-shadow-x-small)}[data-sui-variant=elevated].sc-sui-card-h{border-color:var(--sui-card-elevated-border, transparent);box-shadow:var(--sui-shadow-medium)}[data-sui-variant=flat].sc-sui-card-h{border-color:var(--sui-stroke-soft-200);box-shadow:none}[data-sui-size=small].sc-sui-card-h{--sui-card-padding-x:16px;padding:16px;gap:12px}[data-sui-size=medium].sc-sui-card-h{--sui-card-padding-x:20px;padding:20px;gap:16px}[data-sui-size=large].sc-sui-card-h{--sui-card-padding-x:24px;padding:24px;gap:20px}[data-sui-size=xlarge].sc-sui-card-h{--sui-card-padding-x:28px;padding:28px;gap:24px}[data-sui-interactive].sc-sui-card-h{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}[data-sui-interactive].sc-sui-card-h:hover{transform:translateY(-1px)}[data-sui-interactive][data-sui-variant=default].sc-sui-card-h:hover{border-color:var(--sui-stroke-sub-300);box-shadow:var(--sui-shadow-medium)}[data-sui-interactive][data-sui-variant=elevated].sc-sui-card-h:hover{box-shadow:var(--sui-custom-shadow-large, var(--sui-shadow-medium))}[data-sui-interactive][data-sui-variant=flat].sc-sui-card-h:hover{border-color:var(--sui-stroke-sub-300);background:var(--sui-bg-weak-50, #f7f7f7)}@media (hover: hover) and (pointer: fine){[data-sui-interactive].sc-sui-card-h:active:not(:focus-visible){transform:scale(0.99)}}[data-sui-interactive].sc-sui-card-h:focus-visible{box-shadow:0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-state-information-base, #335cff)}.sc-sui-card-s>[slot=header]{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.sc-sui-card-s>[slot=footer]{display:flex;align-items:center;gap:12px}.sc-sui-card-s>[slot=media]{display:block;margin-left:calc(-1 * var(--sui-card-padding-x, 20px));margin-right:calc(-1 * var(--sui-card-padding-x, 20px));margin-bottom:calc(-1 * var(--sui-card-padding-x, 20px));overflow:hidden;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.sc-sui-card-s>[slot=media]:has(~[slot=footer]){margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.sui-card__body.sc-sui-card{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}`;
+
+const SuiCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Tratamiento visual de la superficie. Default `default`. */
+        this.variant = 'default';
+        /** Tamaño (padding × gap). Default `medium`. `xlarge` (28/24) es extensión del proyecto. */
+        this.size = 'medium';
+        /**
+         * Card como superficie de acción única: cursor pointer, hover lift, focus
+         * ring, role=button, tabindex=0 y el iOS :active fix. Default `false`.
+         */
+        this.interactive = false;
+    }
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` fuerza al
+     * browser a engage el touch event pipeline, lo cual hace que `:active` dispare
+     * y se libere correctamente. Sin esto, `:active` "stickea" 300-500ms en pages
+     * standalone. Sólo relevante cuando es interactive (sino el host no es
+     * focusable). no-op a propósito.
+     */
+    onTouchStart() {
+        /* presencia del binding = engage del touch pipeline iOS. */
+    }
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd() {
+        if (this.interactive)
+            this.el.blur();
+    }
+    /**
+     * Alias del API Angular: `<div sui-card-header>` (marker attr, sin `slot`)
+     * va al slot `header` — igual con media y footer. Corre antes del primer
+     * render, que es cuando Stencil reubica el contenido en los slots.
+     */
+    componentWillLoad() {
+        for (const child of Array.from(this.el.children)) {
+            const name = ['header', 'media', 'footer'].find(n => child.hasAttribute(`sui-card-${n}`));
+            if (name && !child.hasAttribute('slot'))
+                child.setAttribute('slot', name);
+        }
+    }
+    /**
+     * Enter / Espacio sobre la card interactiva → click en el host, como un
+     * <button>. Solo con el foco EN la card (una tecla dentro de un control
+     * proyectado es de ese control); Espacio no hace scroll y la tecla sostenida
+     * no repite.
+     */
+    onKeyActivate(event) {
+        if (!this.interactive || (event.key !== 'Enter' && event.key !== ' '))
+            return;
+        if (event.target !== this.el)
+            return;
+        event.preventDefault();
+        if (event.repeat)
+            return;
+        this.el.click();
+    }
+    render() {
+        return (index.h(index.Host, { key: '6fbf9962c1e86ffee67468d1268debaf2d053649', "data-sui-variant": this.variant, "data-sui-size": this.size, "data-sui-interactive": this.interactive ? '' : null, role: this.interactive ? 'button' : null, tabindex: this.interactive ? '0' : null }, index.h("slot", { key: '77a9af96b09cc4ff9200b75388b32c04d8a43ea2', name: "header" }), index.h("div", { key: '1bcff9bae26bc8243ac8779c177654aa0431ccd2', class: "sui-card__body" }, index.h("slot", { key: 'ed95a143a2bf0dd305b8004682769dd6deffa328' })), index.h("slot", { key: '09a4c02b98b8c22c02e573a695d0ad5453d1d6c2', name: "media" }), index.h("slot", { key: '383d1ac8958c9b8292dd5ec83e702df4e0abda92', name: "footer" })));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiCard.style = suiCardCss();
+
+exports.sui_card = SuiCard;

package/dist/cjs/sui-chart-legend-dot.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+
+const suiChartLegendDotCss = () => `@charset "UTF-8";.sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-faded-base)}.sc-sui-chart-legend-dot-h{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}[data-sui-size=small].sc-sui-chart-legend-dot-h{width:16px;height:16px}[data-sui-color=light-gray].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-icon-disabled-300)}[data-sui-color=blue].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-information-base)}[data-sui-color=orange].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-warning-base)}[data-sui-color=red].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-error-base)}[data-sui-color=green].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-success-base)}[data-sui-color=yellow].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-away-base)}[data-sui-color=purple].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-feature-base)}[data-sui-color=sky].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-verified-base)}[data-sui-color=pink].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-highlighted-base)}[data-sui-color=teal].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-state-stable-base)}[data-sui-color=disabled].sc-sui-chart-legend-dot-h{--sui-chart-legend-dot-c:var(--sui-icon-disabled-300)}.sui-chart-legend-dot__ellipse.sc-sui-chart-legend-dot{width:12px;height:12px;border-radius:var(--sui-radius-full);background:var(--sui-chart-legend-dot-c);box-shadow:inset 0 0 0 2px var(--sui-stroke-white-0), 0 2px 4px 0 rgba(27, 28, 29, 0.0392156863)}`;
+
+const SuiChartLegendDot = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Color canon de la serie. Default `gray` (variant default del set Figma). */
+        this.color = 'gray';
+        /** Size del container: `medium` 20×20 / `small` 16×16. El dot es 12×12 en ambos. */
+        this.size = 'medium';
+        /**
+         * CSS color custom (override del preset) para series fuera de la paleta
+         * canon — ej. colores de una paleta echarts propia. Si presente, ignora
+         * `color` a nivel visual.
+         */
+        this.customColor = null;
+    }
+    render() {
+        return (index.h(index.Host, { key: '6537d883ca16b5a5965dac666289f262baced7c5', "aria-hidden": "true", "data-sui-color": this.color, "data-sui-size": this.size, "data-sui-custom": this.customColor ? '' : null, style: this.customColor ? { '--sui-chart-legend-dot-c': this.customColor } : undefined }, index.h("span", { key: '7e665cd790f91b74a5b89d307ac33be64e47aae0', class: "sui-chart-legend-dot__ellipse" })));
+    }
+};
+SuiChartLegendDot.style = suiChartLegendDotCss();
+
+exports.sui_chart_legend_dot = SuiChartLegendDot;

package/dist/cjs/sui-chart-legend-dot.data-UMBu4HQm.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/** Orden EXACTO del set de Figma 2942:9880 (11 colores; `disabled` no es un color de serie). */
+const SUI_CHART_LEGEND_COLORS = [
+    'gray', 'light-gray', 'blue', 'orange', 'red', 'green',
+    'yellow', 'purple', 'sky', 'pink', 'teal',
+];
+/**
+ * Ciclo de auto-asignación de colores para series de chart (usado por
+ * `<sui-chart-legend>` cuando un item no trae color explícito).
+ * NO es canon de Figma (el set no define orden de series): arranca en `blue`
+ * (primera serie de facto del DS) y deja los grises al final para que los
+ * primeros N series de cualquier chart salgan con color.
+ */
+const SUI_CHART_SERIES_COLORS = [
+    'blue', 'orange', 'red', 'green', 'yellow', 'purple',
+    'sky', 'pink', 'teal', 'gray', 'light-gray',
+];
+/**
+ * Mapa color → hex canónico resuelto (valores de los tokens `--sui-state-*-base`
+ * que Figma bindea en cada variant). Útil para alimentar la MISMA paleta a la
+ * lib de charts del consumer (echarts `series[].color`, etc.) y que el dot de
+ * la leyenda matchee 1:1 el color pintado en la gráfica.
+ */
+const SUI_CHART_LEGEND_HEX = {
+    gray: '#7b7b7b', // state/faded/base
+    'light-gray': '#d1d1d1', // icon/disabled-300
+    blue: '#335cff', // state/information/base
+    orange: '#fa7319', // state/warning/base
+    red: '#fb3748', // state/error/base
+    green: '#1fc16b', // state/success/base
+    yellow: '#f6b51e', // state/away/base
+    purple: '#7d52f4', // state/feature/base
+    sky: '#47c2ff', // state/verified/base
+    pink: '#fb4ba3', // state/highlighted/base
+    teal: '#22d3bb', // state/stable/base
+    disabled: '#d1d1d1', // icon/disabled-300 (mismo dot que light-gray)
+};
+
+exports.SUI_CHART_LEGEND_COLORS = SUI_CHART_LEGEND_COLORS;
+exports.SUI_CHART_LEGEND_HEX = SUI_CHART_LEGEND_HEX;
+exports.SUI_CHART_SERIES_COLORS = SUI_CHART_SERIES_COLORS;

package/dist/cjs/sui-chart-legend.cjs.entry.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var index = require('./index-DtYKdVSu.js');
+var suiChartLegendDot_data = require('./sui-chart-legend-dot.data-UMBu4HQm.js');
+
+const suiChartLegendCss = () => `@charset "UTF-8";.sc-sui-chart-legend-h{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-family:var(--sui-font-sans);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}[data-sui-orientation=vertical].sc-sui-chart-legend-h{flex-direction:column;align-items:flex-start;gap:12px}.sui-chart-legend__item.sc-sui-chart-legend{display:inline-flex;align-items:center;gap:4px}.sui-chart-legend__label.sc-sui-chart-legend{font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);white-space:nowrap}.sui-chart-legend__value.sc-sui-chart-legend{font-size:12px;font-weight:500;line-height:16px;letter-spacing:0;color:var(--sui-text-strong-950);white-space:nowrap}.sui-chart-legend__item--disabled.sc-sui-chart-legend .sui-chart-legend__label.sc-sui-chart-legend,.sui-chart-legend__item--disabled.sc-sui-chart-legend .sui-chart-legend__value.sc-sui-chart-legend{color:var(--sui-text-disabled-300)}`;
+
+const SuiChartLegend = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /** Series de la leyenda, en orden de render. */
+        this.items = [];
+        /**
+         * Disposición de los items: `horizontal` (row con wrap, default) o
+         * `vertical` (columna — leyendas laterales de donut/pie).
+         */
+        this.orientation = 'horizontal';
+    }
+    /** Color efectivo de un item (disabled > customColor > color > ciclo auto). */
+    resolve(item, i) {
+        var _a;
+        if (item.disabled)
+            return { color: 'disabled', customColor: null };
+        if (item.customColor)
+            return { color: 'gray', customColor: item.customColor };
+        return { color: (_a = item.color) !== null && _a !== void 0 ? _a : suiChartLegendDot_data.SUI_CHART_SERIES_COLORS[i % suiChartLegendDot_data.SUI_CHART_SERIES_COLORS.length], customColor: null };
+    }
+    render() {
+        var _a;
+        return (index.h(index.Host, { key: 'd3d65bd83b2bdc0e5dec81fa888d05e3acbd4e94', role: "list", "data-sui-orientation": this.orientation }, ((_a = this.items) !== null && _a !== void 0 ? _a : []).map((item, i) => {
+            const { color, customColor } = this.resolve(item, i);
+            return (index.h("span", { class: { 'sui-chart-legend__item': true, 'sui-chart-legend__item--disabled': !!item.disabled }, role: "listitem" }, index.h("sui-chart-legend-dot", { size: "small", color: color, customColor: customColor }), index.h("span", { class: "sui-chart-legend__label" }, item.label), item.value !== undefined && item.value !== null && (index.h("span", { class: "sui-chart-legend__value" }, item.value))));
+        })));
+    }
+};
+SuiChartLegend.style = suiChartLegendCss();
+
+exports.sui_chart_legend = SuiChartLegend;