@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/types/components/sui-segmented-control/sui-segmented-control.d.ts

@@ -0,0 +1,79 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/** `2xlarge` (44 por segmento, también solo ícono): piso táctil del teléfono. */
+export type SuiSegmentedControlSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
+/** `rounded`: riel, indicador y segmentos en píldora. `default`: radio 10 / 6 del Figma 2604:114. */
+export type SuiSegmentedControlShape = 'default' | 'rounded';
+export interface SuiSegmentedControlItem {
+    value: string;
+    label: string;
+    icon?: string;
+    /** Solo ícono (Type=Only Icon de Figma). Requiere `icon`; el `label` pasa a ser el aria-label. */
+    iconOnly?: boolean;
+    disabled?: boolean;
+}
+/**
+ * `<sui-segmented-control>` — SUI Design System 2.0.
+ *
+ * Portado desde el `SuiSegmentedControl` del SUI Angular (sui-design-system,
+ * `src/lib/sui-segmented-control`). Reemplaza a `<sui-tabs variant="segment">`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — "Segmented Control [1.1]"
+ *   2604:114 set · 2604:150 ítems (Text · Left Icon · Only Icon) ·
+ *   2603:2062 estados · 2604:152 container
+ *
+ * Píldora estilo iOS: opciones mutuamente excluyentes con un indicador blanco
+ * que se anima (translateX + width) hacia la opción activa. Se reposiciona con
+ * ResizeObserver (responsive) y cuando cambian `active` o `tabs`.
+ *
+ * EXACT (Figma):
+ *   Container: bg-weak-50, padding 4px, gap 4px, radius 10px
+ *   Item: padding 4px, gap 6px, radius 6px, icon 20px
+ *   Estados: default soft-400 · hover sub-600 · active strong-950 + indicator
+ *   Disabled: color text-disabled-300 (NO opacity)
+ *
+ * Extensión SUI: `size` (small/medium/large/xlarge/2xlarge; solo medium es
+ * 1:1 con Figma), `shape` y `disabled` por ítem.
+ *
+ * a11y: radiogroup con roving tabindex — ← → ↑ ↓ mueven el foco Y eligen, con
+ * vuelta; Home/End al primero/último; los deshabilitados se saltan.
+ *
+ * API ↔ Angular: `active` es `model()` allá; acá `@Prop` mutable que se
+ * actualiza al elegir, y `tabChange` emite el valor nuevo. El genérico `<T>`
+ * queda en `string`.
+ *
+ * `scoped: true` (light DOM, NO shadow), igual que el resto del port.
+ */
+export declare class SuiSegmentedControl {
+    el: HTMLElement;
+    /** Ítems `{ value, label, icon?, iconOnly?, disabled? }`. Requerido. */
+    tabs: SuiSegmentedControlItem[];
+    /** Valor activo (two-way: se actualiza al elegir). */
+    active?: string;
+    /** Tamaño del segmento: medium 28 · large 32 · xlarge 40 · 2xlarge 44. */
+    size: SuiSegmentedControlSize;
+    /** Forma: `default` (radio 10 / 6) o `rounded` (todo en píldora). */
+    shape: SuiSegmentedControlShape;
+    /** Nombre accesible del grupo («Tipo de entrega»). */
+    ariaLabel: string | null;
+    /** Emitido al elegir un ítem habilitado, con su `value`. */
+    tabChange: EventEmitter<string>;
+    indicatorStyle: {
+        transform: string;
+        width: string;
+    };
+    private resizeObserver?;
+    /** iOS WKWebView: la presencia del listener touchstart libera `:active` a tiempo. */
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onLayoutInputChange(): void;
+    private track;
+    private items;
+    /** setTimeout 0 para esperar el layout (igual al Angular). */
+    private scheduleIndicatorUpdate;
+    private updateIndicator;
+    private onKeydown;
+    private select;
+    render(): any;
+}

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

