@ajuarezso/sui-design-system 0.18.4 → 0.18.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ajuarezso/sui-design-system",
-  "version": "0.18.4",
+  "version": "0.18.9",
   "description": "SUI Design System — librería de componentes Angular (SUI 2.0).",
   "license": "UNLICENSED",
   "publishConfig": {

package/types/ajuarezso-sui-design-system.d.ts

@@ -3266,7 +3266,7 @@ declare class SuiCompactSelectForInput<T = string> implements ControlValueAccess
     readonly arrowIcon: _angular_core.Signal<"arrow-up-s-line" | "arrow-down-s-line">;
     readonly displayValue: _angular_core.Signal<string>;
     readonly displayFlag: _angular_core.Signal<"abkhazia" | "afghanistan" | "aland-islands" | "albania" | "algeria" | "american-samoa" | "andorra" | "angola" | "anguilla" | "antigua-and-barbuda" | "argentina" | "armenia" | "aruba" | "australia" | "austria" | "azerbaijan" | "azores-islands" | "bahamas" | "bahrain" | "balearic-islands" | "bangladesh" | "barbados" | "basque-country" | "belarus" | "belgium" | "belize" | "benin" | "bermuda" | "bhutan" | "bolivia" | "bonaire" | "bosnia-and-herzegovina" | "botswana" | "brazil" | "british-columbia" | "british-indian-ocean-territory" | "british-virgin-islands" | "brunei" | "bulgaria" | "burkina-faso" | "burundi" | "cambodia" | "cameroon" | "canada" | "canary-islands" | "cape-verde" | "cayman-islands" | "central-african-republic" | "ceuta" | "chad" | "chile" | "china" | "christmas-island" | "cocos-island" | "colombia" | "comoros" | "cook-islands" | "corsica" | "costa-rica" | "croatia" | "cuba" | "curacao" | "cyprus" | "czech-republic" | "democratic-republic-of-congo" | "denmark" | "djibouti" | "dominica" | "dominican-republic" | "east-timor" | "ecuador" | "egypt" | "el-salvador" | "england" | "equatorial-guinea" | "eritrea" | "estonia" | "ethiopia" | "european-union" | "falkland-islands" | "faroe-islands" | "fiji" | "finland" | "france" | "french-polynesia" | "gabon" | "galapagos-islands" | "gambia" | "georgia" | "germany" | "ghana" | "gibraltar" | "greece" | "greenland" | "grenada" | "guam" | "guatemala" | "guernsey" | "guinea-bissau" | "guinea" | "guyana" | "haiti" | "hawaii" | "honduras" | "hong-kong" | "hungary" | "iceland" | "india" | "indonesia" | "iran" | "iraq" | "ireland" | "isle-of-man" | "israel" | "italy" | "ivory-coast" | "jamaica" | "japan" | "jersey" | "jordan" | "kazakhstan" | "kenya" | "kiribati" | "kosovo" | "kuwait" | "kyrgyzstan" | "laos" | "latvia" | "lebanon" | "lesotho" | "liberia" | "libya" | "liechtenstein" | "lithuania" | "luxembourg" | "macao" | "madagascar" | "madeira" | "malawi" | "malaysia" | "maldives" | "mali" | "malta" | "marshall-island" | "martinique" | "mauritania" | "mauritus" | "melilla" | "mexico" | "micronesia" | "moldova" | "monaco" | "mongolia" | "montenegro" | "montserrat" | "morocco" | "mozambique" | "myanmar" | "namibia" | "nato" | "nauru" | "nepal" | "netherlands" | "new-zealand" | "nicaragua" | "niger" | "nigeria" | "niue" | "norfolk-island" | "north-korea" | "northern-cyprus" | "northern-marianas-islands" | "norway" | "oman" | "orkney-islands" | "ossetia" | "pakistan" | "palau" | "palestine" | "panama" | "papua-new-guinea" | "paraguay" | "peru" | "philippines" | "pitcairn-islands" | "poland" | "portugal" | "puerto-rico" | "qatar" | "rapa-nui" | "republic-of-macedonia" | "republic-of-the-congo" | "romania" | "russia" | "rwanda" | "saba-island" | "sahrawi-arab-democratic-republic" | "saint-kitts-and-nevis" | "samoa" | "san-marino" | "sao-tome-and-prince" | "sardinia" | "saudi-arabia" | "scotland" | "senegal" | "serbia" | "seychelles" | "sierra-leone" | "singapore" | "sint-eustatius" | "sint-maarten" | "slovakia" | "slovania" | "solomon-islands" | "somalia" | "somaliland" | "south-africa" | "south-korea" | "south-sudan" | "spain" | "sri-lanka" | "st-barts" | "st-lucia" | "st-vincent-and-the-grenadines" | "sudan" | "suriname" | "swaziland" | "sweden" | "switzerland" | "syria" | "taijikistan" | "taiwan" | "tanzania" | "thailand" | "tibet" | "togo" | "tokelau" | "tonga" | "transnistria" | "trinidad-and-tobago" | "tunisia" | "turkey" | "turkmenistan" | "turks-and-caicos" | "tuvalu" | "uganda" | "ukraine" | "united-arab-emirates" | "united-kingdom" | "united-nations" | "united-states" | "uruguay" | "uzbekistan" | "vanuatu" | "vatican-city" | "venezuela" | "vietnam" | "virgin-islands" | "wales" | "yemen" | "zambia" | "zimbabwe" | null>;
-    readonly flagSizePx: _angular_core.Signal<20 | 16>;
+    readonly flagSizePx: _angular_core.Signal<16 | 20>;
     onHostClick(event: Event): void;
     protected onMenuOpenedChange(open: boolean): void;
     protected selectItem(item: SuiCompactSelectForInputItem<T>): void;
@@ -6224,7 +6224,7 @@ declare class SuiImageUpload {
     protected readonly sizePx: _angular_core.Signal<number>;
     /** Camera icon px en el empty state. xl escala a 20, resto 16
      *  (matchea el escalado del contenedor 32→40 en SCSS). */
-    protected readonly iconSize: _angular_core.Signal<20 | 16>;
+    protected readonly iconSize: _angular_core.Signal<16 | 20>;
     protected readonly hasSrc: _angular_core.Signal<boolean>;
     protected readonly state: _angular_core.Signal<"filled" | "disabled" | "dragover" | "empty">;
     protected readonly resolvedTitle: _angular_core.Signal<string>;
@@ -7025,6 +7025,89 @@ declare class SuiKeyIcon {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiKeyIcon, "sui-key-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "styleVariant": { "alias": "styleVariant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/** Orientación del lockup. Las dos llevan la palabra en DOS líneas. */
+type SuiLogoOrientation = 'horizontal' | 'stacked';
+/** Escala canon del DS — la misma de sui-brand-logo / sui-flag / sui-emoji. */
+type SuiLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * SUI Logo — el logo de Master Pedidos, dibujado inline y coloreable.
+ *
+ * NO confundir con `sui-brand-logo`, que sirve logos de TERCEROS (Apple, Google,
+ * Stripe…) como assets `<img>` intocables por compliance de marca. Este es el
+ * logo PROPIO del producto: se inlinea justamente para poder teñirlo.
+ *
+ * ── El dibujo ────────────────────────────────────────────────────────────────
+ * Son tres piezas: la M (isotipo) y las palabras «Master» y «Pedidos». Las dos
+ * orientaciones son esas mismas tres piezas re-acomodadas, así que el path data
+ * vive UNA sola vez en el template y lo único que cambia es el `viewBox` y el
+ * `transform` de cada grupo:
+ *
+ *   horizontal → M a la izquierda + bloque de palabra a la derecha, escala 1.
+ *                viewBox `0.218 3.987 773.623 266.421` (ratio 2.904:1)
+ *   stacked    → M arriba + bloque de palabra debajo, centrado, escala 0.55765.
+ *                viewBox `-0.266 0.109 257.897 420.55` (ratio 0.613:1)
+ *   markOnly   → solo la M.
+ *                viewBox `0.218 3.987 257.897 266.421` (ratio 0.968:1)
+ *
+ * Los viewBox son el bbox EXACTO medido con `getBBox()` sobre el dibujo, no un
+ * lienzo con aire: el componente no aporta padding propio.
+ *
+ * En las dos orientaciones la palabra va en dos líneas («Master» sobre
+ * «Pedidos»). El lockup de una sola línea es otro dibujo y no está acá.
+ *
+ * ── Color ────────────────────────────────────────────────────────────────────
+ * `markColor` y `textColor` aceptan cualquier color CSS, y lo natural es pasar
+ * un token: `markColor="var(--sui-primary-base)"`. Se aplican por custom
+ * property (`--sui-logo-mark-color` / `--sui-logo-text-color`) y no por atributo
+ * `fill`, porque un `var()` dentro de un atributo de presentación SVG no
+ * resuelve.
+ *
+ * ── Tamaño ───────────────────────────────────────────────────────────────────
+ * `size` fija el ALTO (xs=16 … 2xl=48) y el ancho sale solo. `height` es el
+ * escape hatch para los altos que no están en la escala: un número son px
+ * (28, 80…) y un string es cualquier valor CSS (`'60%'` para seguir al
+ * contenedor). Si viene, gana sobre `size`.
+ *
+ * ── Accesibilidad ────────────────────────────────────────────────────────────
+ * Por defecto el SVG va con `role="img"` y `aria-label="Master Pedidos"`: el
+ * logo ES el nombre del producto. Cuando se pone al lado de un texto que ya dice
+ * «Master Pedidos» (el `<h1>` de las pantallas «Acerca de»), pasar
+ * `[decorative]="true"` para que el lector de pantalla no lo diga dos veces.
+ *
+ * Usage:
+ *   <sui-logo />
+ *   <sui-logo orientation="stacked" size="xl" />
+ *   <sui-logo [markOnly]="true" [decorative]="true" [height]="80" />
+ *   <sui-logo markColor="var(--sui-static-white)" textColor="var(--sui-static-white)" />
+ */
+declare class SuiLogo {
+    readonly orientation: _angular_core.InputSignal<SuiLogoOrientation>;
+    /** Solo la M, sin la palabra. Cuando es `true`, `orientation` no aplica. */
+    readonly markOnly: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<SuiLogoSize>;
+    /**
+     * Alto fuera de la escala. Número = px; string = cualquier valor CSS
+     * (`'60%'` para seguir al contenedor, como hace `sui-icon` con `size`).
+     * Si viene, gana sobre `size`.
+     */
+    readonly height: _angular_core.InputSignal<string | number | null>;
+    /** Color de la M. Token o cualquier color CSS. */
+    readonly markColor: _angular_core.InputSignal<string>;
+    /** Color de la palabra. Token o cualquier color CSS. */
+    readonly textColor: _angular_core.InputSignal<string>;
+    /** `true` cuando al lado ya está escrito «Master Pedidos». */
+    readonly decorative: _angular_core.InputSignal<boolean>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly heightPx: _angular_core.Signal<string>;
+    readonly viewBox: _angular_core.Signal<string>;
+    /** En apilado la M se corre para que el bloque entero quede centrado. */
+    readonly markTransform: _angular_core.Signal<string | null>;
+    readonly masterTransform: _angular_core.Signal<string>;
+    readonly pedidosTransform: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiLogo, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiLogo, "sui-logo", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "markOnly": { "alias": "markOnly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "markColor": { "alias": "markColor"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * SUI Modal Sheet — bottom sheet con breakpoints (estilo Apple Maps / Ionic ion-modal sheet).
  *
@@ -7042,6 +7125,32 @@ declare class SuiKeyIcon {
  * contenido desde scrollTop 0 (solo por handle). Aquí SÍ soportamos ese
  * handoff (patrón Apple Maps nativo) vía touchmove no-pasivo + takeover.
  *
+ * ── Modelo de movimiento (2026-09) ──────────────────────────────────────────
+ *
+ * Dos capas: `.sui-sheet` es un marco FIJO de alto constante
+ * H = min(contenido, maxBreakpoint·100dvh, viewport − safe-top − 16px), anclado
+ * abajo, que recorta (radius + squircle) y no captura toques; adentro,
+ * `.sui-sheet__panel` (fondo, asa y body) es lo único que se mueve, con la
+ * propiedad `translate` (compositor):
+ *
+ *     y(p) = max(0, H − p·vh)        visible(p) = min(H, p·vh)
+ *
+ * donde vh es el alto del viewport en px. Así al 25% se ven 25dvh del sheet, la
+ * parte que baja queda recortada por el marco (las esquinas inferiores
+ * redondeadas siguen a la vista, como antes) y el área libre del viewport sigue
+ * siendo del contenido de fondo. Misma semántica que la versión anterior, que
+ * animaba `max-height`, pero sin layout por frame: durante el drag no se toca
+ * ningún signal ni binding — el `translate` del panel y la opacidad del
+ * backdrop se escriben directo en el DOM dentro de un requestAnimationFrame
+ * coalescido (una escritura por frame, gana el último pointermove). Los signals
+ * `progress`, `currentBreakpoint` y `dragging` cambian al empezar/terminar el
+ * drag y al snap, no por movimiento.
+ *
+ * Se usa `translate` (propiedad individual) y NO `transform`, y sobre el panel
+ * y no sobre `.sui-sheet`: un consumer puede seguir escribiendo su propio
+ * `transform`/`left`/`width` sobre `.sui-sheet` (ej. centrarlo en desktop) sin
+ * pisar el movimiento.
+ *
  * Uso típico para tracking de pedido con mapa abajo:
  * ```html
  * <sui-modal-sheet
@@ -7057,6 +7166,7 @@ declare class SuiKeyIcon {
  */
 declare class SuiModalSheet implements OnDestroy {
     private readonly doc;
+    private readonly renderer;
     private readonly navbarVisibility;
     /** ID único por instancia para el counter centralizado del navbar. */
     private readonly _sheetId;
@@ -7083,53 +7193,90 @@ declare class SuiModalSheet implements OnDestroy {
     readonly fullBody: _angular_core.InputSignal<boolean>;
     readonly closed: _angular_core.OutputEmitterRef<void>;
     readonly breakpointChange: _angular_core.OutputEmitterRef<number>;
+    /** Marco fijo que recorta; se mide acá (alto H). */
     containerRef?: ElementRef<HTMLElement>;
+    /** Capa que se mueve (`translate`). */
+    panelRef?: ElementRef<HTMLElement>;
+    backdropRef?: ElementRef<HTMLElement>;
     handleRef?: ElementRef<HTMLElement>;
     bodyRef?: ElementRef<HTMLElement>;
     /** Breakpoint actual (0-1). Cambia al snap, no durante el drag. */
     readonly currentBreakpoint: _angular_core.WritableSignal<number>;
-    /** Progress en vivo durante el drag (0-1). Expuesto como readonly al
-        template (binding `--sheet-progress`) y al public para que el consumer
-        pueda leerlo si quiere reaccionar. */
-    protected readonly liveProgress: _angular_core.WritableSignal<number>;
+    /** Progress EN REPOSO (0-1): el breakpoint al que el sheet está o hacia el
+        que va. Durante el drag NO se actualiza (el movimiento vive en el DOM,
+        ver header): cambia al soltar y al snap. Expuesto al template como
+        `--sheet-progress` y al consumer como `progress`. */
+    protected readonly restProgress: _angular_core.WritableSignal<number>;
     readonly progress: _angular_core.Signal<number>;
-    /** True mientras el usuario está arrastrando. Desactiva CSS transition. */
+    /** True mientras el usuario está arrastrando. Se setea al arrancar y al
+        soltar; la clase CSS que apaga la transición se maneja imperativa en el
+        mismo tick que la escritura del `translate` (ver `beginDrag`/`snapTo`). */
     readonly dragging: _angular_core.WritableSignal<boolean>;
-    /** Opacity del backdrop calculada según el progress vivo. */
+    /** Opacity del backdrop para el progress en reposo. La opacidad viva del
+        drag se escribe directo en el DOM; este computed queda como API. */
     readonly backdropOpacity: _angular_core.Signal<number>;
     /** True si el backdrop debe capturar pointer events (current > backdropBreakpoint). */
     readonly backdropInteractive: _angular_core.Signal<boolean>;
-    /** CAP de altura del sheet — `min(progress·100dvh, viewport - safe-top - 16)`.
-        Se bindea como max-height con `height: max-content` en el scss: el sheet
-        NUNCA mide más que su contenido (sin espacio vacío al final cuando el
-        contenido termina antes del breakpoint), y el breakpoint actúa como techo.
-        Cuando progress=0.25 el sheet ocupa a lo sumo 25dvh y el resto del
-        viewport queda VACÍO → contenido detrás (mapa) interactivo. */
-    readonly heightCss: _angular_core.Signal<string>;
+    /** Breakpoint máximo del array (1 si está vacío). */
+    private readonly maxBreakpoint;
+    /** CAP ESTÁTICO de altura — `min(maxBp·100dvh, viewport − safe-top − 16)`.
+        Con `height: max-content` en el scss el sheet mide su contenido y este
+        techo lo acota. Depende solo de `breakpoints`: no cambia por drag ni por
+        snap, así que no fuerza layout durante el gesto. */
+    readonly maxHeightCss: _angular_core.Signal<string>;
     /** True cuando el sheet está al breakpoint máximo del array. En ese punto
         habilitamos scroll del body (touch-action: pan-y) — el user ya no puede
         expandir más, así que se prioriza ver el contenido sobre el drag. En el
         resto de breakpoints el body actúa como handle gigante (touch-action:
-        none) y solo el drag controla la altura del sheet. */
+        none) y solo el drag controla la posición del sheet. */
     readonly atMaxBreakpoint: _angular_core.Signal<boolean>;
+    /** Alto medido del sheet (px). Se mide al abrir, al empezar un drag y
+        cuando el contenido cambia de tamaño (ResizeObserver). */
+    private sheetHeight;
+    /** Alto del viewport (px) = 1 unidad de progress. */
+    private viewportHeight;
     private dragStartY;
     private dragStartProgress;
-    private wrapperHeight;
     private pointerId;
     /** Para calcular velocity al final */
     private lastMoveTime;
     private lastMoveY;
     private velocityY;
+    /** Último progress pedido por el dedo; lo consume el rAF. */
+    private pendingProgress;
+    private frameId;
     /** Flag para distinguir drag iniciado en body (scroll-then-drag) vs en handle.
         En body, el drag NO arranca con pointerdown — sólo si pointermove
         excede un threshold y la condición de scroll lo permite. Sirve para no
         robar tap/click a buttons internos. */
     private bodyDragArmed;
     /** Threshold de movimiento (px) para decidir que un pointermove en body es
-        drag (no tap). Patrón iOS estándar ~6-10px. */
+        drag (no tap). 5px = más sensible que el iOS canon de 8px: el dueño pidió
+        "como nativo" y el 8 sentía que tardaba en activar. Trade-off: 5px puede
+        activar drag con micro-movements al hacer tap, pero la heurística
+        shouldIgnoreBodyDrag protege inputs/select/option. */
     private static readonly BODY_DRAG_THRESHOLD_PX;
+    /** Lookahead de velocidad al soltar (ms): predice dónde estaría el dedo y
+        snapea ahí. Permite que un swipe rápido brinque breakpoints sin saltarse
+        los intermedios. 80ms validado en device: a 150 se saltaba el 0.7 entre
+        0.5 y 1; a 0 el sheet se sentía pesado. */
+    private static readonly VELOCITY_LOOKAHEAD_MS;
+    /** Duración del snap: se acota entre estos dos valores según distancia
+        restante / velocidad del dedo (ver `snapDuration`). */
+    private static readonly SNAP_MIN_MS;
+    private static readonly SNAP_MAX_MS;
+    private static readonly CLASS_PANEL_DRAGGING;
+    private static readonly CLASS_BACKDROP_DRAGGING;
+    /** Cerrado = el panel baja todo su alto y el marco lo recorta entero. Se usa
+        `100%` (y no el H medido) para que el cierre quede bien aunque el
+        contenido cambie de tamaño a mitad de camino. */
+    private static readonly TRANSLATE_CLOSED;
     private wasOpen;
     private escapeHandler?;
+    private closeTimer;
+    private closeTransitionHandler?;
+    private resizeObserver?;
+    private windowResizeHandler?;
     constructor();
     ngOnDestroy(): void;
     /** Mueve el sheet a un breakpoint específico programáticamente.
@@ -7143,6 +7290,40 @@ declare class SuiModalSheet implements OnDestroy {
     private touchMoveHandler?;
     private attachTouchSuppressor;
     private detachTouchSuppressor;
+    /** Mide alto del sheet y del viewport. Devuelve false si todavía no hay
+        layout (container sin render o entorno sin medidas, ej. jsdom). Es la
+        ÚNICA lectura de layout del gesto: se hace al abrir, al pointerdown y
+        cuando cambia el tamaño — nunca por pointermove. */
+    private measure;
+    /** Desplazamiento vertical (px) para un progress: `max(0, H − p·vh)`. */
+    private yFor;
+    /** Valor de `translate` para un progress. */
+    private translateFor;
+    /** Progress EFECTIVO de un breakpoint: el que corresponde al y que el sheet
+        muestra de verdad. Con contenido corto varios breakpoints valen y = 0 y
+        su progress efectivo es H/vh, no el nominal — es el punto de partida
+        correcto para que el dedo mueva 1:1 desde ahí. */
+    private effectiveProgress;
+    /** Progress real del sheet leyendo el `translate` computado del panel —
+        sirve para agarrarlo a mitad de una transición sin que salte al
+        breakpoint de destino. Si no se puede leer (jsdom, valor no numérico,
+        un calc() a mitad de la entrada) cae al progress efectivo del
+        `currentBreakpoint`. */
+    private progressFromDom;
+    private writeTranslate;
+    private writeBackdropOpacity;
+    private setTransitionDuration;
+    private setDraggingClasses;
+    /** Coalesce: guarda el último progress y escribe UNA vez por frame. */
+    private scheduleFrame;
+    private flushFrame;
+    private cancelFrame;
+    private observeSize;
+    private stopObservingSize;
+    private onSizeChange;
+    /** Arranque común del drag (handle o body ya armado): congela la transición
+        en curso, lee la posición real y marca `dragging`. */
+    private beginDrag;
     protected onPointerDown(event: PointerEvent): void;
     protected onPointerMove(event: PointerEvent): void;
     protected onPointerUp(event: PointerEvent): void;
@@ -7152,8 +7333,26 @@ declare class SuiModalSheet implements OnDestroy {
     /** Heurística: ignorar drag si el target es un input/textarea/select/button
         interactivo. El user está intentando interactuar, no arrastrar. */
     private shouldIgnoreBodyDrag;
+    /** Duración del snap en función de la distancia restante y la velocidad del
+        dedo (px/ms): un fling rápido cierra la distancia en poco tiempo; un
+        release lento o un snap programático usa la duración larga. Acotado a
+        [180, 350] ms. */
+    private snapDuration;
+    /**
+     * Lleva el sheet a `breakpoint`.
+     * @param fromProgress progress desde el que sale (default: el de reposo);
+     *        solo influye en la duración.
+     * @param velocityPxMs velocidad del dedo al soltar, para acortar el snap.
+     */
     private snapTo;
-    private findClosestBreakpoint;
+    private scheduleClose;
+    private cancelPendingClose;
+    /** Breakpoint cuyo desplazamiento (`yFor`) queda más cerca de `y`. Varios
+        breakpoints pueden compartir el mismo y (todos los que superan el alto
+        del contenido valen 0): en ese empate gana el actual si está entre
+        ellos, si no el mayor — así un toque-arrastre al máximo no cambia de
+        breakpoint ni apaga el scroll del body. */
+    private closestBreakpointByY;
     /** Fórmula linear entre (backdropBreakpoint, 0) y (1, 1). Igual que Ionic. */
     private computeBackdropOpacity;
     protected onBackdropClick(): void;
@@ -9982,6 +10181,35 @@ declare class SuiStoreCard {
     readonly isFavorite: _angular_core.InputSignal<boolean>;
     /** Si true, no se navega al detalle (caso suspendido). El padre puede sobreescribir. */
     readonly disableLink: _angular_core.InputSignal<boolean>;
+    /**
+     * El texto de Envío y el de Distancia, ya escritos por quien llama.
+     *
+     * ## Por qué existen: la tarjeta DIBUJA, no decide
+     *
+     * El costo de envío se calcula en un solo lugar de la app
+     * (`StateService.computeDeliveryFee`) desde un bug real: la tarjeta decía
+     * S/ 1,90 y el checkout cobraba S/ 1,50, porque cada vista lo deducía por su
+     * cuenta. Un componente del design system que deduce precios es esa misma
+     * trampa, un piso más abajo — y encima repartida entre todas las apps que lo
+     * consuman. Lo mismo vale para la distancia, que según de dónde salga el
+     * número se escribe como rango («menos de 500 m», mientras es un estimado) o
+     * como número exacto («475 m», cuando la ruta ya se midió): esa distinción
+     * la conoce la app, no la tarjeta.
+     *
+     * ## Los tres estados, y por qué son tres
+     *
+     * | valor | qué hace |
+     * |---|---|
+     * | sin pasar (`undefined`) | la tarjeta lo deduce como siempre — nada cambia para quien ya la usa |
+     * | un string | se muestra tal cual |
+     * | `null` | esa columna NO se renderiza (ni guion ni hueco) |
+     *
+     * `null` tiene que ser distinto de «no lo pasé» justamente para poder pedir
+     * que el dato desaparezca. Al quedar tres columnas en vez de cuatro, la fila
+     * se reparte mejor y el distrito deja de cortarse en «San Jeróni…».
+     */
+    readonly deliveryText: _angular_core.InputSignal<string | null | undefined>;
+    readonly distanceText: _angular_core.InputSignal<string | null | undefined>;
     readonly toggleFavorite: _angular_core.OutputEmitterRef<Event>;
     /** Emite cuando el usuario tapea la sección de calificación. El padre debe
      *  abrir `StoreRatingsModalService.open(id, name, logoUrl)` para mostrar
@@ -10007,17 +10235,22 @@ declare class SuiStoreCard {
      * guardado y cero reseñas, y sin él ese cinco pasa por reputación ganada.
      */
     readonly ratingLabel: _angular_core.Signal<string>;
-    readonly distanceLabel: _angular_core.Signal<string>;
+    /** El texto de Distancia: el que le pasaron, o el que deduce del `distanceKm`
+     *  cuando nadie le pasó nada. `null` = no se pinta la columna (ver
+     *  `distanceText`). */
+    readonly distanceLabel: _angular_core.Signal<string | null>;
     /** En owner-preview hay un badge custom (Borrador/En revisión/Rechazado).
         Devuelve null cuando no aplica (modo cliente normal). */
     readonly previewBadge: _angular_core.Signal<PreviewBadge | null>;
-    /** Etiqueta corta de envío (Gratis/Recojo/Courier/S/X). */
-    readonly deliveryLabel: _angular_core.Signal<string>;
+    /** El texto de Envío: el que le pasaron, o la etiqueta corta que deduce del
+     *  `deliveryType` (Gratis/Recojo/Courier/S/X) cuando nadie le pasó nada.
+     *  `null` = no se pinta la columna (ver `deliveryText`). */
+    readonly deliveryLabel: _angular_core.Signal<string | null>;
     onFavClick(event: Event): void;
     onCardClick(event: Event): void;
     onRatingClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiStoreCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiStoreCard, "sui-store-card", never, { "store": { "alias": "store"; "required": true; "isSignal": true; }; "isFavorite": { "alias": "isFavorite"; "required": false; "isSignal": true; }; "disableLink": { "alias": "disableLink"; "required": false; "isSignal": true; }; }, { "toggleFavorite": "toggleFavorite"; "ratingClicked": "ratingClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiStoreCard, "sui-store-card", never, { "store": { "alias": "store"; "required": true; "isSignal": true; }; "isFavorite": { "alias": "isFavorite"; "required": false; "isSignal": true; }; "disableLink": { "alias": "disableLink"; "required": false; "isSignal": true; }; "deliveryText": { "alias": "deliveryText"; "required": false; "isSignal": true; }; "distanceText": { "alias": "distanceText"; "required": false; "isSignal": true; }; }, { "toggleFavorite": "toggleFavorite"; "ratingClicked": "ratingClicked"; }, never, never, true, never>;
 }
 
 /**
@@ -12408,5 +12641,5 @@ declare class SuiTooltipPanel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTooltipPanel, "sui-tooltip-panel", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; }, never, never, true, never>;
 }
 
-export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_EMOJI_STATIC, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiHref, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
-export type { CalendarCell, CalendarRow, DatepickerPreset, DatepickerPresetId, SuiAccordionFlipIcon, SuiActivityAvatarRef, SuiActivityFeedItem, SuiActivityFile, SuiActivityFilterState, SuiActivityTask, SuiActivityTaskState, SuiAlertAction, SuiAlertSize, SuiAlertStyle, SuiAlertVariant, SuiAppStoreBadgeAppearance, SuiAppStoreBadgeCompany, SuiAvatarColor, SuiAvatarConfig, SuiAvatarGroupItem, SuiAvatarSize, SuiAvatarStatus, SuiAvatarTopBadge, SuiBadgeColor, SuiBadgeConfig, SuiBadgeSize, SuiBadgeType, SuiBadgeVariant, SuiBannerStyle, SuiBannerVariant, SuiBrandLogoCompany, SuiBrandLogoSize, SuiBrandLogoStyle, SuiBreadcrumbDivider, SuiBreadcrumbEntry, SuiButtonColor, SuiButtonGroupEntry, SuiButtonGroupItemSize, SuiButtonSize, SuiButtonVariant, SuiCardSize, SuiCardVariant, SuiChartLegendColor, SuiChartLegendItem, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiContentLabelBadgePlacement, SuiContentLabelSize, SuiContentLabelType, SuiCounterInputSize, SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDayCellType, SuiDividerOrientation, SuiDrawerFooterType, SuiDrawerHeaderSize, SuiDrawerHeaderType, SuiDropdownItemMode, SuiDropdownItemSize, SuiDropdownMenuPopupRole, SuiDropdownMenuPosition, SuiEmojiName, SuiEmojiSize, SuiEmptyStateAction, SuiFancyButtonSize, SuiFancyButtonType, SuiFileIconColor, SuiFileIconSize, SuiFileUploadCardFile, SuiFileUploadCardState, SuiFileUploadSize, SuiFilterItemState, SuiFlagName, SuiFlagSize, SuiFooterButtonConfig, SuiFormHintVariant, SuiFormLabelSize, SuiImageUploadProfileAlignment, SuiImageUploadProfileLabels, SuiImageUploadProfileType, SuiImageUploadShape, SuiImageUploadSize, SuiInlineSelectItem, SuiInlineSelectType, SuiInputEnterKeyHint, SuiInputMode, SuiInputSize, SuiInputType, SuiIntegrationManageConfig, SuiIntegrationSwitchAppearance, SuiIntegrationSwitchType, SuiKbdVariant, SuiKeyIconColor, SuiKeyIconSize, SuiKeyIconStyle, SuiLinkButtonSize, SuiLinkButtonVariant, SuiLinkConfig, SuiModalHeaderVariant, SuiModalIconVariant, SuiModalSize, SuiModalStatusAlignment, SuiNavbarVisibility, SuiNotificationStyle, SuiNotificationTab, SuiNotificationVariant, SuiOtpInputType, SuiPaginationInfoFormat, SuiPaginationSize, SuiPaginationType, SuiPasswordStrengthCondition, SuiPasswordStrengthLevel, SuiPaymentIconSize, SuiPaymentIconType, SuiPopoverFooter, SuiPopoverPosition, SuiProductCardFallback, SuiProductCardImage, SuiProgressBarColor, SuiProgressBarLabelType, SuiProgressBarSize, SuiRadioCardType, SuiRadioSize, SuiRadioValue, SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType, SuiRichEditorAction, SuiRichEditorCommand, SuiRichEditorItemState, SuiRichEditorItemType, SuiRichEditorLayout, SuiSegmentedControlItem, SuiSegmentedControlSize, SuiSelectOption, SuiSelectSize, SuiSelectType, SuiSidebarBrandConfig, SuiSidebarIndicatorColor, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile, SuiSidebarSearchConfig, SuiSliderType, SuiSocialButtonBrand, SuiSocialButtonStyle, SuiStatusBadgeAppearance, SuiStatusBadgeStatus, SuiStepperItem, SuiStepperSize, SuiStepperState, SuiStepperVariant, SuiStoreCardData, SuiSwitchCardType, SuiSwitchSize, SuiTabBar, SuiTabChipItem, SuiTabMenuHorizontalItem, SuiTabMenuHorizontalSize, SuiTabMenuVerticalItem, SuiTabMenuVerticalStyle, SuiTableCellMisc, SuiTableCellPriority, SuiTableColumn, SuiTableSize, SuiTagInputSize, SuiTagStyle, SuiTimeDurationPreset, SuiTimeFormat, SuiTimePeriod, SuiTimePickerItemDirection, SuiTimePickerStatusType, SuiTimeValue, SuiToastAction, SuiToastData, SuiToastItem, SuiToastPosition, SuiToastStyle, SuiToastVariant, SuiTooltipLargeData, SuiTooltipPosition, SuiTooltipSize, SuiTooltipTheme, SuiTooltipThemeInput, SuiTopbarAccent, SuiTopbarAction, SuiTopbarEntry, SuiTopbarSearchConfig, SuiTopbarUserConfig };
+export { DAY_LABELS_ES, DEFAULT_DURATION_PRESETS, DEFAULT_PRESETS, EMPTY_STATE_FOX_EMOJI, SUI_BRAND_LOGO_COMPANIES, SUI_CHART_LEGEND_COLORS, SUI_CHART_LEGEND_HEX, SUI_CHART_SERIES_COLORS, SUI_COLOR_DOT_COLORS, SUI_COLOR_DOT_HEX, SUI_CUSTOM_ICONS, SUI_EMOJI_MAP, SUI_EMOJI_STATIC, SUI_FLAG_NAMES, SUI_HEX_TO_COLOR, SUI_KEY_ICON_COLORS, SUI_KEY_ICON_SIZES, SUI_NAVBAR_VISIBILITY, SUI_PASSWORD_STRENGTH_DEFAULT_CONDITIONS, SUI_PASSWORD_STRENGTH_DEFAULT_LEVEL_LABELS, SUI_PAYMENT_ICON_TYPES, SUI_PRODUCT_FALLBACK_COLORS, SUI_TAB_BAR, SuiAccordion, SuiAccordionContent, SuiActivityFeed, SuiActivityFilter, SuiAlert, SuiAppStoreBadge, SuiAvatar, SuiAvatarGroup, SuiBadge, SuiBanner, SuiBrandLogo, SuiBreadcrumbItem, SuiBreadcrumbs, SuiButton, SuiButtonGroup, SuiButtonGroupItem, SuiCard, SuiChartLegend, SuiChartLegendDot, SuiCheckbox, SuiCheckboxCard, SuiCheckboxLabel, SuiCircularProgressBar, SuiColorDot, SuiColorPicker, SuiCommandMenuFooter, SuiCommandMenuItem, SuiCommandMenuSearch, SuiCompactAvatarGroup, SuiCompactButton, SuiCompactSelect, SuiCompactSelectForInput, SuiContentCard, SuiContentDivider, SuiContentLabel, SuiCounterInput, SuiDateSelector, SuiDatepicker, SuiDayCell, SuiDayLabel, SuiDivider, SuiDrawerFooter, SuiDrawerHeader, SuiDropdownCaption, SuiDropdownItem, SuiDropdownMenu, SuiDropdownPanel, SuiDropdownSearch, SuiEmoji, SuiEmptyState, SuiFancyButton, SuiFileIcon, SuiFileUpload, SuiFileUploadCard, SuiFilterBar, SuiFilterItem, SuiFilterPanelFooter, SuiFilterPanelHeader, SuiFlag, SuiFormHint, SuiFormLabel, SuiHref, SuiIcon, SuiImageUpload, SuiImageUploadProfile, SuiImgRetry, SuiInlineInput, SuiInlineSelect, SuiInput, SuiIntegrationSwitch, SuiKbd, SuiKeyIcon, SuiLinkButton, SuiLogo, SuiModal, SuiModalFooter, SuiModalHeader, SuiModalSheet, SuiNotification, SuiNotificationFooter, SuiNotificationTabMenu, SuiOtpInput, SuiPageHeader, SuiPagination, SuiPasswordStrength, SuiPaymentIcon, SuiPeriodRange, SuiPopover, SuiProductCard, SuiProgressBar, SuiProgressBarLabel, SuiRadio, SuiRadioCard, SuiRadioGroup, SuiRadioLabel, SuiRating, SuiRichEditor, SuiRichEditorItem, SuiSegmentedControl, SuiSelect, SuiSidebar, SuiSlider, SuiSocialButton, SuiStatusBadge, SuiStepper, SuiStoreCard, SuiSwitch, SuiSwitchCard, SuiSwitchLabel, SuiTabChips, SuiTabMenuHorizontal, SuiTabMenuVertical, SuiTable, SuiTableCellDirective, SuiTag, SuiTagInput, SuiTextarea, SuiTimePicker, SuiTimePickerDuration, SuiTimePickerItem, SuiTimePickerStatus, SuiToastOutlet, SuiToastService, SuiTooltip, SuiTooltipPanel, SuiTopbar, SuiTopbarButton, SuiTopbarItem, SuiTopbarUser, buildCalendarGrid, buildHourList, buildMinuteList, formatDateInput, formatDateShort, formatMonthYear, formatTime, isSameTime, normalizeHex, pad2, parseTime, to12h, to24h };
+export type { CalendarCell, CalendarRow, DatepickerPreset, DatepickerPresetId, SuiAccordionFlipIcon, SuiActivityAvatarRef, SuiActivityFeedItem, SuiActivityFile, SuiActivityFilterState, SuiActivityTask, SuiActivityTaskState, SuiAlertAction, SuiAlertSize, SuiAlertStyle, SuiAlertVariant, SuiAppStoreBadgeAppearance, SuiAppStoreBadgeCompany, SuiAvatarColor, SuiAvatarConfig, SuiAvatarGroupItem, SuiAvatarSize, SuiAvatarStatus, SuiAvatarTopBadge, SuiBadgeColor, SuiBadgeConfig, SuiBadgeSize, SuiBadgeType, SuiBadgeVariant, SuiBannerStyle, SuiBannerVariant, SuiBrandLogoCompany, SuiBrandLogoSize, SuiBrandLogoStyle, SuiBreadcrumbDivider, SuiBreadcrumbEntry, SuiButtonColor, SuiButtonGroupEntry, SuiButtonGroupItemSize, SuiButtonSize, SuiButtonVariant, SuiCardSize, SuiCardVariant, SuiChartLegendColor, SuiChartLegendItem, SuiCheckboxCardType, SuiCheckboxSize, SuiCircularProgressBarColor, SuiCircularProgressBarSize, SuiColorDotColor, SuiCommandMenuItemSize, SuiCommandMenuItemType, SuiCompactAvatarGroupAppearance, SuiCompactAvatarGroupSize, SuiCompactButtonSize, SuiCompactButtonStyle, SuiCompactSelectForInputItem, SuiCompactSelectForInputSize, SuiCompactSelectItem, SuiCompactSelectSize, SuiCompactSelectType, SuiContentCardType, SuiContentDividerItem, SuiContentDividerType, SuiContentLabelBadgePlacement, SuiContentLabelSize, SuiContentLabelType, SuiCounterInputSize, SuiDateRange, SuiDatepickerCalendars, SuiDatepickerMode, SuiDayCellType, SuiDividerOrientation, SuiDrawerFooterType, SuiDrawerHeaderSize, SuiDrawerHeaderType, SuiDropdownItemMode, SuiDropdownItemSize, SuiDropdownMenuPopupRole, SuiDropdownMenuPosition, SuiEmojiName, SuiEmojiSize, SuiEmptyStateAction, SuiFancyButtonSize, SuiFancyButtonType, SuiFileIconColor, SuiFileIconSize, SuiFileUploadCardFile, SuiFileUploadCardState, SuiFileUploadSize, SuiFilterItemState, SuiFlagName, SuiFlagSize, SuiFooterButtonConfig, SuiFormHintVariant, SuiFormLabelSize, SuiImageUploadProfileAlignment, SuiImageUploadProfileLabels, SuiImageUploadProfileType, SuiImageUploadShape, SuiImageUploadSize, SuiInlineSelectItem, SuiInlineSelectType, SuiInputEnterKeyHint, SuiInputMode, SuiInputSize, SuiInputType, SuiIntegrationManageConfig, SuiIntegrationSwitchAppearance, SuiIntegrationSwitchType, SuiKbdVariant, SuiKeyIconColor, SuiKeyIconSize, SuiKeyIconStyle, SuiLinkButtonSize, SuiLinkButtonVariant, SuiLinkConfig, SuiLogoOrientation, SuiLogoSize, SuiModalHeaderVariant, SuiModalIconVariant, SuiModalSize, SuiModalStatusAlignment, SuiNavbarVisibility, SuiNotificationStyle, SuiNotificationTab, SuiNotificationVariant, SuiOtpInputType, SuiPaginationInfoFormat, SuiPaginationSize, SuiPaginationType, SuiPasswordStrengthCondition, SuiPasswordStrengthLevel, SuiPaymentIconSize, SuiPaymentIconType, SuiPopoverFooter, SuiPopoverPosition, SuiProductCardFallback, SuiProductCardImage, SuiProgressBarColor, SuiProgressBarLabelType, SuiProgressBarSize, SuiRadioCardType, SuiRadioSize, SuiRadioValue, SuiRatingAlignment, SuiRatingAppearance, SuiRatingReviewLink, SuiRatingSize, SuiRatingType, SuiRichEditorAction, SuiRichEditorCommand, SuiRichEditorItemState, SuiRichEditorItemType, SuiRichEditorLayout, SuiSegmentedControlItem, SuiSegmentedControlSize, SuiSelectOption, SuiSelectSize, SuiSelectType, SuiSidebarBrandConfig, SuiSidebarIndicatorColor, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile, SuiSidebarSearchConfig, SuiSliderType, SuiSocialButtonBrand, SuiSocialButtonStyle, SuiStatusBadgeAppearance, SuiStatusBadgeStatus, SuiStepperItem, SuiStepperSize, SuiStepperState, SuiStepperVariant, SuiStoreCardData, SuiSwitchCardType, SuiSwitchSize, SuiTabBar, SuiTabChipItem, SuiTabMenuHorizontalItem, SuiTabMenuHorizontalSize, SuiTabMenuVerticalItem, SuiTabMenuVerticalStyle, SuiTableCellMisc, SuiTableCellPriority, SuiTableColumn, SuiTableSize, SuiTagInputSize, SuiTagStyle, SuiTimeDurationPreset, SuiTimeFormat, SuiTimePeriod, SuiTimePickerItemDirection, SuiTimePickerStatusType, SuiTimeValue, SuiToastAction, SuiToastData, SuiToastItem, SuiToastPosition, SuiToastStyle, SuiToastVariant, SuiTooltipLargeData, SuiTooltipPosition, SuiTooltipSize, SuiTooltipTheme, SuiTooltipThemeInput, SuiTopbarAccent, SuiTopbarAction, SuiTopbarEntry, SuiTopbarSearchConfig, SuiTopbarUserConfig };