@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-link-button/sui-link-button.d.ts

@@ -0,0 +1,105 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiLinkButtonVariant = 'gray' | 'black' | 'primary' | 'error' | 'modifiable';
+/** `large` (texto 16) es extension SUI para mobile; Figma trae medium y small. */
+export type SuiLinkButtonSize = 'large' | 'medium' | 'small';
+/**
+ * Config del "link" de los componentes con Link Button integrado
+ * (progress-bar-label, drawer-header/footer, checkbox-label, switch-label).
+ * String = solo label (renderiza <button>); con `href` el link es un <a> real.
+ */
+export interface SuiLinkConfig {
+    label: string;
+    href?: string;
+    target?: string;
+    rel?: string;
+}
+export type SuiLinkButtonType = 'button' | 'submit' | 'reset';
+/**
+ * `<sui-link-button>` — SUI Design System (SUI Design System 2.0).
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (sui-design-system/.../src/lib/sui-link-button/). Misma API
+ * pública (variant/size/underline/disabled/leftIcon/rightIcon/href/target/rel/
+ * type/ariaLabel + output `clicked`), mismas variantes/estados/valores
+ * (tokens del DS, no hex), y mismo comportamiento (render polimórfico
+ * button ↔ anchor, disabled gatea el click, iOS :active fix). El accent del
+ * DS es NARANJA brand (#fa7319 = --sui-primary-base), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — frame 168:4889 (`Link Buttons [1.1]`,
+ * 80 variants). Scope: 5 variants × 4 states × 2 sizes × 2 underline.
+ *
+ * Variant × State color matrix (idéntica al Angular):
+ *   Gray     Default → text/sub-600    | Hover → sub-600    | Focus → strong-950
+ *   Black    Default → text/strong-950 | Hover → strong-950 | Focus → strong-950
+ *   Primary  Default → primary-base    | Hover → primary-dark | Focus → primary-base
+ *   Error    Default → state/error/base| Hover → red/700    | Focus → error-base
+ *   Modifiable          → currentColor (consumer-controlled en los 3 estados)
+ * (FOCUS mantiene color BASE + underline; solo el HOVER oscurece. Pulled de
+ *  Figma 2026-05-29 — nodos Gray 169:1034 / Primary 169:1138 / Error 169:1187.)
+ *
+ * Sizes: Large → text 16/24, icons 20×20 (extension SUI para mobile: el link se
+ * lee y se toca con el dedo) · Medium → text 14/20/-0.6%, icons 20×20 · Small →
+ * text 12/16/0, icons 16×16.
+ *
+ * Underline: línea continua SOLO bajo el texto (los iconos chevron NUNCA van
+ * subrayados — canon Figma 169:1391/169:1419). Implementada vía `::after` en
+ * `.sui-link-button__text`, no `text-decoration` sobre el flex (que se
+ * fragmenta en 3 trazos icon|text|icon). Se muestra en hover/focus, o desde
+ * default cuando `underline` está activo.
+ *
+ * `scoped: true` (light DOM, NO shadow): así los selectores `:host([data-sui-*])`
+ * y el styling del contenido proyectado (slot default + `<sui-icon>` via
+ * leftIcon/rightIcon) translan limpio. Misma estrategia que el Angular original.
+ *
+ * Render polimórfico: cuando `href` está seteado (y no disabled) renderiza un
+ * `<a>` nativo; en caso contrario un `<button>`. El host SIEMPRE es el custom
+ * element `<sui-link-button>`; el `<a>`/`<button>` interno (`.sui-link-button__el`)
+ * lleva la interacción real.
+ *
+ * Floating vs inline: el host es `display: inline-flex` con baseline align, así
+ * fluye dentro de un párrafo como un link normal. Para uso "flotante" (toast
+ * actions, notification CTA) el consumer lo posiciona libre — el componente no
+ * impone position/z-index propios.
+ */
+export declare class SuiLinkButton {
+    el: HTMLElement;
+    /** Variante de color. Default `gray`. */
+    variant: SuiLinkButtonVariant;
+    /** Tamaño. Default `medium` (text 14, icons 20). `large` (text 16) para mobile. */
+    size: SuiLinkButtonSize;
+    /** Subraya el texto desde el estado base (además de hover/focus). Default `false`. */
+    underline: boolean;
+    /** Deshabilitado: bloquea click, color disabled-300, sin underline. Default `false`. */
+    disabled: boolean;
+    /** Nombre del ícono leading (`<sui-icon name>`). null → sin ícono. */
+    leftIcon: string | null;
+    /** Nombre del ícono trailing (`<sui-icon name>`). null → sin ícono. */
+    rightIcon: string | null;
+    /** Cuando se setea (y no disabled), el componente renderiza un `<a>` nativo en vez de `<button>`. */
+    href: string | null;
+    /** target del `<a>` (ej. `_blank`). Solo aplica en modo anchor. */
+    target: string | null;
+    /** rel del `<a>` (ej. `noopener noreferrer`). Solo aplica en modo anchor. */
+    rel: string | null;
+    /** type del `<button>`. Solo aplica en modo button. Default `button`. */
+    type: SuiLinkButtonType;
+    /** aria-label opcional para accesibilidad cuando el label visible no alcanza. */
+    ariaLabel: string | null;
+    /** Emite el MouseEvent del click cuando NO está disabled. */
+    clicked: EventEmitter<MouseEvent>;
+    /** true cuando debe renderizar un `<a>` (href presente y habilitado). */
+    private get isAnchor();
+    /** Tamaño de ícono: 20 (large / medium) / 16 (small). */
+    private get iconSize();
+    /**
+     * iOS WKWebView fix: la sola PRESENCIA del listener `touchstart` engage el
+     * touch event pipeline, lo que hace que `:active` dispare y se libere
+     * correctamente. Sin esto `:active` "stickea" 300-500ms en pages standalone.
+     */
+    onTouchStart(): void;
+    /** touchend.blur() empuja la deselección inmediata del :active en iOS. */
+    onTouchEnd(): void;
+    /** Disabled bloquea todo; en caso contrario re-emite el click como output `clicked`. */
+    private onClick;
+    render(): any;
+}

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

