@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-time-picker-item/sui-time-picker-item.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiTimePickerItemDirection = 'right' | 'center';
+/**
+ * `<sui-time-picker-item>` — Fila de las columnas de hora y minuto del panel de sui-time-picker.
+ *
+ * Portado 1:1 del SUI Angular (`sui-time-picker/sui-time-picker-item.*`).
+ * Misma API publica, todas las variantes/estados 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
+ * Node: 165483:5687 ("TimePickerItems") — VERIFIED via MCP get_design_context.
+ *   Variant matrix: State(4: Default/Hover/Active/Disabled)
+ *                 x Direction(2: Right/Center)
+ *                 x RightText(2: true/false) = 16 combos.
+ *
+ * Fila individual de las listas scrollables de hora/minuto del time picker.
+ * Compone el "Left" group (hora + AM/PM) y opcionalmente un "Right" group
+ * (segundo bloque hora — usado en pickers de rango start/end). El check 14px
+ * marca el item activo (seleccionado en la columna).
+ *
+ * EXACT (Figma 165596:40475 Default Right + 165596:40489 Active):
+ *   Container: h-36, px-12 py-8, gap-10, radius-8, overflow-clip.
+ *   Left / Right groups: flex-1, gap-3, items-center. Right group: justify-end.
+ *   Typography: Inter Medium 14/20, ls -0.6% (= -0.084px),
+ *     font-feature-settings 'ss11' 1, 'calt' 0, 'liga' 0.
+ *   Check (Active): 14x14 filled-circle (RemixIcon checkbox-circle-fill),
+ *     color primary-base. Direction=Center → check ENTRE Left y Right;
+ *     Direction=Right → check al final.
+ *
+ * COLOR MAPPING por estado (Figma → tokens):
+ *   Default:  bg white-0 - time text-sub-600 - meridiem text-soft-400
+ *   Hover:    bg weak-50  - time text-sub-600 - meridiem text-soft-400
+ *   Active:   bg weak-50  - time text-strong-950 - meridiem text-soft-400 - check
+ *   Disabled: bg white-0  - TODO el texto text-disabled-300
+ *
+ * NOTA brand-override: Active check usa --sui-primary-base (#335cff Figma →
+ * #fa7319 naranja en este DS). Intencional.
+ *
+ * `scoped: true` (light DOM): asi los selectores `:host([data-sui-*])` reflejan
+ * el estado del host y el `<sui-icon>` interno hereda tokens sin pelear con
+ * shadow DOM. Misma estrategia que el resto del set.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (la presencia
+ * del binding engage el touch pipeline iOS; touchend blur fuerza la deseleccion).
+ *
+ * @prop time      — texto principal de la izquierda (ej. "09:30"). Requerido.
+ * @prop meridiem  — sufijo AM/PM de la izquierda ('' = sin meridiem, formato 24h)
+ * @prop rightTime / rightMeridiem — segundo bloque (Direction implica rightText=true)
+ * @prop direction — 'right' (check al final) | 'center' (check entre bloques)
+ * @prop active     — estado seleccionado (muestra check + texto strong)
+ * @prop highlighted — keyboard-hover (mouse hover se maneja por CSS :hover)
+ * @prop disabled
+ */
+export declare class SuiTimePickerItem {
+    el: HTMLElement;
+    /** Texto principal del bloque izquierdo (ej. "09:30"). */
+    time: string;
+    /** Sufijo AM/PM del bloque izquierdo. `''` = sin meridiem (formato 24h). */
+    meridiem: string;
+    /** Texto principal del bloque derecho. `''` = sin bloque derecho. */
+    rightTime: string;
+    /** Sufijo AM/PM del bloque derecho. `''` = sin meridiem derecho. */
+    rightMeridiem: string;
+    /** `'right'` (check al final) | `'center'` (check entre bloques). Default `right`. */
+    direction: SuiTimePickerItemDirection;
+    /** Estado seleccionado: muestra el check + texto strong. Default `false`. */
+    active: boolean;
+    /** Keyboard-hover (el mouse hover se maneja por CSS :hover). Default `false`. */
+    highlighted: boolean;
+    /** Deshabilitado: texto disabled-300, no interactivo. Default `false`. */
+    disabled: boolean;
+    /** Click / Enter / Space sobre el item (si no esta disabled). */
+    clicked: EventEmitter<globalThis.Event>;
+    /** El bloque "Right" solo se renderiza cuando hay rightTime (RightText=true). */
+    private get hasRight();
+    private onActivate;
+    onKeydown(event: KeyboardEvent): void;
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    render(): any;
+}

