@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-modal-sheet/sui-modal-sheet.d.ts

@@ -0,0 +1,226 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * `<sui-modal-sheet>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Bottom sheet con breakpoints (estilo Apple Maps / Ionic ion-modal sheet).
+ * Portado 1:1 desde el componente del SUI Angular
+ * (sui-design-system/.../src/lib/sui-modal-sheet/). Misma API
+ * pública, todo el comportamiento de gesto (drag desde handle + scroll-then-drag
+ * canon iOS en el body, velocity boost, snap), backdrop modulado por
+ * breakpoint, body scroll-lock cooperativo, Escape, lazy mount, y los mismos
+ * VALORES exactos (tokens del DS, no hex). El accent del DS es NARANJA brand
+ * (#fa7319), NO el azul de Figma.
+ *
+ * Diferencias con `<sui-modal>` estándar:
+ *   - Anclado al bottom de la pantalla, no centrado.
+ *   - Drag handle (pill) arriba para arrastrar entre breakpoints.
+ *   - Backdrop con fade dependiente del breakpoint actual (opcional).
+ *   - Cuando current <= backdropBreakpoint el backdrop NO captura clicks, asi el
+ *     contenido debajo (ej. mapa) sigue interactivo.
+ *
+ * Modelo de movimiento (homologado con el SUI Angular, 2026-11): dos capas.
+ * `.sui-sheet` es un marco FIJO de alto H = min(contenido, maxBreakpoint*100dvh,
+ * viewport - safe-top - 16px), anclado abajo con inset de 8px, que recorta
+ * (radius iOS 36/54 squircle, Android radius-20) y no captura toques. Adentro,
+ * `.sui-sheet__panel` es lo UNICO que se mueve, con la propiedad `translate`
+ * (compositor): y(p) = max(0, H - p*vh). Durante el drag no cambia ningun
+ * @State: el translate del panel y la opacidad del backdrop se escriben
+ * directo en el DOM una vez por frame (rAF coalescido). Cero layout por frame.
+ * El body con una lista con scroll propio adentro scrollea esa lista en vez
+ * de arrastrar la hoja.
+ *
+ * Diferencias vs el Angular original (integracion, no comportamiento):
+ *   - El Angular inyecta `SUI_NAVBAR_VISIBILITY` para ocultar el tab bar nativo
+ *     mientras el sheet esta abierto. Eso es una preocupacion de app, no del DS
+ *     standalone, asi que NO se porta. El consumer del DS lo maneja afuera
+ *     escuchando `openChange` / `closed`.
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `[data-sui-*]` y el
+ * contenido proyectado por el consumer (slot default) heredan font/tokens del
+ * global sin pelear con shadow DOM. Misma estrategia que el Angular original
+ * (`:host { display: contents }`).
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (presencia del
+ * binding engage el touch pipeline; touchend blur fuerza la deseleccion de
+ * cualquier boton clickeable custom proyectado en el body).
+ *
+ * Two-way `open`: @Prop mutable+reflect + @Event `openChange` (idiom de two-way
+ * en web components). El consumer escucha `openChange` y re-bindea `open`.
+ *
+ * Slots:
+ *   - default -> contenido del body (el consumer proyecta su markup aqui).
+ */
+export declare class SuiModalSheet {
+    el: HTMLElement;
+    /** Abierto/cerrado. Two-way: mutable + reflect + @Event `openChange`. */
+    open: boolean;
+    /**
+     * Snap points del 0 al 1. 0 = cerrado, 1 = pleno. Debe incluir 0 para que el
+     * gesture pueda dismissar. Si NO incluye 0, el sheet no se cierra por swipe
+     * (igual que Ionic) — solo se cierra programaticamente o por backdrop.
+     *
+     * GOTCHA Stencil: array prop -> pasar como PROPERTY (`.breakpoints = [...]`).
+     */
+    breakpoints: number[];
+    /** Breakpoint donde arranca al abrir. Debe estar en `breakpoints`. */
+    initialBreakpoint: number;
+    /**
+     * A partir de que breakpoint el backdrop empieza a aparecer (0-1).
+     * `0` (default) = backdrop fade lineal con el sheet desde el inicio.
+     * `0.5` = backdrop invisible hasta que sheet > 50%, despues fade lineal.
+     * `1` = backdrop nunca aparece (mapa interactivo siempre).
+     */
+    backdropBreakpoint: number;
+    /** Pill visible arriba del sheet como indicador de drag. */
+    showHandle: boolean;
+    /**
+     * Cierra al hacer click en backdrop. Solo aplica si el backdrop esta
+     * capturando pointer events (current > backdropBreakpoint).
+     */
+    closeOnBackdrop: boolean;
+    /** Cierra al presionar Escape (web). */
+    closeOnEscape: boolean;
+    /** Quita el padding del body para contenido full-bleed. */
+    fullBody: boolean;
+    /** Two-way de `open`. Se emite cuando el sheet cambia `open` por si mismo. */
+    openChange: EventEmitter<boolean>;
+    /** Se emite cuando el sheet termina de cerrarse. */
+    closed: EventEmitter<void>;
+    /** Se emite cuando el sheet snappea a un nuevo breakpoint (current cambia). */
+    breakpointChange: EventEmitter<number>;
+    /** Breakpoint actual (0-1). Cambia al snap, no durante el drag. */
+    currentBreakpoint: number;
+    /** Progress EN REPOSO (0-1): el breakpoint al que esta o hacia el que va.
+     *  Durante el drag NO cambia (el movimiento vive en el DOM). */
+    restProgress: number;
+    /** True mientras el usuario esta arrastrando (cambia al empezar/terminar). */
+    dragging: boolean;
+    /** Marco fijo que recorta; se mide aca (alto H). */
+    private containerEl?;
+    /** Capa que se mueve (`translate`). */
+    private panelEl?;
+    private backdropEl?;
+    private handleEl?;
+    private bodyEl?;
+    private sheetHeight;
+    /** Alto del viewport (px) = 1 unidad de progress. */
+    private viewportHeight;
+    private dragStartY;
+    private dragStartProgress;
+    private pointerId;
+    private lastMoveTime;
+    private lastMoveY;
+    private velocityY;
+    /** Ultimo progress pedido por el dedo; lo consume el rAF. */
+    private pendingProgress;
+    private frameId;
+    /** Drag iniciado en body (scroll-then-drag): se arma en pointerdown y arranca
+     *  solo si pointermove supera el threshold. No roba el tap a botones. */
+    private bodyDragArmed;
+    /** Donde nacio el gesto: de ahi se buscan las listas con scroll propio. */
+    private bodyDragTarget;
+    private touchTarget;
+    /** 5px: mas sensible que el 8 de iOS ("como nativo"). */
+    private static readonly BODY_DRAG_THRESHOLD_PX;
+    /** Lookahead de velocidad al soltar (ms), validado en device. */
+    private static readonly VELOCITY_LOOKAHEAD_MS;
+    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 (100%, vale aunque H cambie). */
+    private static readonly TRANSLATE_CLOSED;
+    private wasOpen;
+    private escapeHandler?;
+    /** Lo que tenía el foco al abrir: se le devuelve al cerrar (como sui-modal). */
+    private previousFocus;
+    private closeTimer;
+    private closeTransitionHandler?;
+    private initialTimer?;
+    private resizeObserver?;
+    private windowResizeHandler?;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    onOpenWatch(isOpen: boolean): void;
+    /**
+     * Mueve el sheet a un breakpoint especifico programaticamente.
+     * Si `breakpoint` no esta en el array de breakpoints, no hace nada.
+     */
+    setCurrentBreakpoint(breakpoint: number, animated?: boolean): Promise<void>;
+    /** Cierra el sheet (equivale a setear `open = false`). */
+    close(): Promise<void>;
+    private setOpen;
+    private onOpen;
+    private onClose;
+    /** True si el backdrop debe capturar pointer events (rest > backdropBreakpoint). */
+    private get backdropInteractive();
+    private get maxBreakpoint();
+    /** Techo ESTATICO de altura: con `height: max-content` el sheet mide su
+     *  contenido y esto lo acota. No cambia por drag ni por snap. */
+    private get maxHeightCss();
+    /** Al breakpoint maximo el body scrollea (touch-action pan-y); antes actua
+     *  como handle gigante (touch-action none). */
+    private get atMaxBreakpoint();
+    private touchStartY;
+    private touchStartHandler?;
+    private touchMoveHandler?;
+    private attachTouchSuppressor;
+    private detachTouchSuppressor;
+    /** Mide H y vh. false si aun no hay layout (sin render o jsdom). Unica
+     *  lectura de layout del gesto: al abrir, al pointerdown y al resize. */
+    private measure;
+    /** Desplazamiento vertical (px) para un progress: max(0, H - p*vh). */
+    private yFor;
+    private translateFor;
+    /** Progress que el sheet muestra de verdad para un breakpoint (con contenido
+     *  corto varios breakpoints valen y = 0). */
+    private effectiveProgress;
+    /** Progress real leyendo el translate computado del panel (agarrarlo a mitad
+     *  de una transicion sin salto). Fallback: el efectivo del actual. */
+    private progressFromDom;
+    private writeTranslate;
+    private writeBackdropOpacity;
+    private setTransitionDuration;
+    private setDraggingClasses;
+    /** Coalesce: guarda el ultimo progress y escribe UNA vez por frame. */
+    private scheduleFrame;
+    private flushFrame;
+    private cancelFrame;
+    private observeSize;
+    private stopObservingSize;
+    private onSizeChange;
+    /** Arranque comun del drag: congela la transicion en curso, lee la posicion
+     *  real y marca `dragging`. */
+    private beginDrag;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private onPointerCancel;
+    private onBodyPointerDown;
+    private onBodyPointerMove;
+    /** Ignorar drag sobre controles de form o `[data-sui-no-sheet-drag]`. */
+    private shouldIgnoreBodyDrag;
+    /** Lo que scrollea bajo un gesto que nace en `target`: cada ancestro con
+     *  overflow-y auto/scroll y contenido de sobra (o ya scrolleado), del dedo
+     *  al body (sin incluirlo), mas el body si desborda. */
+    private scrollersDe;
+    /** Duracion segun distancia restante y velocidad del dedo, en [180, 350] ms. */
+    private snapDuration;
+    private snapTo;
+    /** Cierra al terminar la transicion del translate (fallback por timeout). */
+    private scheduleClose;
+    private cancelPendingClose;
+    /** Breakpoint cuyo `yFor` queda mas cerca de `y`. En empate gana el actual
+     *  si esta entre ellos, si no el mayor. */
+    private closestBreakpointByY;
+    /** Lineal entre (backdropBreakpoint, 0) y (1, 1). Igual que Ionic. */
+    private computeBackdropOpacity;
+    private onBackdropClick;
+    private lockBodyScroll;
+    private unlockBodyScroll;
+    private attachEscapeHandler;
+    private removeEscapeHandler;
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    render(): any;
+}

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

@@ -0,0 +1,145 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiNotificationAvatar } from './sui-notification.data';
+import type { SuiNotificationStyle, SuiNotificationType, SuiNotificationVariant } from './sui-notification.data';
+/**
+ * `<sui-notification>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-notification/). Misma API
+ * pública, TODAS las variantes / estilos / tipos / estados, mismo comportamiento
+ * y mismos VALORES exactos vía tokens del DS (`--sui-*`, no hex). Reusa
+ * `<sui-icon>` y `<sui-compact-button>` (la X y el ⋮ son el componente, no un
+ * `<button>` maqueta); el avatar es el círculo 40 del item de Figma (img o
+ * iniciales), igual que en Angular. El accent del DS es NARANJA brand (#fa7319), NO el azul
+ * de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Audited nodes: 4349:46656 (Items), 4308:731 (Tab Menu header), 4308:5526 (Footer).
+ * Item component set — Type(4: Basic|File|Button|Message) × State(2: Default|Hover)
+ *   × Company(2: false|true).
+ *
+ * ─── DOS MODELOS EN UN COMPONENTE ──────────────────────────────────────────
+ * Cubre DOS usos que comparten el contenedor visual base:
+ *
+ *   1. STATUS ALERT inline (variant info/success/warning/error/feature + style
+ *      filled/light/lighter/stroke). Coincide con sui-alert / sui-toast. NO
+ *      aparece en los nodos "Notifications" auditados pero se PRESERVA como
+ *      uso alternativo (notificaciones de sistema inline fuera del panel).
+ *
+ *   2. NOTIFICATION ITEM (panel campana). Item de actividad social con avatar
+ *      40px, descripción compuesta (timestamp ∙ company-logo ∙ texto), y un
+ *      `type` que cambia el cuerpo proyectado:
+ *        - basic    → solo descripción
+ *        - file     → bloque card adjunto (slot=file) bajo la descripción
+ *        - button   → par de botones acción Deny/Approve (slot=actions)
+ *        - message  → burbuja de respuesta (slot=message)
+ *      El estado Hover pinta bg-weak-50 y revela un botón more-2-line a la
+ *      derecha (prop `showMore` → evento `moreClicked`).
+ * ────────────────────────────────────────────────────────────────────────────
+ *
+ * VERIFIED 2026-05-29 (contra audit con acceso Figma):
+ *   - Item padding 12 / gap avatar↔contenido 15 — aplica a LOS 4 tipos. El
+ *     discriminante real es el AVATAR 40px (clase `--has-avatar`), no el `type`:
+ *     el modelo alert-inline (sin avatar, icono 20px) conserva 14/12.
+ *   - Message bubble border-radius: tl=4 tr=8 br=10 bl=8 → `4px 8px 10px 8px`.
+ *   - Filled style time/close: --sui-static-white + opacity .72 (canon sui-alert).
+ *   - Root role: `article` para panel rows (avatar), `status` + aria-live=polite
+ *     solo para el modelo alert-inline.
+ *
+ * Extra features preservadas (no Figma, producto):
+ *   - status variant×style (alert inline)
+ *   - unread dot (8px primary-base — Figma 4308:731)
+ *   - avatar `{ src?, initials? }` (string = src) con fallback a initials
+ *   - dismissible (X close)
+ *   - showIcon/iconName status icons
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores con `[data-sui-*]`,
+ * el contenido proyectado (slots company-logo/file/message/actions) y los
+ * `<sui-icon>` / `<sui-compact-button>` internos heredan tokens del global sin pelear
+ * con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * GOTCHA Stencil: el `title` del Angular es un nombre reservado del DOM
+ * (renderiza tooltip nativo) → renombrado a `heading`. Si el host trae el
+ * atributo `title`, vale como `heading` y se quita (sin tooltip nativo).
+ *
+ * Slots:
+ *  - `company-logo` → mini logo 16×16 antes del texto de la descripción.
+ *  - `file`         → card adjunto (solo type=file).
+ *  - `message`      → burbuja de respuesta (solo type=message).
+ *  - `actions`      → par de botones acción (type=button) o acciones libres.
+ *  - default        → contenido custom libre dentro del bloque de contenido.
+ */
+export declare class SuiNotification {
+    el: HTMLElement;
+    /** Variante semántica. Default `default` (sin color semántico). */
+    variant: SuiNotificationVariant;
+    /**
+     * Estilo visual. Default `stroke`.
+     * NOTA: el @Prop público se llama `variantStyle` (igual al Angular). En HTML
+     * el atributo es `variant-style`.
+     */
+    variantStyle: SuiNotificationStyle;
+    /**
+     * Título / línea principal.
+     * Renombrado desde el `title` del Angular: `title` es un @Prop reservado del
+     * DOM (dispara el tooltip nativo gris). En HTML el atributo es `heading`.
+     */
+    heading: string | null;
+    /** Descripción / texto del cuerpo. */
+    description: string | null;
+    /** Marca temporal (ej. "8 min ago"). */
+    timestamp: string | null;
+    /**
+     * Avatar del item de panel: string (URL = src) o `{ src?, initials? }` (pasar
+     * el objeto como PROPERTY). `null` = sin avatar (modelo status inline). Su
+     * presencia activa el modelo item de panel.
+     */
+    avatar: SuiNotificationAvatar | string | null;
+    /** Muestra el ícono leading de status (solo modelo alert-inline). Default `true`. */
+    showIcon: boolean;
+    /** Muestra el botón X de cierre. Default `false`. */
+    dismissible: boolean;
+    /** Punto de "no leído" (8px, primary-base). Default `false`. */
+    unread: boolean;
+    /** Tipo de cuerpo del item. `basic` mantiene el layout sin slot de cuerpo. */
+    type: SuiNotificationType;
+    /** Cuando `true`, pinta el bg hover de Figma + revela el botón more-2-line. */
+    showMore: boolean;
+    /** Fuerza visible la affordance hover (ej. fila con foco de teclado). */
+    active: boolean;
+    /** Nombre accesible del punto de no leído (en Angular sale de provideSuiTextos). */
+    unreadLabel: string;
+    /** Nombre accesible del botón ⋮ (en Angular sale de provideSuiTextos). */
+    moreLabel: string;
+    /** Nombre accesible de la X (en Angular sale de provideSuiTextos). */
+    closeLabel: string;
+    /** Se emite al presionar la X de cierre. */
+    dismissed: EventEmitter<void>;
+    /** Se emite al presionar el botón more-2-line. */
+    moreClicked: EventEmitter<MouseEvent>;
+    /** Icon map por variante (Remix). */
+    private get iconName();
+    /** Config resuelta del avatar (string → { src }). */
+    private get avatarCfg();
+    /** True cuando hay avatar (modelo notification-item panel). */
+    private get hasAvatar();
+    componentWillLoad(): void;
+    /** True cuando se debe pintar el ícono leading de status (alert-inline). */
+    private get showLeadingIcon();
+    /**
+     * ARIA role del root.
+     *
+     * Las filas del panel (avatar-led, items estáticos en una lista) NO son live
+     * regions — `role="status"` haría que los lectores de pantalla re-anuncien
+     * cada fila como un status de sistema. Renderizan como `article`.
+     *
+     * El modelo alert-inline (sin avatar) conserva `role="status"` +
+     * `aria-live="polite"`, la semántica correcta para ese uso.
+     */
+    private get rootRole();
+    /** Solo el modelo alert-inline anuncia; las filas del panel quedan silenciosas. */
+    private get rootAriaLive();
+    private onDismiss;
+    private onMore;
+    render(): any;
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Tipos compartidos del `<sui-notification>`. 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 los catálogos / interfaces data-driven se aíslan acá.
+ *
+ * Port 1:1 del Angular homologado
+ * (sui-design-system/.../src/lib/sui-notification/). Misma API
+ * pública, mismas variantes/estilos/tipos y mismos valores (tokens del DS).
+ */
+/**
+ * Variante semántica.
+ *   - info/success/warning/error/feature → modelo alert-inline (color semántico)
+ *   - default                            → modelo notification-item (sin color)
+ */
+export type SuiNotificationVariant = 'info' | 'success' | 'warning' | 'error' | 'feature' | 'default';
+/** Estilo visual (relleno / claro / borde). */
+export type SuiNotificationStyle = 'filled' | 'light' | 'lighter' | 'stroke';
+/**
+ * Tipo de cuerpo del item del panel.
+ *   - basic    → solo descripción (también el layout del modelo alert-inline)
+ *   - file     → card adjunto bajo la descripción (slot=file)
+ *   - button   → par de botones Deny/Approve (slot=actions)
+ *   - message  → burbuja de respuesta (slot=message)
+ */
+export type SuiNotificationType = 'basic' | 'file' | 'button' | 'message';
+/** Avatar del item de panel (mismo objeto que `SuiAvatarConfig` del SUI Angular). */
+export interface SuiNotificationAvatar {
+    src?: string | null;
+    initials?: string;
+}

package/dist/types/components/sui-notification-footer/sui-notification-footer.d.ts

@@ -0,0 +1,69 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiLinkConfig } from '../sui-link-button/sui-link-button';
+/**
+ * `<sui-notification-footer>` — SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Footer del panel de notificaciones (campana). Barra inferior con un hint de
+ * navegación por teclado a la izquierda y un link "Manage Notification" a la
+ * derecha.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-notification-footer/).
+ * Misma API pública, mismo comportamiento y mismos VALORES exactos (tokens del
+ * DS, no hex). Reusa los primitivos `<sui-icon>` y `<sui-kbd>` ya portados (NO
+ * re-implementa ni iconos ni el chip de teclado) y el link es un
+ * `<sui-link-button variant="gray" size="small">` (muted sub-600), igual que
+ * en Angular. Textos por defecto en español («Usa ↑ ↓ para moverte»,
+ * «Administrar notificaciones»).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Node:       4308:5526 (Notifications Footer [1.1])
+ *
+ * EXACT specs (de get_design_context + get_variable_defs):
+ *   Container:
+ *     background:  var(--sui-bg-white-0)   #ffffff
+ *     display:     flex, gap 16px, align-items center, justify-content center
+ *     padding:     14px 20px
+ *     overflow:    clip
+ *     width:       100% (Figma frame 540px)
+ *   Navigate group (izq, flex 1 0 0, min-width 0):
+ *     gap 8px, align-items center
+ *     "Use" + kbd(arrow-up-line) + kbd(arrow-down-line) + "to navigate"
+ *     labels: Paragraph/X Small (Inter Regular 12/16), color text/sub-600 #5c5c5c
+ *     kbds:   sui-kbd variant="subtle" (bg weak-50, border soft-200, radius-4,
+ *             padding 2px) conteniendo sui-icon 16x16
+ *   Link button (der, gap 4px, shrink 0):
+ *     sui-icon settings-2-line 16x16 (icon/sub-600 #5c5c5c)
+ *     "Manage Notification" Label/X Small (Inter Medium 12/16, text/sub-600)
+ *
+ * `scoped: true` (light DOM, NO shadow): los `<sui-kbd>` / `<sui-icon>`
+ * proyectados viven en light DOM bajo el host y el styling escopeado por
+ * `:host` los alcanza sin pelear con shadow DOM. Misma estrategia que el
+ * Angular original.
+ *
+ * GOTCHA Stencil: el evento `manageClick` del Angular (output) es aqui un
+ * `@Event()`. Tambien se quita el atributo nativo `title` del host.
+ *
+ * Uso:
+ *   <sui-notification-footer></sui-notification-footer>
+ *   document.querySelector('sui-notification-footer')
+ *     .addEventListener('manageClick', () => abrirAjustes());
+ */
+export declare class SuiNotificationFooter {
+    el: HTMLElement;
+    /** Texto antes de las teclas (en Angular sale de provideSuiTextos). */
+    usePrefix: string;
+    /** Texto despues de las teclas. */
+    useSuffix: string;
+    /**
+     * Link de la derecha. `true` (default) = «Administrar notificaciones»; string =
+     * ese label; objeto `{ label, href?, target?, rel? }` (por property) = `<a>`
+     * real; `false` / `null` = sin link. Como atributo: `manage="false"`.
+     */
+    manage: SuiLinkConfig | string | boolean | null;
+    /** Click en el link de la derecha. */
+    manageClick: EventEmitter<MouseEvent>;
+    private get manageCfg();
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/sui-notification-tab-menu/sui-notification-tab-menu.d.ts

@@ -0,0 +1,107 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Un ítem del Notification Tab Menu. Modela un tab del header del panel de
+ * notificaciones (campana). El eje "Quantity" del Figma (02/03/04) se reduce a
+ * la longitud del array `tabs[]` — el componente NO hardcodea 2/3/4 tabs.
+ */
+export interface SuiNotificationTab {
+    /** Valor único usado para selección/identidad. */
+    value: string;
+    /** Etiqueta visible del tab (All, Inbox, Following, Archived…). */
+    label: string;
+    /**
+     * Contador del badge rojo (state/error/base). `> 0` lo renderiza; `0`/
+     * `undefined` lo oculta. En el Figma solo "Inbox" lo lleva (Badge [1.1]
+     * Number), pero se modela per-tab para flexibilidad.
+     */
+    badge?: number;
+    /**
+     * Renderiza un divider vertical INMEDIATAMENTE ANTES de este tab. En el
+     * Figma 4308:1091 hay un divider entre "Following" y "Archived"; se modela
+     * como propiedad del tab que va después del divider (ej. `Archived`).
+     */
+    dividerBefore?: boolean;
+}
+/**
+ * `<sui-notification-tab-menu>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-notification-tab-menu/).
+ * Es el HEADER del panel de notificaciones (el dropdown de la campana): fila de
+ * tabs con underline activo, badge rojo de conteo, divider vertical de
+ * agrupación y botón de filtro absoluto a la derecha.
+ *
+ * Misma API pública (tabs/active/showFilter/filterLabel + eventos tabChange /
+ * filterClick), mismo comportamiento (selección, divider, badge condicional,
+ * filtro condicional, teclado por focus-visible, iOS :active fix) y los MISMOS
+ * VALORES exactos vía tokens del DS (no hex sueltos).
+ *
+ * El accent del DS es NARANJA brand (#fa7319 = `--sui-primary-base`), NO el azul
+ * de Figma — visible en el underline del tab activo y en el ring de focus.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ * Nodo homologado (2026-05-29):
+ *   4349:46656 — "Notifications Tab Menu [1.1]" (frame con 3 variantes Quantity)
+ *   4308:1091  — Quantity=04 (All · Inbox(2) · Following | Archived + filtro)
+ *   4349:46657 — Quantity=03 (All · Inbox(2) · Following + filtro)
+ *   4349:46704 — Quantity=02 (All · Inbox(2) + filtro)
+ *
+ * EXACT specs (pulled del design_context + variable_defs):
+ *   Container (4308:1091):
+ *     bg: bg/white-0 · border-bottom 1px stroke/soft-200 (SOLO bottom)
+ *     padding: 14px 20px · gap entre tabs: 20px · align-items: center
+ *     position: relative (ancla del filtro absoluto)
+ *   Tab text: Label/Small (Inter Medium 14/20, tracking -0.6%), ss11 features
+ *     Default sub-600 · Active strong-950 + underline 2px primary @ bottom -14px
+ *   "Text" wrapper: gap 4px (label ↔ badge)
+ *   Divider vertical (4308:1064): 1px stroke/soft-200, self-stretch
+ *   Filtro (4308:1066): absolute right 12px, centrado vertical, shape circular
+ *     (full-radius=true en el <sui-compact-button>, radius-full del nodo Figma)
+ *   Badge → <sui-badge> (compuesto: color=red variant=filled type=number small)
+ *   Filtro → <sui-compact-button> (compuesto: ghost large full-radius)
+ *
+ * Eje "button" del Figma (4308:1091 prop `button=true`) → prop `showFilter`.
+ * Eje "Quantity" (02/03/04) → longitud de `tabs[]` (configurable, sin tope).
+ *
+ * a11y (04-10-2026): el `role="tablist"` envuelve SOLO las pestañas (el filtro
+ * es un botón, queda afuera). Un solo tab stop (el activo o el primero) y
+ * ← → mueven el foco y activan, con vuelta; Home/End a los extremos.
+ *
+ * iOS :active: listeners touchstart/touchend PASIVOS en el host (homólogo del
+ * `SuiToque` del Angular); el touchend suelta el foco del tab tocado.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host` translan
+ * limpio, los <sui-badge>/<sui-compact-button> compuestos heredan tokens, y el
+ * underline @ bottom -14px no se recorta. Misma estrategia que el Angular.
+ */
+export declare class SuiNotificationTabMenu {
+    el: HTMLElement;
+    /** Lista de tabs a renderizar. Requerido. El orden define el layout. */
+    tabs: SuiNotificationTab[];
+    /**
+     * Valor del tab activo (two-way / mutable, ≈ el `model` Angular). Reflect
+     * para depurar el estado seleccionado desde el DOM.
+     */
+    active?: string;
+    /** Renderiza el botón de filtro absoluto a la derecha (Figma prop `button`). */
+    showFilter: boolean;
+    /** aria-label del botón de filtro (en Angular sale de provideSuiTextos). */
+    filterLabel: string;
+    /**
+     * Emite el nuevo valor al seleccionar un tab (≈ el output `tabChange`). NO se
+     * emite cuando el consumer setea `active` programáticamente.
+     */
+    tabChange: EventEmitter<string>;
+    /** Emite al click del botón de filtro (≈ el output `filterClick`). */
+    filterClick: EventEmitter<MouseEvent>;
+    alTocar(): void;
+    alSoltar(event: TouchEvent): void;
+    /** Índice del único tab con tabindex 0: el activo (o el primero). */
+    private get tabStopIndex();
+    /** ← → mueven el foco y activan (con vuelta); Home/End a los extremos. */
+    private onKeydown;
+    private isActive;
+    private select;
+    private onFilter;
+    render(): any;
+}

package/dist/types/components/sui-notification-tab-menu/sui-notification-tab-menu.data.d.ts

@@ -0,0 +1,17 @@
+import type { SuiNotificationTab } from './sui-notification-tab-menu';
+/**
+ * Catálogos de demo para las stories del Notification Tab Menu.
+ *
+ * El eje "Quantity" del Figma (02/03/04) NO es una prop del componente: se
+ * modela como la longitud del array `tabs[]`. Estos 3 presets reproducen los
+ * 3 nodos homologados:
+ *   QUANTITY_04 — 4308:1091  (Todas · Recibidos(2) · Siguiendo | Archivados)
+ *   QUANTITY_03 — 4349:46657 (Todas · Recibidos(2) · Siguiendo)
+ *   QUANTITY_02 — 4349:46704 (Todas · Recibidos(2))
+ */
+/** Quantity=04: Todas · Recibidos(2) · Siguiendo | Archivados (divider antes de Archived). */
+export declare const QUANTITY_04: SuiNotificationTab[];
+/** Quantity=03: All · Inbox(2) · Following. */
+export declare const QUANTITY_03: SuiNotificationTab[];
+/** Quantity=02: All · Inbox(2). */
+export declare const QUANTITY_02: SuiNotificationTab[];