@@ -0,0 +1,55 @@
+/** Orientación del lockup. Las dos llevan la palabra en DOS líneas. */
+export type SuiLogoOrientation = 'horizontal' | 'stacked';
+/** Escala canon del DS — la misma de sui-brand-logo / sui-flag / sui-emoji. */
+export type SuiLogoSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/**
+ * `<sui-logo>` — el logo de Master Pedidos, dibujado inline y coloreable.
+ * Port 1:1 del Angular (`sui-design-system`, `lib/sui-logo`): misma API
+ * (orientation/markOnly/size/height/markColor/textColor/decorative/ariaLabel)
+ * y el mismo path data, copiado tal cual.
+ *
+ * NO confundir con `sui-brand-logo`, que sirve logos de TERCEROS (Apple,
+ * Google, Stripe…) como `<img>` intocables. Este es el logo PROPIO del
+ * producto: se inlinea justamente para poder teñirlo.
+ *
+ * El dibujo son tres piezas (la M, «Master» y «Pedidos»); las dos orientaciones
+ * son esas mismas piezas re-acomodadas, así que solo cambian el `viewBox` y el
+ * `transform` de cada grupo:
+ *   horizontal → viewBox `0.218 3.987 773.623 266.421` (2.904:1)
+ *   stacked    → viewBox `-0.266 0.109 257.897 420.55` (0.613:1)
+ *   markOnly   → viewBox `0.218 3.987 257.897 266.421` (0.968:1)
+ * Los viewBox son el bbox exacto del dibujo: el componente no suma padding.
+ *
+ * Color: `markColor` / `textColor` aceptan un token (`var(--sui-primary-base)`)
+ * o cualquier color CSS. Van por custom property (`--sui-logo-mark-color` /
+ * `--sui-logo-text-color`) y NO por atributo `fill`: un `var()` dentro de un
+ * atributo de presentación SVG no resuelve.
+ *
+ * Tamaño: `size` fija el ALTO (xs=16 … 2xl=48). `height` es el escape hatch:
+ * número = px, string = cualquier valor CSS (`60%`). Si viene, gana sobre `size`.
+ *
+ * Accesibilidad: por defecto `role="img"` + `aria-label="Master Pedidos"`. Al
+ * lado de un texto que ya dice el nombre, `decorative` lo calla.
+ */
+export declare class SuiLogo {
+    el: HTMLElement;
+    /** Lockup: `horizontal` (M a la izquierda) o `stacked` (M arriba, centrado). */
+    orientation: SuiLogoOrientation;
+    /** Solo la M, sin la palabra. Cuando es `true`, `orientation` no aplica. */
+    markOnly: boolean;
+    /** Alto del logo: xs=16, sm=20, md=24, lg=32, xl=40, 2xl=48 (px). */
+    size: SuiLogoSize;
+    /** Alto fuera de la escala. Número = px; string = cualquier valor CSS. Gana sobre `size`. */
+    height: number | string | null;
+    /** Color de la M. Token o cualquier color CSS. */
+    markColor: string;
+    /** Color de la palabra. Token o cualquier color CSS. */
+    textColor: string;
+    /** `true` cuando al lado ya está escrito «Master Pedidos». */
+    decorative: boolean;
+    /** Nombre accesible. */
+    ariaLabel: string;
+    private get heightCss();
+    componentWillLoad(): void;
+    render(): any;
+}

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