package/dist/types/components/sui-time-picker-status/sui-time-picker-status.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiTimePickerStatusType = 'available' | 'busy' | 'in-meeting' | 'offline';
+/**
+ * `<sui-time-picker-status>` — Pill de disponibilidad (disponible, ocupado, en reunión, desconectado) del panel de sui-time-picker.
+ *
+ * Portado 1:1 del SUI Angular (`sui-time-picker/sui-time-picker-status.*`).
+ * Misma API publica, las 16 variantes (Type x State) y mismos VALORES exactos.
+ * Los colores de estado son SEMANTICOS (success/error/warning/faded) — se
+ * respetan tal cual el Figma; NO son brand-override.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Node: 165596:41348 ("TimePickerSelectStatus") — VERIFIED via MCP.
+ *   Variant matrix: Type(4: Available / Busy / In-meeting / Offline)
+ *                 x State(4: Default / Hover / Selected / Disabled) = 16 combos.
+ *
+ * Pill de estado de disponibilidad que vive junto a los presets/columnas del
+ * time picker (ej. marcar un slot como "Busy"/"Available" en un scheduler). Es
+ * un componente standalone del MISMO set de Figma.
+ *
+ * EXACT (Figma 165596:41349 Default Available + variantes):
+ *   Container: inline-flex centrado, gap-4, pl-6 pr-10 py-4, radius-8,
+ *     overflow-clip. box-sizing border-box.
+ *   Dot: box 16x16, circulo r=3 (6px diametro) centrado, color = base del type.
+ *   Typography (label): Inter Medium 14/20, ls -0.6% (= -0.084px),
+ *     font-feature-settings 'ss11' 1, 'calt' 0, 'liga' 0.
+ *
+ * COLOR MAPPING por State (Figma → tokens):
+ *   Default:  bg white-0 - border stroke-soft-200 - shadow x-small - text sub-600
+ *   Hover:    bg weak-50  - border stroke-soft-200 - (sin shadow)  - text sub-600
+ *   Selected: bg <type>-lighter - sin border/shadow - text <type>-dark
+ *   Disabled: bg weak-50  - sin border/shadow - text disabled-300 - dot disabled-300
+ *
+ * Selected backgrounds + text por type (semanticos):
+ *   Available  → bg success-lighter (#e3f7ec) - text success-dark (#0b4627)
+ *   Busy       → bg error-lighter   (#ffebec) - text error-dark   (#681219)
+ *   In-meeting → bg warning-lighter (#fff3eb) - text warning-dark (#71330a)
+ *   Offline    → bg faded-lighter   (#f5f5f5) - text faded-dark   (#262626)
+ *
+ * Dot color por type (base):
+ *   Available → success-base (#1fc16b) - Busy → error-base (#fb3748)
+ *   In-meeting → warning-base (#fa7319) - Offline → faded-base (#7b7b7b)
+ *   Disabled (cualquier type) → disabled-300 (#d1d1d1)
+ *
+ * Asset: el Dot de Figma es un SVG externo (circulo r=3). Se replica con un
+ * radial-gradient sobre el box 16x16 (mismo patron que sui-badge dot) para no
+ * depender de un asset remoto.
+ *
+ * `scoped: true` (light DOM): los selectores `:host([data-sui-*])` reflejan el
+ * estado del host.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend.
+ *
+ * @prop type      — 'available' | 'busy' | 'in-meeting' | 'offline'
+ * @prop label     — override del texto ('' = label canon del type)
+ * @prop selected  — estado seleccionado (bg + texto semantico del type)
+ * @prop disabled
+ */
+export declare class SuiTimePickerStatus {
+    el: HTMLElement;
+    /** Tipo de disponibilidad. Default `available`. */
+    type: SuiTimePickerStatusType;
+    /** Override del texto. `''` = label canon del type. Default `''`. */
+    label: string;
+    /** Estado seleccionado: bg + texto semantico del type. Default `false`. */
+    selected: boolean;
+    /** Deshabilitado: bg weak-50, sin border/shadow, dot disabled-300. Default `false`. */
+    disabled: boolean;
+    /** Click / Enter / Space sobre el pill (si no esta disabled). */
+    clicked: EventEmitter<globalThis.Event>;
+    /** Copy canon de cada type, en español como el SUI Angular (sui-textos `fecha.*`). */
+    private get defaultLabel();
+    /** Texto a mostrar: override del consumer o el copy canon del type. */
+    private get displayLabel();
+    private onActivate;
+    onKeydown(event: KeyboardEvent): void;
+    onTouchStart(): void;
+    onTouchEnd(): void;
+    render(): any;
+}

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

