{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-05",
  "title": "Dual-Rail Sidebar",
  "type": "registry:block",
  "description": "Dual-rail sidebar -- a thin always-visible icon column on the far left holds quick shortcuts (a subset of the full nav), paired with a wider main panel for the brand, search, sections, and footer. Uses collapsible=\"icon\": when the user collapses, only the rail stays. On mobile the kit Sheet shows the full dual rail. Requires the parent SidebarProvider to set both widths: style={{ '--sidebar-width': '19.5rem', '--sidebar-width-icon': '3.5rem' }}. Modeled on the GR8R HRMS admin shell.",
  "categories": [
    "layout",
    "sidebar"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/sidebar-05/sidebar-05.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport {\n  Bell,\n  Briefcase,\n  Calendar,\n  ChartLine,\n  ChevronsUpDown,\n  ClipboardList,\n  CreditCard,\n  FileText,\n  Folder,\n  Gauge,\n  Headphones,\n  HelpCircle,\n  Home,\n  Inbox,\n  LayoutDashboard,\n  Lock,\n  Mail,\n  MessageSquare,\n  Moon,\n  Search,\n  Send,\n  Settings as SettingsIcon,\n  Star,\n  Sun,\n  Users,\n} from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/dropdown-menu/dropdown-menu'\nimport '../../components/input/input'\nimport type { UipInput } from '../../components/input/input'\nimport '../../components/sidebar/sidebar'\nimport type { UipSidebarProvider } from '../../components/sidebar/sidebar'\n\ntype RailId = 'home' | 'projects' | 'inbox' | 'messages' | 'support' | 'settings'\n\nconst rail = [\n  { id: 'home' as const, icon: Home, iconName: 'house', label: 'Home' },\n  { id: 'projects' as const, icon: Folder, iconName: 'folder', label: 'Projects' },\n  { id: 'inbox' as const, icon: Bell, iconName: 'bell', label: 'Inbox' },\n  { id: 'messages' as const, icon: MessageSquare, iconName: 'message-square', label: 'Messages' },\n]\nconst railLower = [\n  { id: 'support' as const, icon: Headphones, iconName: 'headphones', label: 'Support' },\n  { id: 'settings' as const, icon: SettingsIcon, iconName: 'settings', label: 'Settings' },\n]\n\nconst titles: Record<RailId, string> = {\n  home: 'Workspace',\n  projects: 'Projects',\n  inbox: 'Inbox',\n  messages: 'Messages',\n  support: 'Support',\n  settings: 'Settings',\n}\n\nfunction isDarkActive(): boolean {\n  return document.documentElement.classList.contains('dark')\n}\n\nfunction setDark(dark: boolean) {\n  document.documentElement.classList.toggle('dark', dark)\n  try {\n    localStorage.setItem('uipkge-theme', dark ? 'dark' : 'light')\n  } catch {\n    // ignore\n  }\n}\n\nfunction brandMark(classes: string) {\n  return html`<svg viewBox=\"0 0 24 24\" class=${classes} fill=\"currentColor\" aria-hidden=\"true\">\n    <rect x=\"2\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" />\n    <rect x=\"13\" y=\"2\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n    <rect x=\"2\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" opacity=\"0.55\" />\n    <rect x=\"13\" y=\"13\" width=\"9\" height=\"9\" rx=\"1.5\" />\n  </svg>`\n}\n\n// Dual-rail sidebar with master/detail behavior. The thin rail picks the\n// section; the main panel renders the rows for the active section. One\n// <uip-sidebar collapsible=\"icon\"> contains rail + panel as inline flex siblings.\n//\n// Desktop: when collapsed (toggle clicked), the kit shrinks the sidebar to\n// --sidebar-width-icon. The panel hides via group-data-[collapsible=icon];\n// the mobile sheet always shows rail+panel.\n//\n// IMPORTANT: the parent <uip-sidebar-provider> must set BOTH custom widths,\n// e.g. style=\"--sidebar-width: 19.5rem; --sidebar-width-icon: 3.5rem\".\n// To wire to your router, replace the state-based switch with route matches\n// (e.g. set active = 'projects' on /projects/*).\n\n/**\n * <uip-sidebar-05> — the registry Sidebar05 block as a web component.\n *\n * Class strings are React's verbatim. Rail clicks use the surrounding\n * <uip-sidebar-provider> (state / setOpen / isMobile — React's useSidebar);\n * the block re-renders when the provider's `open-change` fires. The search\n * field is <uip-input> with `prefix`/`suffix` slots (React's SidebarInput\n * prefix/suffix props). The theme toggle writes the `dark` class on\n * documentElement directly (the `next-themes` dependency is not ported).\n * No props, no events: edit the markup in place.\n */\nexport class UipSidebar05 extends LitElement {\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n  // :host display can't be a utility class (the host has no template of its own).\n  static styles = [tailwind, css`:host { display: block; }`]\n\n  static properties = {\n    active: { state: true },\n    isDark: { state: true },\n    query: { state: true },\n  }\n\n  private active: RailId = 'home'\n  private isDark = false\n  private query = ''\n  private media?: MediaQueryList\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'sidebar-05')\n    this.isDark = isDarkActive()\n    // Re-render when the provider opens/closes or the viewport crosses the\n    // mobile breakpoint (React's useSidebar re-render).\n    this.addEventListener('open-change', this.rerender)\n    this.media = window.matchMedia('(max-width: 768px)')\n    this.media.addEventListener('change', this.rerender)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('open-change', this.rerender)\n    this.media?.removeEventListener('change', this.rerender)\n  }\n\n  private rerender = () => this.requestUpdate()\n\n  private get provider(): UipSidebarProvider | null {\n    const p = this.closest('uip-sidebar-provider')\n    return (p as UipSidebarProvider | null) ?? null\n  }\n\n  // Slack-style rail click: expand the panel if collapsed, or collapse if\n  // the user clicks the already-active icon while expanded. On mobile the\n  // sheet open/close is owned by the inset trigger, so we just swap active.\n  private selectRail(id: RailId) {\n    const provider = this.provider\n    if (provider?.isMobile) {\n      this.active = id\n      return\n    }\n    if (provider && provider.state === 'expanded' && this.active === id) {\n      provider.setOpen(false)\n      return\n    }\n    this.active = id\n    provider?.setOpen(true)\n  }\n\n  private railButton(item: { id: RailId; icon: typeof Home; iconName: string; label: string }) {\n    return html`\n      <button\n        type=\"button\"\n        aria-label=${item.label}\n        aria-current=${this.active === item.id ? 'page' : nothing}\n        class=${[\n          'relative flex aspect-square size-9 items-center justify-center rounded-lg transition-colors',\n          this.active === item.id\n            ? 'bg-sidebar-accent text-foreground'\n            : 'text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground',\n        ].join(' ')}\n        @click=${() => this.selectRail(item.id)}\n      >\n        ${this.active === item.id\n          ? html`<span class=\"bg-sidebar-primary absolute top-1/2 left-0 h-5 w-0.5 -translate-y-1/2 rounded-r-full\"></span>`\n          : ''}\n        ${icon(item.icon, item.iconName, 'size-4')}\n      </button>\n    `\n  }\n\n  render() {\n    const isMobile = this.provider?.isMobile ?? false\n    return html`\n      <uip-sidebar collapsible=\"icon\">\n        <div class=\"flex h-full w-full\">\n          <aside class=\"border-sidebar-border flex w-14 shrink-0 flex-col items-center gap-0.5 border-r py-2\">\n            <button\n              type=\"button\"\n              aria-label=\"uipkge\"\n              class=\"bg-sidebar-primary text-sidebar-primary-foreground mb-1 flex aspect-square size-9 items-center justify-center rounded-lg shadow-sm ring-1 ring-white/10 transition-transform ring-inset hover:scale-105\"\n            >\n              ${brandMark('size-4')}\n            </button>\n\n            ${rail.map((item) => this.railButton(item))}\n\n            <div class=\"bg-sidebar-border/70 my-2 h-px w-7\"></div>\n\n            ${railLower.map((item) => this.railButton(item))}\n\n            <div class=\"mt-auto flex flex-col items-center gap-1.5\">\n              <button\n                type=\"button\"\n                aria-label=${this.isDark ? 'Switch to light theme' : 'Switch to dark theme'}\n                class=\"text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground flex aspect-square size-9 items-center justify-center rounded-lg transition-colors\"\n                @click=${() => {\n                  this.isDark = !this.isDark\n                  setDark(this.isDark)\n                }}\n              >\n                ${this.isDark ? icon(Sun, 'sun', 'size-4') : icon(Moon, 'moon', 'size-4')}\n              </button>\n\n              <uip-dropdown-menu class=\"[&::part(content)]:min-w-56 [&::part(content)]:rounded-lg\">\n                <button\n                  slot=\"trigger\"\n                  type=\"button\"\n                  aria-label=\"James Carter\"\n                  class=\"ring-offset-sidebar focus-visible:ring-ring data-[state=open]:ring-ring rounded-full transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none data-[state=open]:ring-2\"\n                >\n                  <uip-avatar class=\"size-8\">\n                    <uip-avatar-fallback class=\"bg-sidebar-accent text-sidebar-accent-foreground text-xs\">JC</uip-avatar-fallback>\n                  </uip-avatar>\n                </button>\n                <uip-dropdown-menu-content side=${isMobile ? 'top' : 'right'} align=\"end\" side-offset=\"8\">\n                  <uip-dropdown-menu-label>\n                    <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                      <uip-avatar class=\"size-8 rounded-lg\">\n                        <uip-avatar-fallback class=\"bg-sidebar-accent text-sidebar-accent-foreground rounded-lg text-xs\">JC</uip-avatar-fallback>\n                      </uip-avatar>\n                      <div class=\"grid flex-1 leading-tight\">\n                        <span class=\"truncate font-medium\">James Carter</span>\n                        <span class=\"text-muted-foreground truncate text-xs\">Admin</span>\n                      </div>\n                    </div>\n                  </uip-dropdown-menu-label>\n                  <uip-dropdown-menu-separator></uip-dropdown-menu-separator>\n                  <uip-dropdown-menu-item>${icon(Send, 'send', 'size-4')} Invite teammates</uip-dropdown-menu-item>\n                  <uip-dropdown-menu-item>${icon(SettingsIcon, 'settings', 'size-4')} Workspace settings</uip-dropdown-menu-item>\n                </uip-dropdown-menu-content>\n              </uip-dropdown-menu>\n            </div>\n          </aside>\n\n          <div class=\"flex min-w-0 flex-1 flex-col group-data-[collapsible=icon]:hidden\">\n            <uip-sidebar-header>\n              <uip-sidebar-menu>\n                <uip-sidebar-menu-item>\n                  <uip-sidebar-menu-button size=\"lg\">\n                    <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg\">\n                      ${brandMark('size-4')}\n                    </div>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"font-display truncate font-bold\">uipkge</span>\n                      <span class=\"text-muted-foreground truncate text-xs\">${titles[this.active]}</span>\n                    </div>\n                    ${icon(ChevronsUpDown, 'chevrons-up-down', 'ml-auto size-4')}\n                  </uip-sidebar-menu-button>\n                </uip-sidebar-menu-item>\n              </uip-sidebar-menu>\n\n              <div class=\"px-1 pt-1\">\n                <uip-input\n                  type=\"text\"\n                  placeholder=\"Search...\"\n                  allow-clear\n                  class=\"[&::part(control)]:bg-background [&::part(control)]:h-8 [&::part(control)]:shadow-none\"\n                  .value=${this.query}\n                  @input=${(e: Event) => {\n                    this.query = (e.target as UipInput).value\n                  }}\n                >\n                  <span slot=\"prefix\">${icon(Search, 'search', 'size-3.5')}</span>\n                  <kbd slot=\"suffix\" class=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-0.5 rounded border px-1 font-mono text-xs font-medium select-none\">\n                    <span>&#8984;</span>F\n                  </kbd>\n                </uip-input>\n              </div>\n            </uip-sidebar-header>\n\n            <uip-sidebar-content>\n              ${this.active === 'home'\n                ? html`\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button is-active>\n                              ${icon(LayoutDashboard, 'layout-dashboard', 'size-4')} <span>Dashboard</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Users, 'users', 'size-4')} <span>Employees</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Briefcase, 'briefcase', 'size-4')} <span>Clients</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Folder, 'folder', 'size-4')} <span>Projects</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Workforce</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Calendar, 'calendar', 'size-4')} <span>Calendar</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(ClipboardList, 'clipboard-list', 'size-4')} <span>Attendance</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Mail, 'mail', 'size-4')} <span>Mail</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(ChartLine, 'chart-line', 'size-4')} <span>Analytics</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n                  `\n                : ''}\n              ${this.active === 'projects'\n                ? html`\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Pinned</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          ${[\n                            { tile: 'bg-chart-1', name: 'Shift Planner' },\n                            { tile: 'bg-chart-2', name: 'Training Portal' },\n                            { tile: 'bg-chart-3', name: 'Performance Hub' },\n                            { tile: 'bg-chart-4', name: 'Expense Claims' },\n                          ].map(\n                            (p) => html`\n                              <uip-sidebar-menu-item>\n                                <uip-sidebar-menu-button>\n                                  <div class=${`${p.tile} flex aspect-square size-5 shrink-0 items-center justify-center rounded-md text-white`}>\n                                    ${icon(Folder, 'folder', 'size-3')}\n                                  </div>\n                                  <span>${p.name}</span>\n                                  ${icon(Star, 'star', 'text-warning ml-auto size-3.5 fill-current')}\n                                </uip-sidebar-menu-button>\n                              </uip-sidebar-menu-item>\n                            `,\n                          )}\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Recent</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          ${['Onboarding 2026', 'Q1 hiring plan', 'Compliance refresh'].map(\n                            (name) => html`\n                              <uip-sidebar-menu-item>\n                                <uip-sidebar-menu-button>\n                                  ${icon(Folder, 'folder', 'size-4')} <span>${name}</span>\n                                </uip-sidebar-menu-button>\n                              </uip-sidebar-menu-item>\n                            `,\n                          )}\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n                  `\n                : ''}\n              ${this.active === 'inbox'\n                ? html`\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Today</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Inbox, 'inbox', 'size-4')} <span>3 PTO requests pending</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Bell, 'bell', 'size-4')} <span>Payroll cycle closes today</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>This week</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(FileText, 'file-text', 'size-4')} <span>5 contracts awaiting sign-off</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Users, 'users', 'size-4')} <span>2 new hires start Monday</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n                  `\n                : ''}\n              ${this.active === 'messages'\n                ? html`\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Direct messages</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          ${[\n                            { initials: 'OB', tile: 'bg-chart-1/15', name: 'Olivia Bennett' },\n                            { initials: 'DM', tile: 'bg-chart-2/15', name: 'Daniel Morgan' },\n                            { initials: 'ER', tile: 'bg-chart-3/15', name: 'Ethan Reynolds' },\n                          ].map(\n                            (person) => html`\n                              <uip-sidebar-menu-item>\n                                <uip-sidebar-menu-button>\n                                  <uip-avatar class=\"size-5\">\n                                    <uip-avatar-fallback class=${`${person.tile} text-foreground text-xs`}>${person.initials}</uip-avatar-fallback>\n                                  </uip-avatar>\n                                  <span>${person.name}</span>\n                                </uip-sidebar-menu-button>\n                              </uip-sidebar-menu-item>\n                            `,\n                          )}\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Channels</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(MessageSquare, 'message-square', 'size-4')} <span># announcements</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(MessageSquare, 'message-square', 'size-4')} <span># hiring</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n                  `\n                : ''}\n              ${this.active === 'support'\n                ? html`\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Help center</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(HelpCircle, 'circle-question-mark', 'size-4')} <span>Getting started</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(FileText, 'file-text', 'size-4')} <span>Onboarding guide</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Send, 'send', 'size-4')} <span>Contact support</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n                  `\n                : ''}\n              ${this.active === 'settings'\n                ? html`\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Workspace</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(SettingsIcon, 'settings', 'size-4')} <span>General</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Users, 'users', 'size-4')} <span>Members</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(CreditCard, 'credit-card', 'size-4')} <span>Billing</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Gauge, 'gauge', 'size-4')} <span>Limits</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n\n                    <uip-sidebar-group>\n                      <uip-sidebar-group-label>Account</uip-sidebar-group-label>\n                      <uip-sidebar-group-content>\n                        <uip-sidebar-menu>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Lock, 'lock', 'size-4')} <span>Security</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                          <uip-sidebar-menu-item>\n                            <uip-sidebar-menu-button>\n                              ${icon(Bell, 'bell', 'size-4')} <span>Notifications</span>\n                            </uip-sidebar-menu-button>\n                          </uip-sidebar-menu-item>\n                        </uip-sidebar-menu>\n                      </uip-sidebar-group-content>\n                    </uip-sidebar-group>\n                  `\n                : ''}\n            </uip-sidebar-content>\n          </div>\n        </div>\n      </uip-sidebar>\n    `\n  }\n}\n\ncustomElements.get('uip-sidebar-05') || customElements.define('uip-sidebar-05', UipSidebar05)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-sidebar-05': UipSidebar05\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/sidebar-05/sidebar-05.ts"
    }
  ],
  "dependencies": [
    "lit",
    "lucide"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/avatar.json",
    "https://uipkge.dev/r/lit/dropdown-menu.json",
    "https://uipkge.dev/r/lit/input.json",
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/sidebar.json"
  ]
}