@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,326 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<sui-button-group-item>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-button-group-item/).
+ * Misma API pública (label/leftIcon/rightIcon/size/active/disabled/ariaLabel),
+ * mismo comportamiento ((clicked) bloqueado en disabled, iOS :active fix) 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 226:4669 "Button Group Items [1.1]".
+ *
+ * Átomo del button-group. Es un button que vive dentro de un wrapper
+ * `<sui-button-group>` con bordes overlappeados, pero también puede usarse
+ * standalone (mantiene su propio border).
+ *
+ * EXACT specs (60 variants = 3 sizes × 4 states × 5 content combos):
+ *
+ *   Padding + gap por size × content combo (VERIFICADO node por node):
+ *     small (36) — Label/Small (14/20/-0.6%), icon 20px:
+ *       · text-only:   px16 py8
+ *       · left|right:  px14 py8, gap 8
+ *       · both-icons:  p8 (cuadrado), gap 8
+ *       · only-icon:   p8 → 36×36, sin gap
+ *     xsmall (32) — Label/Small (14/20/-0.6%), icon 20px:
+ *       · text-only:   px14 py6
+ *       · left|right:  px12 py6, gap 6
+ *       · both-icons:  p6 (cuadrado), gap 6
+ *       · only-icon:   p6 → 32×32, sin gap
+ *     2xsmall (24) — Label/X Small (12/16/0), icon 16px:
+ *       · text-only:   px12 py4
+ *       · left|right:  px10 py4, gap 4
+ *       · both-icons:  p4 (cuadrado), gap 4
+ *       · only-icon:   p4 → 24×24, sin gap
+ *
+ *   States × visual:
+ *     Default:  bg-white-0 + border stroke-soft-200 + text-sub-600
+ *     Hover:    bg-weak-50 + border stroke-soft-200 + text-sub-600
+ *     Active:   bg-weak-50 + border stroke-soft-200 + text-strong-950
+ *     Disabled: bg-weak-50 + NO border + text-disabled-300, pointer-events: none
+ *
+ * COMPUESTO: reúsa el primitivo ya portado `<sui-icon>` para leading/trailing
+ * icon (NO re-implementa el render de iconos).
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio, el `<sui-icon>` interno hereda el `@font-face` del global, y
+ * el evento `clicked` (CustomEvent) burbujea hasta el `<sui-button-group>`
+ * padre sin cruzar shadow boundaries. Misma estrategia que el Angular original,
+ * que expone el output `(clicked)`.
+ */
+export class SuiButtonGroupItem {
+    constructor() {
+        /** 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 (h(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 }, 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 && (h("sui-icon", { key: '59d70f95c1b01b1c4297a4ed51d492be6b9264f8', class: "sui-button-group-item__icon", name: this.leftIcon, size: iconSize })), this.label && h("span", { key: 'fe2c7f7fa6a8153c88d139383040b99324f2cc27', class: "sui-button-group-item__label" }, this.label), this.rightIcon && (h("sui-icon", { key: 'd9785937129eebb27284d461d0a549a032a71229', class: "sui-button-group-item__icon", name: this.rightIcon, size: iconSize })))));
+    }
+    static get is() { return "sui-button-group-item"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-button-group-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-button-group-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del item. Omitible para render icon-only (debe pasar leftIcon o rightIcon entonces)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "leftIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre RemixIcon del \u00EDcono leading (ej. 'home-line'). Vac\u00EDo \u2192 sin \u00EDcono."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "left-icon",
+                "defaultValue": "''"
+            },
+            "rightIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nombre RemixIcon del \u00EDcono trailing. Vac\u00EDo \u2192 sin \u00EDcono."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "right-icon",
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiButtonGroupItemSize",
+                    "resolved": "\"2xsmall\" | \"large\" | \"medium\" | \"small\" | \"xsmall\"",
+                    "references": {
+                        "SuiButtonGroupItemSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-button-group-item/sui-button-group-item.tsx",
+                            "id": "src/components/sui-button-group-item/sui-button-group-item.tsx::SuiButtonGroupItemSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tama\u00F1o. Default `small` (36px). `medium` (40) y `large` (48) son la extensi\u00F3n SUI para tocar con el dedo en mobile."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'small'"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca como seleccionado (state=\"active\"). Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Deshabilitado: bloquea click, sin border, no clickable. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "aria-label para icon-only buttons."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clicked",
+                "name": "clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido al clickear el item (no se dispara si disabled). Burbujea hasta el\ngroup. Espeja el output `(clicked)` del componente Angular original."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/sui-card/sui-card.css

@@ -0,0 +1,163 @@
+@charset "UTF-8";
+/* ═══ SUI Card — SUI Design System 2.0 ═══════════════════════════════════════════
+ * Port 1:1 del Angular homologado (master-pedidos). Specs pulled de
+ * Figma 8p1k72aKKvzJV4XcvPS4VO (Card / Surface).
+ * Tokens: --sui-bg-*, --sui-stroke-*, --sui-radius-*, --sui-shadow-*, --sui-motion-*.
+ *
+ * Layout: column flex con gap dirigido por size. Header/body/footer comparten
+ * el MISMO gap vertical para que el ritmo visual sea consistente sin importar
+ * qué slots estén poblados. Sin dividers internos.
+ *
+ * `scoped: true` → el contenido proyectado vive en light DOM y se estila con
+ * ::slotted([slot=…]). Los marker attrs del Angular (`sui-card-header`/`-media`/
+ * `-footer`) se aceptan como alias (el .tsx les pone el `slot`).
+ * ══════════════════════════════════════════════════════════════════════ */
+:host {
+  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);
+}
+
+/* ───── Variants ───────────────────────────────────────────────────── */
+:host([data-sui-variant=default]) {
+  border-color: var(--sui-stroke-soft-200);
+  box-shadow: var(--sui-shadow-x-small);
+}
+
+:host([data-sui-variant=elevated]) {
+  /* En dark la sombra no se ve sobre el canvas: el token (solo en el bloque dark
+     de sui-tokens) aporta el borde; en light queda transparent. */
+  border-color: var(--sui-card-elevated-border, transparent);
+  box-shadow: var(--sui-shadow-medium);
+}
+
+:host([data-sui-variant=flat]) {
+  border-color: var(--sui-stroke-soft-200);
+  box-shadow: none;
+}
+
+/* ───── Sizes (padding × gap) ──────────────────────────────────────────
+ * --sui-card-padding-x se expone para que el slot media pueda compensar con
+ * margin lateral negativo y romper el padding del card.
+ * ──────────────────────────────────────────────────────────────────── */
+:host([data-sui-size=small]) {
+  --sui-card-padding-x: 16px;
+  padding: 16px;
+  gap: 12px;
+}
+
+:host([data-sui-size=medium]) {
+  --sui-card-padding-x: 20px;
+  padding: 20px;
+  gap: 16px;
+}
+
+:host([data-sui-size=large]) {
+  --sui-card-padding-x: 24px;
+  padding: 24px;
+  gap: 20px;
+}
+
+/* xlarge: extensión del proyecto (no-Figma) — mantiene el Δ +4/+4 de medium→large. */
+:host([data-sui-size=xlarge]) {
+  --sui-card-padding-x: 28px;
+  padding: 28px;
+  gap: 24px;
+}
+
+/* ───── Interactive ───────────────────────────────────────────────── */
+:host([data-sui-interactive]) {
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+:host([data-sui-interactive]:hover) {
+  transform: translateY(-1px);
+}
+
+:host([data-sui-interactive][data-sui-variant=default]:hover) {
+  border-color: var(--sui-stroke-sub-300);
+  box-shadow: var(--sui-shadow-medium);
+}
+
+:host([data-sui-interactive][data-sui-variant=elevated]:hover) {
+  box-shadow: var(--sui-custom-shadow-large, var(--sui-shadow-medium));
+}
+
+:host([data-sui-interactive][data-sui-variant=flat]:hover) {
+  border-color: var(--sui-stroke-sub-300);
+  background: var(--sui-bg-weak-50, #f7f7f7);
+}
+
+/* Solo con mouse: en touch el :active entra apenas apoya el dedo (también al
+   hacer scroll) y la card «se hunde» bajo el pulgar. */
+@media (hover: hover) and (pointer: fine) {
+  :host([data-sui-interactive]:active:not(:focus-visible)) {
+    transform: scale(0.99);
+  }
+}
+:host([data-sui-interactive]:focus-visible) {
+  box-shadow: 0 0 0 2px var(--sui-bg-white-0), 0 0 0 4px var(--sui-state-information-base, #335cff);
+}
+
+/* ───── Slots ─────────────────────────────────────────────────────────
+ * scoped DOM: el contenido proyectado vive en light DOM y se targetea con
+ * ::slotted (→ `.sc-sui-card-s > [slot]`). Con `:host [slot]` a secas el
+ * scoped de Stencil le agrega `.sc-sui-card` al hijo y nunca matchea. Los
+ * marker attrs del Angular (`sui-card-header`…) se convierten a `slot=` en
+ * componentWillLoad, así que acá solo hace falta el `slot`.
+ * ──────────────────────────────────────────────────────────────────── */
+::slotted([slot=header]) {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+::slotted([slot=footer]) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+/* Media: edge-to-edge — rompe el padding lateral con margin negativo, absorbe
+   el border-radius del card en sus esquinas inferiores cuando está pegado al
+   final. Útil para charts, hero images, mapas. */
+::slotted([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;
+}
+
+/* Si hay footer DESPUÉS del media, el media pierde el margin-bottom negativo
+   (porque ya no está pegado al borde) y el footer recupera su espacio normal.
+   El slot relocation de Stencil deja los nodos en el orden del render
+   (header · body · media · footer), así que el footer es un hermano posterior. */
+::slotted([slot=media]:has(~ [slot=footer])) {
+  margin-bottom: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.sui-card__body {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* El `:host:has(> .sui-card__body:only-child) { gap: 0 }` del Angular no se
+   porta: sin header/media/footer el body es el único flex item y el gap no
+   aplica; además el scoped de Stencil reescribe ese :has y no matchearía. */