@@ -0,0 +1,201 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiSelectBadgeConfig, SuiSelectOption, SuiSelectSize, SuiSelectType } from './sui-select.data';
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+/**
+ * `<sui-select>` — SUI Design System (SUI Design System 2.0). COMPUESTO (complejo).
+ *
+ * Homologado con el SUI Angular (sui-design-system, lib/sui-select). Misma API
+ * publica conceptual, TODAS las variantes (5 sizes x 6 types x estados default/filled/
+ * hover/focus/open/error/disabled), mismo comportamiento (overlay anclado al
+ * trigger, teclado, focus, lazy mount del panel, backdrop close, width sync) y
+ * mismos VALORES exactos (tokens del DS, no hex). El accent del DS es NARANJA
+ * brand (#fa7319 / --sui-primary-base), NO el azul de Figma — vive en el check del
+ * item seleccionado del panel (sui-dropdown-item mode="option").
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — Select [1.1] 270:1085.
+ *   Sizes: xsmall 32 (py6 pl8 pr6 gap6 r8) / small 36 (py8 pl10 pr8 gap8 r8) /
+ *          medium 40 (py10 pl12 pr10 gap8 r10). Extension SUI: large 48 / xlarge
+ *          52 (alturas del sui-button), con texto 16/24 y opciones de 44 / 48;
+ *          en mobile (<= 767 px) las opciones miden >= 44 con cualquier size.
+ *   Chevron arrow-down-s-line 20x20 (rota 180 al abrir).
+ *
+ * Arquitectura (igual que el Angular): delega el overlay menu a `<sui-dropdown-menu>`
+ * via `originElement` (el trigger div de este componente). El sui-dropdown-menu
+ * encapsula el floating panel, positioning, auto-flip, backdrop close, width sync.
+ * Los items se renderean con `<sui-dropdown-item mode="option">` proyectados en el
+ * slot `panel`. El sui-select solo gestiona el trigger visual, label/hint, keyboard
+ * nav y el binding de value. La pieza minima reusada ya estaba portada en Stencil.
+ *
+ * Diferencias de PORT vs el Angular original (y por que):
+ *  - El Angular usaba ControlValueAccessor (formControl) + model() two-way. En web
+ *    components el binding es por `value` prop + evento `valueChange` (drop-in para
+ *    Angular value/valueChange, React value/onValueChange). `value` resuelve la
+ *    option con `value === value` para pintar el estado seleccionado / el label del
+ *    trigger; si la option no existe aun (items async), un Watch re-resuelve.
+ *  - El value generico `T` del Angular se acota a `string` (mismo criterio que los
+ *    hermanos compact/inline select — serializa estable a atributo/propiedad).
+ *  - `highlightedIndex` (keyboard nav) se mantiene como State interno identico.
+ *  - Los textos por defecto van en espanol fijo (`Elige…`): `provideSuiTextos`
+ *    es Angular-only.
+ *
+ * a11y (igual que el Angular): el combobox toma su nombre del label visible
+ * (aria-labelledby) o del placeholder (aria-label), apunta al listbox abierto
+ * (aria-controls), anuncia la opcion resaltada con las flechas
+ * (aria-activedescendant, el foco se queda en el trigger) y enlaza hint/error
+ * (aria-describedby + aria-invalid).
+ *
+ * GOTCHAS de API (renombres / Stencil):
+ *  - El @Prop `type` (left-decoration kind) NO colisiona con DOM aqui (el trigger
+ *    es un div-like, no un <input>). `value`/`placeholder`/`size` tampoco colisionan.
+ *  - El atributo nativo `title` se quita del host (evita el tooltip gris del OS);
+ *    el tooltip del label se pasa via `tooltip` al sui-form-label.
+ *  - `items`/`options` es un array: bindear con la propiedad `.options` en lit, NO
+ *    como atributo string.
+ *
+ * iOS WKWebView :active fix: el host escucha touchstart/touchend (la presencia del
+ * binding engage el touch pipeline; touchend blur fuerza la deseleccion del :active
+ * stuck en el trigger y en los items clickeables del panel). Ademas el trigger
+ * (boton custom) lleva onTouchStart/onTouchEnd inline porque los @Listen del host
+ * NO aplican a elementos internos.
+ *
+ * `scoped: true` (light DOM, NO shadow): los selectores `:host([data-sui-*])`
+ * translan limpio, los `<sui-icon>`/`<sui-flag>`/`<sui-avatar>` heredan tokens del
+ * global, y el `<sui-dropdown-menu>` puede recibir la proyeccion del slot `panel`
+ * sin pelear con shadow DOM. Misma estrategia que el Angular original.
+ *
+ * Slots:
+ *  - `leading` -> left-decoration totalmente custom (gana sobre imageUrl/flag/icon).
+ *
+ * Eventos:
+ *  - `valueChange`: string — value seleccionado (espeja el output del FormControl).
+ */
+export declare class SuiSelect {
+    el: HTMLElement;
+    /** Tamano del trigger: xsmall 32 / small 36 / medium 40 / large 48 / xlarge 52. Default `medium`. */
+    size: SuiSelectSize;
+    /** Tipo de left-decoration (Figma Type variant). Default `basic`. */
+    type: SuiSelectType;
+    /** Texto de placeholder cuando no hay value. Default `Elige…`. */
+    placeholder: string;
+    /** Opciones del menu. Bindear con `.options` (es un array). Default `[]`. */
+    options: SuiSelectOption[];
+    /**
+     * Value seleccionado (matchea `option.value`). `''`/null = sin seleccion.
+     * Resuelve la option para pintar el label del trigger + el item seleccionado.
+     * Default `''`.
+     */
+    value: string;
+    /**
+     * Left-decoration del trigger: `true` (o el atributo `leading-icon` a secas) =
+     * icono default por type · un nombre de RemixIcon = ese icono · `false` = sin
+     * icono (default, opt-in).
+     */
+    leadingIcon: string | boolean | null;
+    /**
+     * sui-flag name para `type="country"` (sino la trae la option seleccionada). Se
+     * muestra SOLO con seleccion hecha; vacio, el left slot muestra el globo.
+     */
+    flag: SuiFlagName | null;
+    /** Imagen del left slot cuando hay value (avatar/brand/provider/company logo). `''`/null = sin imagen. */
+    imageUrl: string | null;
+    /**
+     * Badge inline entre value y chevron: string ('New') o, por property, un
+     * `SuiSelectBadgeConfig` (label + color/variant/size del `<sui-badge>`).
+     * `''`/null = sin badge.
+     */
+    badge: SuiSelectBadgeConfig | string | null;
+    /** Texto del label (renderea sui-form-label arriba del trigger). `''`/null = sin label. */
+    label: string | null;
+    /** Texto secundario del label (ej. "Optional"). */
+    sublabel: string | null;
+    /** Asterisco rojo en el label. Default false. */
+    required: boolean;
+    /** Tooltip en el icono info del label. */
+    tooltip: string | null;
+    /** Texto del hint debajo del trigger. `''`/null = sin hint. */
+    hint: string | null;
+    /** Estado de error (border rojo + focus ring rojo + muestra errorMessage). Default false. */
+    error: boolean;
+    /** Mensaje de error (reemplaza al hint cuando error=true). */
+    errorMessage: string | null;
+    /** Deshabilitado (no abre, no emite). Default false. */
+    disabled: boolean;
+    /** Panel abierto. Refleja a `data-sui-open` para el visual state del host. */
+    open: boolean;
+    /** Option resuelta desde `value` (o null). Se deriva en updateSelected(). */
+    private selected;
+    /** Indice keyboard-highlighted dentro del panel (-1 = ninguno). */
+    private highlightedIndex;
+    /** Value seleccionado (espeja el output del FormControl del Angular). */
+    valueChange: EventEmitter<string>;
+    /** Ref al trigger div — pasado al sui-dropdown-menu como originElement. */
+    private triggerEl?;
+    /** Ref al sui-dropdown-menu interno — para invocar open/close imperativos. */
+    private menuEl?;
+    private readonly uid;
+    private readonly labelId;
+    private readonly listboxId;
+    private readonly hintId;
+    private optionId;
+    componentWillLoad(): void;
+    /** Strip del `title` nativo del host (evita el tooltip gris del OS; regla del DS). */
+    componentWillRender(): void;
+    componentDidLoad(): void;
+    onValueChange(): void;
+    onOptionsChange(): void;
+    onDisabledChange(value: boolean): void;
+    /** Resuelve `selected` desde `value` (re-resuelve cuando options llega async). */
+    private updateSelected;
+    /** Label de la option seleccionada (mostrado en el trigger). null = placeholder. */
+    private get selectedLabel();
+    /**
+     * `leadingIcon` normalizado: false = sin icono · true = default por type ·
+     * string = RemixIcon. Por atributo llega como string ('' / 'true' / 'false').
+     */
+    private get leadingCfg();
+    /** Icono efectivo del left slot: string custom > default-por-type. */
+    private get leadingIconName();
+    /** Flag efectivo del left slot: prop > la de la option seleccionada. */
+    private get effectiveFlag();
+    /** Muestra la imagen (avatar/logo) en vez del icono cuando hay imageUrl. */
+    private get showLeadingImage();
+    /** Se renderea el left slot? (leadingIcon activo O hay imageUrl/flag). */
+    private get showLeading();
+    /** Badge normalizado: string -> { label }. */
+    private get badgeCfg();
+    /** El rotulo y el hint no crecen con el control: su escala llega a `medium`. */
+    private get labelSize();
+    private get hasLabel();
+    /** Mensaje del hint slot: errorMessage si error, sino hint. */
+    private get hintMessage();
+    private get hasHint();
+    onTouchStart(): void;
+    onTouchEnd(event: TouchEvent): void;
+    private onTriggerClick;
+    /** Keyboard nav del trigger (Enter/Space/Arrows/Escape/Tab). Espeja el Angular. */
+    private onTriggerKeydown;
+    /**
+     * Abre el panel. Pre-highlightea la option seleccionada (o la primera habilitada)
+     * ANTES de abrir, igual que el Angular. Nombre `openMenu` (consistente con sui-compact-select; `open` es State).
+     */
+    openMenu(): Promise<void>;
+    /** Cierra el panel. El sync de estado pasa por onMenuOpenedChange(false). */
+    closeMenu(): Promise<void>;
+    /** Alterna el panel. */
+    toggleMenu(): Promise<void>;
+    /**
+     * Sincroniza el estado interno con el sui-dropdown-menu. Cubre TODOS los paths de
+     * close (programatico, backdrop click, Escape, resize/scroll detach) — single
+     * point of truth, igual que onMenuOpenedChange del Angular.
+     */
+    private onMenuOpenedChange;
+    private selectOption;
+    private moveHighlight;
+    private firstEnabledIndex;
+    private lastEnabledIndex;
+    /** Left-decoration (Figma Type variant): imagen / flag / icono 20x20. */
+    private renderLeadingInner;
+    /** Slot leading de cada item del panel segun el type del select. */
+    private renderItemLeading;
+    render(): any;
+}

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