@@ -0,0 +1,188 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type SuiModalSize = 'small' | 'medium' | 'large' | 'xlarge';
+export type SuiModalIconVariant = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Anatomia Status Modal (Figma 480:1372) cuando hay `iconVariant`/`headerIcon`.
+ * Sin `statusAlignment` (null) el icono va en el header normal.
+ *  - `horizontal` (Figma 480:1366): tile + texto en fila dentro del body.
+ *  - `vertical`: icono centrado arriba, titulo y descripcion centrados en
+ *    columna, tipografia escalada (Label/Medium 16px + Paragraph/Small 14px).
+ * En ambos el bloque vive en el body, sin header, con la X flotante.
+ */
+export type SuiModalStatusAlignment = 'horizontal' | 'vertical';
+/**
+ * `<sui-modal>` - SUI Design System (SUI Design System 2.0). COMPUESTO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-modal/). Misma API publica,
+ * TODAS las variantes (4 sizes x 4 iconVariants x 2 alignments), mismo
+ * comportamiento (overlay, escape/backdrop close, scroll-lock del body, focus
+ * restore, lazy mount via `open`, scroll-indicator shadow) y mismos VALORES
+ * exactos (tokens del DS, no hex). Reusa los primitivos `<sui-icon>` ya portado.
+ * El accent del DS es NARANJA brand (#fa7319), NO el azul de Figma.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO
+ *   3319:16461  Modals [Overview]
+ *   466:4778    Modal Header [1.1]  (Basic/Small 56 / Medium 80, Error/Warning/Success/Info)
+ *   472:566     Modal Footer [1.1]  (Basic px=20 py=16 border-top gap=12)
+ *   480:1372    Status Modals [1.1] (Error/Warning/Success/Info x Horizontal/Vertical)
+ *   480:2474    Modal Overlay [1.1] (bg rgba(51,51,51,0.24))
+ *
+ * EXACT specs:
+ *   Container: bg-white-0, border 1px stroke-soft-200, radius-20, shadow medium.
+ *   Sizes (max-width): small 400 / medium 440 (default) / large 560 / xlarge 720.
+ *   Overlay: rgba(51,51,51,0.24) + backdrop-filter blur(10px) por DEFAULT
+ *            (extra-feature "glass" del proyecto; opt-out con backdrop-blur=false).
+ *   Header Medium 80: pl=20 pr=56 py=16 gap=16; title Label/Small, desc Paragraph/X-Small.
+ *   Header Small 56 (sin desc): gap=12, icono flat 24px sin circulo.
+ *   Header with-icon: gap=14, circulo p=10 radius-full.
+ *   Body: p=20 gap=20 flex-col.
+ *   Footer: px=20 py=16 border-top gap=12 justify-end.
+ *   Status vertical: icono centrado (p=8 radius-10) + texto centrado en body,
+ *     title Label/Medium, desc Paragraph/Small.
+ *   Animacion: backdrop fade; container fade+scale 0.95 -> 1.
+ *
+ * GOTCHAS de API (renombres vs el Angular original):
+ *  - `title` -> `heading` (`title` es reservado del DOM, dispara tooltip nativo
+ *    gris no-estilizable). El input se expone como aria-label del dialog.
+ *  - El `open` two-way model de Angular aca es @Prop mutable + @Event `openChange`
+ *    (patron de two-way binding de web components). El consumer escucha
+ *    `openChange` y/o usa el @Method `close()`.
+ *
+ * `scoped: true` (light DOM, NO shadow): asi los selectores `.sui-modal*` y el
+ * `<slot name="footer">` proyectan limpio, el `:host { display: contents }` deja
+ * que los hijos fixed se posicionen contra el viewport, y los `<sui-icon>` heredan
+ * tokens del global. Misma estrategia que el Angular original.
+ *
+ * iOS WKWebView :active fix: listeners touchstart/touchend PASIVOS en el host
+ * (homólogo del `SuiToque` del Angular); el touchend suelta el foco de la X.
+ *
+ * Slots:
+ *  - default        -> contenido del body.
+ *  - `footer`       -> fila de action buttons (se colapsa si vacio).
+ */
+export declare class SuiModal {
+    el: HTMLElement;
+    private static _nextId;
+    private readonly _uid;
+    private readonly titleId;
+    private readonly descId;
+    private containerRef?;
+    private bodyRef?;
+    private _previousFocus;
+    private _escapeHandler?;
+    private _bodyScrollListener?;
+    private _bodyResizeObserver?;
+    /** Estado abierto/cerrado. Two-way: emite `openChange` al togglear. Default `false`. */
+    open: boolean;
+    /** Ancho maximo del container. Default `medium` (440px). */
+    size: SuiModalSize;
+    /**
+     * Titulo del modal. Renombrado de `title` del Angular original (`title` es
+     * reservado del DOM -> tooltip nativo). En HTML el atributo es `heading`.
+     */
+    heading: string | null;
+    /** Subtitulo bajo el titulo (Paragraph/X-Small). Mostrado solo en Medium+. */
+    description: string | null;
+    /** Cierra al hacer click en el overlay. Default `true`. */
+    closeOnBackdrop: boolean;
+    /** Cierra al presionar Escape. Default `true`. */
+    closeOnEscape: boolean;
+    /** Muestra el boton X de cierre. Default `true`. */
+    showClose: boolean;
+    /** Icono circular semantico en el header. Default `null`. */
+    iconVariant: SuiModalIconVariant | null;
+    /**
+     * Icono contextual del header (RemixIcon, ej. 'add-circle-line'). Mutuamente
+     * excluyente con `iconVariant`: si se pasa, se usa con un contenedor circular
+     * bg neutral-lighter + color sub-600. Si NO se pasa y hay `iconVariant`,
+     * fallback al variant semantico. Default `null`.
+     */
+    headerIcon: string | null;
+    /**
+     * Anatomia Status Modal de Figma (set 480:1372). `null` (default) = header
+     * normal (Modal Header 466:4778) con el icono a la izquierda del titulo.
+     * `horizontal` (480:1366): tile + texto en FILA dentro del body, sin header,
+     * con la X flotante. `vertical`: icono centrado arriba + texto centrado en
+     * columna. Requiere `iconVariant` o `headerIcon`. Default `null`.
+     */
+    statusAlignment: SuiModalStatusAlignment | null;
+    /**
+     * Aplica `backdrop-filter: blur(10px)` al overlay. Por defecto `true` -
+     * extra-feature "glass" del proyecto encima del overlay-gray plano del DS
+     * (rgba(51,51,51,0.24)). Pasar `backdrop-blur=false` lo quita y deja el overlay
+     * plano DS-puro. Default `true`.
+     */
+    backdropBlur: boolean;
+    /**
+     * Solo afecta en mobile (<=768px): card flotante a pantalla completa (inset
+     * 8px, esquinas iOS 36/54 squircle o radius-20 en Android), respeta los
+     * safe-areas y se eleva con el teclado (`--sui-keyboard-h`, solo iOS). En
+     * desktop el modal sigue centrado segun `size`.
+     *
+     * `'auto'` (default) resuelve por plataforma: dentro de la app nativa
+     * (`html.platform-ios` / `html.platform-android`) va a pantalla completa; en
+     * el navegador queda centrado. `true` la fuerza tambien en la web; `false`
+     * la desactiva siempre (confirmaciones de una linea con dos botones).
+     * El atributo sin valor (`<sui-modal fullscreen>`) equivale a `true`.
+     */
+    fullscreen: boolean | 'auto' | 'true' | 'false' | '';
+    /**
+     * Quita el padding del body para contenido full-bleed (mapas, imagenes
+     * grandes). El consumer maneja su propio spacing interno. Default `false`.
+     */
+    fullBody: boolean;
+    /** Emite el nuevo estado de `open` al togglear (two-way binding). */
+    openChange: EventEmitter<boolean>;
+    /** Emite despues de que el modal se cierra (equivale al `closed` del Angular). */
+    closed: EventEmitter<void>;
+    /** True cuando el body tiene overflow pendiente (activa el shadow del footer). */
+    scrollActive: boolean;
+    /** True cuando el consumer proyecto contenido en el slot `footer`. */
+    private hasFooterSlot;
+    /** Plataforma leida al construir CADA modal (no una vez por modulo): si el
+     *  host marca `<html>` despues de cargar la lib, el modal que nace luego ya
+     *  ve la clase. */
+    private readonly enAppAlNacer;
+    /** `fullscreen` ya resuelto (normaliza el atributo string de HTML). */
+    private get esFullscreen();
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * React al cambio de `open` (equivale al `effect(() => open())` del Angular).
+     * Stencil corre @Watch despues del primer render, asi que el caso de arranque
+     * abierto se cubre en componentDidLoad.
+     */
+    onOpenChange(isOpen: boolean, wasOpen: boolean): void;
+    private _onOpened;
+    private _onClosed;
+    /** iOS :active: listeners PASIVOS en el host (homólogo de SuiToque); sueltan el foco de la X. */
+    alTocar(): void;
+    alSoltar(event: TouchEvent): void;
+    /** Cierra el modal. Dispara el watch -> openChange + closed + scroll unlock + focus restore. */
+    close(): Promise<void>;
+    private _lockScroll;
+    private _unlockScroll;
+    private _bindScrollDetection;
+    private _unbindScrollDetection;
+    /** Tab / Shift+Tab dan la vuelta dentro del modal: el foco no se escapa al fondo. */
+    private _trapTab;
+    private _focusFirst;
+    private onBackdropClick;
+    /** RemixIcon name del header: prefiere `headerIcon`; si no, deriva del `iconVariant`. */
+    private get iconName();
+    /** Si se renderiza el circulo del icono (cualquiera de los dos inputs lo activa). */
+    private get hasHeaderIcon();
+    /** data-variant del circulo: variant semantico, o 'neutral' si solo hay headerIcon. */
+    private get resolvedIconVariant();
+    /** Modo Status Modal (statusAlignment + icono): icono+texto van en el body
+     *  (Figma 480:1372 no tiene header) y solo queda la X flotante. */
+    private get isStatus();
+    private get isStatusVertical();
+    private get isStatusHorizontal();
+    /** Header "Small 56" (sin description): icono flat 24px sin circulo. */
+    private get isCompactHeader();
+    private renderClose;
+    render(): any;
+}

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