@@ -0,0 +1,128 @@
+import type { SuiToastData, SuiToastItem, SuiToastPosition } from './sui-toast.data';
+/**
+ * `<sui-toast>` — SUI Design System (SUI Design System 2.0). COMPUESTO + outlet.
+ *
+ * Homologado con el SUI Angular (`lib/sui-toast/`): el service `SuiToastService`
+ * (acá el store `toast` de `sui-toast.data.ts`) + el outlet, que en Angular se
+ * llama `<sui-toast-outlet>` y acá conserva la etiqueta `<sui-toast>`. Misma API
+ * imperativa (`toast.success/error/info/warning/feature/show/dismiss`), mismas
+ * 5 variantes × 5 estilos × 6 posiciones, mismos defaults y mismo comportamiento
+ * de stack Sonner-style. El visual de cada toast lo da el primitivo ya portado
+ * `<sui-alert size="large">` (NO se re-implementa) + `<sui-link-button>` para la
+ * action + `<sui-compact-button>` para la X (se ve de 20; se toca en 40 × 40 y
+ * en 44 × 44 en el teléfono). El accent del DS es NARANJA brand (#fa7319).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO · node 169:2399 (Toast section).
+ *
+ * USO (montar una sola vez en el root de la app):
+ *
+ *   <sui-toast></sui-toast>
+ *
+ * y desde cualquier lado, imperativo:
+ *
+ *   import { toast } from '@sui/components/sui-toast/sui-toast.data';
+ *   toast.success('Guardado');
+ *   toast.error('Falló', { description: '...', action: { label: 'Reintentar', onClick } });
+ *
+ * El componente NO crea toasts: lee del store singleton (`toast`) y renderiza la
+ * stack. Es el equivalente exacto del `SuiToastOutlet` Angular. También expone
+ * los métodos imperativos como `@Method` async sobre el elemento (`el.success(...)`)
+ * para consumers que prefieran no importar el store.
+ *
+ * El outlet maneja (espejo del Angular):
+ *   - Stack positioning (6 esquinas, mobile full-width)
+ *   - ResizeObserver per-slot → gap preciso en expand
+ *   - Expand on hover/touch con persistence 1.2s tras dismiss
+ *   - Auto-dismiss timers per toast (no en el store) → exit suave Sonner-style
+ *   - Leaving / manual-dismiss states (CSS class + remove diferido)
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-alert>` internos heredan
+ * tokens/font del global; el slot/styling de contenido proyectado transla limpio.
+ * Misma estrategia que el resto del DS Stencil.
+ */
+export declare class SuiToast {
+    el: HTMLElement;
+    /**
+     * Posición default global aplicada a los toasts creados sin `position`
+     * explícita. Default `bottom-right`. Equivale a `svc.setDefaultPosition()`.
+     * En HTML el atributo es `default-position`.
+     */
+    defaultPosition: SuiToastPosition;
+    /**
+     * Offset bottom (px) cuando hay una tab bar nativa liquid-glass activa
+     * (iOS 26+). En Angular venía de `LiquidGlassService.tabBarHeight()`. Acá se
+     * expone como @Prop para que el host de la app lo setee. 0 = sin tab bar.
+     */
+    tabBarOffset: number;
+    /** Nombre accesible de la pila (`textos.notificacion.region` del SUI Angular). */
+    regionLabel: string;
+    /** Nombre accesible de la X de cerrar (`textos.comun.cerrar` del SUI Angular). */
+    closeLabel: string;
+    /** Array de toasts vivo (mirror del store, vía subscribe). */
+    toasts: SuiToastItem[];
+    /** Posiciones expandidas (hover / touch / pin tras dismiss). */
+    expandedPositions: Set<SuiToastPosition>;
+    /** Ids en fade-out (Sonner-style). CSS aplica la transition; tras
+     *  EXIT_DURATION_MS sucede el remove real del store. */
+    leavingIds: Set<string>;
+    /** Ids cerrados MANUALMENTE (click X) → siempre slide-out completo 100%. */
+    manuallyDismissedIds: Set<string>;
+    /** Altura real medida per slot (ResizeObserver) → gap preciso en expand. */
+    slotHeights: Map<string, number>;
+    readonly positions: SuiToastPosition[];
+    readonly toastGap = 10;
+    /** Match con `TIME_BEFORE_UNMOUNT` de Sonner. La transition CSS tiene opacity
+     *  200ms + transform 500ms: a los 200ms el opacity ya llegó a 0 (invisible)
+     *  → remove del DOM ahí. La transform restante corre con el element ya fuera
+     *  pero el animator visual retiene el rendering. Snappy + smooth. */
+    private readonly EXIT_DURATION_MS;
+    private unsubscribe?;
+    private resizeObserver?;
+    private observedSlots;
+    private dismissTimers;
+    private collapseTimers;
+    private storedLeavingOffset;
+    private storedLeavingIndex;
+    onDefaultPositionChange(position: SuiToastPosition): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    /** Crea un toast con config completa. Devuelve su id. */
+    show(config: SuiToastData): Promise<string>;
+    success(title: string, opts?: Partial<SuiToastData>): Promise<string>;
+    error(title: string, opts?: Partial<SuiToastData>): Promise<string>;
+    info(title: string, opts?: Partial<SuiToastData>): Promise<string>;
+    warning(title: string, opts?: Partial<SuiToastData>): Promise<string>;
+    feature(title: string, opts?: Partial<SuiToastData>): Promise<string>;
+    /** Cierra un toast por id (con exit animation Sonner-style). */
+    dismiss(id: string): Promise<void>;
+    private get toastsByPosition();
+    private get liquidTabOffset();
+    private get tabBarActive();
+    private isExpanded;
+    private isLeaving;
+    private isManuallyDismissed;
+    /** Index "visual" del toast: ignora los leaving para que los otros
+     *  reacomoden EN PARALELO con el fade-out, no en serie. */
+    private computeVisualIndex;
+    /** Offset px del toast al expandirse (suma alturas reales + gaps). Si está
+     *  leaving usa el offset cacheado para no moverse durante el fade-out. */
+    private computeExpandOffset;
+    private onStackEnter;
+    private onStackLeave;
+    private scheduleAutoDismiss;
+    /** Dismiss disparado por click X manual. Marca como manual (CSS slide-out
+     *  completo) y delega al dismiss normal. */
+    private dismissManual;
+    /**
+     * Dismiss un toast con exit animation.
+     *   1) Cancela el auto-dismiss timer si existe
+     *   2) Cachea offset/index ANTES de marcar leaving (sino los pierde)
+     *   3) Marca leaving → CSS aplica `.sui-toast-slot--leaving` con la transition
+     *   4) Pin expanded 1.2s si quedan más toasts en esa posición
+     *   5) Tras EXIT_DURATION_MS, remove real del store
+     */
+    private dismissItem;
+    private onAction;
+    render(): any;
+}

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