@@ -0,0 +1,71 @@
+/**
+ * Datos / catalogos de `<sui-select>`.
+ *
+ * Separado del .tsx porque Stencil prohibe `export const/function/enum` junto al
+ * `@Component` (rompe el build entero). Aqui viven los shapes y los catalogos de
+ * variantes; el .tsx importa lo que necesita sin re-exportarlo con llaves.
+ *
+ * Homologado con el SUI Angular (sui-design-system, lib/sui-select).
+ */
+import type { SuiFlagName } from '../sui-flag/sui-flag';
+import type { SuiBadgeColor, SuiBadgeSize, SuiBadgeVariant } from '../sui-badge/sui-badge';
+/**
+ * Tamanos del trigger. Figma Select[1.1] 270:1085: xsmall 32 / small 36 /
+ * medium 40. `large` (48) y `xlarge` (52) son extension SUI: las alturas del
+ * `sui-button`, para que campo y boton se alineen; el texto va en 16/24 y las
+ * opciones de la lista miden 44 / 48.
+ */
+export type SuiSelectSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+/** Badge inline del trigger: label + look del `<sui-badge>` (defaults orange / lighter / medium). */
+export interface SuiSelectBadgeConfig {
+    label: string;
+    color?: SuiBadgeColor;
+    variant?: SuiBadgeVariant;
+    size?: SuiBadgeSize;
+}
+/**
+ * Tipo de left-decoration del trigger (Figma Select[1.1] · Type variant).
+ *   - basic     -> icono RemixIcon generico (placeholder: flashlight-line)
+ *   - country   -> sui-flag (placeholder: global-line)
+ *   - avatar    -> sui-avatar / imageUrl (placeholder: user-line)
+ *   - provider  -> logo/thumbnail (placeholder: bank-card-line)
+ *   - brand     -> logo/thumbnail (placeholder: award-line)
+ *   - company   -> logo/thumbnail (placeholder: building-line)
+ *
+ * El default `'basic'` NO renderea left-icon a menos que `leadingIcon` este
+ * activo (true o un nombre) o haya imageUrl/flag — el slot es opt-in.
+ */
+export type SuiSelectType = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company';
+/**
+ * Shape de cada opcion del select. El consumer pasa un array de estos en `options`.
+ * `value` es el identificador que se emite en `valueChange` y se compara para
+ * resolver el estado seleccionado.
+ *
+ * Nota de port: el Angular usaba `SuiSelectOption<T>` generico. En web components
+ * el value debe serializar a atributo/propiedad de forma estable, asi que se acota
+ * a `string` (mismo criterio que sui-compact-select / sui-inline-select).
+ */
+export interface SuiSelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** sui-flag name para items de type=country (override del placeholder). */
+    flag?: SuiFlagName;
+    /** RemixIcon name para items de type=basic/icon. */
+    icon?: string;
+}
+/**
+ * RemixIcon de placeholder por type — Figma confirma uno distinto por type en el
+ * state Default/empty.
+ */
+export declare const SUI_SELECT_DEFAULT_ICON_BY_TYPE: Record<SuiSelectType, string>;
+/** Sizes soportados (para stories / argTypes). */
+export declare const SUI_SELECT_SIZES: readonly SuiSelectSize[];
+/** Types soportados (para stories / argTypes). */
+export declare const SUI_SELECT_TYPES: readonly SuiSelectType[];
+/** Dataset de ejemplo basic (sin leading por item). */
+export declare const SUI_SELECT_DEMO_BASIC: SuiSelectOption[];
+/** Dataset de ejemplo country (flag por item). */
+export declare const SUI_SELECT_DEMO_COUNTRIES: SuiSelectOption[];
+/** Dataset largo (probar scroll + auto-flip del panel). */
+export declare const SUI_SELECT_DEMO_LONG: SuiSelectOption[];

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