@@ -0,0 +1,53 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiButtonSize } from '../sui-button/sui-button';
+import type { SuiFooterButtonConfig } from '../sui-button/sui-button';
+/**
+ * `<sui-modal-footer>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Portado desde el `SuiModalFooter` del SUI Angular (sui-design-system,
+ * `src/lib/sui-modal-footer`). Misma API: `primaryButton` / `secondaryButton`
+ * (string shorthand o `SuiFooterButtonConfig`), `stretch`, `buttonSize` y los
+ * eventos `primaryClick` / `secondaryClick`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Component set: 472:566 ("Modal Footer [1.1]") — 7 Types:
+ *   Basic · Checkbox · Information · Toggle · Stepper · Link Button · Stretch
+ *
+ * Diseño componible en vez de 7 types hardcodeados:
+ *   - Los botones (derecha) via `primaryButton` / `secondaryButton`.
+ *   - El slot izquierdo (los "types" de Figma) via `<slot>`: un
+ *     `<sui-checkbox-label>`, `<sui-switch-label>`, `<sui-link-button>`, texto
+ *     informativo o el stepper.
+ *   - `stretch` (type Stretch): los botones ocupan todo el ancho 50/50; con
+ *     contenido en el slot, 50 % aux / 50 % acciones.
+ *
+ * EXACT (Figma 472:567): bg white-0 + border-top soft-200, padding 16px 20px,
+ * acciones a la derecha gap-12. Tamaño de botón: el DS legisla `large` (48)
+ * en TODOS los modales (decisión de marca 2026-07-23), por encima del `small`
+ * que dibuja Figma. `buttonSize` es el escape hatch de un caso puntual.
+ *
+ * Orden canon: secundario primero (izquierda), primario después (derecha). El
+ * secundario es siempre `stroke` + `neutral`; `color` solo lo lee el primario.
+ *
+ * `scoped: true` (light DOM, NO shadow), igual que el resto del port.
+ */
+export declare class SuiModalFooter {
+    el: HTMLElement;
+    /** Botón primario (derecha) — string shorthand o `{ label, disabled?, color? }`. `null` = sin botón. */
+    primaryButton: SuiFooterButtonConfig | string | null;
+    /** Botón secundario (izquierda del primario, stroke neutral) — string o config. */
+    secondaryButton: SuiFooterButtonConfig | string | null;
+    /** Type Stretch de Figma: los botones ocupan todo el ancho (50/50). */
+    stretch: boolean;
+    /** Size explícito de los botones. Sin valor, el DS usa `large` (48 px) en todos los modales. */
+    buttonSize: SuiButtonSize | null;
+    /** Click en el botón primario. */
+    primaryClick: EventEmitter<void>;
+    /** Click en el botón secundario. */
+    secondaryClick: EventEmitter<void>;
+    /** Hay contenido proyectado en el slot izquierdo (el `:empty` del Angular no sirve con slots scoped). */
+    private hasAux;
+    componentWillLoad(): void;
+    private cfg;
+    render(): any;
+}

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

