@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-content-divider/sui-content-divider.d.ts

@@ -0,0 +1,101 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiContentDividerType = 'line' | 'line-spacing' | 'text-line' | 'text' | 'solid-text' | 'icon-button' | 'icon-button-group' | 'text-button' | 'text-button-group';
+/** Item para los variants `icon-button-group` / `text-button-group`. */
+export interface SuiContentDividerItem {
+    /** Identificador opcional emitido por (itemClick). */
+    value?: string;
+    /** RemixIcon name (sin prefijo 'ri-'). Usado en icon-button-group. */
+    icon?: string;
+    /** Label para text-button-group. */
+    text?: string;
+    /** aria-label override. Default = text o `Acción ${value}`. */
+    ariaLabel?: string;
+    disabled?: boolean;
+}
+/** Payload del evento itemClick (-group variants). */
+export interface SuiContentDividerItemClick {
+    item: SuiContentDividerItem;
+    index: number;
+    event: MouseEvent;
+}
+/**
+ * `<sui-content-divider>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (SUI Angular, projects/sui-design-system/src/lib/sui-content-divider). Misma
+ * API pública (type/text/icon/ariaLabel/disabled/items → props; buttonClick /
+ * itemClick → @Event), TODAS las variantes/estados y mismos VALORES exactos
+ * (tokens del DS, no hex). El accent del DS es NARANJA brand (#fa7319 =
+ * --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set 414:4401
+ * ("Content Divider [1.1]") — 9 types.
+ *
+ * Componente monolítico que renderea 9 patrones de divider via discriminated
+ * `type`. Diferente de `sui-divider` (línea pura) — éste agrega contenido
+ * centrado (texto / iconos / botones) entre líneas.
+ *
+ * Types (Figma EXACT — verificado contra nodos 2950:6096..3085:17902):
+ *   line              — línea horizontal pura, 1px stroke-soft-200
+ *   line-spacing      — línea con py-1.5 (4px total) para "respiro"
+ *   text-line         — línea–texto–línea SIMÉTRICO, gap-10 a ambos lados.
+ *                       Subheading/2X Small 11/12 medium, ls 0.02em, UPPERCASE, soft-400
+ *   text              — texto UPPERCASE SIN líneas, px-8 py-4. El texto es flex-1
+ *                       pero NO se centra (left-aligned, igual que Figma 2937:10458).
+ *                       Subheading/X Small 12/16 medium, ls 0.04em, soft-400
+ *   solid-text        — texto UPPERCASE con bg-weak-50 px-20 py-6 (idem left-aligned).
+ *   icon-button       — botón ícono centrado entre 2 líneas, gap-10.
+ *                       Button: bg-white border stroke-soft-200 p-6 rounded-8 shadow-xs, icono 20px
+ *   icon-button-group — grupo de iconos pegados entre 2 líneas, gap-10.
+ *                       Container SIN shadow — solo border + radius + overflow:hidden.
+ *   text-button       — botón texto centrado entre 2 líneas, gap-10.
+ *   text-button-group — grupo de text buttons pegados entre 2 líneas.
+ *
+ * Token map (Figma → sui-tokens):
+ *   stroke/soft-200 → --sui-stroke-soft-200 (#ebebeb)
+ *   bg/weak-50      → --sui-bg-weak-50  (#f7f7f7, solid-text bg + hover)
+ *   bg/white-0      → --sui-bg-white-0  (#ffffff, button bg)
+ *   text/soft-400   → --sui-text-soft-400 (#a3a3a3, text variants)
+ *   text/sub-600    → --sui-text-sub-600  (#5c5c5c, button labels + icon color)
+ *   radius-8        → --sui-radius-8 (8px)
+ *   regular-shadow/x-small → --sui-regular-shadow-x-small
+ *
+ * Estados interactivos (inferidos — el component set no publica variants de
+ * estado): hover → bg-weak-50, active → scale(0.97), focus-visible → ring
+ * primary. Disabled per-item → opacity 0.4 + cursor not-allowed.
+ *
+ * `scoped: true` (light DOM, NO shadow): igual estrategia que sui-button /
+ * sui-icon. Los selectores `:host([data-sui-type])` y los `<sui-icon>`
+ * proyectados translan limpio sin pelear con shadow DOM.
+ */
+export declare class SuiContentDivider {
+    el: HTMLElement;
+    /** Patrón del divider. Default `line`. */
+    type: SuiContentDividerType;
+    /** Texto para los variants text-line / text / solid-text / text-button. */
+    text: string;
+    /** RemixIcon name (sin 'ri-') para variant icon-button. */
+    icon: string | null;
+    /** ARIA label para el botón single (icon-button / text-button). */
+    ariaLabel: string | null;
+    /** Disabled state del button (icon-button / text-button). */
+    disabled: boolean;
+    /** Items para los variants -group. Mínimo 2, recomendado 3. */
+    items: SuiContentDividerItem[];
+    /** Click en el botón single (icon-button / text-button). */
+    buttonClick: EventEmitter<MouseEvent>;
+    /** Click en un item del group (icon-button-group / text-button-group). */
+    itemClick: EventEmitter<SuiContentDividerItemClick>;
+    private onButton;
+    private onItem;
+    /**
+     * iOS :active de los botones internos (SuiToque del Angular): la presencia del
+     * touchstart engancha el pipeline táctil y el touchend suelta el foco. En el
+     * host y pasivos, para no frenar el scroll.
+     */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private renderLine;
+    private renderContent;
+    render(): any;
+}