@@ -0,0 +1,212 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { SuiSidebarBrandConfig, SuiSidebarIndicatorColor, SuiSidebarSearchConfig, SuiSidebarItem, SuiSidebarMobileMode, SuiSidebarProfile } from './sui-sidebar.data';
+/**
+ * `<sui-sidebar>` — SUI Design System (SUI Design System 2.0). COMPLEJO.
+ *
+ * Portado 1:1 desde el componente Angular homologado
+ * (master-pedidos/src/app/components/sui/sui-sidebar/). Misma API
+ * pública, TODAS las variantes (collapsed / mobile drawer|sheet / indicator
+ * brand|information / danger), mismo comportamiento (search slot, supporting
+ * anchor-bottom, color-dot, shortcut pill, verified badge, header/profile
+ * compact buttons, feature-card slot, logout action) y mismos VALORES exactos
+ * vía tokens del DS. Reusa los primitivos ya portados `<sui-icon>`,
+ * `<sui-avatar>` y `<sui-badge>`. El accent del DS es NARANJA brand (#fa7319),
+ * NO el azul de Figma — el indicator default es `brand`.
+ *
+ * Figma file: 8p1k72aKKvzJV4XcvPS4VO — Sidebar [Navigation] [1.1] node 3802:11759
+ *   Collapsed=Off → 3802:11758 (base) · Collapsed=On → 3802:11756 (icon-only 80px)
+ *   FeatureCard=On → 3802:11755 (promo card al fondo del content)
+ *
+ * EXACT (verificado vs Figma 3802:11758):
+ *  - Header outer pad 12, inner card pad 12, gap 12, radius 10.
+ *  - Brand logo 40×40 rounded-full · name 14/20 medium -0.006em strong-950 ·
+ *    subtitle 12/16 regular sub-600.
+ *  - Header Compact Button (expand-up-down-line): pad 2, radius 6, border
+ *    stroke-soft-200, shadow regular-shadow-x-small. Divider inset 20 L/R.
+ *  - Content pad 20/20/16, gap 20 entre secciones. Section label: pad 4,
+ *    12/16 medium UPPERCASE 0.04em soft-400. Main gap 8 · Side/Supporting gap 6.
+ *  - Nav item: pad 8/12, gap 8, radius 8, icon 20, label 14/20 medium sub-600.
+ *    Active: bg weak-50 + label strong-950 + indicator bar 4×20 (left:-20px) +
+ *    chevron arrow-right-s-line. Color del indicator = brand (naranja) por
+ *    default, information (azul) opt-in.
+ *  - Shortcut pill: border stroke-soft-200, pad 2/6, radius 4, 12/16 medium
+ *    UPPERCASE soft-400. Color-dot: círculo de color en vez de RemixIcon.
+ *  - Supporting Content anclado al fondo (flex:1 + justify-end). Footer pad 12,
+ *    divider top inset 20. Profile: pad 12, gap 12, radius 10, avatar 40,
+ *    name 14/20, email 12/16, verified badge + compact dropdown opcional.
+ *
+ * COLLAPSED=On (80px icon-only): section labels SIGUEN visibles (centrados),
+ * content padding-inline 12px, items 36×36 centrados, indicator bar flush al border izq (left:-22px).
+ *
+ * MOBILE (≤767px): drawer fixed (transform translateX), radius 0 24 24 0,
+ * backdrop rgba(51,51,51,0.24) (overlay del modal) fade-in 200ms. `mobile-mode=sheet` → casi fullscreen.
+ *
+ * `scoped: true` (light DOM, NO shadow): los `:host([data-sui-*])` y los
+ * `<sui-icon>`/`<sui-avatar>`/`<sui-badge>` internos heredan tokens del global.
+ * Misma estrategia que el Angular original (`display: contents` en el host).
+ *
+ * GOTCHAS del port:
+ *  - El Angular usa Angular Router (routerLink / RouterLinkActive). En web
+ *    components NO hay router: los items con `route` se renderean como `<a href>`
+ *    y el estado activo se resuelve SIEMPRE por `active-route` (match por prefijo
+ *    de `route`, o por `value` exacto para items sin route). El consumer
+ *    actualiza `active-route` en cada navegación.
+ *  - 2-way bindings del Angular (`mobileOpen`, `searchValue`) → @Prop mutable +
+ *    eventos `mobileOpenChange` / `searchValueChange`.
+ *  - El @Input `title` no existe acá; igual se stripea el atributo nativo
+ *    `title` del host en connectedCallback — patrón canon Ontop.
+ *  - Fix iOS :active stuck con listeners PASIVOS en el host (igual que
+ *    `SuiToque` del Angular): touchend hace blur del botón/enlace tocado.
+ *  - Textos por DI del Angular (`provideSuiTextos`) → defaults en español fijos.
+ *
+ * HOMOLOGADO con el SUI Angular el 05-11-2026:
+ *  - API en objetos: `brand` (SuiSidebarBrandConfig) y `search` (config | boolean),
+ *    `mobileOpen` + `closeOnItemClick`, `headerButtonActive`, slot `header-panel`.
+ *  - Móvil (≤767px por matchMedia): backdrop, aria-hidden + inert del drawer
+ *    cerrado, Escape y cierre por item SOLO en móvil (antes el aside quedaba
+ *    aria-hidden también en desktop).
+ *  - Search: X de limpiar (reemplaza al shortcut con texto), enterkeyhint=search,
+ *    aria-label, 16px en el teléfono. Ancho 272 (canon Figma), backdrop overlay
+ *    del modal, colapsado 36×36, sin menú nativo de enlace en iOS.
+ */
+export declare class SuiSidebar {
+    el: HTMLElement;
+    /**
+     * Estado colapsado (icon-only, 80px). Oculta labels/subtítulos/shortcuts/
+     * badges y centra los iconos. Figma variant Collapsed=On. Default false.
+     */
+    collapsed: boolean;
+    /**
+     * Color del indicator bar + icon del item activo:
+     *  - 'brand' (default): naranja --sui-primary-base — el accent del DS.
+     *  - 'information': azul --sui-state-information-base (Figma canon, opt-in).
+     * En HTML el atributo es `indicator-color`.
+     */
+    indicatorColor: SuiSidebarIndicatorColor;
+    /**
+     * Config del brand header: `{ name, subtitle?, subtitleAsBadge?, logo?, fallback? }`
+     * (PROPERTY: `.brand=${{...}}`). `subtitleAsBadge` pinta el subtitle como
+     * `<sui-badge color="orange">` (roles tipo «SUPERADMIN»). `null` = sin nombre.
+     */
+    brand: SuiSidebarBrandConfig | null;
+    /**
+     * Muestra el Compact Button del header (expand-up-down-line) — workspace
+     * switcher de Figma. Emite `headerButtonClicked` al click. Default false.
+     */
+    showHeaderButton: boolean;
+    /**
+     * Estado abierto del Compact Button del header: fondo strong-950 e icono
+     * blanco mientras el switcher esté desplegado (aria-expanded). Default false.
+     */
+    headerButtonActive: boolean;
+    /**
+     * Search encima de las secciones: `false`/`null` (default) sin search · `true`
+     * con defaults (placeholder 'Buscar…') · `{ placeholder?, ariaLabel?, shortcut? }`.
+     */
+    search: SuiSidebarSearchConfig | boolean | null;
+    /** Valor del input de búsqueda (2-way vía `searchValueChange`). */
+    searchValue: string;
+    /** Items principales. Pasar como PROPERTY (`.items=${[...]}`), no atributo. */
+    items: SuiSidebarItem[];
+    /** Sección secundaria, separada por gap (sin divisor horizontal). */
+    secondaryItems: SuiSidebarItem[];
+    /**
+     * Tercera sección "Supporting Content". Con `supportingAnchorBottom=true` se
+     * ancla al fondo del content (flex:1 + justify-end) — típico Settings/Support.
+     */
+    supportingItems: SuiSidebarItem[];
+    /** Ancla supportingItems al fondo del content (Figma justify-end). Default true. */
+    supportingAnchorBottom: boolean;
+    /** Label opcional encima de items (ej. "MAIN"). */
+    itemsLabel: string | null;
+    /** Label opcional encima de secondaryItems. */
+    secondaryItemsLabel: string | null;
+    /** Label opcional encima de supportingItems. */
+    supportingItemsLabel: string | null;
+    /**
+     * Active route — resuelve el item activo. Match por prefijo del `route`
+     * (ej. '/master/inicio' activa '/master/inicio/sub'), o por `value` exacto
+     * para items sin route. En HTML el atributo es `active-route`.
+     */
+    activeRoute: string | null;
+    /** Perfil del footer. Pasar como PROPERTY (`.profile=${{...}}`). */
+    profile: SuiSidebarProfile | null;
+    /**
+     * Muestra el Compact Button dropdown (arrow-right-s-line) en el footer del
+     * perfil. Emite `profileClicked`. Default false.
+     */
+    profileDropdown: boolean;
+    /**
+     * Estado open/closed del drawer móvil (≤767px). 2-way vía `mobileOpenChange`.
+     * El componente lo pasa a false al click en el backdrop, con Escape y (si
+     * closeOnItemClick) al click en un item. En desktop no afecta el layout.
+     */
+    mobileOpen: boolean;
+    /** Cerrar el drawer móvil al click en un nav item (solo en móvil). Default true. */
+    closeOnItemClick: boolean;
+    /** Mostrar el backdrop overlay (mobile drawer). Default true. */
+    showBackdrop: boolean;
+    /**
+     * Comportamiento mobile (≤767px): 'drawer' (compacto) o 'sheet' (casi
+     * fullscreen). En desktop el sidebar es fijo siempre. En HTML: `mobile-mode`.
+     */
+    mobileMode: SuiSidebarMobileMode;
+    /** Click en cualquier item. Payload = el SuiSidebarItem clickeado. */
+    itemClicked: EventEmitter<SuiSidebarItem>;
+    /** Click en un item con `action='logout'`. */
+    logoutClicked: EventEmitter<void>;
+    /** Click en el backdrop (mobile). */
+    backdropClicked: EventEmitter<void>;
+    /** Click en el Compact Button del header (workspace switcher). */
+    headerButtonClicked: EventEmitter<void>;
+    /** Click en el Compact Button dropdown del footer del perfil. */
+    profileClicked: EventEmitter<void>;
+    /** Submit del search input (Enter). Payload = valor actual. */
+    searchSubmitted: EventEmitter<string>;
+    /** 2-way de `mobileOpen`: se emite al cerrarlo el componente (backdrop / Escape / item). */
+    mobileOpenChange: EventEmitter<boolean>;
+    /** 2-way de `searchValue`: se emite en cada input. */
+    searchValueChange: EventEmitter<string>;
+    /** Viewport móvil (≤767px, canon bp.medium). Gatea backdrop, aria-hidden/inert, Escape y auto-close. */
+    isMobile: boolean;
+    private mql?;
+    private onMql;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get isOpen();
+    private close;
+    /** Brand normalizado (null → nombre vacío, como el Angular). */
+    private get brandCfg();
+    /** Search normalizado: null → sin search; objeto con defaults aplicados. */
+    get searchCfg(): {
+        placeholder: string;
+        ariaLabel: string;
+        shortcut: string | null;
+    } | null;
+    /** Escape cierra el drawer móvil (a11y). No-op en desktop o ya cerrado. */
+    onEscapeKey(ev: KeyboardEvent): void;
+    /** iOS: listeners PASIVOS (patrón SuiToque) — engage del :active sin frenar el scroll. */
+    onTouchStart(): void;
+    onTouchEnd(ev: TouchEvent): void;
+    /**
+     * Resuelve el value del item activo según `activeRoute`. Match por prefijo
+     * del `route` (o por `value` exacto si el item no tiene route).
+     */
+    private get resolvedActiveValue();
+    private isItemActive;
+    private onItemClick;
+    private onBackdropClick;
+    /** Limpia el search (X visible solo con texto) y devuelve el foco al input. */
+    private clearSearch;
+    private onHeaderButtonClick;
+    private onProfileButtonClick;
+    private onSearchInput;
+    private onSearchKeyDown;
+    /** Cuerpo de un item (icono/dot + label + badge + shortcut + chevron). */
+    private renderItemBody;
+    /** Renderiza un item como `<a>` (con route) o `<button>` (sin route/action). */
+    private renderItem;
+    /** Renderiza una sección (label opcional + nav de items). */
+    private renderSection;
+    render(): any;
+}

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

