Componente del kit · navegación

Sidebar

El carril es la única superficie oscura del tema claro y el ancla de identidad del inquilino: monograma, conmutador de organización, dos grupos de navegación, ficha de usuario y conmutador de tema. Sus colores se derivan del contrato global, no se escriben a mano.

.sidebar.brand.orgswitch.navitem .navitem__count.userchip.railbtn.envnote
Reglas de superficie oscura
--rail-bg
color-mix(in oklab, var(--ink-abs), var(--accent) 18%) — tinta absoluta teñida con el acento.
--rail-line
Luz translúcida al 13 %. Sobre fondo oscuro nunca se usa un borde oscuro sólido.
--rail-muted
5,64:1 contra el fondo del carril. Es el color por defecto de los elementos no seleccionados.
--rail-active
4,55:1 con --rail-fg. En tema oscuro sube al 45 % de base porque el carril se hunde más.
:focus-visible
El aro se invierte a --rail-fg: el aro oscuro sería invisible aquí.
aria-current
La selección vive en el atributo, no en una clase.
Por debajo de 1024px el carril colapsa a 68px solo con iconos; por debajo de 760px pasa a tira horizontal.
Uso en una pantalla real
<aside class="sidebar"
       data-sidebar
       data-active="inventario"
       data-role="centro"></aside>

data-role: admin · nutricionista · centro. data-active: panel, programas, servicio, inventario, facturacion, configuracion.

Este ejemplo usa la variante del kit (data-kit-rail, en kit.js) para que los enlaces resuelvan desde ui_kits/app/components/. El marcado que produce es el mismo que renderSidebar() del runtime.