package/dist/types/components/sui-content-label/sui-content-label.d.ts

@@ -0,0 +1,90 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiBadgeConfig } from '../sui-badge/sui-badge';
+import type { SuiAvatarConfig } from '../sui-avatar/sui-avatar';
+import type { SuiBrandLogoCompany } from '../sui-brand-logo/sui-brand-logo';
+/**
+ * 5 tipos de leading visual del Content Label (eje Type del set de Figma).
+ *   basic     — sin leading; solo el bloque de texto.
+ *   left-icon — sui-key-icon (círculo stroke, icono = 50% del contenedor).
+ *   avatar    — sui-avatar (foto / iniciales) 40/48px según size.
+ *   brand     — sui-brand-logo RAW (sin caja) 40/48px según size.
+ *   company   — sui-avatar con companyLogoSrc (logo de empresa) 40/48px.
+ */
+export type SuiContentLabelType = 'basic' | 'left-icon' | 'avatar' | 'brand' | 'company';
+/** Eje Size del set: Medium (leading 40px) | Large (leading 48px). */
+export type SuiContentLabelSize = 'medium' | 'large';
+/** Dónde vive el badge: `trailing` (canon del set) | `title` (inline, composición Content Card). */
+export type SuiContentLabelBadgePlacement = 'trailing' | 'title';
+/**
+ * `<sui-content-label>` — SUI Design System 2.0.
+ *
+ * Portado 1:1 desde el SUI Angular (`sui-design-system/.../sui-content-label`).
+ * Misma API (type/size/label/sublabel/description/icon/avatar/companyLogoSrc/
+ * brand/badge/badgePlacement/toggle/toggleChecked/disabled + evento
+ * `toggleCheckedChange`) y los mismos tokens.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — set "Content Label [1.1]" nodo 2945:5539.
+ * 10 variants = Type(5) × Size(2: Medium 40 | Large 48).
+ *
+ * Fila de contenido SIN card: [ leading ] [ text block flex-1 ] [ trailing ].
+ *   row         → flex, items-center, gap 14
+ *   text block  → flex-col, gap 4, flex 1 1 0, min-width 0
+ *   label       → medium Label/Small 14/20 · large Label/Medium 16/24 · strong-950
+ *   sublabel    → Paragraph/X Small 12/16 · sub-600
+ *   description → medium Paragraph/X Small · large Paragraph/Small · sub-600
+ *   leading     → sui-key-icon stroke 40/48 · sui-avatar lg/xl · sui-brand-logo xl/2xl
+ *   badge       → sui-badge medium; default color `orange` (branding; Figma = blue)
+ *   toggle      → sui-switch medium
+ *
+ * `avatar` y `badge` aceptan string (atributo: src / label) u objeto de config
+ * (propiedad JS). Patrón controlled del toggle: el componente NO cambia
+ * `toggleChecked` solo; emite `toggleCheckedChange` con el valor siguiente y el
+ * consumer lo aplica.
+ *
+ * Extensiones del proyecto (no son ejes del set): `badgePlacement='title'` y `disabled`.
+ */
+export declare class SuiContentLabel {
+    private static _nextId;
+    /** El toggle toma su nombre del label (aria-labelledby) y su descripción de la descripción. */
+    private readonly labelId;
+    private readonly descriptionId;
+    /** Tipo de leading visual. Default `basic`. */
+    type: SuiContentLabelType;
+    /** Size del set: `medium` (leading 40, Label/Small) | `large` (leading 48, Label/Medium). */
+    size: SuiContentLabelSize;
+    /** Label principal. */
+    label: string;
+    /** Sublabel inline al lado del label. Vacío = no se renderiza. */
+    sublabel: string;
+    /** Descripción bajo el title row. Vacío = no se renderiza. */
+    description: string;
+    /** RemixIcon name (sin 'ri-') para type=left-icon — va al sui-key-icon. */
+    icon: string | null;
+    /** Avatar del leading (type=avatar / company): string (src) o `SuiAvatarConfig`. */
+    avatar: SuiAvatarConfig | string | null;
+    /** Logo de empresa para type=company (mini-avatar bottom-right del sui-avatar). */
+    companyLogoSrc: string | null;
+    /** Marca para type=brand (logo raw, sin caja). */
+    brand: SuiBrandLogoCompany | null;
+    /**
+     * Badge: string (label) o `SuiBadgeConfig`. Fallbacks: color `orange`, variant
+     * `lighter`, size `medium`. null / '' = sin badge.
+     */
+    badge: SuiBadgeConfig | string | null;
+    /** Dónde renderiza el badge: `trailing` (canon Figma) | `title` (composición Content Card). */
+    badgePlacement: SuiContentLabelBadgePlacement;
+    /** Muestra el switch trailing (eje Toggle del set). */
+    toggle: boolean;
+    /** Estado del switch (controlled). */
+    toggleChecked: boolean;
+    /** Atenúa texto/leading a tokens disabled-300 y bloquea el switch. */
+    disabled: boolean;
+    /** Emite el valor siguiente del switch al tocarlo (no se emite si está disabled). */
+    toggleCheckedChange: EventEmitter<boolean>;
+    private get avatarCfg();
+    private get badgeCfg();
+    private onToggleChange;
+    private renderLeading;
+    private renderBadge;
+    render(): any;
+}

