{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar-04",
  "title": "Floating Inset Sidebar",
  "type": "registry:block",
  "description": "Floating sidebar variant with rounded corners and inset margins. Uses Sidebar variant=\"floating\" and SidebarMenuSub for nested routes. Sample data inlined so consumers edit routes in place.",
  "categories": [
    "layout",
    "sidebar"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/blocks/sidebar-04/sidebar-04.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n// Side-effect import: registers the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/sidebar/sidebar'\n\ninterface NavChild {\n  title: string\n  url: string\n  isActive?: boolean\n}\n\ninterface NavItem {\n  title: string\n  url: string\n  isActive?: boolean\n  items: NavChild[]\n}\n\n// Sample data (React's `data`, inlined so consumers edit routes in place).\nconst navMain: NavItem[] = [\n  {\n    title: 'Getting Started',\n    url: '#',\n    items: [\n      { title: 'Installation', url: '#' },\n      { title: 'Project Structure', url: '#' },\n    ],\n  },\n  {\n    title: 'Building Your Application',\n    url: '#',\n    items: [\n      { title: 'Routing', url: '#' },\n      { title: 'Data Fetching', url: '#', isActive: true },\n      { title: 'Rendering', url: '#' },\n      { title: 'Caching', url: '#' },\n      { title: 'Styling', url: '#' },\n      { title: 'Optimizing', url: '#' },\n      { title: 'Configuring', url: '#' },\n      { title: 'Testing', url: '#' },\n      { title: 'Authentication', url: '#' },\n      { title: 'Deploying', url: '#' },\n      { title: 'Upgrading', url: '#' },\n      { title: 'Examples', url: '#' },\n    ],\n  },\n  {\n    title: 'API Reference',\n    url: '#',\n    items: [\n      { title: 'Components', url: '#' },\n      { title: 'File Conventions', url: '#' },\n      { title: 'Functions', url: '#' },\n      { title: 'next.config.js Options', url: '#' },\n      { title: 'CLI', url: '#' },\n      { title: 'Edge Runtime', url: '#' },\n    ],\n  },\n  {\n    title: 'Architecture',\n    url: '#',\n    items: [\n      { title: 'Accessibility', url: '#' },\n      { title: 'Fast Refresh', url: '#' },\n      { title: 'Next.js Compiler', url: '#' },\n      { title: 'Supported Browsers', url: '#' },\n      { title: 'Turbopack', url: '#' },\n    ],\n  },\n  {\n    title: 'Community',\n    url: '#',\n    items: [{ title: 'Contribution Guide', url: '#' }],\n  },\n]\n\n/**\n * <uip-sidebar-04> — the registry Sidebar04 block as a web component.\n *\n * Class strings are React's verbatim (`variant=\"floating\"`, nested\n * SidebarMenuSub route tree). The menu/sub layout classes that React sets on\n * the parts (`gap-2`, `ml-0 border-l-0 px-1.5`) are scoped to the parts'\n * `base` (the part hosts are `display: contents`, so plain host classes\n * would have no box to land on). No props, no events: edit the markup in\n * place.\n */\nexport class UipSidebar04 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  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-04')\n  }\n\n  render() {\n    return html`\n      <uip-sidebar variant=\"floating\">\n        <uip-sidebar-header>\n          <uip-sidebar-menu>\n            <uip-sidebar-menu-item>\n              <uip-sidebar-menu-button size=\"lg\" href=\"#\">\n                <div class=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <svg viewBox=\"0 0 24 24\" class=\"size-4\" 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                </div>\n                <div class=\"flex flex-col gap-0.5 leading-none\">\n                  <span class=\"font-medium\">uipkge</span>\n                  <span>v1.0.0</span>\n                </div>\n              </uip-sidebar-menu-button>\n            </uip-sidebar-menu-item>\n          </uip-sidebar-menu>\n        </uip-sidebar-header>\n\n        <uip-sidebar-content>\n          <uip-sidebar-group>\n            <uip-sidebar-menu class=\"[&::part(base)]:gap-2\">\n              ${navMain.map(\n                (item) => html`\n                  <uip-sidebar-menu-item>\n                    <uip-sidebar-menu-button href=${item.url} ?is-active=${!!item.isActive} class=\"font-medium\">\n                      ${item.title}\n                    </uip-sidebar-menu-button>\n                    ${item.items.length\n                      ? html`<uip-sidebar-menu-sub class=\"[&::part(base)]:ml-0 [&::part(base)]:border-l-0 [&::part(base)]:px-1.5\">\n                          ${item.items.map(\n                            (childItem) => html`\n                              <uip-sidebar-menu-sub-item>\n                                <uip-sidebar-menu-sub-button href=${childItem.url} ?is-active=${!!childItem.isActive}>\n                                  ${childItem.title}\n                                </uip-sidebar-menu-sub-button>\n                              </uip-sidebar-menu-sub-item>\n                            `,\n                          )}\n                        </uip-sidebar-menu-sub>`\n                      : ''}\n                  </uip-sidebar-menu-item>\n                `,\n              )}\n            </uip-sidebar-menu>\n          </uip-sidebar-group>\n        </uip-sidebar-content>\n      </uip-sidebar>\n    `\n  }\n}\n\ncustomElements.get('uip-sidebar-04') || customElements.define('uip-sidebar-04', UipSidebar04)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-sidebar-04': UipSidebar04\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/blocks/sidebar-04/sidebar-04.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json",
    "https://uipkge.dev/r/lit/sidebar.json"
  ]
}