@stacksjs/components 0.2.91 → 0.2.92

package/src/ui/sidebar/SidebarFooter.stx

@@ -1,109 +1,71 @@
 <script server>
-export const showSettings = $props.showSettings ?? true
-export const showThemeToggle = $props.showThemeToggle ?? true
-export const settingsHref = $props.settingsHref || '/settings'
-export const settingsLabel = $props.settingsLabel || 'Settings'
-export const collapsed = $props.collapsed ?? false
-export const actions = $props.actions || []
-export const variant = $props.variant || 'tahoe'
+// The bottom strip of a macOS sidebar — e.g. the account row in Music
+// ("Chris Breuer" with an avatar) or custom actions.
+export const theme = $props.theme || $props.variant || 'macos'
+export const avatar = $props.avatar || ''
+export const name = $props.name || ''
+export const detail = $props.detail || ''
+export const actions = $props.actions || [] // [{ id, icon, label }]
 
-const footerVariants = {
-  workspace: {
-    container: 'p-5 space-y-2',
-    action: 'flex-1 flex items-center gap-3 rounded-[18px] px-4 py-3 text-[17px] text-zinc-700 transition-colors hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: 'w-5 h-5 text-zinc-500 dark:text-zinc-400',
-  },
-  desktop: {
-    container: 'p-4 space-y-2',
-    action: 'flex-1 flex items-center gap-3 rounded-[16px] px-3.5 py-2.5 text-[15px] text-zinc-700 transition-colors hover:bg-white/34 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: 'w-5 h-5 text-zinc-500 dark:text-zinc-400',
-  },
-  default: {
-    container: 'border-t border-black/5 dark:border-white/10 p-3 space-y-2',
-    action: 'flex-1 flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-black/70 dark:text-white/70 hover:bg-black/5 dark:hover:bg-white/10 transition-colors',
-    icon: 'w-4 h-4',
-  },
-}
+export const isMacos = theme === 'macos' || theme === 'tahoe' || theme === 'macos-tahoe' || theme === 'macos-latest'
+
+export const profileClasses = [
+  'flex w-full items-center gap-[8px]',
+  'h-[44px] rounded-[10px] px-[6px]',
+  'text-[13px] font-medium text-black dark:text-white',
+  'transition-colors duration-150',
+  'hover:bg-black/4 active:bg-black/8',
+  'dark:hover:bg-white/6 dark:active:bg-white/12',
+].join(' ')
 
-const footerStyle = footerVariants[variant] || footerVariants.default
-export const footerClasses = footerStyle.container
-export const actionClasses = footerStyle.action
-export const footerIconClasses = footerStyle.icon
-export const settingsIconClasses = `i-hugeicons-settings-02 ${footerStyle.icon}`
-export const themeButtonClasses = variant === 'workspace' || variant === 'desktop'
-  ? 'p-3 rounded-[16px] text-zinc-500 hover:text-zinc-900 hover:bg-white/50 dark:text-zinc-400 dark:hover:text-white dark:hover:bg-white/10 transition-colors'
-  : 'p-2 rounded-lg text-black/50 hover:text-black/80 hover:bg-black/5 dark:text-white/50 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors'
+export const actionClasses = [
+  'grid h-[28px] w-[28px] place-items-center rounded-[7px]',
+  'text-[#3c3c43]/70 dark:text-[#ebebf5]/70',
+  'transition-colors duration-150',
+  'hover:bg-black/5 dark:hover:bg-white/10',
+].join(' ')
 </script>
 
 <script client>
 const emit = defineEmits()
 