@@ -0,0 +1,116 @@
+/**
+ * Tipos + store singleton del `<sui-toast>`. Viven en este archivo hermano (no
+ * en el `.tsx`) por la regla del proyecto Stencil: en el `.tsx` solo se permite
+ * `export class` / `export type` / `export interface`. Cualquier
+ * `export const`/`export function`/`export enum` rompe el build de TODO el
+ * proyecto, así que el catálogo de tipos + la API imperativa (store + helper
+ * `toast`) se aíslan acá.
+ *
+ * Port 1:1 del Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-toast/):
+ *   - sui-toast.service.ts → store singleton + helper imperativo `toast`
+ *   - sui-toast-outlet.{ts,html,scss} → componente `<sui-toast>` (el outlet)
+ *
+ * Mismo modelo de datos, mismas variantes (5) / estilos (5) / posiciones (6) /
+ * estados (dismissible, action, duration Infinity), mismos defaults
+ * (variant=info, style=stroke-dark, duration=4000, dismissible=true,
+ * position=bottom-right) y mismo comportamiento de stack Sonner-style.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO · node 169:2399 (Alert & Notification &
+ * Toast — Toast section). El accent del DS es NARANJA brand (#fa7319), NO el
+ * azul de Figma — el visual lo da `<sui-alert>` que ya respeta ese accent.
+ */
+/** Variante semántica del toast (espeja a `<sui-alert>`). */
+export type SuiToastVariant = 'info' | 'success' | 'warning' | 'error' | 'feature';
+/** Posición del stack en el viewport (6 esquinas). */
+export type SuiToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/** Estilo visual del toast (espeja a `<sui-alert variant-style>`). */
+export type SuiToastStyle = 'filled' | 'light' | 'lighter' | 'stroke' | 'stroke-dark';
+/** Botón de acción opcional al lado del close. */
+export interface SuiToastAction {
+    /** Texto del botón de acción (ej. "Actualizar", "Reintentar"). */
+    label: string;
+    /** Callback al presionar. El toast se cierra automáticamente después
+        a menos que `keepOpen=true`. */
+    onClick: () => void;
+    /** No cerrar el toast tras el click. Default false. */
+    keepOpen?: boolean;
+}
+/** Config de entrada al crear un toast (`toast.show(config)`). */
+export interface SuiToastData {
+    id?: string;
+    variant?: SuiToastVariant;
+    title: string;
+    description?: string;
+    /** ms; `Infinity` = permanente. Default 4000. */
+    duration?: number;
+    dismissible?: boolean;
+    position?: SuiToastPosition;
+    /** Default `stroke-dark`. */
+    style?: SuiToastStyle;
+    /** Botón de acción opcional al lado del close. */
+    action?: SuiToastAction;
+}
+/** Item normalizado del store (todos los defaults resueltos). */
+export interface SuiToastItem extends Required<Pick<SuiToastData, 'id' | 'variant' | 'title' | 'dismissible' | 'position' | 'style'>> {
+    description?: string;
+    duration: number;
+    createdAt: number;
+    action?: SuiToastAction;
+}
+/** Mapa de toasts agrupados por posición. */
+export type SuiToastsByPosition = Record<SuiToastPosition, SuiToastItem[]>;
+/** Las 6 posiciones, en el orden de render del outlet. */
+export declare const SUI_TOAST_POSITIONS: SuiToastPosition[];
+type Listener = (toasts: SuiToastItem[]) => void;
+/**
+ * Store singleton — equivalente al `@Injectable({ providedIn: 'root' })`
+ * del Angular `SuiToastService`. Mantiene el array de toasts y notifica a los
+ * outlets suscritos. La API pública imperativa (`toast.success(...)`, etc.)
+ * delega acá.
+ *
+ * No usa signals (no hay Angular en Stencil): es un observable manual con
+ * `subscribe` que devuelve un unsubscribe. El componente `<sui-toast>` se
+ * suscribe en `connectedCallback` y empuja el array a un `@State` para
+ * re-renderizar.
+ */
+declare class SuiToastStore {
+    private toastsList;
+    private listeners;
+    private defaultPosition;
+    /** Toasts actuales (copia defensiva). */
+    getToasts(): SuiToastItem[];
+    /** Position default global. Mutable via setDefaultPosition(). */
+    setDefaultPosition(position: SuiToastPosition): void;
+    getDefaultPosition(): SuiToastPosition;
+    /**
+     * Suscribe un listener a los cambios del store. Devuelve la función de
+     * desuscripción. Empuja el estado actual inmediatamente.
+     */
+    subscribe(fn: Listener): () => void;
+    private emit;
+    show(config: SuiToastData): string;
+    success(title: string, opts?: Partial<SuiToastData>): string;
+    error(title: string, opts?: Partial<SuiToastData>): string;
+    info(title: string, opts?: Partial<SuiToastData>): string;
+    warning(title: string, opts?: Partial<SuiToastData>): string;
+    feature(title: string, opts?: Partial<SuiToastData>): string;
+    dismiss(id: string): void;
+    /** Limpia todos los toasts (útil para teardown de stories). */
+    clear(): void;
+    private uuid;
+}
+/**
+ * Singleton del store. El helper imperativo `toast` es la API pública
+ * user-facing (equivale a inyectar `SuiToastService` en Angular):
+ *
+ *   import { toast } from '...sui-toast.data';
+ *   toast.success('Guardado');
+ *   toast.error('Falló', { description: '...', duration: Infinity });
+ *   const id = toast.show({ title: '...', action: { label: 'Deshacer', onClick } });
+ *   toast.dismiss(id);
+ */
+export declare const toast: SuiToastStore;
+/** Agrupa toasts por posición (newest-first dentro de cada grupo, canon Sonner). */
+export declare function groupByPosition(toasts: SuiToastItem[]): SuiToastsByPosition;
+export {};

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

