npm - @ajuarezso/sui-stencil - Versions diffs - 0.0.0-stage → 0.1.0 - Mend

@ajuarezso/sui-stencil 0.0.0-stage → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2305) hide show

package/dist/cjs/sui-sidebar.cjs.entry.js ADDED Viewed

@@ -0,0 +1,294 @@
+'use strict';
+var index = require('./index-DtYKdVSu.js');
+const suiSidebarCss = () => `@charset "UTF-8";.sc-sui-sidebar-h{display:contents;font-family:var(--sui-font-sans, "Satoshi", system-ui, sans-serif)}.sc-sui-sidebar-h a.sc-sui-sidebar,.sc-sui-sidebar-h button.sc-sui-sidebar{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.sui-sidebar-backdrop.sc-sui-sidebar{position:fixed;inset:0;z-index:299;background:rgba(51, 51, 51, 0.24);animation:sui-sidebar-fade-in 200ms ease-out}.sui-sidebar.sc-sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:"ss11" 1, "calt" 0, "liga" 0}.sui-sidebar__header.sc-sui-sidebar{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top, 0px))}.sui-sidebar__header-card.sc-sui-sidebar{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo.sc-sui-sidebar{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo.sc-sui-sidebar img.sc-sui-sidebar{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback.sc-sui-sidebar{font-size:18px;line-height:1}.sui-sidebar__compact-btn.sc-sui-sidebar{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color 120ms ease-out, color 120ms ease-out}@media (hover: hover) and (pointer: fine){.sui-sidebar__compact-btn.sc-sui-sidebar:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn.sc-sui-sidebar:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn.sc-sui-sidebar:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost.sc-sui-sidebar{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__compact-btn--active.sc-sui-sidebar,.sui-sidebar__compact-btn--active.sc-sui-sidebar:hover,.sui-sidebar__compact-btn--active.sc-sui-sidebar:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.sui-sidebar__header-info.sc-sui-sidebar{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name.sc-sui-sidebar{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle.sc-sui-sidebar{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider.sc-sui-sidebar{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top.sc-sui-sidebar{top:0;bottom:auto}.sui-sidebar__content.sc-sui-sidebar{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content.sc-sui-sidebar::-webkit-scrollbar{display:none}.sui-sidebar__section.sc-sui-sidebar{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary.sc-sui-sidebar,.sui-sidebar__section--supporting.sc-sui-sidebar{gap:6px}.sui-sidebar__section--anchor-bottom.sc-sui-sidebar{margin-top:auto}.sui-sidebar__section-label.sc-sui-sidebar{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:0.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed.sc-sui-sidebar{padding:4px 0;text-align:center}.sui-sidebar__search.sc-sui-sidebar{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, 0.031372549));box-sizing:border-box}.sui-sidebar__search-icon.sc-sui-sidebar{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input.sc-sui-sidebar{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input.sc-sui-sidebar::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}@media (max-width: 767px){.sui-sidebar__search-input.sc-sui-sidebar{font-size:16px}}.sui-sidebar__shortcut.sc-sui-sidebar{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:0.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav.sc-sui-sidebar{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item.sc-sui-sidebar{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color 120ms ease-out, color 120ms ease-out}@media (hover: hover) and (pointer: fine){.sui-sidebar__item.sc-sui-sidebar:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item.sc-sui-sidebar:hover .sui-sidebar__item-label.sc-sui-sidebar,.sui-sidebar__item.sc-sui-sidebar:hover .sui-sidebar__item-icon.sc-sui-sidebar{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item.sc-sui-sidebar:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item.sc-sui-sidebar:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon.sc-sui-sidebar{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color 120ms ease-out}.sui-sidebar__item-label.sc-sui-sidebar{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 120ms ease-out}.sui-sidebar__item-badge.sc-sui-sidebar{flex-shrink:0}.sui-sidebar__item-dot.sc-sui-sidebar{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron.sc-sui-sidebar{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}.sc-sui-sidebar-h{--_sui-sidebar-indicator:var(--sui-primary-base, #fa7319)}[data-sui-indicator=information].sc-sui-sidebar-h{--_sui-sidebar-indicator:var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active.sc-sui-sidebar{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active.sc-sui-sidebar .sui-sidebar__item-label.sc-sui-sidebar{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active.sc-sui-sidebar .sui-sidebar__item-icon.sc-sui-sidebar{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active.sc-sui-sidebar .sui-sidebar__item-chevron.sc-sui-sidebar{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active.sc-sui-sidebar::before{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media (hover: hover) and (pointer: fine){.sui-sidebar__item--active.sc-sui-sidebar:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger.sc-sui-sidebar .sui-sidebar__item-icon.sc-sui-sidebar,.sui-sidebar__item--danger.sc-sui-sidebar .sui-sidebar__item-label.sc-sui-sidebar{color:var(--sui-state-error-base, #fb3748)}@media (hover: hover) and (pointer: fine){.sui-sidebar__item--danger.sc-sui-sidebar:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, 0.0980392157))}.sui-sidebar__item--danger.sc-sui-sidebar:hover .sui-sidebar__item-icon.sc-sui-sidebar,.sui-sidebar__item--danger.sc-sui-sidebar:hover .sui-sidebar__item-label.sc-sui-sidebar{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger.sc-sui-sidebar:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, 0.1607843137))}.sui-sidebar__footer.sc-sui-sidebar{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px))}.sui-sidebar__profile.sc-sui-sidebar{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info.sc-sui-sidebar{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row.sc-sui-sidebar{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name.sc-sui-sidebar{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-0.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified.sc-sui-sidebar{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email.sc-sui-sidebar{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card.sc-sui-sidebar{width:100%}.sui-sidebar__feature-card.sc-sui-sidebar:not(:has(*)){display:none}[data-sui-collapsed].sc-sui-sidebar-h .sui-sidebar.sc-sui-sidebar{width:80px}[data-sui-collapsed].sc-sui-sidebar-h .sui-sidebar__header-card.sc-sui-sidebar,[data-sui-collapsed].sc-sui-sidebar-h .sui-sidebar__profile.sc-sui-sidebar{justify-content:center}[data-sui-collapsed].sc-sui-sidebar-h .sui-sidebar__content.sc-sui-sidebar{padding-inline:12px}[data-sui-collapsed].sc-sui-sidebar-h .sui-sidebar__item.sc-sui-sidebar{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}[data-sui-collapsed].sc-sui-sidebar-h .sui-sidebar__item--active.sc-sui-sidebar::before{left:-22px}@media (max-width: 767px){.sui-sidebar.sc-sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw, 360px);box-sizing:border-box;padding-left:env(safe-area-inset-left, 0px);transform:translateX(-100%);transition:transform 240ms cubic-bezier(0.23, 1, 0.32, 1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px rgba(14, 18, 27, 0)}.sui-sidebar--open.sc-sui-sidebar{transform:translateX(0);box-shadow:4px 0 24px rgba(14, 18, 27, 0.1)}[data-sui-mobile-mode=sheet].sc-sui-sidebar-h .sui-sidebar.sc-sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item.sc-sui-sidebar{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms cubic-bezier(0.23, 1, 0.32, 1)}.sui-sidebar__item.sc-sui-sidebar:active{transform:scale(0.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon.sc-sui-sidebar{width:24px;height:24px}.sui-sidebar__item-label.sc-sui-sidebar{font-size:17px;line-height:24px;letter-spacing:-0.01em}}@keyframes sui-sidebar-fade-in{from{opacity:0}to{opacity:1}}.sui-sidebar__search-clear.sc-sui-sidebar{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:none;cursor:pointer;color:var(--sui-text-soft-400, #99a0ae)}.sui-sidebar__search-clear.sc-sui-sidebar:hover{color:var(--sui-text-sub-600, #525866)}`;
+const SuiSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemClicked = index.createEvent(this, "itemClicked");
+        this.logoutClicked = index.createEvent(this, "logoutClicked");
+        this.backdropClicked = index.createEvent(this, "backdropClicked");
+        this.headerButtonClicked = index.createEvent(this, "headerButtonClicked");
+        this.profileClicked = index.createEvent(this, "profileClicked");
+        this.searchSubmitted = index.createEvent(this, "searchSubmitted");
+        this.mobileOpenChange = index.createEvent(this, "mobileOpenChange");
+        this.searchValueChange = index.createEvent(this, "searchValueChange");
+        // ── 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 ? (index.h("span", { class: "sui-sidebar__item-dot", style: { backgroundColor: item.colorDot }, "aria-hidden": "true" })) : item.icon ? (index.h("sui-icon", { class: "sui-sidebar__item-icon", name: item.icon, size: 20 })) : null,
+            !this.collapsed && [
+                index.h("span", { class: "sui-sidebar__item-label" }, item.label),
+                showBadge && (index.h("sui-badge", { class: "sui-sidebar__item-badge", variant: "filled", color: item.variant === 'danger' ? 'red' : 'orange', size: "small", type: "number" }, item.badge)),
+                item.shortcut && index.h("span", { class: "sui-sidebar__shortcut" }, item.shortcut),
+                index.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 (index.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 (index.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 (index.h("div", { class: sectionCls }, label && index.h("div", { class: labelCls }, label), index.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 (index.h(index.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 && (index.h("div", { key: '9b4f4184e8a8ba5e61f44ad608554cd7dcec82bc', class: "sui-sidebar-backdrop", onClick: this.onBackdropClick, "aria-hidden": "true" })), index.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 }, index.h("header", { key: '748b97d6e2076147f5f7c9ff8332a6ec22aeb430', class: "sui-sidebar__header" }, index.h("div", { key: 'd6e8490b33007e07fbc5a7e900377247517df281', class: "sui-sidebar__header-card" }, index.h("div", { key: '5bbe5cfbaa78758311f112a10a3e23f020d8dc84', class: "sui-sidebar__brand-logo" }, b.logo ? (index.h("img", { src: b.logo, alt: b.name, referrerPolicy: "no-referrer" })) : b.fallback ? (index.h("span", { class: "sui-sidebar__brand-fallback" }, b.fallback)) : (index.h("sui-icon", { name: "building-line", size: 20 }))), !this.collapsed && [
+            index.h("div", { key: '80211fa39e11f67f28dd5484327ae198dae7718e', class: "sui-sidebar__header-info" }, index.h("span", { key: 'a9c6c659e9b396ca4db7270e0582fd59f179bbb3', class: "sui-sidebar__header-name" }, b.name), b.subtitle &&
+                (b.subtitleAsBadge ? (index.h("sui-badge", { variant: "filled", color: "orange", size: "small" }, b.subtitle)) : (index.h("span", { class: "sui-sidebar__header-subtitle" }, b.subtitle)))),
+            this.showHeaderButton && (index.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 }, index.h("sui-icon", { key: '68c17ccb38e49f3f237d6237949521b4fd7b9f58', name: "expand-up-down-line", size: 20 }))),
+        ]), index.h("div", { key: 'be7adf1693b91baa57c849a49aeed696aa83beee', class: "sui-sidebar__divider", role: "separator" })), index.h("slot", { key: '97940c7ae6db26eca01ed23ba2d87a3f6dc2558d', name: "header-panel" }), index.h("div", { key: 'c77d47562fd5c296e09144819b48a44f5cc36894', class: "sui-sidebar__content" }, search && (index.h("div", { key: '3c3bcaf30fb2fca0cc4e1a5ef51f99ad852f7737', class: "sui-sidebar__search" }, index.h("sui-icon", { key: '9c1958c303ae20537b5c695c54f51f1d3b8d1d8e', class: "sui-sidebar__search-icon", name: "search-2-line", size: 20 }), index.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.
+        index.h("button", { type: "button", class: "sui-sidebar__search-clear", "aria-label": "Limpiar b\u00FAsqueda", onClick: this.clearSearch }, index.h("sui-icon", { name: "close-circle-fill", size: 16 }))) : (search.shortcut && index.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 && (index.h("div", { key: '162fb7da3be3da2a5c8259df29310919e34d8a53', class: "sui-sidebar__feature-card" }, index.h("slot", { key: 'be36a23fc3a38c1b818e512ab8566381f4980ec4', name: "feature-card" })))), p && (index.h("footer", { key: 'a18df5b5dccc0874efad7a0a0955204ad307df95', class: "sui-sidebar__footer" }, index.h("div", { key: '93be435bbab9ad9e3e837f18be1971507153c7a5', class: "sui-sidebar__divider sui-sidebar__divider--top", role: "separator" }), index.h("div", { key: '2a1ec09406867bf75076dabad79b7a0825fe74a1', class: "sui-sidebar__profile" }, index.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 && [
+            index.h("div", { key: '52cce5fca71580ed8be2d2b9bdc37eb829f93518', class: "sui-sidebar__profile-info" }, index.h("div", { key: '7f7e70e9cf9755c4a2b0fad6e0f01881a3b70e51', class: "sui-sidebar__profile-name-row" }, index.h("span", { key: 'df68cc6c0a951476c145ee79f617f7f6cc28e26a', class: "sui-sidebar__profile-name" }, p.name), p.verified && (index.h("sui-icon", { key: '21acae923307e6a4d6fa36fcccf80c4284dc954a', class: "sui-sidebar__profile-verified", name: "verified-badge-fill", size: 20, "aria-label": "Verificado" }))), p.email && index.h("span", { key: 'd6811b61b34666d6e21f668fe607c2f2a4f256ef', class: "sui-sidebar__profile-email" }, p.email)),
+            this.profileDropdown && (index.h("button", { key: 'ccd87e7e617c8a12bb905aab13557049025f4c95', type: "button", class: "sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost", "aria-label": "Opciones de perfil", onClick: this.onProfileButtonClick }, index.h("sui-icon", { key: '2c367478733c2195ade7a726787ce022210aceae', name: "arrow-right-s-line", size: 20 }))),
+        ]))))));
+    }
+    get el() { return index.getElement(this); }
+};
+SuiSidebar.style = suiSidebarCss();
+exports.sui_sidebar = SuiSidebar;