@@ -0,0 +1,65 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** Variantes semánticas del icono de status (mismo union que sui-modal). */
+export type SuiModalHeaderVariant = 'info' | 'success' | 'warning' | 'error';
+export type SuiModalHeaderSize = 'medium' | 'small';
+/**
+ * `<sui-modal-header>` — SUI Design System 2.0. COMPUESTO.
+ *
+ * Portado desde el `SuiModalHeader` del SUI Angular (sui-design-system,
+ * `src/lib/sui-modal-header`). Header de modal standalone para componer
+ * modales, paneles o sheets custom (par de `sui-modal-footer`).
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO.
+ * Component set: 466:4778 ("Modal Header [1.1]") — 6 Types × 2 Sizes
+ *   Types: Basic · Left Icon · Error · Warning · Success · Information
+ *   Sizes: Medium (min-height 80, título + descripción) ·
+ *          Small (min-height 56, título; icono FLAT 24 sin círculo)
+ *
+ * EXACT (Figma 466:4777 medium / 472:298 small):
+ *   Container    flex align-center · padding 16px 56px 16px 20px (pr 56 reserva
+ *                el close absolute) · border-bottom stroke-soft-200 · bg white-0
+ *                · min-height 80 (small: 56) · gap 16 (small: 12; con icono: 14)
+ *   Title        Label/Small (14/500/20/−0.006em), strong-950
+ *   Description  Paragraph/X-Small (12/400/16), sub-600, margen-top 4
+ *   Status icon  medium: círculo padding-10 radius-full state lighter/base,
+ *                icono 20 · small: flat 24 sin círculo
+ *   Close        sui-compact-button ghost large, absolute top 16 right 16
+ *
+ * Tipos: `iconVariant` (semántico) o `icon` (custom, type Left Icon, círculo
+ * neutral — prioridad). Ambos null → Basic. `titleId` / `descriptionId`: ids
+ * para el aria-labelledby / aria-describedby del dialog contenedor.
+ *
+ * Diferencias de API con el Angular:
+ *   - `title` → `heading`: `title` es atributo global del DOM (tooltip nativo
+ *     gris). Además se stripea el `title` nativo del Host.
+ *   - `closeAriaLabel` (default 'Cerrar') reemplaza al texto i18n
+ *     `textos().comun.cerrar` del Angular, que en Stencil no existe.
+ *
+ * `scoped: true` (light DOM, NO shadow), igual que el resto del port.
+ */
+export declare class SuiModalHeader {
+    el: HTMLElement;
+    /** Título del header (Label/Small). Renombrado desde el `title` del Angular. */
+    heading: string;
+    /** Descripción bajo el título (Paragraph/X-Small). */
+    description: string | null;
+    /** `medium` (80): título + descripción · `small` (56): título; icono flat 24. */
+    size: SuiModalHeaderSize;
+    /** Icono semántico de status (círculo state lighter/base en medium). */
+    iconVariant: SuiModalHeaderVariant | null;
+    /** Icono custom RemixIcon (type "Left Icon" de Figma). Prioridad sobre `iconVariant`. */
+    icon: string | null;
+    /** Muestra el botón de cerrar. Default `true`. */
+    showClose: boolean;
+    /** id del h2 del título — para aria-labelledby del dialog contenedor. */
+    titleId: string | null;
+    /** id del p de la descripción — para aria-describedby del dialog contenedor. */
+    descriptionId: string | null;
+    /** aria-label del botón de cerrar. */
+    closeAriaLabel: string;
+    /** Click en el botón de cerrar. */
+    closed: EventEmitter<void>;
+    /** Strip del `title` nativo: el vdom no borra un atributo que él no puso, así que se quita a mano. */
+    componentDidRender(): void;
+    render(): any;
+}