@@ -0,0 +1,134 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiTooltipPosition = 'top' | 'top-start' | 'top-end' | 'right' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left';
+export type SuiTooltipSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type SuiTooltipTheme = 'light' | 'dark';
+/** `auto` = contraste invertido con el tema de la página (`<html data-theme>`):
+ *  burbuja dark sobre página light y viceversa. Se resuelve en cada apertura. */
+export type SuiTooltipThemeInput = SuiTooltipTheme | 'auto';
+/**
+ * `<sui-tooltip>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-tooltip/). Misma API
+ * pública (mapeada de inputs/outputs a props/events), TODAS las variantes
+ * (3 sizes × 2 themes × 8 positions + Large popover rico), mismo comportamiento
+ * (show/hide on hover/focus con delay, Escape, dismiss persistente,
+ * aria-describedby en el trigger enfocable, strip del title nativo, prefers-reduced-motion, auto-flip)
+ * y mismos VALORES exactos (tokens del DS, NO hex). El accent del DS es NARANJA
+ * brand (#fa7319), NUNCA el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — component set `Tooltip [1.1]` (node 2604:269).
+ *
+ * ─── Divergencia arquitectónica vs Angular (justificada) ───────────────────
+ * El Angular es una **directiva** `[suiTooltip]` aplicable a cualquier elemento,
+ * que monta un **panel** dinámico vía Angular CDK Overlay (DOM portal a
+ * `cdk-overlay-container`). Stencil NO tiene directivas ni CDK. El port idiomático
+ * es un **componente envolvente**: `<sui-tooltip>` wrappea su trigger (slot
+ * default) y renderea el panel flotante él mismo (position: absolute relativo al
+ * host), manejando hover/focus/escape/positioning internamente. Es el patrón
+ * canónico de tooltip en web components.
+ *
+ * EXACT specs (Figma 2604:269 — confirmados en el Angular fuente de verdad):
+ *   Sizes (box):
+ *     small  (2X-Small, 24px tall): padding 2/6,  radius-4,  text 12/400/16
+ *     medium (X-Small,  34px tall): padding 4/10, radius-6,  text 14/400/20 ls -0.006em
+ *     large  (280px wide): padding 12 + gap 12, radius-12, title 14/500/20 ls -0.006em,
+ *            desc 12/400/16, leading icon 20×20, dismiss button (X)
+ *   Themes:
+ *     light: bg-white-0 + border 1px stroke-soft-200 + text strong-950
+ *     dark : bg-strong-950 + SIN border + text white-0
+ *   Gap host→tooltip: 8px · Shadow: --sui-shadow-medium
+ *   Arrow/tail: triángulo clip-path (ratio 2:1) — small 8×4, medium/large 12×6
+ *
+ * API mapping (Angular → Stencil):
+ *   suiTooltip (input)         → content (prop)
+ *   suiTooltipLarge (input)    → large + title/description/icon/dismissible (props)
+ *   position / theme / showArrow / delay / disabled → idem
+ *   suiTooltipSize (input)     → size (prop)  [alias evitaba colisión con host `size`]
+ *   dismissed (output)         → suiDismiss (event)
+ *
+ * Homologado con el SUI Angular (05-11-2026): size `xlarge` (popover 320, icono
+ * 24, title 16/24, desc 14/20), `theme="auto"` y colores theme-independientes
+ * (static-*). El dismiss sigue siendo un <button> propio con las medidas del
+ * compact-button (el Angular usa <sui-compact-button>); el posicionamiento es
+ * el propio de Stencil (sin CDK Overlay).
+ */
+export declare class SuiTooltip {
+    el: HTMLElement;
+    /** Texto del tooltip (text-only en size small/medium). */
+    content: string;
+    /**
+     * Activa el variant Large (popover rico: icon + title + description + dismiss).
+     * Equivale a presencia de `suiTooltipLarge` en el Angular. También se activa
+     * implícitamente cuando `size='large'`.
+     */
+    large: boolean;
+    /** Título del Large (Label/Small Medium 14/20 -0.006em). Solo en Large. */
+    titleText: string | null;
+    /** Descripción del Large (Paragraph/X-Small Regular 12/16). Solo en Large. */
+    description: string | null;
+    /** RemixIcon name del leading icon (20×20). Solo en Large. */
+    icon: string | null;
+    /**
+     * Si true (solo Large), el tooltip se vuelve PERSISTENTE: no auto-hide en
+     * mouseleave/blur, solo cierra via X click o Escape (UX tipo popover).
+     * Renderea el dismiss button.
+     */
+    dismissible: boolean;
+    /** Placement relativo al trigger. Default `top`. */
+    position: SuiTooltipPosition;
+    /** Tamaño visual. Default `medium`. */
+    size: SuiTooltipSize;
+    /** Color theme. Default `light`. */
+    theme: SuiTooltipThemeInput;
+    /** Delay en ms antes de mostrar (mouseenter/focus). Default 200. */
+    delay: number;
+    /** Deshabilita el tooltip por completo. Default `false`. */
+    disabled: boolean;
+    /** Muestra el arrow/tail indicador. Default `true`. */
+    showArrow: boolean;
+    /** Emitido cuando el user clickea el dismiss button (X) en el Large. */
+    suiDismiss: EventEmitter<void>;
+    /** Visibilidad real del panel (post-delay). */
+    visible: boolean;
+    /** Posición efectiva — puede flippear si el panel se sale del viewport. */
+    activePosition: SuiTooltipPosition;
+    /** Id único para aria-describedby. */
+    private panelId;
+    private showTimer;
+    private panelEl?;
+    private triggerEl?;
+    /** Elemento al que se le puso `aria-describedby` (el trigger enfocable). */
+    private describedEl;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onDisabledChange(isDisabled: boolean): void;
+    onMouseEnter(): void;
+    onMouseLeave(): void;
+    onFocusIn(): void;
+    onFocusOut(): void;
+    onDocumentKeydown(e: KeyboardEvent): void;
+    onAnyScroll(): void;
+    private scheduleShow;
+    /** True si hay contenido para renderear (text simple O datos Large). */
+    private hasContent;
+    /** Renderear como Large cuando `large` o size large/xlarge. */
+    private isLarge;
+    /** True si Large con dismissible — persistente, no auto-hide. */
+    private isPersistent;
+    /** Size efectivo: Large fuerza `large`, salvo que se pida `xlarge` explícito. */
+    private effectiveSize;
+    /** `auto` → contraste invertido con el tema de la página. */
+    private resolveTheme;
+    private show;
+    private hide;
+    private clearTimer;
+    private onDismissClick;
+    /**
+     * Auto-flip: si el panel se sale del viewport en su posición primaria, voltea
+     * al lado opuesto. Replica las fallback positions del CDK (que probaba primary
+     * → flip). Solo un nivel de flip por eje, suficiente para los 8 placements.
+     */
+    private flipIfClipped;
+    render(): any;
+}

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

