@ajuarezso/sui-design-system 0.8.1 → 0.10.0

package/package.json

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

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

@@ -9248,10 +9248,18 @@ declare class SuiSidebar {
      * Default false.
      */
     readonly profileDropdown: _angular_core.InputSignal<boolean>;
-    /** Estado open/closed (en mobile = drawer visible o no). 2-way binding. */
-    readonly open: _angular_core.ModelSignal<boolean>;
-    /** Cerrar el drawer al click en un nav item. Default true. */
-    readonly closeOnNavigate: _angular_core.InputSignal<boolean>;
+    /**
+     * Estado open/closed del drawer móvil (≤767px). 2-way binding:
+     * `[(mobileOpen)]="menuOpen"`. El componente lo setea a false al click en
+     * el backdrop, al presionar Escape y (si closeOnItemClick) al click en un
+     * nav item. En desktop no afecta el layout (el sidebar es fijo siempre).
+     */
+    readonly mobileOpen: _angular_core.ModelSignal<boolean>;
+    /**
+     * Cerrar el drawer móvil al click en un nav item (itemClicked). Solo aplica
+     * en móvil (≤767px) — en desktop el click nunca cierra. Default true.
+     */
+    readonly closeOnItemClick: _angular_core.InputSignal<boolean>;
     /** Mostrar el backdrop overlay (mobile drawer). Default true. */
     readonly showBackdrop: _angular_core.InputSignal<boolean>;
     /**
@@ -9274,6 +9282,14 @@ declare class SuiSidebar {
     readonly profileClicked: _angular_core.OutputEmitterRef<void>;
     /** Submit del search input (Enter). Emite el valor actual. */
     readonly searchSubmitted: _angular_core.OutputEmitterRef<string>;
+    private readonly destroyRef;
+    /**
+     * Viewport móvil (≤767px — canon bp.medium del proyecto). Gatea el backdrop,
+     * el aria-hidden/inert del drawer cerrado, el Escape y el auto-close por
+     * item click, para que mobileOpen sea inocuo en desktop. SSR-safe.
+     */
+    protected readonly isMobile: _angular_core.WritableSignal<boolean>;
+    constructor();
     /** Brand normalizado — nunca null para simplificar los binds del template. */
     protected readonly brandCfg: _angular_core.Signal<SuiSidebarBrandConfig>;
     /**
@@ -9291,6 +9307,8 @@ declare class SuiSidebar {
     protected readonly resolvedActiveValue: _angular_core.Signal<string | null>;
     protected onItemClick(item: SuiSidebarItem, ev: Event): void;
     protected onBackdropClick(): void;
+    /** Escape cierra el drawer móvil (a11y). No-op en desktop o ya cerrado. */
+    protected onEscapeKey(): void;
     /** Helper para template — class binding del item activo cuando NO hay route */
     protected isItemActive(item: SuiSidebarItem): boolean;
     protected onHeaderButtonClick(ev: Event): void;
@@ -9298,7 +9316,7 @@ declare class SuiSidebar {
     protected onSearchInput(value: string): void;
     protected onSearchSubmit(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiSidebar, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSidebar, "sui-sidebar", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "showHeaderButton": { "alias": "showHeaderButton"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "secondaryItems": { "alias": "secondaryItems"; "required": false; "isSignal": true; }; "supportingItems": { "alias": "supportingItems"; "required": false; "isSignal": true; }; "supportingAnchorBottom": { "alias": "supportingAnchorBottom"; "required": false; "isSignal": true; }; "itemsLabel": { "alias": "itemsLabel"; "required": false; "isSignal": true; }; "secondaryItemsLabel": { "alias": "secondaryItemsLabel"; "required": false; "isSignal": true; }; "supportingItemsLabel": { "alias": "supportingItemsLabel"; "required": false; "isSignal": true; }; "activeRoute": { "alias": "activeRoute"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "profileDropdown": { "alias": "profileDropdown"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnNavigate": { "alias": "closeOnNavigate"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "open": "openChange"; "itemClicked": "itemClicked"; "logoutClicked": "logoutClicked"; "backdropClicked": "backdropClicked"; "headerButtonClicked": "headerButtonClicked"; "profileClicked": "profileClicked"; "searchSubmitted": "searchSubmitted"; }, never, ["[feature-card]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiSidebar, "sui-sidebar", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "indicatorColor": { "alias": "indicatorColor"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "showHeaderButton": { "alias": "showHeaderButton"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "secondaryItems": { "alias": "secondaryItems"; "required": false; "isSignal": true; }; "supportingItems": { "alias": "supportingItems"; "required": false; "isSignal": true; }; "supportingAnchorBottom": { "alias": "supportingAnchorBottom"; "required": false; "isSignal": true; }; "itemsLabel": { "alias": "itemsLabel"; "required": false; "isSignal": true; }; "secondaryItemsLabel": { "alias": "secondaryItemsLabel"; "required": false; "isSignal": true; }; "supportingItemsLabel": { "alias": "supportingItemsLabel"; "required": false; "isSignal": true; }; "activeRoute": { "alias": "activeRoute"; "required": false; "isSignal": true; }; "profile": { "alias": "profile"; "required": false; "isSignal": true; }; "profileDropdown": { "alias": "profileDropdown"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; "closeOnItemClick": { "alias": "closeOnItemClick"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "mobileMode": { "alias": "mobileMode"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "mobileOpen": "mobileOpenChange"; "itemClicked": "itemClicked"; "logoutClicked": "logoutClicked"; "backdropClicked": "backdropClicked"; "headerButtonClicked": "headerButtonClicked"; "profileClicked": "profileClicked"; "searchSubmitted": "searchSubmitted"; }, never, ["[feature-card]"], true, never>;
 }
 
 /**
@@ -11715,6 +11733,321 @@ declare class SuiToastOutlet implements OnDestroy {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiToastOutlet, "sui-toast-outlet", never, {}, {}, never, never, true, never>;
 }
 
+/** Color del accent del item activo (icono). Mismo patrón que sui-sidebar. */
+type SuiTopbarAccent = 'brand' | 'information';
+/**
+ * SUI Topbar Item — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component:  Topbar Items [Topbar] [1.0] — set 3802:24588
+ *  - State=Default → 3802:24589 (bg white-0, label sub-600)
+ *  - State=Hover   → 3802:24605 (bg weak-50, label sub-600)
+ *  - State=Active  → 3802:24621 (bg weak-50, label strong-950, icon primary-base)
+ *
+ * EXACT (pulled via get_design_context + get_variable_defs, 2026-07-23):
+ *  - Container: flex items-center, gap 8, radius-8.
+ *    Padding: py 8; sin leftIcon → pl 12; con leftIcon → pl 8; con rightIcon
+ *    (chevron) → pr 8; sin rightIcon → pr 12.
+ *  - Label: Inter Medium 14/20, letter-spacing -0.084px, sub-600 (#5c5c5c);
+ *    active → strong-950 (#171717). Gap label↔badge = 4.
+ *  - Left/right icon: 20×20, color sub-600; active → accent.
+ *  - Hover / Active bg: weak-50 (#f7f7f7). Default bg: white-0 — aquí
+ *    transparent (el topbar padre ya es white-0; transparent lo hace reusable
+ *    sobre cualquier superficie clara sin cambiar el render de Figma).
+ *  - Badge "NEW" (Figma Badge [1.1] warning/light): se compone con <sui-badge>
+ *    (defaults orange/light/small). Notification count (Figma "2" rojo):
+ *    <sui-badge type="number" variant="filled" color="red">.
+ *
+ * REMAP DE MARCA (verificado con get_variable_defs del variant Active
+ * 3802:24621): el color del icono activo está bound a `primary-base`
+ * (#335cff azul en el Figma). NO es `state/information`. Por la regla de
+ * remap del proyecto, primary → naranja --sui-primary-base (#fa7319), igual
+ * que el indicator del sui-sidebar (DECISIONES.md §1). El azul Figma queda
+ * opt-in vía accent='information' (--sui-state-information-base #335cff).
+ *
+ * API: átomo con props planas (regla sui-avatar). `href` → renderiza <a>;
+ * sin href → <button>. El active lo decide el consumer/organism ([active]).
+ *
+ * Usage:
+ *   <sui-topbar-item label="Dashboard" icon="layout-grid-line" [active]="true" />
+ *   <sui-topbar-item label="Others" rightIcon="arrow-down-s-line" (clicked)="..." />
+ *   <sui-topbar-item label="Inbox" badge="NEW" [count]="2" />
+ */
+declare class SuiTopbarItem {
+    readonly label: _angular_core.InputSignal<string>;
+    /** RemixIcon a la izquierda (Figma leftIcon, ej. 'layout-grid-line'). */
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /** RemixIcon a la derecha (Figma rightIcon, típico 'arrow-down-s-line'). */
+    readonly rightIcon: _angular_core.InputSignal<string | null>;
+    /**
+     * Badge junto al label (Figma badge=true, "NEW"). Config presente = visible.
+     * String shorthand = label del badge con defaults orange/light/small.
+     */
+    readonly badge: _angular_core.InputSignal<string | SuiBadgeConfig | null>;
+    /** Notification count (Figma notification=true, "2" rojo). null → oculto. */
+    readonly count: _angular_core.InputSignal<number | null>;
+    /** Estado activo (Figma State=Active). */
+    readonly active: _angular_core.InputSignal<boolean>;
+    /**
+     * Color del icono activo: 'brand' (default, naranja --sui-primary-base) |
+     * 'information' (azul Figma canon #335cff). Ver REMAP en el JSDoc.
+     */
+    readonly accent: _angular_core.InputSignal<SuiTopbarAccent>;
+    /** Con href el item renderiza <a>; sin href, <button>. */
+    readonly href: _angular_core.InputSignal<string | null>;
+    /** target del anchor (solo aplica con href). rel auto con _blank. */
+    readonly target: _angular_core.InputSignal<string | null>;
+    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    /** Badge normalizado — shorthand string renderiza idéntico al objeto. */
+    protected readonly badgeCfg: _angular_core.Signal<SuiBadgeConfig | null>;
+    /** rel auto noopener noreferrer con target _blank (canon SuiLinkConfig). */
+    protected readonly rel: _angular_core.Signal<"noopener noreferrer" | null>;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTopbarItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTopbarItem, "sui-topbar-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "count": { "alias": "count"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+/**
+ * SUI Topbar Button — SUI Design System 2.0
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component:  Topbar Item Button [Topbar] [1.0] — set 3814:25156
+ *  - State=Default → 3814:25157 (bg white-0, icon sub-600)
+ *  - State=Hover   → 3814:25164 (bg weak-50)
+ *  - State=Active  → 3814:25171 (bg weak-50, icon primary-base)
+ *
+ * EXACT (pulled via get_design_context + get_variable_defs, 2026-07-23):
+ *  - 40×40: padding 10 + icon 20×20, radius-10.
+ *  - Icon color: sub-600 (#5c5c5c); active → accent (Figma bindea
+ *    primary-base #335cff → remap naranja --sui-primary-base, igual que
+ *    sui-topbar-item; azul opt-in via accent='information').
+ *  - Notification dot (Figma notification=true): 4×4 state/error-base
+ *    (#fb3748) en top 12 / right 12, con ring blanco (el asset del Ellipse
+ *    en Figma expande ±100% = stroke de separación sobre el icono).
+ *  - Default bg white-0 → transparent aquí (superficie del topbar).
+ *
+ * NO es un sui-compact-button: tamaño (40 vs 24), radius (10 vs 6) y estados
+ * (weak-50 + accent) son propios del set [Topbar].
+ *
+ * Usage:
+ *   <sui-topbar-button icon="flashlight-line" ariaLabel="Acciones rápidas" />
+ *   <sui-topbar-button icon="notification-3-line" ariaLabel="Notificaciones" [dot]="true" />
+ */
+declare class SuiTopbarButton {
+    /** RemixIcon 20×20 (ej. 'flashlight-line', 'notification-3-line'). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** aria-label del botón (icon-only ⇒ obligatorio, patrón sui-compact-button). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Notification dot rojo top-right (Figma notification=true). */
+    readonly dot: _angular_core.InputSignal<boolean>;
+    /** Estado activo (Figma State=Active). */
+    readonly active: _angular_core.InputSignal<boolean>;
+    /** Color del icono activo — ver REMAP en sui-topbar-item. */
+    readonly accent: _angular_core.InputSignal<SuiTopbarAccent>;
+    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTopbarButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTopbarButton, "sui-topbar-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+/**
+ * SUI Topbar User — SUI Design System 2.0
+ *
+ * Chip de usuario del topbar (avatar + nombre + chevron de dropdown).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component:  User Profile [Topbar] [1.0] — set 3814:24667
+ *  - State=Default → 3814:24668 (bg white-0 + border soft-200, chevron down)
+ *  - State=Hover   → 3814:24675 (bg weak-50 sin border, chevron down)
+ *  - State=Active  → 3814:24682 (bg weak-50 sin border, chevron UP = abierto)
+ *
+ * EXACT (pulled via get_design_context, 2026-07-23):
+ *  - Container: flex items-center, pl 4 / pr 8 / py 4, gap 6 (bloque↔chevron),
+ *    radius-10. Default: border 1px stroke-soft-200 + bg white-0.
+ *    Hover/Active: bg weak-50, sin border (aquí border transparent para no
+ *    mover el layout 1px).
+ *  - Avatar 32×32 (sui-avatar size md).
+ *  - Gap avatar↔nombre 8; gap nombre↔verified 2.
+ *  - Nombre: Inter Medium 14/20, ls -0.084px, strong-950.
+ *  - Verified (Figma verified=true): badge 20×20 — igual que sui-sidebar se
+ *    usa RemixIcon verified-badge-fill color state-verified-base #47c2ff.
+ *  - Chevron: arrow-down-s-fill 20; open=true → arrow-up-s-fill (Figma Active).
+ *
+ * CRITERIO (por qué componente propio y no slot del topbar): en Figma es un
+ * component set independiente namespaced [Topbar] con estados propios
+ * (default/hover/open) — reusable en headers fuera del organism (igual que
+ * el patrón sidebar↔profile). El organism sui-topbar lo compone via config.
+ *
+ * Usage:
+ *   <sui-topbar-user name="Sophia" [avatar]="{ initials: 'S', color: 'yellow' }" />
+ *   <sui-topbar-user name="Arthur" avatar="https://..." [verified]="true" [open]="menuOpen()" />
+ */
+declare class SuiTopbarUser {
+    /** Nombre visible (Figma editName). Vacío → chip solo-avatar (Figma name=false). */
+    readonly name: _angular_core.InputSignal<string>;
+    /**
+     * Avatar (32×32). Config presente = visible. String shorthand = src directo;
+     * objeto = SuiAvatarConfig { src?, initials?, color? }.
+     */
+    readonly avatar: _angular_core.InputSignal<string | SuiAvatarConfig | null>;
+    /** Verified badge junto al nombre (Figma verified=true). */
+    readonly verified: _angular_core.InputSignal<boolean>;
+    /** Dropdown abierto (Figma State=Active): bg weak-50 + chevron up. */
+    readonly open: _angular_core.InputSignal<boolean>;
+    readonly clicked: _angular_core.OutputEmitterRef<void>;
+    /** Avatar normalizado — shorthand string renderiza idéntico al objeto. */
+    protected readonly avatarCfg: _angular_core.Signal<SuiAvatarConfig>;
+    protected onClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTopbarUser, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTopbarUser, "sui-topbar-user", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "avatar": { "alias": "avatar"; "required": false; "isSignal": true; }; "verified": { "alias": "verified"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}
+
+/** Entry del array `items` — shape de datos, no confundir con el átomo <sui-topbar-item>. */
+interface SuiTopbarEntry {
+    /** Identificador único; lo emite (itemClicked) y resuelve el active via activeValue. */
+    value: string;
+    label: string;
+    /** RemixIcon izquierdo (Figma Type=With Icon). */
+    icon?: string;
+    /** RemixIcon derecho, típico 'arrow-down-s-line' (Figma "Others ⌄"). */
+    rightIcon?: string;
+    /** Badge junto al label ("NEW"). String shorthand o SuiBadgeConfig. */
+    badge?: SuiBadgeConfig | string;
+    /** Notification count rojo (Figma notification=true). */
+    count?: number;
+    /** Anchor real (<a href>) en vez de <button>. */
+    href?: string;
+    /** target del anchor (rel auto con _blank). */
+    target?: string;
+}
+/** Acción icon-button de la derecha (rayo, notificaciones, etc.). */
+interface SuiTopbarAction {
+    /** Identificador único; lo emite (actionClicked). */
+    value: string;
+    /** RemixIcon 20×20 (ej. 'flashlight-line', 'notification-3-line'). */
+    icon: string;
+    /** aria-label del botón icon-only. Fallback: value. */
+    ariaLabel?: string;
+    /** Notification dot rojo (Figma notification=true del Topbar Item Button). */
+    dot?: boolean;
+}
+/** Config del search slot. Patrón objeto + boolean shorthand (como sui-sidebar). */
+interface SuiTopbarSearchConfig {
+    /** Placeholder del input expandido. Default 'Buscar...'. */
+    placeholder?: string;
+    /** Shortcut pill dentro del input (ej. '⌘1') — renderiza <sui-kbd>. */
+    shortcut?: string;
+    /**
+     * true → en vez del input expandido de 232px renderiza un icon button de
+     * search en Actions (Figma: Type=Default trae el input; Type=With Icon trae
+     * el botón compacto). Emite (searchClicked).
+     */
+    compact?: boolean;
+}
+/** Config del chip de usuario. String shorthand = name. */
+interface SuiTopbarUserConfig {
+    name?: string;
+    /** Avatar del chip: string = src directo, u objeto SuiAvatarConfig. */
+    avatar?: SuiAvatarConfig | string;
+    verified?: boolean;
+}
+/**
+ * SUI Topbar — SUI Design System 2.0
+ *
+ * Barra de navegación superior: logo + nav items + search + acciones + chip
+ * de usuario. Organism que COMPONE los átomos de la familia: sui-topbar-item,
+ * sui-topbar-button, sui-topbar-user y sui-kbd (shortcut del search).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Component:  Topbar [Navigation] [1.1] — frame 3814:25274, 4 ejemplos:
+ *  - 3814:25221 Type=Default,   HR Management     (nav sin iconos, search input)
+ *  - 3814:27109 Type=With Icon, HR Management     (nav con iconos, search botón)
+ *  - 3814:27468 Type=Default,   Finance & Banking
+ *  - 3814:27485 Type=With Icon, Finance & Banking
+ *
+ * EXACT (pulled via get_design_context, 2026-07-23 — node 3814:25221):
+ *  - Container: bg white-0, border-b 1px stroke-soft-200, padding 20px 44px,
+ *    gap 16, height total 80 (20+40+20). Width del frame (1440) es del
+ *    EJEMPLO: el host es block full-width.
+ *  - Left (flex-1): logo 40×40 + gap 24 + nav (gap 4 entre items).
+ *  - Search expandido (Figma Text Input [1.1], w 232): border soft-200,
+ *    radius-10, shadow regular-shadow-x-small, pl 12 / pr 10 / py 10, gap 8,
+ *    icon search-2-line 20 soft-400, placeholder 14/20 regular soft-400,
+ *    shortcut pill = <sui-kbd> (match exacto del "Shortcut" de Figma).
+ *  - Right: gap 16 entre Actions (gap 4) y user chip.
+ *
+ * CRITERIOS de composición (documentados a pedido):
+ *  - Nav item / icon button / user chip = componentes propios: en Figma son
+ *    component sets independientes namespaced [Topbar] con estados propios —
+ *    reusables fuera del organism.
+ *  - Search expandido = pieza INTERNA del organism (no componente): en Figma
+ *    es una instancia de Text Input [1.1] sin estados propios del topbar; el
+ *    pill se resuelve con sui-kbd. No se ve reusable como pieza suelta.
+ *  - Logo = slot <ng-content select="[topbar-logo]"> (la marca varía por
+ *    consumer; en Figma es un logo de ejemplo Synergy/Apex).
+ *  - Navegación: los items NO usan RouterLink (el átomo encapsula su <a>/
+ *    <button> interno). El active se resuelve con [activeValue] y el consumer
+ *    navega en (itemClicked) — diferencia deliberada vs sui-sidebar.
+ *
+ * REMAP DE MARCA: el accent del item/botón activo está bound a primary-base
+ * (#335cff azul en Figma) → naranja --sui-primary-base por default; azul
+ * opt-in con accent='information' (ver sui-topbar-item).
+ *
+ * Usage:
+ *   <sui-topbar
+ *     [items]="items" activeValue="dashboard"
+ *     [search]="{ placeholder: 'Buscar...', shortcut: '⌘1' }"
+ *     [actions]="[{ value: 'quick', icon: 'flashlight-line' },
+ *                 { value: 'notifications', icon: 'notification-3-line', dot: true }]"
+ *     [user]="{ name: 'Sophia', avatar: { initials: 'S', color: 'yellow' } }"
+ *     (itemClicked)="..." (actionClicked)="..." (userClicked)="...">
+ *     <img topbar-logo src="..." alt="Logo" />
+ *   </sui-topbar>
+ */
+declare class SuiTopbar {
+    readonly items: _angular_core.InputSignal<SuiTopbarEntry[]>;
+    /** value del item activo (bg weak-50 + label strong-950 + icon accent). */
+    readonly activeValue: _angular_core.InputSignal<string | null>;
+    /** Color del accent activo — 'brand' naranja (default) | 'information' azul Figma. */
+    readonly accent: _angular_core.InputSignal<SuiTopbarAccent>;
+    /**
+     * Search:
+     *  - false / null (default): sin search
+     *  - true: input expandido con defaults
+     *  - objeto { placeholder?, shortcut?, compact? }: configurado.
+     *    compact=true → icon button en Actions en vez del input.
+     */
+    readonly search: _angular_core.InputSignal<boolean | SuiTopbarSearchConfig | null>;
+    /** Valor del input de búsqueda (2-way). */
+    readonly searchValue: _angular_core.ModelSignal<string>;
+    readonly actions: _angular_core.InputSignal<SuiTopbarAction[]>;
+    /** dot=true en la acción con este value se puede togglear directo desde actions. */
+    readonly user: _angular_core.InputSignal<string | SuiTopbarUserConfig | null>;
+    /** Estado abierto del dropdown del user chip (chevron up + bg weak-50). */
+    readonly userOpen: _angular_core.InputSignal<boolean>;
+    readonly itemClicked: _angular_core.OutputEmitterRef<SuiTopbarEntry>;
+    readonly actionClicked: _angular_core.OutputEmitterRef<SuiTopbarAction>;
+    readonly userClicked: _angular_core.OutputEmitterRef<void>;
+    /** Click en el search compacto (icon button). */
+    readonly searchClicked: _angular_core.OutputEmitterRef<void>;
+    /** Enter en el input expandido — emite el valor actual. */
+    readonly searchSubmitted: _angular_core.OutputEmitterRef<string>;
+    /** Search normalizado: null → sin search. */
+    protected readonly searchCfg: _angular_core.Signal<{
+        placeholder: string;
+        shortcut: string | null;
+        compact: boolean;
+    } | null>;
+    /** User normalizado — shorthand string = name. */
+    protected readonly userCfg: _angular_core.Signal<SuiTopbarUserConfig | null>;
+    protected onItemClick(item: SuiTopbarEntry): void;
+    protected onActionClick(action: SuiTopbarAction): void;
+    protected onSearchInput(value: string): void;
+    protected onSearchSubmit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SuiTopbar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SuiTopbar, "sui-topbar", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "activeValue": { "alias": "activeValue"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "searchValue": { "alias": "searchValue"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "user": { "alias": "user"; "required": false; "isSignal": true; }; "userOpen": { "alias": "userOpen"; "required": false; "isSignal": true; }; }, { "searchValue": "searchValueChange"; "itemClicked": "itemClicked"; "actionClicked": "actionClicked"; "userClicked": "userClicked"; "searchClicked": "searchClicked"; "searchSubmitted": "searchSubmitted"; }, never, ["[topbar-logo]"], true, never>;
+}
+
 type SuiTooltipPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left';
 type SuiTooltipSize = 'small' | 'medium' | 'large' | 'xlarge';
 type SuiTooltipTheme = 'light' | 'dark';
@@ -11856,5 +12189,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_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, 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, 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, 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 };
+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_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, 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, 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 };