@@ -0,0 +1,90 @@
+import type { SuiAvatarStatus } from '../sui-avatar/sui-avatar';
+/** Item de navegación del sidebar (sección main / secondary / supporting). */
+export interface SuiSidebarItem {
+    /** Identificador único; también lo emite el evento `itemClicked`. */
+    value: string;
+    label: string;
+    /** RemixIcon name (ej. 'home-line', 'settings-3-line'). */
+    icon?: string;
+    /**
+     * URL del link. Si se omite, el item se renderiza como `<button>` y solo
+     * emite `itemClicked` (no navega).
+     */
+    route?: string;
+    /** External link → abre en nueva pestaña (target=_blank). */
+    external?: boolean;
+    /** 'danger' tiñe el item rojo (típico para logout / acciones destructivas). */
+    variant?: 'default' | 'danger';
+    /**
+     * Action genérica. Si vale 'logout' emite `logoutClicked` además de
+     * `itemClicked`. Cualquier valor bypassa el route (no navega).
+     */
+    action?: 'logout' | string;
+    /** Badge opcional (ej. unread count). */
+    badge?: string | number;
+    /**
+     * Shortcut pill alineado a la derecha (Figma "Shortcut", ej. '⌘1').
+     * Border stroke-soft-200, radius 4, 12/16 medium uppercase soft-400.
+     */
+    shortcut?: string;
+    /**
+     * Reemplaza el icono RemixIcon por un Chart Legend Dot — un círculo de color
+     * (Figma Side Content "FAVS"). Acepta cualquier CSS color o token
+     * (ej. '#7d52f4', 'var(--sui-state-feature-base)'). Prioridad sobre `icon`.
+     */
+    colorDot?: string;
+    /**
+     * Tooltip nativo en estado collapsed (icon-only). Si se omite, cae al `label`.
+     * Solo se renderiza cuando el sidebar está collapsed.
+     */
+    tooltip?: string;
+}
+/**
+ * Comportamiento mobile del drawer (≤767px):
+ *  - 'drawer' (default): width min(86vw, 360px), entra desde la izquierda.
+ *  - 'sheet': width calc(100vw - 40px), casi fullscreen (solo un slice de
+ *    backdrop visible a la derecha).
+ */
+export type SuiSidebarMobileMode = 'drawer' | 'sheet';
+/** Perfil del footer (con sui-avatar + nombre + email + verified badge). */
+export interface SuiSidebarProfile {
+    name: string;
+    avatarUrl?: string;
+    initials?: string;
+    status?: SuiAvatarStatus;
+    /** Subtítulo opcional (ej. email del usuario). */
+    email?: string;
+    /**
+     * Muestra el verified-fill badge (state-verified-base #47c2ff) junto al
+     * nombre — patrón Figma "Sophia Williams ✓". Default false.
+     */
+    verified?: boolean;
+}
+/**
+ * Color del indicator bar / icon activo:
+ *  - 'brand': naranja --sui-primary-base (#fa7319) — el accent del DS.
+ *  - 'information': azul --sui-state-information-base (Figma canon, opt-in).
+ */
+export type SuiSidebarIndicatorColor = 'information' | 'brand';
+/** Config del brand header (logo + nombre + subtítulo). Patrón objeto, como `profile`. */
+export interface SuiSidebarBrandConfig {
+    /** Nombre de la marca / workspace en el header. */
+    name: string;
+    /** Texto secundario debajo del nombre (ej. "HR Management" o "SUPERADMIN"). */
+    subtitle?: string;
+    /** true → el subtitle va como `<sui-badge variant="filled" color="orange" size="small">`. */
+    subtitleAsBadge?: boolean;
+    /** URL de imagen del brand logo (40×40 rounded-full). */
+    logo?: string;
+    /** Fallback (emoji o texto corto) cuando no hay logo. */
+    fallback?: string;
+}
+/** Config del search slot (Figma prop search=true). Patrón objeto, como `profile`. */
+export interface SuiSidebarSearchConfig {
+    /** Placeholder del input. Default 'Buscar…'. */
+    placeholder?: string;
+    /** Nombre accesible del campo. Omitir → el placeholder. */
+    ariaLabel?: string;
+    /** Shortcut pill dentro del search (ej. '⌘1'). Omitir → sin pill. */
+    shortcut?: string;
+}