@@ -0,0 +1,74 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiTopbarAccent } from '../sui-topbar-item/sui-topbar-item';
+import type { SuiTopbarAction, SuiTopbarEntry, SuiTopbarSearchConfig, SuiTopbarUserConfig } from './sui-topbar.data';
+/**
+ * `<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).
+ * Port 1:1 del Angular (`lib/sui-topbar`).
+ *
+ * Figma 8p1k72aKKvzJV4XcvPS4VO — Topbar [Navigation] [1.1], frame 3814:25274
+ * (4 ejemplos: HR Management / Finance & Banking × Default / With Icon).
+ *
+ * EXACT: bg white-0, border-b 1px stroke-soft-200, padding 20px 44px, gap 16,
+ * alto 80. Left (flex-1): logo 40×40 + gap 24 + nav (gap 4). Search expandido
+ * w 232: border soft-200, radius-10, shadow x-small, pl 12 / pr 10 / py 10,
+ * gap 8, icon search-2-line 20 soft-400, placeholder 14/20 soft-400, shortcut
+ * = `<sui-kbd>`. Right: gap 16 entre Actions (gap 4) y chip.
+ *
+ * Logo: `<slot name="topbar-logo">` (en Angular `[topbar-logo]`); un `<img>`
+ * proyectado directo se normaliza a 40×40 redondo.
+ *
+ * Navegación: el activo se resuelve con `activeValue` y el consumer navega en
+ * `itemClicked` (o con `href` + el evento `suiNavigate`, ver sui-href).
+ *
+ * Diferencias con Angular:
+ *  - `searchValue` (model 2-way) → `@Prop({ mutable: true })` + `searchValueChange`.
+ *  - Textos fijos en español (`Buscar…`, nav «Principal»): no existe
+ *    `provideSuiTextos` en Stencil.
+ *  - Props objeto (`items`, `actions`, `search`, `user`) se pasan como
+ *    PROPERTY (`el.items = [...]` / `.items=${...}` en lit), no como atributo.
+ */
+export declare class SuiTopbar {
+    /** Nav items. Cada entry: { value, label, icon?, rightIcon?, badge?, count?, href?, target? }. */
+    items: SuiTopbarEntry[];
+    /** value del item activo (bg weak-50 + label strong-950 + icono accent). */
+    activeValue: string | null;
+    /** Color del accent activo — `brand` naranja (default) | `information` azul Figma. */
+    accent: SuiTopbarAccent;
+    /**
+     * false / null (default): sin search · true: input expandido con defaults ·
+     * objeto { placeholder?, ariaLabel?, shortcut?, compact? }. `compact: true` →
+     * icon button en Actions en vez del input.
+     */
+    search: SuiTopbarSearchConfig | boolean | null;
+    /** Valor del input de búsqueda (2-way: se emite `searchValueChange`). */
+    searchValue: string;
+    /** Acciones icon-button de la derecha: { value, icon, ariaLabel?, dot? }. */
+    actions: SuiTopbarAction[];
+    /** Chip de usuario: { name?, avatar?, verified? }. String shorthand = name. */
+    user: SuiTopbarUserConfig | string | null;
+    /** Estado abierto del dropdown del chip (chevron up + bg weak-50). */
+    userOpen: boolean;
+    /** Click en un nav item — emite el entry. */
+    itemClicked: EventEmitter<SuiTopbarEntry>;
+    /** Click en una acción — emite la action. */
+    actionClicked: EventEmitter<SuiTopbarAction>;
+    /** Click en el chip de usuario. */
+    userClicked: EventEmitter<void>;
+    /** Click en el search compacto (icon button). */
+    searchClicked: EventEmitter<void>;
+    /** Enter en el input expandido — emite el valor actual. */
+    searchSubmitted: EventEmitter<string>;
+    /** 2-way de `searchValue`: se emite en cada tecla. */
+    searchValueChange: EventEmitter<string>;
+    /** Search normalizado: null → sin search. */
+    private get searchCfg();
+    /** User normalizado — shorthand string = name. */
+    private get userCfg();
+    private onSearchInput;
+    private onSearchKeydown;
+    render(): any;
+}