-function onThemeToggle() {
-  document.documentElement.classList.toggle('dark')
-  emit('themeToggle')
+function onProfileClick() {
+  emit('profileClick')
 }
 
-function onActionClick(index) {
-  emit('actionClick', index)
+function onAction(event) {
+  emit('action', event.target.closest('[data-sidebar-action]')?.dataset.sidebarAction)
 }
 </script>
 
-<div class="{{ footerClasses }}">
-  <!-- Custom actions slot -->
-  <slot />
-
-  <!-- Quick actions row -->
-  @if(!collapsed && actions.length > 0)
-    <div class="flex items-center gap-2">
-      @foreach(actions as action)
-        @if(action.href)
-          <a
-            href="{{ action.href }}"
-            class="{{ actionClasses }}"
-          >
-            @if(action.icon)
-              <div class="{{ action.icon }} {{ footerIconClasses }}"></div>
-            @endif
-            <span>{{ action.label }}</span>
-          </a>
+@if(isMacos)
+  <div class="shrink-0 px-[10px] pb-[8px] pt-[4px]">
+    @if(name)
+      <button type="button" class="{{ profileClasses }}" @click="onProfileClick()">
+        @if(avatar)
+          <img src="{{ avatar }}" alt="" class="h-[30px] w-[30px] rounded-full object-cover shadow-sm" />
         @else
-          <button
-            type="button"
-            class="{{ actionClasses }}"
-            @click="onActionClick({{ $loop.index }})"
-          >
-            @if(action.icon)
-              <div class="{{ action.icon }} {{ footerIconClasses }}"></div>
-            @endif
-            <span>{{ action.label }}</span>
-          </button>
+          <span class="grid h-[30px] w-[30px] place-items-center rounded-full bg-black/10 text-[13px] font-semibold dark:bg-white/15">{{ name.charAt(0) }}</span>
         @endif
-      @endforeach
-
-      @if(showThemeToggle)
-        <button
-          type="button"
-          class="{{ themeButtonClasses }}"
-          @click="onThemeToggle()"
-          aria-label="Toggle dark mode"
-        >
-          <div class="i-hugeicons-moon-02 w-4 h-4 dark:hidden"></div>
-          <div class="i-hugeicons-sun-02 w-4 h-4 hidden dark:block"></div>
-        </button>
-      @endif
-    </div>
-  @endif
-
-  <!-- Settings link -->
-  @if(showSettings)
-    <a
-      href="{{ settingsHref }}"
-      class="{{ actionClasses }}"
-    >
-      <div class="{{ settingsIconClasses }}"></div>
-      @if(!collapsed)
-        <span>{{ settingsLabel }}</span>
-      @endif
-    </a>
-  @endif
-</div>
+        <span class="min-w-0 flex-1 truncate text-left">{{ name }}</span>
+        @if(detail)
+          <span class="shrink-0 text-[12px] text-[#3c3c43]/60 dark:text-[#ebebf5]/60">{{ detail }}</span>
+        @endif
+      </button>
+    @endif
+    @if(actions.length > 0)
+      <div class="flex items-center gap-[4px] pt-[4px]">
+        @foreach(actions as action)
+          <button type="button" class="{{ actionClasses }}" aria-label="{{ action.label }}" data-sidebar-action="{{ action.id }}" @click="onAction($event)">
+            <span class="{{ action.icon }} h-[16px] w-[16px]" aria-hidden="true"></span>
+          </button>
+        @endforeach
+      </div>
+    @endif
+    <slot />
+  </div>
+@else
+  <div class="shrink-0 border-t border-black/5 p-3 dark:border-white/10">
+    <slot />
+  </div>
+@endif

package/src/ui/sidebar/SidebarHeader.stx

@@ -1,199 +1,103 @@
 <script server>
+// The window-chrome strip at the top of a macOS sidebar: traffic lights on
+// the left, floating "Liquid Glass" toolbar buttons on the right, and the
+// whole strip acts as a window drag region inside a Craft window.
+export const theme = $props.theme || $props.variant || 'macos'
+export const showWindowControls = $props.showWindowControls ?? true
+export const actions = $props.actions || [] // [{ id, icon, label }]
 export const title = $props.title || ''
 export const subtitle = $props.subtitle || ''
 export const logo = $props.logo || ''
-export const logoIcon = $props.logoIcon || ''
 export const showSearch = $props.showSearch ?? false
-export const searchPlaceholder = $props.searchPlaceholder || 'Search...'
-export const searchValue = $props.searchValue || ''
-export const collapsed = $props.collapsed ?? false
-export const variant = $props.variant || 'tahoe'
-export const showWindowControls = $props.showWindowControls ?? (variant === 'desktop' ? 'auto' : false)
-export const showNavigationControls = $props.showNavigationControls ?? variant === 'desktop'
-
-const headerVariants = {
-  workspace: {
-    titlebar: 'h-18 flex items-center justify-between px-5',
-    logo: 'w-9 h-9 rounded-[12px] bg-black text-white flex items-center justify-center font-semibold text-sm',
-    title: 'text-[18px] font-semibold text-zinc-950 dark:text-white truncate',
-    subtitle: 'text-sm text-zinc-500 dark:text-zinc-400 truncate',
-    searchWrap: 'px-5 pb-4',
-    searchInput: 'w-full rounded-[16px] border border-zinc-200/70 bg-white/70 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-400 focus:outline-none focus:ring-2 focus:ring-zinc-300/80 dark:border-white/10 dark:bg-white/10 dark:text-white',
-  },
-  desktop: {
-    titlebar: 'h-14 flex items-center gap-5 px-5 border-b border-black/5 dark:border-white/10',
-    chrome: 'flex shrink-0 items-center justify-start gap-5 min-h-7',
-    trafficLight: 'h-3.5 w-3.5 rounded-full shadow-[inset_0_0_0_1px_rgba(0,0,0,0.08)]',
-    navButton: 'inline-flex h-7 w-7 items-center justify-center rounded-full text-zinc-500/80 transition-colors hover:bg-white/35 hover:text-zinc-900 disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-zinc-500/80 dark:text-zinc-400 dark:hover:bg-white/10 dark:hover:text-white',
-    logo: 'w-9 h-9 rounded-[12px] bg-black/80 text-white flex items-center justify-center font-semibold text-sm shadow-sm dark:bg-white/14',
-    title: 'text-[15px] leading-[22px] font-medium text-zinc-950 dark:text-white truncate',
-    subtitle: 'text-xs text-zinc-500 dark:text-zinc-400 truncate',
-    searchWrap: 'px-4 pb-4',
-    searchInput: 'w-full rounded-[16px] border border-white/40 bg-white/45 px-10 py-2.5 text-[15px] text-zinc-900 placeholder:text-zinc-500 shadow-sm focus:outline-none focus:ring-2 focus:ring-white/70 dark:border-white/10 dark:bg-white/10 dark:text-white',
-  },
-  default: {
-    titlebar: 'h-13 flex items-center justify-between px-4 border-b border-black/5 dark:border-white/10',
-    logo: 'w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-bold text-sm',
-    title: 'text-sm font-semibold text-black/90 dark:text-white truncate',
-    subtitle: 'text-xs text-black/50 dark:text-white/50 truncate',
-    searchWrap: 'px-3 py-3',
-    searchInput: 'w-full pl-9 pr-3 py-2 text-sm bg-black/5 dark:bg-white/10 border border-black/10 dark:border-white/10 rounded-lg text-black/90 dark:text-white placeholder:text-black/40 dark:placeholder:text-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500/30 focus:border-blue-400/50 transition-colors',
-  },
-}
-
-const headerStyle = headerVariants[variant] || headerVariants.default
-export const titlebarClasses = headerStyle.titlebar
-export const chromeClasses = headerStyle.chrome || ''
-export const trafficLightClasses = headerStyle.trafficLight || ''
-export const navButtonClasses = headerStyle.navButton || ''
-export const logoClasses = headerStyle.logo
-export const titleClasses = headerStyle.title
-export const subtitleClasses = headerStyle.subtitle
-export const searchWrapClasses = headerStyle.searchWrap
-export const searchInputClasses = headerStyle.searchInput
-export const hasDesktopChrome = variant === 'desktop' && (showWindowControls || showNavigationControls)
-export const windowControlsClasses = showWindowControls === 'auto' ? 'hidden items-center gap-2' : 'flex items-center gap-2'
+export const searchPlaceholder = $props.searchPlaceholder || 'Search'
+
+export const isMacos = theme === 'macos' || theme === 'tahoe' || theme === 'macos-tahoe' || theme === 'macos-latest'
+
+// Traffic lights: 13px circles, 7px apart, inset ~21px — measured on
+// macOS Tahoe. Colors are Apple's exact stoplight values.
+export const trafficLightClasses = 'h-[13px] w-[13px] rounded-full shadow-[inset_0_0_1px_rgba(0,0,0,0.2)]'
+
+// Floating toolbar button: a 34px glass circle that brightens on hover.
+export const toolbarButtonClasses = [
+  'grid h-[34px] w-[34px] place-items-center rounded-full',
+  'bg-white/55 dark:bg-white/10',
+  'backdrop-blur-xl',
+  'shadow-[0_1px_4px_rgba(0,0,0,0.12),inset_0_0.5px_0_rgba(255,255,255,0.6)]',
+  'text-[#3c3c43]/75 dark:text-[#ebebf5]/75',
+  'transition-colors duration-150',
+  'hover:bg-white/80 dark:hover:bg-white/20',
+  'active:bg-white/95 dark:active:bg-white/25',
+].join(' ')
 </script>
 
 <script client>
 const emit = defineEmits()
 
-function isCraftRuntime() {
-  return window.__craftNativeSidebar === true
-    || window.craft?.__craft_bridge_loaded === true
-    || !!window.craft?.window
-    || !!window.webkit?.messageHandlers?.craft
-}
-
-function usesCustomWindowControls() {
-  return window.__craftCustomWindowControls === true
-    || document.documentElement.classList.contains('has-custom-window-controls')
-    || document.body?.dataset?.customWindowControls === 'true'
-}
-
-function syncWindowControls() {
-  document.querySelectorAll('[data-stx-native-window-controls]').forEach((element) => {
-    const show = element.dataset.stxNativeWindowControls === 'auto'
-      ? isCraftRuntime() && usesCustomWindowControls()
-      : true
-    element.classList.toggle('hidden', !show)
-    element.classList.toggle('flex', show)
-  })
+function onAction(event) {
+  emit('action', event.currentTarget?.dataset?.sidebarAction || event.target.closest('[data-sidebar-action]')?.dataset.sidebarAction)
 }
 
 function onSearchInput(event) {
   emit('search', event.target.value)
 }
 
-function goBack() {
-  window.history.back()
-  emit('back')
+function onWindowControl(action) {
+  const api = window.craft?.window
+  if (action === 'close') api?.close?.()
+  if (action === 'minimize') api?.minimize?.()
+  if (action === 'zoom') (api?.maximize || api?.zoom)?.call(api)
+  emit('windowControl', action)
 }
-
-function goForward() {
-  window.history.forward()
-  emit('forward')
-}
-
-onMount(() => {
-  syncWindowControls()
-  window.addEventListener('craft:ready', syncWindowControls)
-  window.addEventListener('stx:load', syncWindowControls)
-
-  return () => {
-    window.removeEventListener('craft:ready', syncWindowControls)
-    window.removeEventListener('stx:load', syncWindowControls)
-  }
-})
 </script>
 
-<div class="flex-shrink-0">
-  <!-- Title bar area -->
-  <div class="{{ titlebarClasses }}">
-    @if(hasDesktopChrome)
-      <div class="{{ chromeClasses }}" data-stx-sidebar-web-chrome>
-        @if(showWindowControls)
-          <div class="{{ windowControlsClasses }}" aria-hidden="true" data-stx-native-window-controls="{{ showWindowControls === 'auto' ? 'auto' : 'always' }}">
-            <span class="{{ trafficLightClasses }} bg-[#ff5f57]"></span>
-            <span class="{{ trafficLightClasses }} bg-[#ffbd2e]"></span>
-            <span class="{{ trafficLightClasses }} bg-[#28c840]"></span>
-          </div>
-        @endif
-
-        @if(showNavigationControls)
-          <div class="flex items-center gap-2">
-            <button type="button" class="{{ navButtonClasses }}" @click="goBack()" aria-label="Go back">
-              <span class="h-5 w-5 i-hugeicons-arrow-left-02" aria-hidden="true"></span>
-            </button>
-            <button type="button" class="{{ navButtonClasses }}" @click="goForward()" aria-label="Go forward">
-              <span class="h-5 w-5 i-hugeicons-arrow-right-02" aria-hidden="true"></span>
-            </button>
-          </div>
-        @endif
-      </div>
-    @endif
-
-    @if(!collapsed)
-      <div class="flex items-center gap-3 min-w-0">
-        <!-- Logo -->
-        @if(logo)
-          <img src="{{ logo }}" alt="{{ title }}" class="w-8 h-8 rounded-lg object-cover" />
-        @elseif(logoIcon)
-          <div class="{{ logoClasses }}">
-            <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
-          </div>
-        @else
-          <div class="{{ logoClasses }}">
-            {{ title.charAt(0) }}
-          </div>
-        @endif
-
-        <!-- Title & Subtitle -->
-        <div class="min-w-0">
-          @if(title)
-            <div class="{{ titleClasses }}">
-              {{ title }}
-            </div>
-          @endif
-          @if(subtitle)
-            <div class="{{ subtitleClasses }}">
-              {{ subtitle }}
-            </div>
-          @endif
-        </div>
+@if(isMacos)
+  <div class="flex h-[52px] shrink-0 items-center justify-between pl-[21px] pr-[10px] [-webkit-app-region:drag]">
+    @if(showWindowControls)
+      <div class="group/lights flex items-center gap-[7px] [-webkit-app-region:no-drag]">
+        <button type="button" class="{{ trafficLightClasses }} bg-[#ff5f57]" aria-label="Close window" @click="onWindowControl('close')"></button>
+        <button type="button" class="{{ trafficLightClasses }} bg-[#febc2e]" aria-label="Minimize window" @click="onWindowControl('minimize')"></button>
+        <button type="button" class="{{ trafficLightClasses }} bg-[#28c840]" aria-label="Zoom window" @click="onWindowControl('zoom')"></button>
       </div>
     @else
-      <!-- Collapsed state - just logo -->
-      @if(logo)
-        <img src="{{ logo }}" alt="{{ title }}" class="w-8 h-8 rounded-lg object-cover mx-auto" />
-      @elseif(logoIcon)
-        <div class="{{ logoClasses }} mx-auto">
-          <div class="{{ logoIcon }} w-5 h-5 text-white"></div>
-        </div>
-      @else
-        <div class="{{ logoClasses }} mx-auto">
-          {{ title.charAt(0) }}
-        </div>
-      @endif
+      <span></span>
     @endif
 
-    <!-- Slot for custom header actions -->
-    <slot name="actions" />
+    <div class="flex items-center gap-[8px] [-webkit-app-region:no-drag]">
+      @foreach(actions as action)
+        <button type="button" class="{{ toolbarButtonClasses }}" aria-label="{{ action.label }}" data-sidebar-action="{{ action.id }}" @click="onAction($event)">
+          <span class="{{ action.icon }} h-[16px] w-[16px]" aria-hidden="true"></span>
+        </button>
+      @endforeach
+      <slot name="actions" />
+    </div>
   </div>
 
-  <!-- Search (only when expanded) -->
-  @if(showSearch && !collapsed)
-    <div class="{{ searchWrapClasses }}">
+  @if(showSearch)
+    <div class="shrink-0 px-[10px] pb-[6px]">
       <div class="relative">
-        <div class="i-hugeicons-search-01 absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-black/40 dark:text-white/40"></div>
+        <span class="i-f7-search absolute left-[8px] top-1/2 h-[13px] w-[13px] -translate-y-1/2 text-[#3c3c43]/50 dark:text-[#ebebf5]/50" aria-hidden="true"></span>
         <input
           type="text"
           placeholder="{{ searchPlaceholder }}"
-          value="{{ searchValue }}"
-          class="{{ searchInputClasses }}"
+          class="h-[28px] w-full rounded-[8px] border-0 bg-black/5 pl-[26px] pr-[8px] text-[13px] text-black placeholder:text-[#3c3c43]/50 focus:outline-none focus:ring-2 focus:ring-[#0088ff]/60 dark:bg-white/10 dark:text-white dark:placeholder:text-[#ebebf5]/50"
           @input="onSearchInput($event)"
         />
       </div>
     </div>
   @endif
-</div>
+@else
+  <div class="flex h-13 items-center gap-3 border-b border-black/5 px-4 dark:border-white/10">
+    @if(logo)
+      <img src="{{ logo }}" alt="{{ title }}" class="h-8 w-8 rounded-lg object-cover" />
+    @endif
+    <div class="min-w-0">
+      @if(title)
+        <div class="truncate text-sm font-semibold text-black/90 dark:text-white">{{ title }}</div>
+      @endif
+      @if(subtitle)
+        <div class="truncate text-xs text-black/50 dark:text-white/50">{{ subtitle }}</div>
+      @endif
+    </div>
+    <slot name="actions" />
+  </div>
+@endif

package/src/ui/sidebar/SidebarItem.stx

@@ -1,92 +1,86 @@
 <script server>
+import { resolveIconColor, resolveSidebarTheme } from './themes'
+
 export const id = $props.id || ''
 export const label = $props.label || ''
 export const icon = $props.icon || ''
+export const iconColor = $props.iconColor || ''
+export const image = $props.image || ''
 export const href = $props.href || ''
-export const badge = $props.badge || ''
+export const count = $props.count ?? $props.badge ?? ''
 export const active = $props.active ?? false
 export const disabled = $props.disabled ?? false
-export const indent = $props.indent ?? false
-export const variant = $props.variant || 'tahoe'
-
-const itemVariants = {
-  workspace: {
-    base: 'flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2 text-[14px] leading-tight transition-colors duration-150',
-    indent: '',
-    active: 'bg-[#e7e7e5] text-zinc-950',
-    inactive: 'text-zinc-700 hover:bg-[#ececea] hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: active ? 'text-zinc-900 dark:text-zinc-100' : 'text-zinc-500 dark:text-zinc-500',
-    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/70 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
-  },
-  desktop: {
-    base: 'flex w-full items-center gap-3 rounded-[14px] px-3 py-1.5 text-[13.5px] leading-tight transition-colors duration-150',
-    indent: '',
-    active: 'bg-[#e8e8e6]/90 text-zinc-950 dark:bg-white/12 dark:text-white',
-    inactive: 'text-zinc-700 hover:bg-white/38 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-white/10',
-    icon: active ? 'text-zinc-900 dark:text-white' : 'text-zinc-600 dark:text-zinc-400',
-    badge: 'ml-auto grid h-5 min-w-5 place-items-center rounded-full bg-white/72 px-1.5 text-[11px] font-medium text-zinc-500 shadow-sm dark:bg-white/10 dark:text-zinc-400',
-  },
-  default: {
-    base: 'flex items-center gap-2.5 px-2.5 py-1.5 rounded-md text-[13px] transition-all duration-150',
-    indent: indent ? 'ml-2' : '',
-    active: 'bg-blue-500/20 text-blue-600 dark:bg-blue-400/25 dark:text-blue-300 font-medium',
-    inactive: 'text-black/80 dark:text-white/80 hover:bg-black/5 dark:hover:bg-white/10',
-    icon: active ? 'text-blue-600 dark:text-blue-300' : 'text-black/50 dark:text-white/50',
-    badge: 'ml-auto px-2 py-0.5 text-xs font-medium rounded-full bg-black/10 text-black/70 dark:bg-white/15 dark:text-white/70',
-  },
-}
+export const expandable = $props.expandable ?? false
+export const expanded = $props.expanded ?? true
+export const depth = $props.depth || 0
+export const parents = $props.parents || ''
+export const theme = $props.theme || $props.variant || 'macos'
 
-const itemStyle = itemVariants[variant] || itemVariants.default
-const baseItemList = [itemStyle.base, itemStyle.indent]
-const stateClasses = disabled ? 'opacity-50 cursor-not-allowed' : active ? itemStyle.active : itemStyle.inactive
+const themeStyle = resolveSidebarTheme(theme).item
 
-export const itemClasses = [...baseItemList, stateClasses].filter(Boolean).join(' ')
-export const iconClasses = `${icon} h-[18px] w-[18px] flex-shrink-0 ${itemStyle.icon}`
-export const badgeClasses = itemStyle.badge
-</script>
+export const rowClasses = [
+  themeStyle.base,
+  disabled ? themeStyle.disabled : themeStyle.hover,
+  disabled ? '' : themeStyle.pressed,
+  active ? themeStyle.active : '',
+].filter(Boolean).join(' ')
 
-<script client>
-const emit = defineEmits()
-const isDisabled = {{ disabled }}
-const itemPayload = { id: {{ id }}, label: {{ label }}, href: {{ href }} }
+export const disclosureClasses = themeStyle.disclosure
+export const chevronClasses = themeStyle.chevron
+export const iconSlotClasses = themeStyle.iconSlot
+export const iconClasses = `${icon} ${themeStyle.icon}`
+export const imageClasses = themeStyle.image
+export const labelClasses = themeStyle.label
+export const countClasses = themeStyle.count
 
-function onClick(event) {
-  if (isDisabled) {
-    event.preventDefault()
-    return
-  }
-  emit('click', { item: itemPayload, event })
-}
+// Nested rows are indented; the icon tint accepts macOS system color names
+// ("blue", "yellow", …) or any CSS color.
+export const indentStyle = depth > 0 ? `padding-left: ${depth * themeStyle.indentPerLevel}px` : ''
+const tint = resolveIconColor(iconColor)
+export const iconStyle = tint ? `color: ${tint}` : ''
+export const isLink = Boolean(href) && !disabled
 </script>
 
-@if(href && !disabled)
-  <a
-    href="{{ href }}"
-    class="{{ itemClasses }}"
-    @click="onClick($event)"
-    @if(active)aria-current="page"@endif
-  >
-    @if(icon)
-      <div class="{{ iconClasses }}"></div>
-    @endif
-    <span class="flex-1 truncate">{{ label }}</span>
-    @if(badge)
-      <span class="{{ badgeClasses }}">{{ badge }}</span>
-    @endif
-  </a>
-@else
-  <button
-    type="button"
-    class="{{ itemClasses }}"
-    @click="onClick($event)"
-    @if(disabled)disabled aria-disabled="true"@endif
-  >
-    @if(icon)
-      <div class="{{ iconClasses }}"></div>
-    @endif
-    <span class="flex-1 truncate text-left">{{ label }}</span>
-    @if(badge)
-      <span class="{{ badgeClasses }}">{{ badge }}</span>
-    @endif
-  </button>
-@endif
+<div
+  data-sidebar-row
+  data-item-id="{{ id }}"
+  @if(parents)data-parents="{{ parents }}"@endif
+  @if(expandable)data-expanded="{{ expanded ? 'true' : 'false' }}"@endif
+  @if(indentStyle)style="{{ indentStyle }}"@endif
+>
+  @if(isLink)
+    <a href="{{ href }}" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" @if(active)data-active="true" aria-current="page"@endif>
+      <span class="{{ disclosureClasses }}" @if(expandable)data-sidebar-disclosure role="button" aria-label="Toggle {{ label }}"@endif>
+        @if(expandable)
+          <span class="{{ chevronClasses }}" aria-hidden="true"></span>
+        @endif
+      </span>
+      @if(image)
+        <span class="{{ iconSlotClasses }}"><img src="{{ image }}" alt="" class="{{ imageClasses }}" /></span>
+      @elseif(icon)
+        <span class="{{ iconSlotClasses }}"><span class="{{ iconClasses }}" @if(iconStyle)style="{{ iconStyle }}"@endif aria-hidden="true"></span></span>
+      @endif
+      <span class="{{ labelClasses }}">{{ label }}</span>
+      @if(count !== '' && count !== null && count !== undefined)
+        <span class="{{ countClasses }}">{{ count }}</span>
+      @endif
+    </a>
+  @else
+    <button type="button" data-sidebar-item data-label="{{ label }}" class="{{ rowClasses }}" @if(active)data-active="true" aria-current="page"@endif @if(disabled)data-disabled disabled aria-disabled="true"@endif>
+      <span class="{{ disclosureClasses }}" @if(expandable)data-sidebar-disclosure role="button" aria-label="Toggle {{ label }}"@endif>
+        @if(expandable)
+          <span class="{{ chevronClasses }}" aria-hidden="true"></span>
+        @endif
+      </span>
+      @if(image)
+        <span class="{{ iconSlotClasses }}"><img src="{{ image }}" alt="" class="{{ imageClasses }}" /></span>
+      @elseif(icon)
+        <span class="{{ iconSlotClasses }}"><span class="{{ iconClasses }}" @if(iconStyle)style="{{ iconStyle }}"@endif aria-hidden="true"></span></span>
+      @endif
+      <span class="{{ labelClasses }}">{{ label }}</span>
+      @if(count !== '' && count !== null && count !== undefined)
+        <span class="{{ countClasses }}">{{ count }}</span>
+      @endif
+    </button>
+  @endif
+</div>