package/dist/types/components/sui-counter-input/sui-counter-input.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiCounterInputSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-counter-input>` — SUI Design System 2.0.
+ *
+ * Portado 1:1 desde el SUI Angular (`sui-design-system/.../sui-counter-input`).
+ * Misma API (size/label/sublabel/required/tooltip/hint/error/errorMessage/value/
+ * min/max/step/disabled/ariaLabel/decrementLabel/incrementLabel + evento
+ * `valueChange`), mismo SCSS y mismo comportamiento.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 428:5656 "Counter Input [1.1]"
+ * (6 states × 3 sizes). Input numérico con steppers −/+ y el valor centrado.
+ *  - Sizes: 2xsmall 28 · xsmall 32 · small 36 · medium 40 (default) · large 48 · xlarge 52.
+ *    Steppers de 24 hasta medium; 40 / 44 en large / xlarge (lo que se toca en
+ *    mobile mide ≥ 40). El campo es píldora (decisión de marca).
+ *  - Label → sui-form-label, hint → sui-form-hint (gap 6).
+ *
+ * Patrón controlled (igual que sui-switch): NO muta `value` al tocar; emite
+ * `valueChange` con el valor recortado a min/max y el consumer lo aplica.
+ * Los botones se deshabilitan en el límite (− en min, + en max).
+ *
+ * A11y: el valor es un `role="spinbutton"` enfocable, con ↑/↓ (un paso) e
+ * Inicio/Fin (a min/max si son finitos). Se nombra con el label visible
+ * (aria-labelledby) salvo que se pase `ariaLabel`, y se describe con el hint.
+ *
+ * Diferencia con Angular: sin ControlValueAccessor (no hay Reactive Forms en web
+ * components); textos de los botones por prop con default en español
+ * («Disminuir» / «Aumentar», los de `provideSuiTextos`).
+ */
+export declare class SuiCounterInput {
+    el: HTMLElement;
+    private static _nextId;
+    private readonly uid;
+    private readonly labelId;
+    private readonly hintId;
+    /** Tamaño. Default `medium` (40). `large` 48 / `xlarge` 52 para mobile. */
+    size: SuiCounterInputSize;
+    /** Label arriba del campo (sui-form-label). */
+    label: string | null;
+    sublabel: string | null;
+    required: boolean;
+    tooltip: string | null;
+    /** Hint debajo del campo (sui-form-hint). */
+    hint: string | null;
+    /** Estado de error: borde error y, si hay `errorMessage`, reemplaza al hint. */
+    error: boolean;
+    errorMessage: string | null;
+    /** Valor actual (controlled). Default `0`. */
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    /** Nombre accesible del spinbutton; si se pasa, reemplaza al label visible. */
+    ariaLabel: string | null;
+    /** aria-label del botón −. Default «Disminuir». */
+    decrementLabel: string | null;
+    /** aria-label del botón +. Default «Aumentar». */
+    incrementLabel: string | null;
+    /** Emite el valor nuevo (recortado a min/max) al tocar −/+ o con el teclado. */
+    valueChange: EventEmitter<number>;
+    /** El form-label no tiene 'large' — se capea a medium (el label no escala). */
+    private get labelSize();
+    private get canDecrement();
+    private get canIncrement();
+    private commit;
+    private decrement;
+    private increment;
+    private onSpinKeydown;
+    /** iOS WKWebView: touchstart engancha el pipeline de :active; touchend.blur() lo suelta. */
+    private onTouchStart;
+    private onTouchEnd;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/sui-date-selector/sui-date-selector.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-date-selector>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (SUI Angular, projects/sui-design-system/src/lib/sui-date-selector). Misma API
+ * pública (label/leftIcon/rightIcon/disabled + eventos `prev`/`next`), mismo
+ * comportamiento (arrows opcionales con placeholder que preserva el centrado del
+ * label, disabled gatea ambos arrows) 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 — frame 442:192 (`Date Selector [1.1]`),
+ * 4 variants (left icon on/off x right icon on/off).
+ *
+ * Header del calendar: muestra el mes/año actual centrado y opcionalmente arrows
+ * prev/next a los lados. Los arrows están implementados como
+ * `<sui-compact-button variant-style="white" size="large">` (composición canon,
+ * mismo primitivo que usa el Angular original). Pensado para sentarse encima de
+ * la grilla de días (sui-day-cell / sui-day-label) de un datepicker.
+ *
+ * EXACT specs (pulled de Figma 442:241 — both icons on):
+ *   Container:  bg-weak-50, padding 6px, gap 6px, radius-8, w-288, h-36,
+ *               items-center, justify-center, overflow-clip.
+ *   Label:      Inter Medium 14/20/-0.6%, text-sub-600, center, flex-[1_0_0]
+ *               (expande el space disponible), font-feature 'ss11' 1.
+ *   Arrows:     sui-compact-button variant-style=white size=large, iconos
+ *               arrow-left-s-line / arrow-right-s-line (20x20).
+ *
+ * Placeholder: cuando uno de los arrows está off, se renderiza un span 24x24
+ * invisible en su lugar para que el label NO se descentre al togglear on/off.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * translan limpio y los `<sui-compact-button>` internos heredan los tokens del
+ * global sin pelear con shadow DOM. Misma estrategia que el Angular original.
+ */
+/** medium 36 con flechas de 24 (default) · large 52 con flechas de 44 (piso táctil). */
+export type SuiDateSelectorSize = 'medium' | 'large';
+export declare class SuiDateSelector {
+    /** Texto del label (ej. 'Enero 2025', 'January 2024'). Requerido. */
+    label: string;
+    /** Mostrar arrow izquierdo (prev). Default `true`. */
+    leftIcon: boolean;
+    /** Mostrar arrow derecho (next). Default `true`. */
+    rightIcon: boolean;
+    /** Disabled global — deshabilita ambos arrows. Default `false`. */
+    disabled: boolean;
+    /** medium 36 con flechas de 24 (default) · large 52 con flechas de 44 y el mes en 16/24. */
+    size: SuiDateSelectorSize;
+    /** Emite al activar el arrow izquierdo (mes anterior). Espeja el output Angular. */
+    prev: EventEmitter<void>;
+    /** Emite al activar el arrow derecho (mes siguiente). Espeja el output Angular. */
+    next: EventEmitter<void>;
+    private onPrev;
+    private onNext;
+    render(): any;
+}

package/dist/types/components/sui-datepicker/sui-datepicker.d.ts

@@ -0,0 +1,182 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDatepickerPreset, SuiDatepickerPresetId } from './sui-datepicker.data';
+/** Alto del campo: small 36 · medium 40 (default) · large 48 · xlarge 52 con días,
+ *  flechas y rangos de 44 (piso táctil del teléfono). */
+export type SuiDatepickerSize = 'small' | 'medium' | 'large' | 'xlarge';
+/**
+ * `<sui-datepicker>` — SUI Design System (SUI Design System 2.0). COMPUESTO + COMPLEJO.
+ *
+ * Portado 1:1 desde el SUI Angular
+ * (projects/sui-design-system/src/lib/sui-datepicker). Misma API
+ * pública (mode/calendars/inline/placeholder/showFooter/disabled/min/max/
+ * presets/markedDates/value), TODAS las variantes/states/comportamiento
+ * (overlay popover + outside-click + Escape, navegación de meses, range con
+ * banda continua, presets clampeados a min/max, lazy mount del panel, mobile
+ * 1-calendar + presets en fila scrollable) 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 — component set 446:7414 (Date & Range
+ * Picker [1.1]). Sub-piezas: Day Cell (437:175), Date Selector (442:192),
+ * Period Range chip (443:336), Day Labels (3118:24556).
+ *
+ * Composición (como el Angular): `<sui-date-selector>` (mes + flechas),
+ * `<sui-day-label>`, `<sui-day-cell>`, `<sui-period-range>` (rangos predefinidos)
+ * y `<sui-button>` (Cancelar / Aplicar). La banda de rango vive en la fila.
+ *
+ * a11y (04/09-10-2026): el panel es dialog modal con nombre («Elegir fecha» /
+ * «Elegir período»; inline = group), la fila de días de la semana va DENTRO del
+ * role=grid, cada día se anuncia con la fecha completa («martes 7 de octubre de
+ * 2026») y las flechas mueven el foco (← → un día, ↑ ↓ una semana, Inicio/Fin).
+ *
+ * Form integration: como custom element no implementa ControlValueAccessor (eso
+ * es Angular-only); el contrato equivalente es el prop `value` (Date | SuiDateRange
+ * | null) + el evento `valueChange`. El consumer hace el two-way binding.
+ *
+ * EXACT specs (Figma — VERIFIED via MCP, espejo del Angular):
+ *   Date Picker container (446:7413): 368×432, radius-20, border soft-200,
+ *     shadow-medium. Items wrapper: p-20, gap-8, border-b.
+ *   Range Picker container (446:7412): 936×432, radius-20. Sidebar Time Filter:
+ *     w-200, pt-20 px-16 pb-2, gap-8, border-r.
+ *   Day Cell: 40×40, py-10, radius-8. Default bg white-0 / Active primary-base.
+ *   Day Cell in-range: row con bg primary-alpha-10 (banda), cells text primary-base.
+ *   Day labels: 40×40, py-10, radius-10, text soft-400.
+ *   Footer single: gap-16 p-16, botones 50/50. Footer range: gap-16 pl-24 pr-16,
+ *     hint + Cancel/Apply w-108.
+ *
+ * `scoped: true` (light DOM, NO shadow): así `:host([data-sui-*])` reflejan el
+ * estado del host, el outside-click `@Listen('document:pointerdown')` puede
+ * comparar `contains(target)` contra el host real, y los `<sui-*>` internos
+ * heredan tokens del global sin pelear con shadow DOM.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend pasivos y suelta
+ * el foco del botón tocado (SuiToque del Angular).
+ */
+export declare class SuiDatepicker {
+    el: HTMLElement;
+    /** `date` (single) o `range` (start..end con presets). Default `date`. */
+    mode: SuiDatepickerMode;
+    /**
+     * Cantidad de calendarios visibles en mode='range'.
+     *  - `2` (default): dos meses lado a lado — Figma 936×432
+     *  - `1`: un solo calendario; user navega prev/next
+     * En mobile (≤767px) se fuerza `1`. Para mode='date' siempre es 1.
+     */
+    calendars: SuiDatepickerCalendars;
+    /** Renderiza el calendar inline (sin trigger ni popover). Default `false`. */
+    inline: boolean;
+    /** Alto del campo: small 36 · medium 40 (default) · large 48 · xlarge 52 (días de 44). */
+    size: SuiDatepickerSize;
+    /** Placeholder del campo sin valor. Sin pasarlo: «Elige una fecha» (`date`) o
+     *  «Elige el período» (`range`), en imperativo con tuteo. */
+    placeholder: string | null;
+    /** Si true, muestra Cancel/Apply en el footer. Range siempre lo muestra. Default `true`. */
+    showFooter: boolean;
+    /** Deshabilitado: bloquea el trigger. Default `false`. */
+    disabled: boolean;
+    /** Mínima fecha permitida (property binding — Date). Default `null`. */
+    min: Date | null;
+    /** Máxima fecha permitida (property binding — Date). Default `null`. */
+    max: Date | null;
+    /**
+     * Lista de presets para mode=range (property binding). Default = los 8 estándar
+     * (Hoy / Últimos 7 días / … / Todo el tiempo).
+     */
+    presets: SuiDatepickerPreset[];
+    /**
+     * Fechas a marcar con un dot indicador (Figma 442:1473). Útil para fechas con
+     * eventos/pedidos/disponibilidad. Matching por mismo día (ignora time-of-day).
+     * Property binding — array de Date. Default `[]`.
+     */
+    markedDates: readonly Date[];
+    /**
+     * Valor actual (property binding). Date para mode=date, SuiDateRange ({start,
+     * end}) para mode=range, o null. Default `null`. El consumer hace el two-way
+     * binding escuchando `valueChange`.
+     */
+    value: Date | SuiDateRange | null;
+    /** Emite el valor confirmado (al Apply, o al click en mode=date sin footer). */
+    valueChange: EventEmitter<SuiDateRange | Date | null>;
+    /** Emite cuando el popover se abre. */
+    opened: EventEmitter<void>;
+    /** Emite cuando el popover se cierra (Cancel, outside-click, Escape, Apply). */
+    closed: EventEmitter<void>;
+    /** Popover/sheet abierto. */
+    open: boolean;
+    /** Mes ancla del grid. Mode=range usa este como mes izquierdo (derecho = +1). */
+    anchorMonth: Date;
+    /** Selected date (mode=date) — staged hasta Apply. */
+    stagedDate: Date | null;
+    /** Range staged (mode=range) — start al click 1, end al click 2. */
+    stagedRange: SuiDateRange;
+    /** Preset activo (mode=range) — `null` = custom range. */
+    activePreset: SuiDatepickerPresetId | null;
+    /** Mobile (≤767px) — fuerza 1 calendario aunque calendars=2. */
+    isMobile: boolean;
+    /** «Todo el tiempo» aplicado: su valor es { start: null, end: null }, igual que
+     *  nada elegido, así que se recuerda aparte para el texto del campo. */
+    todoElTiempoAplicado: boolean;
+    /** Fecha de hoy (capturada al load, para el today-dot). */
+    private today;
+    private mql;
+    private mqlHandler;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    /** Al cambiar value desde afuera, re-ancla el calendar al mes del valor. */
+    onValueChange(): void;
+    /** Copia `value` a lo staged (lo que pinta el calendario). */
+    private stageFromValue;
+    private syncAnchorToValue;
+    private get isDisabled();
+    /**
+     * Calendarios EFECTIVOS tras el mobile override.
+     *  - mode='date' → siempre 1
+     *  - mode='range' + mobile → 1
+     *  - mode='range' + desktop → respeta el prop
+     */
+    private get effectiveCalendars();
+    private get leftMonthLabel();
+    private get rightMonthLabel();
+    private get leftCells();
+    private get rightCells();
+    private get leftRows();
+    private get rightRows();
+    /** El placeholder que se ve: el que se pasó o el de fábrica según `mode`. */
+    private get resolvedPlaceholder();
+    private get triggerText();
+    /** Nombre del panel para el lector de pantalla (dialog / group). */
+    private get panelAriaLabel();
+    /** Cancelar / Aplicar: large (48) con el campo large/xlarge y siempre en mobile;
+     *  small (36, Figma) si no. */
+    private get footerButtonSize();
+    /** Piezas del panel (días, flechas, rangos): large (44) solo con el campo xlarge. */
+    private get partSize();
+    private get rangeHint();
+    private get hasFooter();
+    /**
+     * rangePosition de un cell para el styling de la day-cell.
+     *  - 'start' → extremo izquierdo · 'end' → extremo derecho
+     *  - 'in'    → entre extremos (no inclusive) · null → fuera de range o mode=date
+     */
+    private cellRangePosition;
+    private isPresetActive;
+    private toggle;
+    private openPopover;
+    private cancel;
+    private apply;
+    private selectCell;
+    private prevMonth;
+    private nextMonth;
+    private selectPreset;
+    onDocPointerDown(ev: Event): void;
+    onDocKeydown(ev: KeyboardEvent): void;
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    /** a11y: flechas dentro de la grilla mueven el foco entre los días habilitados
+     *  (← → un día, ↑ ↓ una semana), Inicio/Fin a la punta de la semana. No cambia
+     *  de mes: la grilla ya trae los días vecinos que completan las semanas. */
+    private onGridKeydown;
+    private renderRangeBand;
+    private renderDayCell;
+    private renderCalendar;
+    render(): any;
+}

package/dist/types/components/sui-datepicker/sui-datepicker.data.d.ts

@@ -0,0 +1,103 @@
+export type SuiDatepickerMode = 'date' | 'range';
+export type SuiDatepickerCalendars = 1 | 2;
+export type SuiDatepickerPresetId = 'today' | 'last-7' | 'last-30' | 'last-3-months' | 'last-12-months' | 'month-to-date' | 'year-to-date' | 'all-time';
+export interface SuiDateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface SuiDatepickerPreset {
+    id: SuiDatepickerPresetId;
+    label: string;
+    /** Resuelve a un [start, end]. `[null, null]` para all-time. */
+    resolve: (today: Date) => [Date, Date] | [null, null];
+}
+export interface SuiCalendarCell {
+    date: Date;
+    /** Día del mes (1-31). */
+    day: number;
+    /** True si pertenece al mes que se está mostrando (no overflow week). */
+    inCurrentMonth: boolean;
+    /** True si es la fecha de hoy. */
+    isToday: boolean;
+    /** True si está fuera del min/max range (o fuera del mes → disabled). */
+    disabled: boolean;
+    /** Seleccionado individualmente (mode date) o extremo del range. */
+    selected: boolean;
+    /** En modo range: dentro del rango [start..end] (inclusive). */
+    inRange: boolean;
+    /** Inicio del range (rounded-left). */
+    isRangeStart: boolean;
+    /** Final del range (rounded-right). */
+    isRangeEnd: boolean;
+    /** Tiene marker dot (Figma 442:1473) — fecha con evento/pedido/disponibilidad. */
+    marked: boolean;
+}
+/**
+ * Fila de 7 celdas + metadata de la banda de rango continua.
+ *
+ * Figma (446:7412): cuando una fila contiene celdas dentro del rango, el bg
+ * primary-alpha-10 se pinta como UNA franja continua a nivel de fila (cubriendo
+ * los gap-8 entre celdas), con esquinas redondeadas en los extremos reales del
+ * rango. El SUI replica esto pintando la banda en el wrapper de la fila (NO en
+ * cada celda) — así no quedan huecos de 8px entre celdas in-range adyacentes.
+ */
+export interface SuiCalendarRow {
+    cells: SuiCalendarCell[];
+    /** Hay al menos una celda inRange en esta fila → renderiza banda. */
+    hasBand: boolean;
+    /** Índice (0-6) de la primera celda inRange de la fila. */
+    bandStart: number;
+    /** Índice (0-6) de la última celda inRange de la fila. */
+    bandEnd: number;
+    /** La banda arranca en el start real del rango (esquina izq redondeada). */
+    bandRoundLeft: boolean;
+    /** La banda termina en el end real del rango (esquina der redondeada). */
+    bandRoundRight: boolean;
+}
+/** Header del grid — semana arranca LUNES (locale ES, weekStartsOn = 1). */
+export declare const DAY_LABELS_ES: readonly string[];
+export declare function startOfDay(d: Date): Date;
+export declare function startOfMonth(d: Date): Date;
+export declare function endOfMonth(d: Date): Date;
+export declare function startOfYear(d: Date): Date;
+export declare function addMonths(d: Date, n: number): Date;
+export declare function subMonths(d: Date, n: number): Date;
+export declare function subDays(d: Date, n: number): Date;
+export declare function subYears(d: Date, n: number): Date;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function isSameMonth(a: Date, b: Date): boolean;
+export declare function isBefore(a: Date, b: Date): boolean;
+export declare function isAfter(a: Date, b: Date): boolean;
+export declare const DEFAULT_PRESETS: SuiDatepickerPreset[];
+/**
+ * Genera el grid de 6 semanas × 7 días (42 celdas) para el mes ancla. Incluye
+ * días del mes anterior/siguiente para llenar la primera/última semana (estilo
+ * calendario tradicional). Locale ES → semana empieza LUNES.
+ *
+ * Genera SIEMPRE 42 cells (mantiene height constante entre meses; sin esto, un
+ * mes corto dejaría el right calendar más bajo que el left en mode=range).
+ */
+export declare function buildCalendarGrid(monthAnchor: Date, options: {
+    today: Date;
+    selected?: Date | null;
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    min?: Date | null;
+    max?: Date | null;
+    marked?: readonly Date[];
+}): SuiCalendarCell[];
+/**
+ * Agrupa las 42 celdas en 6 filas de 7 y deriva la banda de rango continua por
+ * fila (Figma 446:7412 — franja alpha-10 a nivel de fila). Solo aplica banda en
+ * mode=range; en mode=date las bandas quedan inertes (hasBand=false).
+ */
+export declare function toCalendarRows(cells: SuiCalendarCell[], isRange: boolean): SuiCalendarRow[];
+/** "Enero 2025" — mes con mayúscula inicial + año (como el Angular). */
+export declare function formatMonthYear(date: Date): string;
+/** "martes 7 de octubre de 2026" — nombre de cada día para el lector de pantalla
+ *  (date-fns "EEEE d 'de' MMMM 'de' yyyy", locale es). */
+export declare function formatDateLong(date: Date): string;
+/** "12 de may 2026" — date-fns "d 'de' MMM yyyy", locale es. */
+export declare function formatDateShort(date: Date): string;
+/** "12/05/2026" — formato corto para el input (date-fns 'dd/MM/yyyy'). */
+export declare function formatDateInput(date: Date): string;