@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-date-selector/sui-date-selector.js

@@ -0,0 +1,183 @@
+import { Host, h } from "@stencil/core";
+export class SuiDateSelector {
+    constructor() {
+        /** Mostrar arrow izquierdo (prev). Default `true`. */
+        this.leftIcon = true;
+        /** Mostrar arrow derecho (next). Default `true`. */
+        this.rightIcon = true;
+        /** Disabled global — deshabilita ambos arrows. Default `false`. */
+        this.disabled = false;
+        /** medium 36 con flechas de 24 (default) · large 52 con flechas de 44 y el mes en 16/24. */
+        this.size = 'medium';
+        this.onPrev = () => {
+            if (this.disabled)
+                return;
+            this.prev.emit();
+        };
+        this.onNext = () => {
+            if (this.disabled)
+                return;
+            this.next.emit();
+        };
+    }
+    render() {
+        // large: flechas de 44 = compact-button 5xlarge (en Angular, ::ng-deep a 44 con el
+        // ícono en 20; acá el ícono va en 24, el de 5xlarge).
+        const arrowSize = this.size === 'large' ? '5xlarge' : 'large';
+        return (h(Host, { key: '5237ec999f7662c1b9c6c36b57afd87fb3897645', "data-sui-left-icon": this.leftIcon ? '' : undefined, "data-sui-size": this.size, "data-sui-right-icon": this.rightIcon ? '' : undefined, "data-sui-disabled": this.disabled ? '' : undefined }, this.leftIcon ? (h("sui-compact-button", { class: "sui-date-selector__arrow", icon: "arrow-left-s-line", variantStyle: "white", size: arrowSize, ariaLabel: "Mes anterior", disabled: this.disabled, onClicked: this.onPrev })) : (h("span", { class: "sui-date-selector__placeholder", "aria-hidden": "true" })), h("span", { key: '386b4f8c18426011eb1d6762aec97a3db12f4fcf', class: "sui-date-selector__label" }, this.label), this.rightIcon ? (h("sui-compact-button", { class: "sui-date-selector__arrow", icon: "arrow-right-s-line", variantStyle: "white", size: arrowSize, ariaLabel: "Mes siguiente", disabled: this.disabled, onClicked: this.onNext })) : (h("span", { class: "sui-date-selector__placeholder", "aria-hidden": "true" }))));
+    }
+    static get is() { return "sui-date-selector"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-date-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-date-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto del label (ej. 'Enero 2025', 'January 2024'). Requerido."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "leftIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mostrar arrow izquierdo (prev). Default `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "left-icon",
+                "defaultValue": "true"
+            },
+            "rightIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mostrar arrow derecho (next). Default `true`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "right-icon",
+                "defaultValue": "true"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled global \u2014 deshabilita ambos arrows. Default `false`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiDateSelectorSize",
+                    "resolved": "\"large\" | \"medium\"",
+                    "references": {
+                        "SuiDateSelectorSize": {
+                            "location": "local",
+                            "path": "/Users/anthonyjuarezsolis/Desktop/dev/personal/sui-stencil/src/components/sui-date-selector/sui-date-selector.tsx",
+                            "id": "src/components/sui-date-selector/sui-date-selector.tsx::SuiDateSelectorSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "medium 36 con flechas de 24 (default) \u00B7 large 52 con flechas de 44 y el mes en 16/24."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "prev",
+                "name": "prev",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite al activar el arrow izquierdo (mes anterior). Espeja el output Angular."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emite al activar el arrow derecho (mes siguiente). Espeja el output Angular."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,501 @@
+@charset "UTF-8";
+/* ═══ SUI Datepicker — SUI 2.0 ═════════════════════════════════════
+ * Specs pulled from Figma 8p1k72aKKvzJV4XcvPS4VO — node 446:7414.
+ * Tokens: --sui-bg-*, --sui-stroke-*, --sui-text-*, --sui-radius-*, --sui-shadow-*,
+ *         --sui-primary-base.
+ *
+ * Mobile (≤767px): Range mode colapsa a stack vertical (presets accordion +
+ * 1 calendario). Desktop: layout pleno con sidebar + 2 calendarios.
+ * ══════════════════════════════════════════════════════════════════════ */
+/* Stencil: el @include bp.medium del Angular va como @media (max-width: 767px). */
+:host {
+  display: inline-block;
+  position: relative;
+  font-family: var(--sui-font-sans, var(--font-sans, sans-serif));
+}
+
+:host([data-sui-mode=range]) {
+  /* Para mode=range el host se expande para que el panel sea más ancho */
+  display: block;
+}
+
+/* ───── Trigger (input + icono calendario) ────────────────────────── */
+.sui-datepicker__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 180px;
+  height: 40px;
+  padding: 0 12px;
+  background: var(--sui-bg-white-0, #fff);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  border-radius: var(--sui-radius-10, 10px);
+  box-shadow: var(--sui-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));
+  cursor: pointer;
+  outline: none;
+  font: inherit;
+  color: var(--sui-text-strong-950, #171717);
+  transition: border-color var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out), box-shadow var(--sui-motion-duration-x-fast, 120ms) var(--sui-motion-ease-out, ease-out);
+}
+.sui-datepicker__trigger:hover:not(:disabled) {
+  border-color: var(--sui-stroke-sub-300, #d1d1d1);
+}
+.sui-datepicker__trigger:focus-visible:not(:disabled) {
+  border-color: var(--sui-stroke-strong-950, #171717);
+  box-shadow: 0 0 0 2px var(--sui-bg-white-0, #fff), 0 0 0 4px color-mix(in oklab, var(--sui-stroke-strong-950, #171717) 16%, transparent);
+}
+.sui-datepicker__trigger:disabled {
+  background: var(--sui-bg-weak-50, #f7f7f7);
+  color: var(--sui-text-disabled-300, #d1d1d1);
+  cursor: not-allowed;
+  border: none;
+}
+
+/* ───── Tamaños del campo — extensión SUI (03-10-2026) ─────────────────
+   medium (40) es el de siempre. small (36) para filas densas; large (48) es el
+   de mobile: el mismo alto, padding-x (14) y radio (12) que sui-input large. */
+:host([data-sui-size=small]) .sui-datepicker__trigger {
+  height: 36px;
+  border-radius: var(--sui-radius-8, 8px);
+}
+
+:host([data-sui-size=large]) .sui-datepicker__trigger {
+  height: 48px;
+  padding: 0 14px;
+  gap: 10px;
+  border-radius: var(--sui-radius-12, 12px);
+}
+
+.sui-datepicker__trigger-icon {
+  flex-shrink: 0;
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+
+.sui-datepicker__trigger-text {
+  flex: 1 1 auto;
+  text-align: left;
+  font-size: var(--sui-type-label-sm-size, 14px);
+  font-weight: var(--sui-type-label-sm-weight, 500);
+  line-height: var(--sui-type-label-sm-line, 20px);
+  letter-spacing: var(--sui-type-label-sm-spacing, -0.006em);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.sui-datepicker__trigger-text--placeholder {
+  color: var(--sui-text-soft-400, #a3a3a3);
+  font-weight: 400;
+}
+
+/* large: el texto del campo sube a Label/Medium 16/24 (regla del 03-10-2026:
+   hasta medium 14, large 16). El alto es fijo (48): la línea de 24 no lo
+   mueve. Sin font-weight para que el placeholder conserve su 400. */
+:host([data-sui-size=large]) .sui-datepicker__trigger-text {
+  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);
+}
+
+.sui-datepicker__trigger-chevron {
+  flex-shrink: 0;
+  color: var(--sui-text-sub-600, #5c5c5c);
+}
+
+/* ───── Panel (popover) ───────────────────────────────────────────── */
+.sui-datepicker__panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 50;
+  display: flex;
+  background: var(--sui-bg-white-0, #fff);
+  border: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  /* Figma 446:7413/7412: panel usa radius-20 (no radius-12). VERIFIED via MCP. */
+  border-radius: var(--sui-radius-20, 20px);
+  box-shadow: var(--sui-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, 0.1019607843));
+  overflow: hidden;
+  /* Animación entrada */
+  animation: sui-datepicker-enter 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.sui-datepicker__panel--inline {
+  position: static;
+  animation: none;
+}
+.sui-datepicker__panel {
+  /* Range desktop con 2 calendarios: sidebar + 2 cals (936×432 según Figma) */
+}
+.sui-datepicker__panel--range {
+  width: 936px;
+  max-width: calc(100vw - 32px);
+}
+
+/* Range con 1 calendario (calendars=1 prop o mobile-forced) — colapsa a un solo
+   bloque con sidebar + 1 cal. Width auto, queda compacto (~568px). */
+:host([data-sui-calendars="1"]) .sui-datepicker__panel--range {
+  width: auto;
+}
+
+@keyframes sui-datepicker-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+/* ───── Sidebar de presets (mode=range) ───────────────────────────── */
+.sui-datepicker__presets {
+  /* Figma Time Filter 442:2362: flex-col gap-8, w-200, pt-20 px-16 pb-2,
+     border-r soft-200. VERIFIED via MCP. */
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 200px;
+  flex-shrink: 0;
+  padding: 20px 16px 2px;
+  border-right: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+  background: var(--sui-bg-white-0, #fff);
+  /* box-sizing OBLIGATORIO: el repo NO tiene reset global → sin esto el
+     width:200 + padding 16·2 + border 1 infla el sidebar a 233px, empuja los
+     2 calendarios (2×368) más allá del panel (width:936) y `overflow:hidden`
+     recorta la columna del domingo del calendar derecho. Con border-box el
+     padding queda dentro de los 200px (chips period-range 168 + 16·2 = 200). */
+  box-sizing: border-box;
+}
+
+/* `.sui-datepicker__preset` removido — ahora se renderiza <sui-period-range>
+   (Figma 443:336). Toda la lógica de chip viene del primitive. */
+/* ───── Content (calendarios + footer) ────────────────────────────── */
+.sui-datepicker__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.sui-datepicker__calendars {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.sui-datepicker__calendar {
+  /* Figma 446:7413 (442:1858) / 446:7412 (442:711): container 368×432,
+     padding 20, gap-8 entre date-selector / day-labels / day-grid.
+     Área útil = 368 − 2×20 = 328px = 7 cells×40 + 6 gaps×8. VERIFIED via MCP. */
+  flex: 1 1 0;
+  max-width: 368px;
+  padding: 20px;
+  /* border-box: el padding (y el border-left del --right) quedan DENTRO de los
+     368px → sidebar 200 + 368 + 368 = 936 = ancho del panel (Figma 446:7412).
+     Sin esto el border-left del calendar derecho sumaba 1px extra (369) y, junto
+     al sidebar inflado, desbordaba el panel `overflow:hidden`. */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.sui-datepicker__calendar--right {
+  border-left: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+}
+
+/* ───── Date Selector / Day Labels / Day Cells ──────────────────────
+   TODO el chrome del calendar viene de los primitives:
+     <sui-date-selector>  (Figma 442:192) — átomo standalone fixed 288×36
+     <sui-day-label>      (Figma 3118:24556) — fixed 40×40
+     <sui-day-cell>       (Figma 437:175) — fixed 40×40
+   Layout (Figma 442:711 — cada Row es 328px): 7 cells de 40 con gap-8 entre
+   ellas → 7×40 + 6×8 = 328px. VERIFIED via MCP nodos 442:713/721/etc:
+   cells en x = 0,48,96,144,192,240,288 (paso 48 = 40 cell + 8 gap). */
+/* Dentro del calendar (Figma 446:7414) el date-selector ocupa el ancho
+   completo del grid (328px), alineado con day-labels y day-grid — medido
+   en DOM: selector 288 vs labels 328. Override SOLO aquí; el átomo
+   standalone mantiene su canon de 288 (Figma 442:241). */
+.sui-datepicker__calendar sui-date-selector {
+  width: 328px;
+  max-width: 328px;
+}
+
+/* Wrapper role=grid (a11y 04-10-2026): solo semántica. display:contents deja a
+   day-labels y day-grid como hijos directos del calendar, así que el layout es
+   el mismo de antes. */
+.sui-datepicker__grid {
+  display: contents;
+}
+
+.sui-datepicker__day-labels {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  /* Width 328px = 7 labels×40 + 6 gaps×8 (Figma Row 442:713). */
+  width: 328px;
+  max-width: 328px;
+}
+
+.sui-datepicker__day-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 328px;
+  max-width: 328px;
+}
+
+/* Cada fila = 7 cells con gap-8. Position relative para anclar la banda de
+   rango (Figma 446:7412 — la franja alpha-10 es continua a nivel de fila). */
+.sui-datepicker__day-row {
+  position: relative;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  width: 328px;
+}
+
+/* ───── Range band (franja alpha-10 continua por fila) ───────────────
+ * Figma 446:7412 (nodos 442:745/753/1979 con rango pintado): el bg
+ * primary-alpha-10 cubre la fila ENTERA donde hay celdas in-range,
+ * incluyendo los gap-8 entre celdas — sin huecos. Las esquinas se
+ * redondean solo en los extremos REALES del rango (start/end). Cuando el
+ * rango continúa hacia la fila adyacente, la banda se extiende al borde del
+ * row (left/right = 0) para conectar visualmente con la fila vecina.
+ *
+ * Matemática (row = 328px, cell = 40, paso = 48):
+ *   - borde izq de cell N  = N × 48px
+ *   - borde der de cell N  = N × 48 + 40 → distancia al borde der = 288 − N×48
+ * ──────────────────────────────────────────────────────────────────── */
+.sui-datepicker__range-band {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  /* Por default (rango pasa de largo en ambos extremos) la banda llena toda
+     la fila. round-left/right la recortan al extremo real del rango. */
+  left: 0;
+  right: 0;
+  background: var(--sui-primary-alpha-10, rgba(250, 115, 25, 0.1019607843));
+  pointer-events: none;
+  z-index: 0;
+  /* Banda arranca en el start real del rango: recorta el borde izq a la cell
+     bandStart y redondea esa esquina (radius-8 del cell). El "paso" entre
+     celdas (--sui-day-step) = 40 cell + gap; 48px en desktop (gap-8 Figma). */
+}
+.sui-datepicker__range-band--round-left {
+  left: calc(var(--sui-band-start) * var(--sui-day-step, 48px));
+  border-top-left-radius: var(--sui-radius-8, 8px);
+  border-bottom-left-radius: var(--sui-radius-8, 8px);
+}
+.sui-datepicker__range-band {
+  /* Banda termina en el end real del rango: recorta el borde der a la cell
+     bandEnd y redondea esa esquina. */
+}
+.sui-datepicker__range-band--round-right {
+  right: calc((6 - var(--sui-band-end)) * var(--sui-day-step, 48px));
+  border-top-right-radius: var(--sui-radius-8, 8px);
+  border-bottom-right-radius: var(--sui-radius-8, 8px);
+}
+
+/* Las cells deben quedar SOBRE la banda (start/end con bg primary-base sólido
+   tapan sus 40px de la banda; in-range muestra solo texto sobre la franja). */
+.sui-datepicker__day-row sui-day-cell {
+  position: relative;
+  z-index: 1;
+}
+
+/* ───── Footer (Cancel + Apply) ──────────────────────────────────────
+ * Figma define DOS footers distintos:
+ *   - Date Picker (single) 442:1908: flex gap-16 p-16, botones flex-[1_0_0]
+ *     (50/50 full-width), SIN hint. VERIFIED via MCP.
+ *   - Range Picker 442:2316: flex gap-16 pl-24 pr-16 py-16, hint flex-[1_0_0]
+ *     a la izquierda + Cancel/Apply fijos (w-108) a la derecha. VERIFIED.
+ * ────────────────────────────────────────────────────────────────────── */
+.sui-datepicker__footer {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  /* Single date picker: padding simétrico 16 (442:1908). */
+  padding: 16px;
+  border-top: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+}
+
+/* Range footer: padding asimétrico pl-24 pr-16 (442:2316). */
+:host([data-sui-mode=range]) .sui-datepicker__footer {
+  padding: 16px 16px 16px 24px;
+}
+
+.sui-datepicker__range-hint {
+  flex: 1 0 0;
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 400; /* "Range: " es Paragraph/Small (regular). */
+  line-height: 20px;
+  letter-spacing: -0.006em;
+  color: var(--sui-text-sub-600, #5c5c5c);
+  font-feature-settings: "ss11" 1, "calt" 0, "liga" 0;
+}
+
+.sui-datepicker__footer-actions {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+}
+
+/* Single date picker (sin hint): botones ocupan 50/50 el ancho — flex-[1_0_0]
+   en Figma 442:1909/1910. */
+:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions {
+  flex: 1 0 0;
+  min-width: 0;
+}
+:host(:not([data-sui-mode=range])) .sui-datepicker__footer-actions sui-button {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+/* Range: botones fijos w-108 a la derecha (442:2317/2318). margin-left auto
+   mantiene el anclaje derecho aunque el hint (flex-1) no esté renderizado —
+   sin él, los botones colapsaban a la izquierda hasta elegir la primera fecha. */
+:host([data-sui-mode=range]) .sui-datepicker__footer-actions {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+:host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button {
+  width: 108px;
+}
+
+/* ───── Mobile (≤767px) ──────────────────────────────────────────────
+ * En mobile el component fuerza `effectiveCalendars()=1` desde TS, así que
+ * el segundo calendar ya no se renderiza. Acá solo ajustamos el layout de
+ * presets (de columna lateral a fila scrollable horizontal) y el width del
+ * panel para que no exceda viewport.
+ * ────────────────────────────────────────────────────────────────────── */
+@media (max-width: 767px) {
+  .sui-datepicker__panel--range {
+    width: calc(100vw - 32px);
+    flex-direction: column;
+  }
+  .sui-datepicker__presets {
+    flex-direction: row;
+    overflow-x: auto;
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid var(--sui-stroke-soft-200, #ebebeb);
+    padding: 12px 16px;
+    /* Snap horizontal scroll */
+    scroll-snap-type: x proximity;
+    -webkit-overflow-scrolling: touch;
+  }
+  /* En mobile las chips (<sui-period-range>) no deben estirarse a 100% — quedan
+     auto-width en la fila scrollable. */
+  .sui-datepicker__presets sui-period-range {
+    width: auto;
+    flex-shrink: 0;
+    scroll-snap-align: start;
+  }
+  /* En mobile el calendar (7 cells × 40px fijos) no cabe con gap-8 + padding-20
+     en viewports angostos. Comprimimos el gap a 4px (step 44px) y el padding
+     lateral a 12px para que el row de 7×40 + 6×4 = 304px quepa. La banda usa
+     --sui-day-step para mantenerse alineada al nuevo gap. */
+  .sui-datepicker__calendar {
+    padding-left: 12px;
+    padding-right: 12px;
+    max-width: none;
+  }
+  .sui-datepicker__day-labels,
+  .sui-datepicker__day-grid,
+  .sui-datepicker__day-row {
+    --sui-day-step: 44px;
+    width: 304px;
+    max-width: 304px;
+    gap: 4px;
+  }
+}
+/* Footer del rango en mobile (03-10-2026): con Cancelar/Aplicar en large (48)
+   el resumen «Rango: …» quedaba aplastado a una columna de 5 líneas al lado de
+   los botones de 108. En el teléfono va arriba a todo el ancho y los dos
+   botones abajo, 50/50 (como el footer de fecha única). */
+@media (max-width: 767px) {
+  :host([data-sui-mode=range]) .sui-datepicker__footer {
+    flex-wrap: wrap;
+    gap: 12px 16px;
+    padding: 16px;
+  }
+  .sui-datepicker__range-hint {
+    flex: 1 0 100%;
+  }
+  /* El selector de mes medía 328 (el ancho de desktop) sobre una grilla de 304:
+     se salía por la derecha y la flecha «siguiente» quedaba pegada al borde. */
+  .sui-datepicker__calendar sui-date-selector {
+    width: 304px;
+    max-width: 304px;
+  }
+  :host([data-sui-mode=range]) .sui-datepicker__footer-actions {
+    flex: 1 0 100%;
+    margin-left: 0;
+  }
+  :host([data-sui-mode=range]) .sui-datepicker__footer-actions sui-button {
+    width: auto;
+    flex: 1 0 0;
+    min-width: 0;
+  }
+}
+/* ───── Flechas de mes de 40 (large y mobile) — NO portado ───────────────
+ * En el Angular se resuelve con ::ng-deep sobre el <button> interno del
+ * sui-compact-button. En Stencil (scoped) un selector del datepicker no alcanza
+ * los elementos internos de otro componente, así que acá las flechas quedan en
+ * 24 salvo en xlarge (sui-date-selector size=large, flechas de 44). */
+/* ───── xlarge — canon del dueño 04-10-2026: piso táctil de 44 ───────────
+ * Nada cambia en small/medium/large. Con xlarge:
+ *   - campo de 52 (el alto de sui-input xlarge), texto 16/24;
+ *   - días de 44 × 44 (sui-day-cell size=large) con gap 4: 7 × 44 + 6 × 4 =
+ *     332, que entra en 390 (panel de 358 = 332 + 2 × 12 + borde);
+ *   - flechas de mes de 44 (sui-date-selector size=large, barra de 52);
+ *   - rangos predefinidos de 44 (sui-period-range size=large);
+ *   - Cancelar/Aplicar en large (48), también en web.
+ * En web el calendario sigue midiendo 368: el padding lateral baja a 18 para
+ * dejar los 332 de la grilla (sidebar 200 + 2 × 368 = 936, el mismo panel).
+ * ──────────────────────────────────────────────────────────────────────── */
+:host([data-sui-size=xlarge]) .sui-datepicker__trigger {
+  height: 52px;
+  padding: 0 16px;
+  gap: 10px;
+  border-radius: var(--sui-radius-12, 12px);
+}
+
+:host([data-sui-size=xlarge]) .sui-datepicker__trigger-text {
+  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);
+}
+
+:host([data-sui-size=xlarge]) .sui-datepicker__calendar {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+:host([data-sui-size=xlarge]) .sui-datepicker__day-labels,
+:host([data-sui-size=xlarge]) .sui-datepicker__day-grid,
+:host([data-sui-size=xlarge]) .sui-datepicker__day-row {
+  --sui-day-step: 48px;
+  width: 332px;
+  max-width: 332px;
+  gap: 4px;
+}
+
+:host([data-sui-size=xlarge]) .sui-datepicker__day-labels sui-day-label {
+  width: 44px;
+  max-width: 44px;
+}
+
+:host([data-sui-size=xlarge]) .sui-datepicker__calendar sui-date-selector {
+  width: 332px;
+  max-width: 332px;
+}
+
+@media (max-width: 767px) {
+  :host([data-sui-size=xlarge]) .sui-datepicker__calendar {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}