@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-button-group/sui-button-group.js

@@ -0,0 +1,291 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-button-group>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el `SuiButtonGroup` Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-button-group/). Misma API
+ * pública (items/size/multi/value/ariaLabel + evento change), mismo
+ * comportamiento (single/multi select, disabled no-op) y mismos VALORES exactos
+ * (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319), NO el
+ * azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — node 493:8644 "Button Group [1.1]".
+ *
+ * COMPUESTO: recibe `items[]` + `value` (single o multi) y renderiza un
+ * `<sui-button-group-item>` por entry (reusando el primitivo ya portado — NO
+ * re-implementa el botón). El group hace overflow-clip + border radius en las
+ * puntas y aplica negative margin a items > 0 para overlappear los bordes
+ * individuales y producir un border compartido.
+ *
+ * EXACT (pulled from Figma 493:8644):
+ *   - 15 variants = 3 sizes × 5 quantities (2/3/4/5/6)
+ *   - Layout: flex items-start (items mantienen su height)
+ *   - Group container: bg-white-0, border heredado de los items, rounded:
+ *       · small / xsmall → radius-8 (8px)
+ *       · 2xsmall        → radius-6 (6px)
+ *   - overflow: clip (corta los bordes externos de items en las esquinas)
+ *
+ * Behavior:
+ *   - Single select (default): el clicked item reemplaza el value (NO toggle
+ *     del mismo — patrón segmented control).
+ *   - Multi select (`multi=true`): toggle del clicked en array.
+ *   - El `[(value)]` de Angular se modela con `@Prop({ mutable: true })`: en
+ *     single es un `string`, en multi un `string[]`. El consumer lo lee tras
+ *     el evento `suiChange` o lo setea programáticamente.
+ *
+ * Accesibilidad:
+ *   - host = `role="group"` + `aria-label`.
+ *   - Items individuales llevan `aria-pressed`.
+ *
+ * `scoped: true` (light DOM, NO shadow): los items hijos y su evento `clicked`
+ * (capturado vía `onClicked` en el render) translan limpio, y el
+ * `:host([data-sui-*])` styling aplica.
+ */
+export class SuiButtonGroup {
+    constructor() {
+        /** 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 (h(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 (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) }));
+        })));
+    }
+    static get is() { return "sui-button-group"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-button-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-button-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "readonly SuiButtonGroupEntry[]",
+                    "resolved": "readonly SuiButtonGroupEntry[]",
+                    "references": {
+                        "SuiButtonGroupEntry": {
+                            "location": "import",
+                            "path": "./sui-button-group.data",
+                            "id": "src/components/sui-button-group/sui-button-group.data.ts::SuiButtonGroupEntry",
+                            "referenceLocation": "SuiButtonGroupEntry"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Entradas a renderizar (data-driven). Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiButtonGroupItemSize",
+                    "resolved": "\"2xsmall\" | \"large\" | \"medium\" | \"small\" | \"xsmall\"",
+                    "references": {
+                        "SuiButtonGroupItemSize": {
+                            "location": "import",
+                            "path": "../sui-button-group-item/sui-button-group-item",
+                            "id": "src/components/sui-button-group-item/sui-button-group-item.tsx::SuiButtonGroupItemSize",
+                            "referenceLocation": "SuiButtonGroupItemSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o de los items. Default `small` (36px). `medium` (40, radius 10) y `large` (48, radius 12): extensi\u00F3n SUI para mobile."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'small'"
+            },
+            "multi": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permite seleccionar m\u00FAltiples items simult\u00E1neamente.\n- false (default): single-select, `value` es `string`.\n- true: multi-select, `value` es `string[]`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multi",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "SuiButtonGroupValue",
+                    "resolved": "string | string[]",
+                    "references": {
+                        "SuiButtonGroupValue": {
+                            "location": "import",
+                            "path": "./sui-button-group.data",
+                            "id": "src/components/sui-button-group/sui-button-group.data.ts::SuiButtonGroupValue",
+                            "referenceLocation": "SuiButtonGroupValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor seleccionado (\u2248 el `[(value)]` model de Angular). Mutable.\nEn single: string del item active. En multi: string[] de items active.\nEn single, si value es null/'' nada est\u00E1 seleccionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label del group. Default ''."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "suiChange",
+                "name": "suiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido cuando cambia la selecci\u00F3n (despu\u00E9s de actualizar `value`)."
+                },
+                "complexType": {
+                    "original": "SuiButtonGroupValue",
+                    "resolved": "string | string[]",
+                    "references": {
+                        "SuiButtonGroupValue": {
+                            "location": "import",
+                            "path": "./sui-button-group.data",
+                            "id": "src/components/sui-button-group/sui-button-group.data.ts::SuiButtonGroupValue",
+                            "referenceLocation": "SuiButtonGroupValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Two-way de `value` (el `valueChange` del `model()` de Angular). Mismo payload que `suiChange`."
+                },
+                "complexType": {
+                    "original": "SuiButtonGroupValue",
+                    "resolved": "string | string[]",
+                    "references": {
+                        "SuiButtonGroupValue": {
+                            "location": "import",
+                            "path": "./sui-button-group.data",
+                            "id": "src/components/sui-button-group/sui-button-group.data.ts::SuiButtonGroupValue",
+                            "referenceLocation": "SuiButtonGroupValue"
+                        }
+                    }
+                }
+            }];
+    }
+}

package/dist/collection/components/sui-button-group-item/sui-button-group-item.css

@@ -0,0 +1,270 @@
+@charset "UTF-8";
+/* ═══ SUI Button Group Item — SUI Design System 2.0 ═══════════════════════════════
+ * Portado 1:1 desde el componente Angular homologado.
+ * Specs from Figma 8p1k72aKKvzJV4XcvPS4VO node 226:4669 "Button Group Items [1.1]".
+ * Átomo individual. Mantiene su propio border 1px para uso standalone; el
+ * group (sui-button-group) hace overflow-clip + negative margin para
+ * overlappear bordes adyacentes.
+ * El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  display: inline-flex;
+  font-family: var(--sui-font-sans);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-button-group-item__inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* gap icon ↔ label: override por size (small 8 / xsmall 6 / 2xsmall 4). */
+  gap: 8px;
+  margin: 0;
+  appearance: none;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  /* box-sizing: border-box → con only-icon variant la width es 36/32/24px exactos
+     (en vez de 38/34/26 que daba content-box + border 1px×2). */
+  box-sizing: border-box;
+  color: var(--sui-text-sub-600);
+  text-align: center;
+  cursor: pointer;
+  overflow: clip;
+  white-space: nowrap;
+  /* Typography default (small / xsmall = Label/Small) */
+  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);
+}
+
+/* El item del group no debe "encogerse" al presionar — el group lo encierra
+   y un scale rompería la continuidad visual del border. */
+.sui-button-group-item__inner:active {
+  transform: none;
+}
+
+/* Esquinas externas redondeadas en el primer/último item (el group setea
+   data-sui-first/data-sui-last). Sin esto, el `overflow:clip` del group recorta
+   solo el FILL a la curva, pero el BORDER 1px del item (rectangular) queda CORTADO
+   en la esquina — el border ahora sigue la curva del group. Radius por size:
+   small/xsmall = 8, 2xsmall = 6 (igual que el radius del group). */
+:host([data-sui-first][data-sui-size=small]) .sui-button-group-item__inner,
+:host([data-sui-first][data-sui-size=xsmall]) .sui-button-group-item__inner {
+  border-top-left-radius: var(--sui-radius-8);
+  border-bottom-left-radius: var(--sui-radius-8);
+}
+
+:host([data-sui-last][data-sui-size=small]) .sui-button-group-item__inner,
+:host([data-sui-last][data-sui-size=xsmall]) .sui-button-group-item__inner {
+  border-top-right-radius: var(--sui-radius-8);
+  border-bottom-right-radius: var(--sui-radius-8);
+}
+
+:host([data-sui-first][data-sui-size="2xsmall"]) .sui-button-group-item__inner {
+  border-top-left-radius: var(--sui-radius-6);
+  border-bottom-left-radius: var(--sui-radius-6);
+}
+
+:host([data-sui-last][data-sui-size="2xsmall"]) .sui-button-group-item__inner {
+  border-top-right-radius: var(--sui-radius-6);
+  border-bottom-right-radius: var(--sui-radius-6);
+}
+
+/* ───── Sizes — padding adaptativo por combinación de iconos ─────────
+ * Valores EXACTOS de Figma 226:4669 (un node por combinación):
+ *
+ *   size    | text-only | left|right | both | only
+ *   --------|-----------|------------|------|------
+ *   small   | px16 py8  | px14 py8   | p8   | p8 (→36²)
+ *   xsmall  | px14 py6  | px12 py6   | p6   | p6 (→32²)
+ *   2xsmall | px12 py4  | px10 py4   | p4   | p4 (→24²)
+ *
+ * gap icon↔label: small 8 / xsmall 6 / 2xsmall 4.
+ * ──────────────────────────────────────────────────────────────────── */
+/* —— Small (36) ———————————————————————————————————————————————————— */
+:host([data-sui-size=small]) .sui-button-group-item__inner {
+  gap: 8px;
+  padding: 7px 16px; /* text-only — py 8 −1 del borde: 20+14+2 = 36 */
+  min-height: 36px;
+}
+
+:host([data-sui-size=small][data-sui-icons=left]) .sui-button-group-item__inner,
+:host([data-sui-size=small][data-sui-icons=right]) .sui-button-group-item__inner {
+  padding: 7px 14px;
+}
+
+:host([data-sui-size=small][data-sui-icons=both]) .sui-button-group-item__inner {
+  padding: 7px 8px; /* Figma p8; py −1 del borde → 36 de alto */
+}
+
+:host([data-sui-size=small][data-sui-icons=only]) .sui-button-group-item__inner {
+  /* only-icon: box-border + width/height exactos → 36×36 (Figma stroke inside). */
+  padding: 8px;
+  width: 36px;
+  height: 36px;
+}
+
+/* —— X-Small (32) —————————————————————————————————————————————————— */
+:host([data-sui-size=xsmall]) .sui-button-group-item__inner {
+  gap: 6px;
+  padding: 5px 14px; /* text-only — py 6 −1 del borde: 20+10+2 = 32 */
+  min-height: 32px;
+}
+
+:host([data-sui-size=xsmall][data-sui-icons=left]) .sui-button-group-item__inner,
+:host([data-sui-size=xsmall][data-sui-icons=right]) .sui-button-group-item__inner {
+  padding: 5px 12px;
+}
+
+:host([data-sui-size=xsmall][data-sui-icons=both]) .sui-button-group-item__inner {
+  padding: 5px 6px; /* Figma p6; py −1 del borde → 32 de alto */
+}
+
+:host([data-sui-size=xsmall][data-sui-icons=only]) .sui-button-group-item__inner {
+  padding: 6px;
+  width: 32px;
+  height: 32px;
+}
+
+/* —— 2X-Small (24) ————————————————————————————————————————————————— */
+:host([data-sui-size="2xsmall"]) .sui-button-group-item__inner {
+  gap: 4px;
+  padding: 3px 12px; /* text-only — py 4 −1 del borde: 16+6+2 = 24 */
+  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);
+}
+
+:host([data-sui-size="2xsmall"][data-sui-icons=left]) .sui-button-group-item__inner,
+:host([data-sui-size="2xsmall"][data-sui-icons=right]) .sui-button-group-item__inner {
+  padding: 3px 10px;
+}
+
+:host([data-sui-size="2xsmall"][data-sui-icons=both]) .sui-button-group-item__inner {
+  padding: 3px 4px; /* Figma p4; py −1 del borde → 24 de alto */
+}
+
+:host([data-sui-size="2xsmall"][data-sui-icons=only]) .sui-button-group-item__inner {
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+}
+
+/* —— Medium (40) y Large (48) — extensión SUI (03-10-2026) ——————————————
+ * Pedido del dueño: tamaños para tocar con el dedo en mobile; Figma llega
+ * hasta small (36). Siguen la escala de `sui-button` (medium 40 / large 48):
+ *   - medium: Label/Small (14/20), ícono 20, gap 8, radius 10.
+ *   - large:  Label/Medium (16/24), ícono 20, gap 8, radius 12.
+ * El padding-y va con −1px por el borde (border-box), así el alto cae exacto:
+ * 20 + 9×2 + 2 = 40 y 24 + 11×2 + 2 = 48. */
+:host([data-sui-size=medium]) .sui-button-group-item__inner {
+  gap: 8px;
+  padding: 9px 18px; /* text-only */
+  min-height: 40px;
+}
+
+:host([data-sui-size=medium][data-sui-icons=left]) .sui-button-group-item__inner,
+:host([data-sui-size=medium][data-sui-icons=right]) .sui-button-group-item__inner {
+  padding: 9px 16px;
+}
+
+:host([data-sui-size=medium][data-sui-icons=both]) .sui-button-group-item__inner {
+  padding: 9px;
+}
+
+:host([data-sui-size=medium][data-sui-icons=only]) .sui-button-group-item__inner {
+  padding: 9px;
+  width: 40px;
+  height: 40px;
+}
+
+:host([data-sui-size=large]) .sui-button-group-item__inner {
+  gap: 8px;
+  padding: 11px 20px; /* text-only */
+  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);
+}
+
+:host([data-sui-size=large][data-sui-icons=left]) .sui-button-group-item__inner,
+:host([data-sui-size=large][data-sui-icons=right]) .sui-button-group-item__inner {
+  padding: 11px 18px;
+}
+
+:host([data-sui-size=large][data-sui-icons=both]) .sui-button-group-item__inner {
+  padding: 11px;
+}
+
+:host([data-sui-size=large][data-sui-icons=only]) .sui-button-group-item__inner {
+  padding: 11px;
+  width: 48px;
+  height: 48px;
+}
+
+/* Puntas redondeadas del grupo en los tamaños nuevos (mismo radius que el group). */
+:host([data-sui-first][data-sui-size=medium]) .sui-button-group-item__inner {
+  border-top-left-radius: var(--sui-radius-10);
+  border-bottom-left-radius: var(--sui-radius-10);
+}
+
+:host([data-sui-last][data-sui-size=medium]) .sui-button-group-item__inner {
+  border-top-right-radius: var(--sui-radius-10);
+  border-bottom-right-radius: var(--sui-radius-10);
+}
+
+:host([data-sui-first][data-sui-size=large]) .sui-button-group-item__inner {
+  border-top-left-radius: var(--sui-radius-12);
+  border-bottom-left-radius: var(--sui-radius-12);
+}
+
+:host([data-sui-last][data-sui-size=large]) .sui-button-group-item__inner {
+  border-top-right-radius: var(--sui-radius-12);
+  border-bottom-right-radius: var(--sui-radius-12);
+}
+
+/* ───── States ─────────────────────────────────────────────────────── */
+/* Hover (solo en default state, no si active/disabled) */
+:host([data-sui-state=default]) .sui-button-group-item__inner:hover {
+  background: var(--sui-bg-weak-50);
+}
+
+/* Active (selected): bg-weak-50 + text-strong-950 */
+:host([data-sui-state=active]) .sui-button-group-item__inner {
+  background: var(--sui-bg-weak-50);
+  color: var(--sui-text-strong-950);
+}
+
+/* Disabled: bg-weak-50 + sin border + text-disabled-300, no clickable.
+   No se setea `cursor: not-allowed` — con `pointer-events: none` el elemento
+   nunca recibe eventos de puntero, así que el cursor jamás se renderiza. */
+:host([data-sui-state=disabled]) .sui-button-group-item__inner {
+  background: var(--sui-bg-weak-50);
+  border-color: transparent;
+  color: var(--sui-text-disabled-300);
+  pointer-events: none;
+}
+
+/* Focus visible — accesibilidad keyboard */
+.sui-button-group-item__inner:focus-visible {
+  outline: 2px solid var(--sui-stroke-strong-950, var(--sui-text-strong-950));
+  outline-offset: -2px; /* dentro del border, no afuera */
+  z-index: 1; /* sobresale del overflow-clip del group */
+  position: relative;
+}
+
+/* ───── Icon + label ───────────────────────────────────────────────── */
+.sui-button-group-item__icon {
+  flex-shrink: 0;
+}
+
+.sui-button-group-item__label {
+  display: inline-flex;
+  align-items: center;
+}