@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-period-range/sui-period-range.js

@@ -0,0 +1,224 @@
+import { Host, h } from "@stencil/core";
+import { soltarToque } from "../../utils/sui-toque";
+/**
+ * `<sui-period-range>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-period-range/). Misma API
+ * publica, TODOS los estados (Default / Hover / Active / Disabled), mismo
+ * comportamiento (disabled gatea el click; data-attrs del host como drivers del
+ * SCSS; aria-pressed espeja active) y los MISMOS VALORES exactos via tokens del
+ * DS (no hex sueltos). El accent del DS es NARANJA brand
+ * (#fa7319 = --sui-primary-base), NUNCA el azul de Figma — aca el accent solo
+ * aparece en el focus-ring (primary-alpha-10).
+ *
+ * Preset chip del sidebar del Range Picker (Hoy / Últimos 7 días / Este mes /
+ * etc). Renderiza un label clickeable que cuando se hace active aplica el
+ * preset. Hermano de `<sui-day-cell>` / `<sui-day-label>` dentro de la familia
+ * del Range Picker; comparte el patron de ancho fijo (168px aca) para no
+ * estirarse con el sidebar parent.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Frame 443:336 ("Period Range [1.1]") — 3 states (Default / Hover / Active).
+ *
+ * EXACT (pulled from Figma 443:341 — Active state):
+ *   Container:
+ *     w-168 (default), height-36
+ *     padding: py-8, pl-12, pr-8 (asimetrico — mas espacio post-label)
+ *     radius-8
+ *     bg weak-50 (active)
+ *     items-center, justify-center
+ *   Label:
+ *     Inter Medium 14/20/-0.6%, color text-strong-950 (active)
+ *     flex-[1_0_0] (expande)
+ *     font-feature-settings: 'ss11' 1, 'calt' 0, 'liga' 0
+ *
+ * Estados (data-sui-* del host) — VERIFIED via MCP set 443:336:
+ *   default  → bg transparent, text sub-600 (443:335; el SUI usa transparent en
+ *              vez de white-0, visualmente identico sobre el panel blanco y no
+ *              tapa el panel)
+ *   hover    → bg weak-50, text sub-600 (443:337; el texto NO sube a strong-950,
+ *              solo el Active lo hace)
+ *   active   → bg weak-50, text strong-950 (443:341)
+ *   disabled → opacity 0.5, cursor not-allowed
+ *
+ * GOTCHAS de API (Stencil):
+ *  - Fix iOS :active stuck: listeners touchstart/touchend PASIVOS en el host
+ *    (homólogo del `SuiToque` del Angular); el touchend suelta el foco del botón.
+ *  - El evento se llama `clicked`, igual que el output del Angular.
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `:host([data-sui-*])`
+ * translan limpio y el chip hereda font/tokens del global. Misma estrategia que
+ * el resto de la familia portada.
+ *
+ * Usage:
+ *   <sui-period-range label="Hoy"></sui-period-range>
+ *   <sui-period-range label="Últimos 7 días" active></sui-period-range>
+ *   <sui-period-range label="Este año" disabled></sui-period-range>
+ */
+export class SuiPeriodRange {
+    constructor() {
+        /**
+         * Label visible del preset (ej. "Hoy", "Último mes").
+         * Requerido en la API Angular (`input.required`); aca default `''` y el render
+         * queda vacio si no se pasa.
+         */
+        this.label = '';
+        /** Estado active — bg weak-50 visible + text strong-950, indica preset seleccionado. */
+        this.active = false;
+        /** Disabled — no clickeable (opacity 0.5, cursor not-allowed). */
+        this.disabled = false;
+        /** medium 36 (default) · large 44 (piso táctil, dueño 04-10-2026). */
+        this.size = 'medium';
+        this.onClick = () => {
+            if (this.disabled)
+                return;
+            this.clicked.emit();
+        };
+    }
+    alTocar() {
+        /* presencia del listener = engage del touch pipeline iOS. no-op a propósito. */
+    }
+    alSoltar(event) {
+        soltarToque(event, '.sui-period-range__btn');
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '90a7b0f011c270210b40da30277650087790df51', "data-sui-active": this.active ? '' : null, "data-sui-size": this.size, "data-sui-disabled": this.disabled ? '' : null }, h("button", { key: 'b1071ebbce2e36d43d168778d25a05e8e1d0e4f6', type: "button", class: "sui-period-range__btn", disabled: (_a = this.disabled) !== null && _a !== void 0 ? _a : undefined, "aria-pressed": this.active ? 'true' : 'false', onClick: this.onClick }, h("span", { key: '6a58058684a70695554efa273f0578b795bab9d8', class: "sui-period-range__label" }, this.label))));
+    }
+    static get is() { return "sui-period-range"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-period-range.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-period-range.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label visible del preset (ej. \"Hoy\", \"\u00DAltimo mes\").\nRequerido en la API Angular (`input.required`); aca default `''` y el render\nqueda vacio si no se pasa."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado active \u2014 bg weak-50 visible + text strong-950, indica preset seleccionado."
+                },
+                "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": "Disabled \u2014 no clickeable (opacity 0.5, cursor not-allowed)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiPeriodRangeSize",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "SuiPeriodRangeSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-period-range/sui-period-range.tsx",
+                            "id": "src/components/sui-period-range/sui-period-range.tsx::SuiPeriodRangeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "medium 36 (default) \u00B7 large 44 (piso t\u00E1ctil, due\u00F1o 04-10-2026)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "clicked",
+                "name": "clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido al click cuando NO esta disabled (igual que el `clicked` del Angular)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "touchstart",
+                "method": "alTocar",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "alSoltar",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -0,0 +1,466 @@
+@charset "UTF-8";
+/* ═══ SUI Popover — SUI 2.0 ═══════════════════════════════════════════
+ * Figma 8p1k72aKKvzJV4XcvPS4VO
+ *   Popover [1.1]        4431:81573  (12 position variants)
+ *   Popover Footer [1.1] 4456:83048  (Stretch / Text Stepper / Stepper)
+ *   Stepper Dot [1.1]    479:14399
+ *
+ * Valores EXACTOS de los pulls (no redondeados). Tokens de src/global/sui-tokens.css.
+ * ══════════════════════════════════════════════════════════════════════════ */
+:host {
+  /* El host es el wrapper completo (tail + panel). El layout (column/row) y el
+     orden (tail antes/después del panel) lo decide [data-sui-position]. */
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 320px;
+  position: relative;
+  isolation: isolate;
+  font-family: var(--sui-font-sans);
+}
+
+/* ──────────────── PANEL ──────────────── */
+.sui-popover__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  border-radius: var(--sui-radius-16);
+  box-shadow: var(--sui-regular-shadow-medium); /* 0 16px 32px -12px rgba(14,18,27,.10) */
+  overflow: clip;
+  z-index: 1;
+}
+
+/* ──────────────── CONTENT ──────────────── */
+.sui-popover__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 20px;
+  background: var(--sui-bg-white-0);
+  position: relative;
+  overflow: clip;
+}
+
+/* Separador del footer: el border-bottom solo se pinta cuando hay footer. */
+:host([data-sui-footer=stretch]) .sui-popover__content,
+:host([data-sui-footer=text-stepper]) .sui-popover__content,
+:host([data-sui-footer=stepper]) .sui-popover__content {
+  border-bottom: 1px solid var(--sui-stroke-soft-200);
+}
+
+/* Header icon — círculo 48×48 (Figma node 4431:81316 mide 48×48 exacto).
+   Figma: p-12 + icon 24 + border 1px "inside" (NO suma al frame). En CSS
+   box-sizing:border-box SIN width/height fijo, el contenido (24 + 12·2 = 48)
+   ya iguala la caja, así que el border 1px×2 se SUMA por encima → 50×50
+   (falla-patrón #9 del skill, igual que Input/Select). Fix canon: restar 1px
+   al padding (12 → 11) para absorber el borde y dejar el frame en 48 exacto:
+   11 + 24 + 11 + 1·2 = 48. Verificado por getBoundingClientRect. */
+.sui-popover__icon-wrap {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 11px;
+  flex-shrink: 0;
+  background: var(--sui-bg-white-0);
+  border: 1px solid var(--sui-stroke-soft-200);
+  border-radius: var(--sui-radius-full);
+  box-shadow: var(--sui-regular-shadow-x-small); /* 0 1px 2px rgba(10,13,20,.03) */
+  color: var(--sui-icon-sub-600);
+}
+
+/* Text block (title + description). */
+.sui-popover__text {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  word-break: break-word;
+}
+
+.sui-popover__title {
+  margin: 0;
+  width: 100%;
+  font-size: var(--sui-type-label-md-size); /* 16 */
+  font-weight: var(--sui-type-label-md-weight); /* 500 */
+  line-height: var(--sui-type-label-md-line); /* 24 */
+  letter-spacing: var(--sui-type-label-md-spacing); /* -0.011em */
+  color: var(--sui-text-strong-950);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-popover__description {
+  margin: 0;
+  width: 100%;
+  font-size: var(--sui-type-paragraph-sm-size); /* 14 */
+  font-weight: var(--sui-type-paragraph-sm-weight); /* 400 */
+  line-height: var(--sui-type-paragraph-sm-line); /* 20 */
+  letter-spacing: var(--sui-type-paragraph-sm-spacing); /* -0.006em */
+  color: var(--sui-text-sub-600);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* Dismiss button (compact-button: p-2, radius-6, close-line 20). */
+.sui-popover__dismiss {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 2px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  border-radius: var(--sui-radius-6);
+  color: var(--sui-icon-sub-600);
+  cursor: pointer;
+  transition: background var(--sui-motion-duration-fast) var(--sui-motion-ease-out), color var(--sui-motion-duration-fast) var(--sui-motion-ease-out);
+}
+
+.sui-popover__dismiss:hover {
+  background: var(--sui-bg-weak-50);
+  color: var(--sui-icon-strong-950);
+}
+
+.sui-popover__dismiss:focus-visible {
+  outline: 2px solid var(--sui-stroke-strong-950);
+  outline-offset: 2px;
+}
+
+.sui-popover__dismiss:active {
+  background: var(--sui-bg-soft-200);
+}
+
+/* ──────────────── FOOTER ──────────────── */
+.sui-popover__footer {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px 20px;
+  background: var(--sui-bg-white-0);
+  overflow: clip;
+}
+
+/* Gap del footer wrapper externo — SOLO en Text Stepper y Stepper (separa el
+   indicador "Step X of N" / dots del bloque de actions). Figma 4431:81634 y
+   4456:84867 tienen gap-[12px] en el wrapper; Stretch (4456:83183) NO lo tiene
+   (su único hijo es el div Actions, el gap-12 vive dentro de .__actions). */
+:host([data-sui-footer=text-stepper]) .sui-popover__footer,
+:host([data-sui-footer=stepper]) .sui-popover__footer {
+  gap: 12px;
+}
+
+/* Text stepper label — "Step X of N". */
+.sui-popover__step-text {
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-size: var(--sui-type-paragraph-sm-size); /* 14 */
+  font-weight: var(--sui-type-paragraph-sm-weight); /* 400 */
+  line-height: var(--sui-type-paragraph-sm-line); /* 20 */
+  letter-spacing: var(--sui-type-paragraph-sm-spacing); /* -0.006em */
+  color: var(--sui-text-sub-600);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+/* Dot stepper — N dots 8×8 radius-full, gap 10. */
+.sui-popover__dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.sui-popover__dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--sui-radius-full);
+  background: var(--sui-bg-soft-200);
+}
+
+.sui-popover__dot--active {
+  background: var(--sui-primary-base);
+}
+
+/* Actions wrapper. */
+.sui-popover__actions {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 0;
+  align-items: center;
+  gap: 12px;
+}
+
+/* En Text Stepper / Stepper los botones se alinean a la derecha; en Stretch
+   ocupan todo el ancho disponible. */
+:host([data-sui-footer=text-stepper]) .sui-popover__actions,
+:host([data-sui-footer=stepper]) .sui-popover__actions {
+  justify-content: flex-end;
+}
+
+/* ──────────────── FOOTER BUTTONS ──────────────── */
+/* Back/Next son sui-button reales (`.sui-popover__action`): el estilo de cada
+   uno (stroke neutral / filled primary, hover, focus) lo pone el botón. Acá
+   solo va cuánto ocupan.
+   Fix 03-10-2026: estas reglas apuntaban a `.sui-popover__btn`, una clase de
+   la maqueta vieja que el template ya no pone, así que `stretch` no estiraba
+   y los botones salían a su ancho natural, alineados a la izquierda. */
+/* Stretch footer → ambos botones se reparten el ancho (flex:1). */
+:host([data-sui-footer=stretch]) .sui-popover__action {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  min-width: 0;
+}
+
+/* Text Stepper / Stepper footer → botones de 80 px (Figma w-80), que crecen
+   si el texto no entra («Siguiente» en 40 px de alto). */
+:host([data-sui-footer=text-stepper]) .sui-popover__action,
+:host([data-sui-footer=stepper]) .sui-popover__action {
+  min-width: 80px;
+  flex-shrink: 0;
+}
+
+/* ──────────────── TAIL ──────────────── *
+ * Triángulo isósceles 16×8 (Figma nodes 4431:81386 top / 4431:81222 right:
+ * box `h-[8px] w-[16px]`). MISMO mecanismo seamless que sui-tooltip (ver
+ * sui-tooltip-panel.scss "Arrow (tail)"): dos triángulos clip-path
+ * superpuestos en `.sui-popover__tail-arrow`, en vez de un <svg> con stroke en
+ * TODOS los lados (incluida la base, que producía la línea visible en la unión).
+ *
+ *   - `::before` (z-base): triángulo del COLOR DE BORDE (stroke-soft-200), 1px
+ *      más grande hacia los DOS lados exteriores + la base → asoma como hairline
+ *      = continuación del stroke del panel, SOLO en los lados exteriores.
+ *   - `::after` (z+1): triángulo del FILL (bg-white-0), tamaño exacto, encima.
+ *      Tapa el interior del borde y, gracias al overlap de 1px sobre el panel,
+ *      OCULTA esa porción del borde del panel en la base → unión sin línea.
+ *
+ * El triángulo base apunta hacia ARRIBA (vértice arriba) vía
+ * `clip-path: polygon(50% 0, 100% 100%, 0 100%)`. A diferencia del tooltip (cuya
+ * punta apunta HACIA el trigger), aquí la punta apunta hacia AFUERA del panel
+ * (el tail vive en el lado exterior: top→arriba, right→derecha, etc.). Rotaciones
+ * por eje (sobre la base apex-arriba):
+ *   - top    → punta ↑  → rotate(0deg)     (tail arriba del panel)
+ *   - bottom → punta ↓  → rotate(180deg)   (tail abajo del panel)
+ *   - right  → punta →  → rotate(90deg)    (tail a la derecha del panel)
+ *   - left   → punta ←  → rotate(-90deg)   (tail a la izquierda del panel)
+ *
+ * El solape de 1px hacia el panel (para fundir la base sin línea) NO va en el
+ * `transform` (ahí se rotaría junto con la punta y apuntaría mal) sino en el
+ * offset de posición del arrow (top/left), igual que el tooltip lo hace con
+ * `bottom: -5px` etc. — el solape vive en screen-space, independiente del ángulo.
+ *
+ * GEOMETRÍA (centrado robusto, preservado del commit 5e01f41): el arrow es
+ * absolute, tamaño fijo 16×8, anclado en el centro del wrapper (left/top 50% +
+ * translate(-50%,-50%)) y rotado sobre ese mismo centro → SIEMPRE centrado en su
+ * caja, rote como rote. El wrapper `.sui-popover__tail` (16×8 en top/bottom,
+ * 8×16 en left/right) hace el posicionamiento de las 12 variantes; el arrow solo
+ * se centra + rota + solapa 1px hacia el panel.
+ *
+ * fill = bg-white-0 (igual que el panel), border = stroke-soft-200 (igual borde).
+ *
+ * ⚠ ARQUITECTURA: Figma usa el tail como flex sibling del panel (misma row/col).
+ * Aquí se usa position:absolute (footprint cero) + padding del host (8px) para
+ * reservar el espacio. Visualmente idéntico, pero el tail depende de que el
+ * ancestro NO tenga overflow:hidden/clip ni un transform que cree un stacking
+ * context que lo recorte. Si un consumer lo envuelve en un container con
+ * overflow:hidden/clip, debe garantizar overflow:visible en el wrapper inmediato.
+ * ─────────────────────────────────────────────────────────────────────────── */
+.sui-popover__tail {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  /* Caja del eje top/bottom: 16 ancho × 8 alto (triángulo apuntando vertical). */
+  width: 16px;
+  height: 8px;
+  pointer-events: none;
+  line-height: 0;
+}
+
+.sui-popover__tail-arrow {
+  /* Tamaño fijo del triángulo desplegado (16×8). Centrado absoluto sobre el
+     wrapper y rotado sobre su propio centro → centrado garantizado en cualquier
+     ángulo. El `top`/`left` los fija cada eje con el solape de 1px hacia el panel
+     (screen-space) para fundir la base con el borde del panel. El transform solo
+     centra (translate -50%,-50%) + rota. */
+  position: absolute;
+  width: 16px;
+  height: 8px;
+  box-sizing: border-box;
+  transform-origin: center;
+  pointer-events: none;
+}
+
+/* Border hairline triangle (back) — 1px más grande hacia los lados + base.
+   Asoma como hairline = continuación del stroke del panel, SOLO en los dos
+   lados exteriores (el ::after de fill tapa el interior + la base). */
+.sui-popover__tail-arrow::before {
+  content: "";
+  position: absolute;
+  inset: -1px -1px 0 -1px;
+  background: var(--sui-stroke-soft-200);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+/* Fill triangle (front) — tamaño exacto, tapa el interior del borde y la base. */
+.sui-popover__tail-arrow::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--sui-bg-white-0);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+/* ── Eje TOP: tail arriba del panel, punta ↑ (rotate 0). ──
+   Base abajo del arrow; solape de 1px hacia ABAJO (centro +1px) tapa el borde
+   superior del panel. */
+:host([data-sui-position^=top]) {
+  flex-direction: column;
+  padding-top: 8px; /* reserva el alto del tail protruido */
+}
+
+:host([data-sui-position^=top]) .sui-popover__tail {
+  top: 0;
+}
+
+:host([data-sui-position^=top]) .sui-popover__tail-arrow {
+  top: calc(50% + 1px);
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(0deg);
+}
+
+/* ── Eje BOTTOM: tail abajo del panel, punta ↓ (rotate 180). ──
+   Base arriba del arrow; solape de 1px hacia ARRIBA (centro -1px) tapa el borde
+   inferior del panel. */
+:host([data-sui-position^=bottom]) {
+  flex-direction: column;
+  padding-bottom: 8px;
+}
+
+:host([data-sui-position^=bottom]) .sui-popover__tail {
+  bottom: 0;
+}
+
+:host([data-sui-position^=bottom]) .sui-popover__tail-arrow {
+  top: calc(50% - 1px);
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(180deg);
+}
+
+/* ── Eje RIGHT/LEFT: tail lateral. El wrapper pasa a 8 ancho × 16 alto; el arrow
+   se mantiene 16×8 y al rotar ±90° ocupa exactamente esa caja. ── */
+:host([data-sui-position^=right]) .sui-popover__tail,
+:host([data-sui-position^=left]) .sui-popover__tail {
+  width: 8px;
+  height: 16px;
+}
+
+/* RIGHT: tail a la derecha del panel, punta → (rotate 90). ──
+   Base a la izquierda del arrow; solape de 1px hacia la IZQUIERDA (centro -1px)
+   tapa el borde derecho del panel. */
+:host([data-sui-position^=right]) {
+  flex-direction: row;
+  align-items: flex-start;
+  padding-right: 8px;
+}
+
+:host([data-sui-position^=right]) .sui-popover__tail {
+  right: 0;
+}
+
+:host([data-sui-position^=right]) .sui-popover__tail-arrow {
+  top: 50%;
+  left: calc(50% - 1px);
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+
+/* LEFT: tail a la izquierda del panel, punta ← (rotate -90). ──
+   Base a la derecha del arrow; solape de 1px hacia la DERECHA (centro +1px) tapa
+   el borde izquierdo del panel. */
+:host([data-sui-position^=left]) {
+  flex-direction: row;
+  align-items: flex-start;
+  padding-left: 8px;
+}
+
+:host([data-sui-position^=left]) .sui-popover__tail {
+  left: 0;
+}
+
+:host([data-sui-position^=left]) .sui-popover__tail-arrow {
+  top: 50%;
+  left: calc(50% + 1px);
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
+
+/* ── Alineación horizontal del tail en eje top/bottom ──
+   Figma: el tail vive en un wrapper full-width con px-32 + justify por variante
+   (start / center / end). Equivalente con absolute: 32px de inset lateral en los
+   extremos, centro real en *-center (margin = mitad de la caja 16px). */
+:host([data-sui-position=top-left]) .sui-popover__tail,
+:host([data-sui-position=bottom-left]) .sui-popover__tail {
+  left: 32px;
+}
+
+:host([data-sui-position=top-center]) .sui-popover__tail,
+:host([data-sui-position=bottom-center]) .sui-popover__tail {
+  left: 50%;
+  margin-left: -8px; /* mitad de 16px → centra el wrapper sobre el panel */
+}
+
+:host([data-sui-position=top-right]) .sui-popover__tail,
+:host([data-sui-position=bottom-right]) .sui-popover__tail {
+  right: 32px;
+}
+
+/* ── Alineación vertical del tail en eje right/left ──
+   Wrapper 8×16: 32px de inset vertical en los extremos, centro real en
+   *-center (margin = mitad de la caja 16px de alto). Confirmado en Figma
+   (Tail wrapper node 4431:54698 del variant Right Top = `py-[32px]` +
+   `items-start` → tail a 32px del top; por simetría Right/Left Bottom a 32px
+   del bottom). Mismo 32px que el px-32 del eje top/bottom. */
+:host([data-sui-position=right-top]) .sui-popover__tail,
+:host([data-sui-position=left-top]) .sui-popover__tail {
+  top: 32px;
+}
+
+:host([data-sui-position=right-center]) .sui-popover__tail,
+:host([data-sui-position=left-center]) .sui-popover__tail {
+  top: 50%;
+  margin-top: -8px; /* mitad de 16px → centra el wrapper sobre el panel */
+}
+
+:host([data-sui-position=right-bottom]) .sui-popover__tail,
+:host([data-sui-position=left-bottom]) .sui-popover__tail {
+  bottom: 32px;
+}
+
+/* Respeta usuarios con reduced-motion: sin transiciones. */
+@media (prefers-reduced-motion: reduce) {
+  .sui-popover__dismiss {
+    transition: none;
+  }
+}
+/* Área táctil de la X — fix 03-10-2026 (pedido del dueño): se ve de 24 y en
+   mobile hace falta tocar 40. ::before invisible sobre el <button> del
+   compact-button (inset -8 → 40 × 40); no cambia cómo se ve. */
+/* Stencil scoped: el ::before va en el host del compact-button (ya es
+   position:absolute y lleva la clase de scope); el click se escucha en ese
+   host, así el área extendida también cierra. */
+.sui-popover__dismiss::before {
+  content: "";
+  position: absolute;
+  inset: -8px;
+}