@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/sidebar-07/components/nav-main.ts

@@ -0,0 +1,61 @@
+/**
+ * The sidebar-07 main nav: the "Platform" group, each section a collapsible
+ * menu item with its pages in a submenu. A fragment helper; each section is a
+ * native `<details>`, so it opens and closes with no JavaScript. Ported from
+ * shadcn/ui's sidebar-07.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronRightIcon } from '../../../lib/icons.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon?: (cls?: string) => TemplateResult;
+  isActive?: boolean;
+  items?: { title: string; url: string }[];
+}
+
+export function navMain({ items }: { items: NavMainItem[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Platform</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${items.map((item) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')} ?open=${!!item.isActive}>
+              <summary data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'cursor-pointer list-none [&::-webkit-details-marker]:hidden')}>
+                ${item.icon ? item.icon() : ''}
+                <span>${item.title}</span>
+                ${ChevronRightIcon('ml-auto transition-transform duration-200 group-open/collapsible:rotate-90')}
+              </summary>
+              <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                  ${(item.items ?? []).map((sub) => html`
+                    <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                      <a href=${sub.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" class=${sidebarMenuSubButtonClass()}>
+                        <span>${sub.title}</span>
+                      </a>
+                    </li>
+                  `)}
+                </ul>
+              </div>
+            </details>
+          </li>
+        `)}
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-07/components/nav-projects.ts

@@ -0,0 +1,65 @@
+/**
+ * The sidebar-07 projects list: one link per project, each with a "More"
+ * menu that shows on hover, and a trailing "More" item. Hidden while the
+ * sidebar is collapsed to icons. A fragment helper; the menus are the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-07.
+ *
+ * Each "More" button sits right after its link, a sibling of it, because the
+ * kit's styles place it with `peer-*` selectors that need exactly that. The
+ * menu names it through `trigger="<id>"`, so the ids must be unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ArrowRightIcon, FolderIcon, MoreHorizontalIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+export interface NavProject {
+  name: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navProjects({ projects }: { projects: NavProject[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'group-data-[collapsible=icon]:hidden')}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Projects</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${projects.map((item, i) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              ${item.icon()}
+              <span>${item.name}</span>
+            </a>
+            <button type="button" id=${`nav-project-more-${i}`} data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'aria-expanded:bg-muted')}>
+              ${MoreHorizontalIcon()}
+              <span class="sr-only">More</span>
+            </button>
+            <ui-dropdown-menu trigger=${`nav-project-more-${i}`}>
+              <ui-dropdown-menu-content class="w-fit" side="right" align="start">
+                <ui-dropdown-menu-item>${FolderIcon()}<span>View Project</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>${ArrowRightIcon()}<span>Share Project</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item variant="destructive">${Trash2Icon()}<span>Delete Project</span></ui-dropdown-menu-item>
+              </ui-dropdown-menu-content>
+            </ui-dropdown-menu>
+          </li>
+        `)}
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'text-sidebar-foreground/70')}>
+            ${MoreHorizontalIcon('text-sidebar-foreground/70')}
+            <span>More</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-07/components/nav-user.ts

@@ -0,0 +1,70 @@
+/**
+ * The sidebar-07 user menu: the signed-in user's avatar, name and email,
+ * opening an account menu. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-07.
+ *
+ * The menu items are placeholders. Make "Log out" a form that posts to your
+ * sign-out action, and the others links to your account pages.
+ */
+import { html } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { avatarClass, avatarFallbackClass, avatarImageClass } from '../../../components/avatar.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from '../../../lib/icons.ts';
+
+function userAvatar(user: { name: string; avatar: string }) {
+  return html`<span data-slot="avatar" data-size="default" class=${cn(avatarClass(), 'h-8 w-8 rounded-lg')}>
+    <span data-slot="avatar-fallback" class=${cn(avatarFallbackClass(), 'rounded-lg')}>VK</span>
+    <img data-slot="avatar-image" src=${user.avatar} alt="@vivek" class=${avatarImageClass()}>
+  </span>`;
+}
+
+function userText(user: { name: string; email: string }) {
+  return html`<div class="grid flex-1 text-left text-sm leading-tight">
+    <span class="truncate font-medium">${user.name}</span>
+    <span class="truncate text-xs">${user.email}</span>
+  </div>`;
+}
+
+export function navUser({ user }: { user: { name: string; email: string; avatar: string } }) {
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              ${userAvatar(user)}
+              ${userText(user)}
+              ${ChevronsUpDownIcon('ml-auto size-4')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-fit" side="right" align="end">
+            <ui-dropdown-menu-label class="p-0 font-normal">
+              <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                ${userAvatar(user)}
+                ${userText(user)}
+              </div>
+            </ui-dropdown-menu-label>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${SparklesIcon()}Upgrade to Pro</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-group>
+              <ui-dropdown-menu-item>${BadgeCheckIcon()}Account</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${CreditCardIcon()}Billing</ui-dropdown-menu-item>
+              <ui-dropdown-menu-item>${BellIcon()}Notifications</ui-dropdown-menu-item>
+            </ui-dropdown-menu-group>
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item>${LogOutIcon()}Log out</ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-07/components/team-switcher.ts

@@ -0,0 +1,66 @@
+/**
+ * The sidebar-07 team switcher: the active team's logo, name and plan,
+ * opening a menu of the teams. A fragment helper; the menu is the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-07.
+ *
+ * It renders the first team as the active one. shadcn keeps the choice in
+ * React state; in your app the active team is server data (a session value or
+ * a route segment), so render the right one on the server and make each item
+ * a link or a form that switches it.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronsUpDownIcon, PlusIcon } from '../../../lib/icons.ts';
+
+export interface Team {
+  name: string;
+  logo: (cls?: string) => TemplateResult;
+  plan: string;
+}
+
+export function teamSwitcher({ teams }: { teams: Team[] }) {
+  const active = teams[0];
+  if (!active) return '';
+  return html`
+    <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+      <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+        <ui-dropdown-menu>
+          <ui-dropdown-menu-trigger>
+            <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${cn(sidebarMenuButtonClass({ size: 'lg' }), 'aria-expanded:bg-sidebar-accent aria-expanded:text-sidebar-accent-foreground')}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${active.logo()}
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-medium">${active.name}</span>
+                <span class="truncate text-xs">${active.plan}</span>
+              </div>
+              ${ChevronsUpDownIcon('ml-auto')}
+            </button>
+          </ui-dropdown-menu-trigger>
+          <ui-dropdown-menu-content class="w-fit" side="right" align="start">
+            <ui-dropdown-menu-label class="text-xs text-muted-foreground">Teams</ui-dropdown-menu-label>
+            ${teams.map((team, index) => html`
+              <ui-dropdown-menu-item class="gap-2 p-2">
+                <div class="flex size-6 items-center justify-center rounded-md border">${team.logo()}</div>
+                ${team.name}
+                <ui-dropdown-menu-shortcut>⌘${index + 1}</ui-dropdown-menu-shortcut>
+              </ui-dropdown-menu-item>
+            `)}
+            <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+            <ui-dropdown-menu-item class="gap-2 p-2">
+              <div class="flex size-6 items-center justify-center rounded-md border bg-transparent">${PlusIcon('size-4')}</div>
+              <div class="font-medium text-muted-foreground">Add team</div>
+            </ui-dropdown-menu-item>
+          </ui-dropdown-menu-content>
+        </ui-dropdown-menu>
+      </li>
+    </ul>
+  `;
+}

package/packages/registry/blocks/sidebar-07/page.ts

@@ -0,0 +1,59 @@
+/**
+ * The sidebar-07 block's page: a sidebar that collapses to icons, beside a
+ * header with a breadcrumb and a placeholder content grid.
+ *
+ * Installed by `npx @webjsdev/ui add sidebar-07` at `app/dashboard/page.ts`.
+ * It is app code you own, so edit it freely. Ported from shadcn/ui's
+ * sidebar-07.
+ */
+import { html } from '@webjsdev/core';
+import type { Metadata } from '@webjsdev/core';
+import { cn } from '../../lib/utils.ts';
+import {
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbListClass,
+  breadcrumbPageClass,
+  breadcrumbSeparatorClass,
+} from '../../components/breadcrumb.ts';
+import { separatorClass } from '../../components/separator.ts';
+import '../../components/sidebar.ts';
+import { appSidebar } from './components/app-sidebar.ts';
+import { ChevronRightIcon } from '../../lib/icons.ts';
+
+export const metadata: Metadata = { title: 'Dashboard' };
+
+export default function DashboardPage() {
+  return html`
+    <ui-sidebar-provider>
+      ${appSidebar()}
+      <ui-sidebar-inset>
+        <header class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
+          <div class="flex items-center gap-2 px-4">
+            <ui-sidebar-trigger class="-ml-1"></ui-sidebar-trigger>
+            <div role="none" data-slot="separator" data-orientation="vertical" class=${cn(separatorClass(), 'mr-2 data-vertical:h-4 data-vertical:self-auto')}></div>
+            <nav aria-label="breadcrumb" data-slot="breadcrumb">
+              <ol data-slot="breadcrumb-list" class=${breadcrumbListClass()}>
+                <li data-slot="breadcrumb-item" class=${cn(breadcrumbItemClass(), 'hidden md:block')}>
+                  <a data-slot="breadcrumb-link" class=${breadcrumbLinkClass()} href="#">Build Your Application</a>
+                </li>
+                <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class=${cn(breadcrumbSeparatorClass(), 'hidden md:block')}>${ChevronRightIcon()}</li>
+                <li data-slot="breadcrumb-item" class=${breadcrumbItemClass()}>
+                  <span data-slot="breadcrumb-page" class=${breadcrumbPageClass()} aria-current="page">Data Fetching</span>
+                </li>
+              </ol>
+            </nav>
+          </div>
+        </header>
+        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+            <div class="aspect-video rounded-xl bg-muted/50"></div>
+          </div>
+          <div class="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min"></div>
+        </div>
+      </ui-sidebar-inset>
+    </ui-sidebar-provider>
+  `;
+}

package/packages/registry/blocks/sidebar-08/components/app-sidebar.ts

@@ -0,0 +1,122 @@
+/**
+ * The sidebar-08 app sidebar: the company header, the main nav with
+ * collapsible sections, the projects list, a secondary nav pinned to the
+ * bottom and the signed-in user, as an inset sidebar. A fragment helper, so
+ * the markup is rendered by the server; the sidebar and the menus are the
+ * kit's elements. Ported from shadcn/ui's sidebar-08.
+ *
+ * The data below is sample data. Replace it with your own, and point each
+ * `url` at a real route.
+ */
+import { html } from '@webjsdev/core';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { navProjects, type NavProject } from './nav-projects.ts';
+import { navSecondary, type NavSecondaryItem } from './nav-secondary.ts';
+import { navUser } from './nav-user.ts';
+import { BookOpenIcon, BotIcon, CommandIcon, FrameIcon, LifeBuoyIcon, MapIcon, PieChartIcon, SendIcon, Settings2Icon, TerminalSquareIcon } from '../../../lib/icons.ts';
+
+// This is sample data.
+const data: {
+  user: { name: string; email: string; avatar: string };
+  navMain: NavMainItem[];
+  navSecondary: NavSecondaryItem[];
+  projects: NavProject[];
+} = {
+  user: {
+    name: 'vivek',
+    email: 'vivek@example.com',
+    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+  },
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: TerminalSquareIcon,
+      isActive: true,
+      items: [
+        { title: 'History', url: '#' },
+        { title: 'Starred', url: '#' },
+        { title: 'Settings', url: '#' },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: BotIcon,
+      items: [
+        { title: 'Genesis', url: '#' },
+        { title: 'Explorer', url: '#' },
+        { title: 'Quantum', url: '#' },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: BookOpenIcon,
+      items: [
+        { title: 'Introduction', url: '#' },
+        { title: 'Get Started', url: '#' },
+        { title: 'Tutorials', url: '#' },
+        { title: 'Changelog', url: '#' },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: Settings2Icon,
+      items: [
+        { title: 'General', url: '#' },
+        { title: 'Team', url: '#' },
+        { title: 'Billing', url: '#' },
+        { title: 'Limits', url: '#' },
+      ],
+    },
+  ],
+  navSecondary: [
+    { title: 'Support', url: '#', icon: LifeBuoyIcon },
+    { title: 'Feedback', url: '#', icon: SendIcon },
+  ],
+  projects: [
+    { name: 'Design Engineering', url: '#', icon: FrameIcon },
+    { name: 'Sales & Marketing', url: '#', icon: PieChartIcon },
+    { name: 'Travel', url: '#', icon: MapIcon },
+  ],
+};
+
+export function appSidebar() {
+  return html`
+    <ui-sidebar variant="inset">
+      <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="lg" class=${sidebarMenuButtonClass({ size: 'lg' })}>
+              <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                ${CommandIcon('size-4')}
+              </div>
+              <div class="grid flex-1 text-left text-sm leading-tight">
+                <span class="truncate font-medium">Acme Inc</span>
+                <span class="truncate text-xs">Enterprise</span>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navMain({ items: data.navMain })}
+        ${navProjects({ projects: data.projects })}
+        ${navSecondary({ items: data.navSecondary, class: 'mt-auto' })}
+      </div>
+      <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+        ${navUser({ user: data.user })}
+      </div>
+    </ui-sidebar>
+  `;
+}

package/packages/registry/blocks/sidebar-08/components/nav-main.ts

@@ -0,0 +1,68 @@
+/**
+ * The sidebar-08 main nav: the "Platform" group, each section a link with a
+ * chevron that opens its pages in a submenu. A fragment helper; each section
+ * is a native `<details>` whose `<summary>` is the chevron, so it opens and
+ * closes with no JavaScript while the section title stays a real link. Ported
+ * from shadcn/ui's sidebar-08.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+  sidebarMenuSubButtonClass,
+  sidebarMenuSubClass,
+  sidebarMenuSubItemClass,
+} from '../../../components/sidebar.ts';
+import { ChevronRightIcon } from '../../../lib/icons.ts';
+
+export interface NavMainItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+  isActive?: boolean;
+  items?: { title: string; url: string }[];
+}
+
+export function navMain({ items }: { items: NavMainItem[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${sidebarGroupClass()}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Platform</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${items.map((item) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              ${item.icon()}
+              <span>${item.title}</span>
+            </a>
+            ${item.items?.length
+              ? html`<details data-slot="collapsible" class=${cn(collapsibleClass(), 'group/collapsible')} ?open=${!!item.isActive}>
+                  <summary data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass(), 'top-1.5 h-5 cursor-pointer list-none group-open/collapsible:rotate-90 [&::-webkit-details-marker]:hidden')}>
+                    ${ChevronRightIcon()}
+                    <span class="sr-only">Toggle</span>
+                  </summary>
+                  <div data-slot="collapsible-content" class=${collapsibleContentClass()}>
+                    <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
+                      ${item.items.map((sub) => html`
+                        <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
+                          <a href=${sub.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" class=${sidebarMenuSubButtonClass()}>
+                            <span>${sub.title}</span>
+                          </a>
+                        </li>
+                      `)}
+                    </ul>
+                  </div>
+                </details>`
+              : ''}
+          </li>
+        `)}
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-08/components/nav-projects.ts

@@ -0,0 +1,65 @@
+/**
+ * The sidebar-08 projects list: one link per project, each with a "More"
+ * menu that shows on hover, and a trailing "More" item. Hidden while the
+ * sidebar is collapsed to icons. A fragment helper; the menus are the kit's
+ * `<ui-dropdown-menu>`. Ported from shadcn/ui's sidebar-08.
+ *
+ * Each "More" button sits right after its link, a sibling of it, because the
+ * kit's styles place it with `peer-*` selectors that need exactly that. The
+ * menu names it through `trigger="<id>"`, so the ids must be unique on the page.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import '../../../components/dropdown-menu.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupLabelClass,
+  sidebarMenuActionClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { FolderIcon, MoreHorizontalIcon, ShareIcon, Trash2Icon } from '../../../lib/icons.ts';
+
+export interface NavProject {
+  name: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navProjects({ projects }: { projects: NavProject[] }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'group-data-[collapsible=icon]:hidden')}>
+      <div data-slot="sidebar-group-label" data-sidebar="group-label" class=${sidebarGroupLabelClass()}>Projects</div>
+      <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+        ${projects.map((item, i) => html`
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+              ${item.icon()}
+              <span>${item.name}</span>
+            </a>
+            <button type="button" id=${`nav-project-more-${i}`} data-slot="sidebar-menu-action" data-sidebar="menu-action" class=${cn(sidebarMenuActionClass({ showOnHover: true }), 'aria-expanded:bg-muted')}>
+              ${MoreHorizontalIcon()}
+              <span class="sr-only">More</span>
+            </button>
+            <ui-dropdown-menu trigger=${`nav-project-more-${i}`}>
+              <ui-dropdown-menu-content class="w-48" side="right" align="start">
+                <ui-dropdown-menu-item>${FolderIcon('text-muted-foreground')}<span>View Project</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-item>${ShareIcon('text-muted-foreground')}<span>Share Project</span></ui-dropdown-menu-item>
+                <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+                <ui-dropdown-menu-item>${Trash2Icon('text-muted-foreground')}<span>Delete Project</span></ui-dropdown-menu-item>
+              </ui-dropdown-menu-content>
+            </ui-dropdown-menu>
+          </li>
+        `)}
+        <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+          <button type="button" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${sidebarMenuButtonClass()}>
+            ${MoreHorizontalIcon()}
+            <span>More</span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  `;
+}

package/packages/registry/blocks/sidebar-08/components/nav-secondary.ts

@@ -0,0 +1,40 @@
+/**
+ * The sidebar-08 secondary nav: small links (support, feedback) at the bottom
+ * of the sidebar content. A fragment helper. Ported from shadcn/ui's
+ * sidebar-08.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarGroupClass,
+  sidebarGroupContentClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+
+export interface NavSecondaryItem {
+  title: string;
+  url: string;
+  icon: (cls?: string) => TemplateResult;
+}
+
+export function navSecondary({ items, class: cls }: { items: NavSecondaryItem[]; class?: string }) {
+  return html`
+    <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), cls)}>
+      <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${sidebarGroupContentClass()}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          ${items.map((item) => html`
+            <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+              <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="sm" class=${sidebarMenuButtonClass({ size: 'sm' })}>
+                ${item.icon()}
+                <span>${item.title}</span>
+              </a>
+            </li>
+          `)}
+        </ul>
+      </div>
+    </div>
+  `;
+}