@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

package/dist/collection/components/sui-sidebar/sui-sidebar.js

@@ -0,0 +1,984 @@
+import { Host, h } from "@stencil/core";
+/**
+ * `<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 class SuiSidebar {
+    constructor() {
+        // ── Layout ──────────────────────────────────────────────────────────────
+        /**
+         * Estado colapsado (icon-only, 80px). Oculta labels/subtítulos/shortcuts/
+         * badges y centra los iconos. Figma variant Collapsed=On. Default false.
+         */
+        this.collapsed = false;
+        /**
+         * 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`.
+         */
+        this.indicatorColor = 'brand';
+        // ── Brand header ────────────────────────────────────────────────────────
+        /**
+         * 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.
+         */
+        this.brand = null;
+        /**
+         * Muestra el Compact Button del header (expand-up-down-line) — workspace
+         * switcher de Figma. Emite `headerButtonClicked` al click. Default false.
+         */
+        this.showHeaderButton = false;
+        /**
+         * Estado abierto del Compact Button del header: fondo strong-950 e icono
+         * blanco mientras el switcher esté desplegado (aria-expanded). Default false.
+         */
+        this.headerButtonActive = false;
+        // ── Search slot ───────────────────────────────────────────────────────────
+        /**
+         * Search encima de las secciones: `false`/`null` (default) sin search · `true`
+         * con defaults (placeholder 'Buscar…') · `{ placeholder?, ariaLabel?, shortcut? }`.
+         */
+        this.search = false;
+        /** Valor del input de búsqueda (2-way vía `searchValueChange`). */
+        this.searchValue = '';
+        // ── Nav items ─────────────────────────────────────────────────────────────
+        /** Items principales. Pasar como PROPERTY (`.items=${[...]}`), no atributo. */
+        this.items = [];
+        /** Sección secundaria, separada por gap (sin divisor horizontal). */
+        this.secondaryItems = [];
+        /**
+         * Tercera sección "Supporting Content". Con `supportingAnchorBottom=true` se
+         * ancla al fondo del content (flex:1 + justify-end) — típico Settings/Support.
+         */
+        this.supportingItems = [];
+        /** Ancla supportingItems al fondo del content (Figma justify-end). Default true. */
+        this.supportingAnchorBottom = true;
+        /** Label opcional encima de items (ej. "MAIN"). */
+        this.itemsLabel = null;
+        /** Label opcional encima de secondaryItems. */
+        this.secondaryItemsLabel = null;
+        /** Label opcional encima de supportingItems. */
+        this.supportingItemsLabel = 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`.
+         */
+        this.activeRoute = null;
+        // ── Profile footer ──────────────────────────────────────────────────────
+        /** Perfil del footer. Pasar como PROPERTY (`.profile=${{...}}`). */
+        this.profile = null;
+        /**
+         * Muestra el Compact Button dropdown (arrow-right-s-line) en el footer del
+         * perfil. Emite `profileClicked`. Default false.
+         */
+        this.profileDropdown = false;
+        // ── Mobile drawer ───────────────────────────────────────────────────────
+        /**
+         * 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.
+         */
+        this.mobileOpen = false;
+        /** Cerrar el drawer móvil al click en un nav item (solo en móvil). Default true. */
+        this.closeOnItemClick = true;
+        /** Mostrar el backdrop overlay (mobile drawer). Default true. */
+        this.showBackdrop = true;
+        /**
+         * Comportamiento mobile (≤767px): 'drawer' (compacto) o 'sheet' (casi
+         * fullscreen). En desktop el sidebar es fijo siempre. En HTML: `mobile-mode`.
+         */
+        this.mobileMode = 'drawer';
+        /** Viewport móvil (≤767px, canon bp.medium). Gatea backdrop, aria-hidden/inert, Escape y auto-close. */
+        this.isMobile = false;
+        this.onMql = (ev) => (this.isMobile = ev.matches);
+        this.onItemClick = (item, ev) => {
+            if (item.action === 'logout') {
+                ev.preventDefault();
+                this.logoutClicked.emit();
+            }
+            this.itemClicked.emit(item);
+            // Solo en móvil: en desktop el sidebar es fijo y cerrar no tiene sentido.
+            if (this.closeOnItemClick && this.isMobile && this.isOpen) {
+                this.close();
+            }
+        };
+        this.onBackdropClick = () => {
+            this.close();
+            this.backdropClicked.emit();
+        };
+        /** Limpia el search (X visible solo con texto) y devuelve el foco al input. */
+        this.clearSearch = () => {
+            var _a;
+            this.searchValue = '';
+            this.searchValueChange.emit('');
+            (_a = this.el.querySelector('.sui-sidebar__search-input')) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        this.onHeaderButtonClick = (ev) => {
+            ev.stopPropagation();
+            this.headerButtonClicked.emit();
+        };
+        this.onProfileButtonClick = (ev) => {
+            ev.stopPropagation();
+            this.profileClicked.emit();
+        };
+        this.onSearchInput = (ev) => {
+            const value = ev.target.value;
+            this.searchValue = value;
+            this.searchValueChange.emit(value);
+        };
+        this.onSearchKeyDown = (ev) => {
+            if (ev.key === 'Enter') {
+                ev.preventDefault();
+                this.searchSubmitted.emit(this.searchValue);
+            }
+        };
+    }
+    connectedCallback() {
+        var _a, _b;
+        // Strip del `title` nativo del host (patrón canon): el browser lo mostraría como tooltip gris.
+        this.el.removeAttribute('title');
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        this.mql = window.matchMedia('(max-width: 767px)');
+        this.isMobile = this.mql.matches;
+        (_b = (_a = this.mql).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.onMql);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_b = (_a = this.mql) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.onMql);
+    }
+    get isOpen() {
+        return this.mobileOpen;
+    }
+    close() {
+        this.mobileOpen = false;
+        this.mobileOpenChange.emit(false);
+    }
+    /** Brand normalizado (null → nombre vacío, como el Angular). */
+    get brandCfg() {
+        var _a;
+        return (_a = this.brand) !== null && _a !== void 0 ? _a : { name: '' };
+    }
+    /** Search normalizado: null → sin search; objeto con defaults aplicados. */
+    get searchCfg() {
+        var _a, _b, _c;
+        const s = this.search;
+        if (!s)
+            return null;
+        const cfg = s === true ? {} : s;
+        const placeholder = (_a = cfg.placeholder) !== null && _a !== void 0 ? _a : 'Buscar…';
+        return { placeholder, ariaLabel: (_b = cfg.ariaLabel) !== null && _b !== void 0 ? _b : placeholder, shortcut: (_c = cfg.shortcut) !== null && _c !== void 0 ? _c : null };
+    }
+    /** Escape cierra el drawer móvil (a11y). No-op en desktop o ya cerrado. */
+    onEscapeKey(ev) {
+        if (ev.key === 'Escape' && this.isMobile && this.isOpen)
+            this.close();
+    }
+    /** iOS: listeners PASIVOS (patrón SuiToque) — engage del :active sin frenar el scroll. */
+    onTouchStart() {
+        /* presencia del listener = engage del touch pipeline iOS. */
+    }
+    onTouchEnd(ev) {
+        var _a, _b, _c;
+        (_c = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'a, button')) === null || _c === void 0 ? void 0 : _c.blur();
+    }
+    /**
+     * Resuelve el value del item activo según `activeRoute`. Match por prefijo
+     * del `route` (o por `value` exacto si el item no tiene route).
+     */
+    get resolvedActiveValue() {
+        var _a;
+        const route = this.activeRoute;
+        if (!route)
+            return null;
+        const all = [...this.items, ...this.secondaryItems, ...this.supportingItems];
+        const match = all.find((it) => {
+            if (it.route && (route === it.route || route.startsWith(it.route + '/')))
+                return true;
+            if (!it.route && route === it.value)
+                return true;
+            return false;
+        });
+        return (_a = match === null || match === void 0 ? void 0 : match.value) !== null && _a !== void 0 ? _a : null;
+    }
+    isItemActive(item) {
+        return this.resolvedActiveValue === item.value;
+    }
+    /** Cuerpo de un item (icono/dot + label + badge + shortcut + chevron). */
+    renderItemBody(item) {
+        const showBadge = item.badge !== undefined && item.badge !== null && item.badge !== '';
+        return [
+            item.colorDot ? (h("span", { class: "sui-sidebar__item-dot", style: { backgroundColor: item.colorDot }, "aria-hidden": "true" })) : item.icon ? (h("sui-icon", { class: "sui-sidebar__item-icon", name: item.icon, size: 20 })) : null,
+            !this.collapsed && [
+                h("span", { class: "sui-sidebar__item-label" }, item.label),
+                showBadge && (h("sui-badge", { class: "sui-sidebar__item-badge", variant: "filled", color: item.variant === 'danger' ? 'red' : 'orange', size: "small", type: "number" }, item.badge)),
+                item.shortcut && h("span", { class: "sui-sidebar__shortcut" }, item.shortcut),
+                h("sui-icon", { class: "sui-sidebar__item-chevron", name: "arrow-right-s-line", size: 20 }),
+            ],
+        ];
+    }
+    /** Renderiza un item como `<a>` (con route) o `<button>` (sin route/action). */
+    renderItem(item) {
+        var _a;
+        const active = this.isItemActive(item);
+        const isDanger = item.variant === 'danger';
+        const tooltip = this.collapsed ? (_a = item.tooltip) !== null && _a !== void 0 ? _a : item.label : undefined;
+        const ariaLabel = this.collapsed ? item.label : undefined;
+        const cls = {
+            'sui-sidebar__item': true,
+            'sui-sidebar__item--active': active,
+            'sui-sidebar__item--danger': isDanger,
+        };
+        if (item.route && !item.action) {
+            return (h("a", { class: cls, href: item.route, target: item.external ? '_blank' : undefined, rel: item.external ? 'noopener noreferrer' : undefined, title: tooltip, "aria-label": ariaLabel, "aria-current": active ? 'page' : undefined, onClick: (ev) => this.onItemClick(item, ev) }, this.renderItemBody(item)));
+        }
+        return (h("button", { type: "button", class: cls, title: tooltip, "aria-label": ariaLabel, "aria-current": active ? 'page' : undefined, onClick: (ev) => this.onItemClick(item, ev) }, this.renderItemBody(item)));
+    }
+    /** Renderiza una sección (label opcional + nav de items). */
+    renderSection(list, label, kind) {
+        if (!list.length)
+            return null;
+        const sectionCls = {
+            'sui-sidebar__section': true,
+            'sui-sidebar__section--secondary': kind === 'secondary',
+            'sui-sidebar__section--supporting': kind === 'supporting',
+            'sui-sidebar__section--anchor-bottom': kind === 'supporting' && this.supportingAnchorBottom,
+        };
+        const labelCls = {
+            'sui-sidebar__section-label': true,
+            'sui-sidebar__section-label--collapsed': this.collapsed,
+        };
+        return (h("div", { class: sectionCls }, label && h("div", { class: labelCls }, label), h("nav", { class: "sui-sidebar__nav" }, list.map((item) => this.renderItem(item)))));
+    }
+    render() {
+        var _a, _b, _c;
+        const p = this.profile;
+        const b = this.brandCfg;
+        const search = this.collapsed ? null : this.searchCfg;
+        const hiddenDrawer = this.isMobile && !this.isOpen;
+        return (h(Host, { key: 'a016139119322086146a0bc20e5a91bd57ce6ceb', "data-sui-open": this.isOpen ? '' : undefined, "data-sui-mobile-mode": this.mobileMode, "data-sui-collapsed": this.collapsed ? '' : undefined, "data-sui-indicator": this.indicatorColor }, this.isMobile && this.showBackdrop && this.isOpen && (h("div", { key: '9b4f4184e8a8ba5e61f44ad608554cd7dcec82bc', class: "sui-sidebar-backdrop", onClick: this.onBackdropClick, "aria-hidden": "true" })), h("aside", { key: '6a1737d086d3100e43b61cd6ac8e17108960818a', class: {
+                'sui-sidebar': true,
+                'sui-sidebar--open': this.isOpen,
+                'sui-sidebar--collapsed': this.collapsed,
+            }, role: "navigation", "aria-hidden": hiddenDrawer ? 'true' : undefined, inert: hiddenDrawer || undefined }, h("header", { key: '748b97d6e2076147f5f7c9ff8332a6ec22aeb430', class: "sui-sidebar__header" }, h("div", { key: 'd6e8490b33007e07fbc5a7e900377247517df281', class: "sui-sidebar__header-card" }, h("div", { key: '5bbe5cfbaa78758311f112a10a3e23f020d8dc84', class: "sui-sidebar__brand-logo" }, b.logo ? (h("img", { src: b.logo, alt: b.name, referrerPolicy: "no-referrer" })) : b.fallback ? (h("span", { class: "sui-sidebar__brand-fallback" }, b.fallback)) : (h("sui-icon", { name: "building-line", size: 20 }))), !this.collapsed && [
+            h("div", { key: '80211fa39e11f67f28dd5484327ae198dae7718e', class: "sui-sidebar__header-info" }, h("span", { key: 'a9c6c659e9b396ca4db7270e0582fd59f179bbb3', class: "sui-sidebar__header-name" }, b.name), b.subtitle &&
+                (b.subtitleAsBadge ? (h("sui-badge", { variant: "filled", color: "orange", size: "small" }, b.subtitle)) : (h("span", { class: "sui-sidebar__header-subtitle" }, b.subtitle)))),
+            this.showHeaderButton && (h("button", { key: '34e2f5c9c8f8de6000056b5d3e74c55b3eb2fbea', type: "button", class: {
+                    'sui-sidebar__compact-btn': true,
+                    'sui-sidebar__compact-btn--active': this.headerButtonActive,
+                }, "aria-expanded": this.headerButtonActive ? 'true' : 'false', "aria-label": "Cambiar workspace", onClick: this.onHeaderButtonClick }, h("sui-icon", { key: '68c17ccb38e49f3f237d6237949521b4fd7b9f58', name: "expand-up-down-line", size: 20 }))),
+        ]), h("div", { key: 'be7adf1693b91baa57c849a49aeed696aa83beee', class: "sui-sidebar__divider", role: "separator" })), h("slot", { key: '97940c7ae6db26eca01ed23ba2d87a3f6dc2558d', name: "header-panel" }), h("div", { key: 'c77d47562fd5c296e09144819b48a44f5cc36894', class: "sui-sidebar__content" }, search && (h("div", { key: '3c3bcaf30fb2fca0cc4e1a5ef51f99ad852f7737', class: "sui-sidebar__search" }, h("sui-icon", { key: '9c1958c303ae20537b5c695c54f51f1d3b8d1d8e', class: "sui-sidebar__search-icon", name: "search-2-line", size: 20 }), h("input", { key: '06eb32c5a08c9b466d411e3f8665b6b3c6ecd4ae', class: "sui-sidebar__search-input", type: "text", placeholder: search.placeholder, "aria-label": search.ariaLabel, enterKeyHint: "search", value: this.searchValue, onInput: this.onSearchInput, onKeyDown: this.onSearchKeyDown }), this.searchValue ? (
+        // Con texto: la X de limpiar reemplaza al shortcut pill.
+        h("button", { type: "button", class: "sui-sidebar__search-clear", "aria-label": "Limpiar b\u00FAsqueda", onClick: this.clearSearch }, h("sui-icon", { name: "close-circle-fill", size: 16 }))) : (search.shortcut && h("span", { class: "sui-sidebar__shortcut" }, search.shortcut)))), this.renderSection(this.items, this.itemsLabel, 'main'), this.renderSection(this.secondaryItems, this.secondaryItemsLabel, 'secondary'), this.renderSection(this.supportingItems, this.supportingItemsLabel, 'supporting'), !this.collapsed && (h("div", { key: '162fb7da3be3da2a5c8259df29310919e34d8a53', class: "sui-sidebar__feature-card" }, h("slot", { key: 'be36a23fc3a38c1b818e512ab8566381f4980ec4', name: "feature-card" })))), p && (h("footer", { key: 'a18df5b5dccc0874efad7a0a0955204ad307df95', class: "sui-sidebar__footer" }, h("div", { key: '93be435bbab9ad9e3e837f18be1971507153c7a5', class: "sui-sidebar__divider sui-sidebar__divider--top", role: "separator" }), h("div", { key: '2a1ec09406867bf75076dabad79b7a0825fe74a1', class: "sui-sidebar__profile" }, h("sui-avatar", { key: '12577bdfe944ad3708a902df13c3b96d34b933a0', size: "lg", src: (_a = p.avatarUrl) !== null && _a !== void 0 ? _a : null, alt: p.name, initials: (_b = p.initials) !== null && _b !== void 0 ? _b : '', status: (_c = p.status) !== null && _c !== void 0 ? _c : null, color: "slate" }), !this.collapsed && [
+            h("div", { key: '52cce5fca71580ed8be2d2b9bdc37eb829f93518', class: "sui-sidebar__profile-info" }, h("div", { key: '7f7e70e9cf9755c4a2b0fad6e0f01881a3b70e51', class: "sui-sidebar__profile-name-row" }, h("span", { key: 'df68cc6c0a951476c145ee79f617f7f6cc28e26a', class: "sui-sidebar__profile-name" }, p.name), p.verified && (h("sui-icon", { key: '21acae923307e6a4d6fa36fcccf80c4284dc954a', class: "sui-sidebar__profile-verified", name: "verified-badge-fill", size: 20, "aria-label": "Verificado" }))), p.email && h("span", { key: 'd6811b61b34666d6e21f668fe607c2f2a4f256ef', class: "sui-sidebar__profile-email" }, p.email)),
+            this.profileDropdown && (h("button", { key: 'ccd87e7e617c8a12bb905aab13557049025f4c95', type: "button", class: "sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost", "aria-label": "Opciones de perfil", onClick: this.onProfileButtonClick }, h("sui-icon", { key: '2c367478733c2195ade7a726787ce022210aceae', name: "arrow-right-s-line", size: 20 }))),
+        ]))))));
+    }
+    static get is() { return "sui-sidebar"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sui-sidebar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sui-sidebar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "collapsed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado colapsado (icon-only, 80px). Oculta labels/subt\u00EDtulos/shortcuts/\nbadges y centra los iconos. Figma variant Collapsed=On. Default false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "collapsed",
+                "defaultValue": "false"
+            },
+            "indicatorColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarIndicatorColor",
+                    "resolved": "\"brand\" | \"information\"",
+                    "references": {
+                        "SuiSidebarIndicatorColor": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarIndicatorColor",
+                            "referenceLocation": "SuiSidebarIndicatorColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color del indicator bar + icon del item activo:\n - 'brand' (default): naranja --sui-primary-base \u2014 el accent del DS.\n - 'information': azul --sui-state-information-base (Figma canon, opt-in).\nEn HTML el atributo es `indicator-color`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "indicator-color",
+                "defaultValue": "'brand'"
+            },
+            "brand": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarBrandConfig | null",
+                    "resolved": "SuiSidebarBrandConfig | null",
+                    "references": {
+                        "SuiSidebarBrandConfig": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarBrandConfig",
+                            "referenceLocation": "SuiSidebarBrandConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Config del brand header: `{ name, subtitle?, subtitleAsBadge?, logo?, fallback? }`\n(PROPERTY: `.brand=${{...}}`). `subtitleAsBadge` pinta el subtitle como\n`<sui-badge color=\"orange\">` (roles tipo \u00ABSUPERADMIN\u00BB). `null` = sin nombre."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "showHeaderButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el Compact Button del header (expand-up-down-line) \u2014 workspace\nswitcher de Figma. Emite `headerButtonClicked` al click. Default false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-header-button",
+                "defaultValue": "false"
+            },
+            "headerButtonActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado abierto del Compact Button del header: fondo strong-950 e icono\nblanco mientras el switcher est\u00E9 desplegado (aria-expanded). Default false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-button-active",
+                "defaultValue": "false"
+            },
+            "search": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarSearchConfig | boolean | null",
+                    "resolved": "SuiSidebarSearchConfig | boolean | null",
+                    "references": {
+                        "SuiSidebarSearchConfig": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarSearchConfig",
+                            "referenceLocation": "SuiSidebarSearchConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search encima de las secciones: `false`/`null` (default) sin search \u00B7 `true`\ncon defaults (placeholder 'Buscar\u2026') \u00B7 `{ placeholder?, ariaLabel?, shortcut? }`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search",
+                "defaultValue": "false"
+            },
+            "searchValue": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor del input de b\u00FAsqueda (2-way v\u00EDa `searchValueChange`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-value",
+                "defaultValue": "''"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarItem[]",
+                    "resolved": "SuiSidebarItem[]",
+                    "references": {
+                        "SuiSidebarItem": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarItem",
+                            "referenceLocation": "SuiSidebarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Items principales. Pasar como PROPERTY (`.items=${[...]}`), no atributo."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "secondaryItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarItem[]",
+                    "resolved": "SuiSidebarItem[]",
+                    "references": {
+                        "SuiSidebarItem": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarItem",
+                            "referenceLocation": "SuiSidebarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secci\u00F3n secundaria, separada por gap (sin divisor horizontal)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "supportingItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarItem[]",
+                    "resolved": "SuiSidebarItem[]",
+                    "references": {
+                        "SuiSidebarItem": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarItem",
+                            "referenceLocation": "SuiSidebarItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tercera secci\u00F3n \"Supporting Content\". Con `supportingAnchorBottom=true` se\nancla al fondo del content (flex:1 + justify-end) \u2014 t\u00EDpico Settings/Support."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "supportingAnchorBottom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Ancla supportingItems al fondo del content (Figma justify-end). Default true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-anchor-bottom",
+                "defaultValue": "true"
+            },
+            "itemsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label opcional encima de items (ej. \"MAIN\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items-label",
+                "defaultValue": "null"
+            },
+            "secondaryItemsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label opcional encima de secondaryItems."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-items-label",
+                "defaultValue": "null"
+            },
+            "supportingItemsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label opcional encima de supportingItems."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "supporting-items-label",
+                "defaultValue": "null"
+            },
+            "activeRoute": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active route \u2014 resuelve el item activo. Match por prefijo del `route`\n(ej. '/master/inicio' activa '/master/inicio/sub'), o por `value` exacto\npara items sin route. En HTML el atributo es `active-route`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-route",
+                "defaultValue": "null"
+            },
+            "profile": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarProfile | null",
+                    "resolved": "SuiSidebarProfile | null",
+                    "references": {
+                        "SuiSidebarProfile": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarProfile",
+                            "referenceLocation": "SuiSidebarProfile"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Perfil del footer. Pasar como PROPERTY (`.profile=${{...}}`)."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            },
+            "profileDropdown": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Muestra el Compact Button dropdown (arrow-right-s-line) en el footer del\nperfil. Emite `profileClicked`. Default false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "profile-dropdown",
+                "defaultValue": "false"
+            },
+            "mobileOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Estado open/closed del drawer m\u00F3vil (\u2264767px). 2-way v\u00EDa `mobileOpenChange`.\nEl componente lo pasa a false al click en el backdrop, con Escape y (si\ncloseOnItemClick) al click en un item. En desktop no afecta el layout."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mobile-open",
+                "defaultValue": "false"
+            },
+            "closeOnItemClick": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Cerrar el drawer m\u00F3vil al click en un nav item (solo en m\u00F3vil). Default true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-item-click",
+                "defaultValue": "true"
+            },
+            "showBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mostrar el backdrop overlay (mobile drawer). Default true."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-backdrop",
+                "defaultValue": "true"
+            },
+            "mobileMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SuiSidebarMobileMode",
+                    "resolved": "\"drawer\" | \"sheet\"",
+                    "references": {
+                        "SuiSidebarMobileMode": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarMobileMode",
+                            "referenceLocation": "SuiSidebarMobileMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Comportamiento mobile (\u2264767px): 'drawer' (compacto) o 'sheet' (casi\nfullscreen). En desktop el sidebar es fijo siempre. En HTML: `mobile-mode`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mobile-mode",
+                "defaultValue": "'drawer'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMobile": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClicked",
+                "name": "itemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en cualquier item. Payload = el SuiSidebarItem clickeado."
+                },
+                "complexType": {
+                    "original": "SuiSidebarItem",
+                    "resolved": "SuiSidebarItem",
+                    "references": {
+                        "SuiSidebarItem": {
+                            "location": "import",
+                            "path": "./sui-sidebar.data",
+                            "id": "src/components/sui-sidebar/sui-sidebar.data.ts::SuiSidebarItem",
+                            "referenceLocation": "SuiSidebarItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "logoutClicked",
+                "name": "logoutClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en un item con `action='logout'`."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "backdropClicked",
+                "name": "backdropClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en el backdrop (mobile)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "headerButtonClicked",
+                "name": "headerButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en el Compact Button del header (workspace switcher)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "profileClicked",
+                "name": "profileClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Click en el Compact Button dropdown del footer del perfil."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "searchSubmitted",
+                "name": "searchSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submit del search input (Enter). Payload = valor actual."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "mobileOpenChange",
+                "name": "mobileOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "2-way de `mobileOpen`: se emite al cerrarlo el componente (backdrop / Escape / item)."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "searchValueChange",
+                "name": "searchValueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "2-way de `searchValue`: se emite en cada input."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onEscapeKey",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "touchstart",
+                "method": "onTouchStart",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "touchend",
+                "method": "onTouchEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}