@stacksjs/components 0.2.91 → 0.2.93

package/dist/SidebarItem-gtrcw4ky.stx

@@ -0,0 +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 count = $props.count ?? $props.badge ?? ''
+export const active = $props.active ?? false
+export const disabled = $props.disabled ?? false
+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 themeStyle = resolveSidebarTheme(theme).item
+
+export const rowClasses = [
+  themeStyle.base,
+  disabled ? themeStyle.disabled : themeStyle.hover,
+  disabled ? '' : themeStyle.pressed,
+  active ? themeStyle.active : '',
+].filter(Boolean).join(' ')
+
+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
+
+// 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>
+
+<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>

package/dist/SidebarSection-qf8fhy55.stx

@@ -0,0 +1,83 @@
+<script server>
+import { resolveSidebarTheme } from './themes'
+
+export const id = $props.id || ''
+export const label = $props.label || ''
+export const items = $props.items || []
+export const collapsible = $props.collapsible ?? true
+export const collapsed = $props.collapsed ?? false
+export const theme = $props.theme || $props.variant || 'macos'
+
+const themeStyle = resolveSidebarTheme(theme)
+export const headerClasses = themeStyle.sectionHeader + (collapsible ? ' cursor-default' : '')
+export const chevronClasses = themeStyle.sectionChevron
+export const groupClasses = themeStyle.sectionGroup
+
+// Components can't render themselves recursively, so the item tree is
+// flattened into ready-to-render rows here. Each row remembers its depth
+// and ancestor ids — the Sidebar controller uses those to collapse whole
+// subtrees.
+function flatten(list, depth = 0, parents = []) {
+  return list.flatMap((item) => {
+    const children = item.children || []
+    const row = {
+      id: item.id,
+      label: item.label,
+      icon: item.icon || '',
+      iconColor: item.iconColor || '',
+      image: item.image || '',
+      href: item.href || '',
+      count: item.count ?? item.badge ?? '',
+      active: item.active === true,
+      disabled: item.disabled === true,
+      expandable: children.length > 0 || item.expandable === true,
+      expanded: item.expanded !== false,
+      depth,
+      parents: parents.join('/'),
+    }
+    return [row, ...flatten(children, depth + 1, [...parents, item.id])]
+  })
+}
+
+export const rows = flatten(items)
+</script>
+
+<section
+  data-sidebar-section
+  data-section-id="{{ id }}"
+  data-expanded="{{ collapsed ? 'false' : 'true' }}"
+>
+  @if(label)
+    @if(collapsible)
+      <button type="button" data-sidebar-section-header class="{{ headerClasses }}" aria-expanded="{{ collapsed ? 'false' : 'true' }}">
+        <span class="truncate">{{ label }}</span>
+        <span data-sidebar-section-chevron class="{{ chevronClasses }}" aria-hidden="true"></span>
+      </button>
+    @else
+      <div class="{{ headerClasses }}">
+        <span class="truncate">{{ label }}</span>
+      </div>
+    @endif
+  @endif
+
+  <div class="{{ groupClasses }}" role="group" @if(label)aria-label="{{ label }}"@endif>
+    @foreach(rows as row)
+      <SidebarItem
+        :id="row.id"
+        :label="row.label"
+        :icon="row.icon"
+        :iconColor="row.iconColor"
+        :image="row.image"
+        :href="row.href"
+        :count="row.count"
+        :active="row.active"
+        :disabled="row.disabled"
+        :expandable="row.expandable"
+        :expanded="row.expanded"
+        :depth="row.depth"
+        :parents="row.parents"
+        :theme="theme"
+      />
+    @endforeach
+  </div>
+</section>

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-SknOIC/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-ptvQRK/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-SknOIC/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-ptvQRK/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-SknOIC/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-ptvQRK/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-SknOIC/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-ptvQRK/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1132,15 +1132,167 @@ var RadioGroupOption_default = "./RadioGroupOption-s1d6r221.stx";
 // src/ui/select/Select.stx
 var Select_default = "./Select-1vnd0brz.stx";
 // src/ui/sidebar/Sidebar.stx
-var Sidebar_default = "./Sidebar-0jzasrmt.stx";
-// src/ui/sidebar/SidebarSection.stx
-var SidebarSection_default = "./SidebarSection-g195cb4f.stx";
-// src/ui/sidebar/SidebarItem.stx
-var SidebarItem_default = "./SidebarItem-h53sgqzz.stx";
-// src/ui/sidebar/SidebarHeader.stx
-var SidebarHeader_default = "./SidebarHeader-ywpmx14d.stx";
+var Sidebar_default = "./Sidebar-4hn7vw4n.stx";
 // src/ui/sidebar/SidebarFooter.stx
-var SidebarFooter_default = "./SidebarFooter-zsfsgcxb.stx";
+var SidebarFooter_default = "./SidebarFooter-0aegr99p.stx";
+// src/ui/sidebar/SidebarHeader.stx
+var SidebarHeader_default = "./SidebarHeader-ed5wb13t.stx";
+// src/ui/sidebar/SidebarItem.stx
+var SidebarItem_default = "./SidebarItem-gtrcw4ky.stx";
+// src/ui/sidebar/SidebarSection.stx
+var SidebarSection_default = "./SidebarSection-qf8fhy55.stx";
+// src/ui/sidebar/themes.ts
+var macosColors = {
+  blue: "#0088ff",
+  red: "#ff383c",
+  pink: "#ff2d55",
+  orange: "#ff8d28",
+  yellow: "#ffcc00",
+  green: "#34c759",
+  teal: "#00c3d0",
+  cyan: "#00c0e8",
+  indigo: "#6155f5",
+  purple: "#cb30e0",
+  brown: "#ac7f5e",
+  gray: "#8e8e93"
+};
+var macos = {
+  pane: [
+    "bg-white/55 dark:bg-[#1e1e23]/55",
+    "backdrop-blur-[60px] backdrop-saturate-[1.8]",
+    "text-black dark:text-white",
+    "select-none"
+  ].join(" "),
+  layers: {
+    shimmerRim: true
+  },
+  scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-[10px] pb-[10px]",
+  sectionHeader: [
+    "group/section flex w-full items-center",
+    "pl-[8px] pr-[6px] pt-[16px] pb-[5px]",
+    "text-[11px] font-semibold leading-[13px]",
+    "text-[#3c3c43]/60 dark:text-[#ebebf5]/60"
+  ].join(" "),
+  sectionChevron: [
+    "i-f7-chevron-down h-[11px] w-[11px] ml-auto",
+    "text-[#3c3c43]/45 dark:text-[#ebebf5]/45",
+    "opacity-0 group-hover/section:opacity-100 transition-opacity duration-150",
+    "transition-transform duration-200"
+  ].join(" "),
+  sectionGroup: "flex flex-col gap-[2px]",
+  item: {
+    base: [
+      "flex w-full items-center",
+      "h-[30px] rounded-[9px] pl-[4px] pr-[8px]",
+      "text-[13px] leading-[16px] font-normal",
+      "text-black dark:text-white",
+      "transition-colors duration-150 ease-out",
+      "cursor-default"
+    ].join(" "),
+    hover: "hover:bg-black/4 dark:hover:bg-white/6",
+    active: "bg-black/8 dark:bg-white/14",
+    pressed: "active:bg-black/10 dark:active:bg-white/18",
+    disabled: "opacity-40 pointer-events-none",
+    disclosure: "flex h-[16px] w-[18px] shrink-0 items-center justify-center",
+    chevron: [
+      "i-f7-chevron-right h-[11px] w-[11px]",
+      "text-[#3c3c43]/55 dark:text-[#ebebf5]/55",
+      "transition-transform duration-200 ease-out"
+    ].join(" "),
+    iconSlot: "flex h-[20px] w-[22px] shrink-0 items-center justify-center mr-[7px]",
+    icon: "h-[17px] w-[17px]",
+    image: "h-[20px] w-[20px] rounded-[4px] object-cover shadow-sm",
+    label: "flex-1 truncate text-left",
+    count: [
+      "ml-[8px] shrink-0 tabular-nums",
+      "text-[13px] leading-[16px]",
+      "text-[#3c3c43]/60 dark:text-[#ebebf5]/60"
+    ].join(" "),
+    indentPerLevel: 16
+  }
+};
+var workspace = {
+  pane: "bg-[#f4f4f3] dark:bg-neutral-950 text-zinc-950 dark:text-white select-none",
+  layers: {},
+  scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-5 py-5",
+  sectionHeader: "group/section flex w-full items-center gap-2.5 px-4 pb-2 pt-5 text-[13px] font-semibold uppercase tracking-[0.12em] text-zinc-400 dark:text-zinc-500",
+  sectionChevron: "i-f7-chevron-down h-3 w-3 ml-auto opacity-0 group-hover/section:opacity-100 transition-opacity duration-150 transition-transform duration-200",
+  sectionGroup: "flex flex-col space-y-1",
+  item: {
+    base: "flex w-full items-center gap-3 rounded-[16px] px-3.5 py-2 text-[14px] leading-tight transition-colors duration-150",
+    hover: "hover:bg-[#ececea] hover:text-zinc-950 dark:hover:bg-white/10",
+    active: "bg-[#e7e7e5] text-zinc-950 dark:bg-white/12 dark:text-white",
+    pressed: "active:bg-[#e2e2e0] dark:active:bg-white/15",
+    disabled: "opacity-50 pointer-events-none",
+    disclosure: "flex h-4 w-4 shrink-0 items-center justify-center",
+    chevron: "i-f7-chevron-right h-3 w-3 opacity-50 transition-transform duration-200",
+    iconSlot: "flex h-5 w-5 shrink-0 items-center justify-center",
+    icon: "h-[18px] w-[18px] text-zinc-500 dark:text-zinc-500",
+    image: "h-5 w-5 rounded object-cover",
+    label: "flex-1 truncate text-left text-zinc-700 dark:text-zinc-300",
+    count: "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",
+    indentPerLevel: 12
+  }
+};
+var desktop = {
+  pane: "bg-[#f3f3f1]/48 dark:bg-neutral-950/32 backdrop-blur-3xl backdrop-saturate-150 text-zinc-950 dark:text-white select-none",
+  layers: {
+    tint: "bg-[linear-gradient(112deg,rgba(255,255,255,0.20)_0%,rgba(255,255,255,0.04)_45%,rgba(226,226,222,0.16)_100%)] dark:bg-[linear-gradient(112deg,rgba(255,255,255,0.08)_0%,rgba(255,255,255,0.02)_46%,rgba(255,255,255,0.06)_100%)]"
+  },
+  scrollArea: "flex-1 overflow-y-auto overflow-x-hidden px-5 py-2",
+  sectionHeader: "group/section flex w-full items-center gap-2.5 px-3 pb-1.5 pt-3 rounded-[14px] text-[12px] font-semibold uppercase tracking-[0.10em] text-zinc-500/80 dark:text-zinc-400/80",
+  sectionChevron: "i-f7-chevron-down h-3 w-3 ml-auto opacity-0 group-hover/section:opacity-100 transition-opacity duration-150 transition-transform duration-200",
+  sectionGroup: "flex flex-col space-y-1",
+  item: {
+    base: "flex w-full items-center gap-3 rounded-[14px] px-3 py-1.5 text-[13.5px] leading-tight transition-colors duration-150",
+    hover: "hover:bg-white/38 hover:text-zinc-950 dark:hover:bg-white/10",
+    active: "bg-[#e8e8e6]/90 text-zinc-950 dark:bg-white/12 dark:text-white",
+    pressed: "active:bg-white/50 dark:active:bg-white/15",
+    disabled: "opacity-50 pointer-events-none",
+    disclosure: "flex h-4 w-4 shrink-0 items-center justify-center",
+    chevron: "i-f7-chevron-right h-3 w-3 opacity-50 transition-transform duration-200",
+    iconSlot: "flex h-5 w-5 shrink-0 items-center justify-center",
+    icon: "h-[18px] w-[18px] text-zinc-600 dark:text-zinc-400",
+    image: "h-5 w-5 rounded object-cover",
+    label: "flex-1 truncate text-left text-zinc-700 dark:text-zinc-300",
+    count: "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",
+    indentPerLevel: 12
+  }
+};
+var solid = {
+  ...macos,
+  pane: "bg-stone-100 dark:bg-neutral-900 text-black dark:text-white select-none",
+  layers: {}
+};
+var transparent = {
+  ...macos,
+  pane: "bg-transparent text-black dark:text-white select-none",
+  layers: {}
+};
+var vibrancy = {
+  ...macos,
+  pane: "bg-white/50 dark:bg-black/40 backdrop-blur-3xl backdrop-saturate-200 text-black dark:text-white select-none",
+  layers: {}
+};
+var sidebarThemes = {
+  macos,
+  tahoe: macos,
+  "macos-tahoe": macos,
+  "macos-latest": macos,
+  workspace,
+  desktop,
+  solid,
+  transparent,
+  vibrancy
+};
+function resolveSidebarTheme(name) {
+  return sidebarThemes[name || "macos"] || sidebarThemes.macos;
+}
+function resolveIconColor(color) {
+  if (!color)
+    return;
+  return macosColors[color] || color;
+}
 // src/ui/skeleton/Skeleton.stx
 var Skeleton_default = "./Skeleton-v1pwa8nr.stx";
 // src/ui/spinner/Spinner.stx
@@ -3699,12 +3851,15 @@ export {
   t,
   storage,
   staggerAnimation,
+  sidebarThemes,
   setTitle,
   setMeta,
   setLink,
   setI18n,
   setErrorHandler,
   sequenceAnimations,
+  resolveSidebarTheme,
+  resolveIconColor,
   removeAnimation,
   preloadModules,
   preloadModule,
@@ -3715,6 +3870,7 @@ export {
   numberFormats,
   n,
   moveFocus,
+  macosColors,
   loadLocaleMessages,
   linear,
   lazyLoadModule,

package/dist/ui/sidebar/index.d.ts

@@ -1,155 +1,115 @@
-// Types
+/**
+ * One navigation row.
+ *
+ * ```ts
+ * { id: 'icloud', label: 'iCloud', icon: 'i-f7-tray', iconColor: 'blue', count: 248, active: true }
+ * ```
+ */
 export declare interface SidebarItemData {
   id: string
   label: string
   icon?: string
+  iconColor?: string
+  image?: string
   href?: string
+  count?: string | number
   badge?: string | number
   active?: boolean
   disabled?: boolean
+  children?: SidebarItemData[]
+  expandable?: boolean
+  expanded?: boolean
 }
+/** A titled group of rows (e.g. "Favorites"). Untitled when `label` is empty. */
 export declare interface SidebarSectionData {
   id: string
-  label: string
-  icon?: string
+  label?: string
   items: SidebarItemData[]
-  expanded?: boolean
   collapsible?: boolean
+  collapsed?: boolean
 }
 export declare interface SidebarProps {
   sections?: SidebarSectionData[]
-  collapsed?: boolean
-  collapsible?: boolean
+  theme?: SidebarThemeChoice
+  variant?: SidebarThemeChoice
   width?: number
-  minWidth?: number
-  collapseMode?: 'rail' | 'hidden'
-  variant?: SidebarVariant
-  placement?: 'fixed' | 'sticky' | 'static'
   position?: 'left' | 'right'
+  placement?: 'fixed' | 'sticky' | 'static'
   bordered?: boolean
-  materialOpacity?: number
-  materialDarkOpacity?: number
-  materialScheme?: 'system' | 'light' | 'dark'
+  collapsed?: boolean
+  collapsible?: boolean
+  collapseMode?: 'hidden' | 'rail'
+  minWidth?: number
   persistKey?: string
   shellSelector?: string
   widthVar?: string
   collapsedClass?: string
-  nativeMaterialCollapse?: boolean
   className?: string
   onCollapse?: (collapsed: boolean) => void
   onSectionToggle?: (sectionId: string) => void
+  onItemToggle?: (event: { id: string, expanded: boolean }) => void
   onItemClick?: (item: SidebarItemData, event: Event) => void
 }
 export declare interface SidebarSectionProps {
   id: string
-  label: string
-  icon?: string
+  label?: string
   items: SidebarItemData[]
-  expanded?: boolean
   collapsible?: boolean
-  showLabel?: boolean
-  variant?: SidebarVariant
-  onToggle?: (id: string) => void
-  onItemClick?: (item: SidebarItemData, event: Event) => void
+  collapsed?: boolean
+  theme?: SidebarThemeChoice
 }
-export declare interface SidebarItemProps {
+export declare interface SidebarItemProps extends SidebarItemData {
+  depth?: number
+  parents?: string
+  theme?: SidebarThemeChoice
+}
+/** A floating toolbar or footer action button. */
+export declare interface SidebarActionData {
   id: string
+  icon: string
   label: string
-  icon?: string
-  href?: string
-  badge?: string | number
-  active?: boolean
-  disabled?: boolean
-  indent?: boolean
-  variant?: SidebarVariant
-  onClick?: (event: Event) => void
 }
 export declare interface SidebarHeaderProps {
+  theme?: SidebarThemeChoice
+  showWindowControls?: boolean
+  actions?: SidebarActionData[]
+  showSearch?: boolean
+  searchPlaceholder?: string
   title?: string
   subtitle?: string
   logo?: string
-  logoIcon?: string
-  showWindowControls?: boolean | 'auto'
-  showNavigationControls?: boolean
-  showSearch?: boolean
-  searchPlaceholder?: string
-  searchValue?: string
-  collapsed?: boolean
-  variant?: SidebarVariant
+  onAction?: (actionId: string) => void
   onSearch?: (value: string) => void
+  onWindowControl?: (action: 'close' | 'minimize' | 'zoom') => void
 }
 export declare interface SidebarFooterProps {
-  showSettings?: boolean
-  showThemeToggle?: boolean
-  settingsHref?: string
-  settingsLabel?: string
-  collapsed?: boolean
-  variant?: SidebarVariant
-  actions?: Array<{
-    label: string
-    icon?: string
-    href?: string
-    onClick?: () => void
-  }>
-  onThemeToggle?: () => void
-}
-/**
- * Native Sidebar Configuration
- *
- * Used to configure the native macOS sidebar when running with Craft's --native-sidebar flag.
- * The sidebar uses NSOutlineView with vibrancy for a true Tahoe-style appearance.
- */
-export declare interface NativeSidebarConfig {
-  variant?: SidebarVariant
-  material?: SidebarMaterial
-  backgroundEffect?: SidebarBackgroundEffect
-  allowsVibrancy?: boolean
-  materialOpacity?: number
-  materialDarkOpacity?: number
-  materialScheme?: 'system' | 'light' | 'dark'
-  header?: {
-    title?: string
-    subtitle?: string
-    icon?: string
-  }
-  searchPlaceholder?: string
-  sections: NativeSidebarSection[]
-  minWidth?: number
-  maxWidth?: number
-  canCollapse?: boolean
-}
-export declare interface NativeSidebarSection {
-  id: string
-  title: string
-  collapsible?: boolean
-  collapsed?: boolean
-  items: NativeSidebarItem[]
-}
-export declare interface NativeSidebarItem {
-  id: string
-  label: string
-  icon?: string
-  badge?: string | number
-  tintColor?: string
-  selected?: boolean
-  disabled?: boolean
-  children?: NativeSidebarItem[]
-  data?: Record<string, unknown>
+  theme?: SidebarThemeChoice
+  avatar?: string
+  name?: string
+  detail?: string
+  actions?: SidebarActionData[]
+  onProfileClick?: () => void
+  onAction?: (actionId: string) => void
 }
 /**
- * Craft sidebar selection event
- * Passed to window.craft._sidebarSelectHandler when user clicks a sidebar item
+ * Sidebar themes. `macos` recreates the sidebar of the latest macOS
+ * (Tahoe, macOS 26/27) — translucent material, Liquid Glass edge shimmer,
+ * 30px rows with 9px-radius highlights and plain gray counts. `tahoe`,
+ * `macos-tahoe` and `macos-latest` are aliases of `macos`. The remaining
+ * names are legacy looks kept for backwards compatibility.
  */
-export declare interface SidebarSelectEvent {
-  itemId: string
-  item: NativeSidebarItem
-  sectionId?: string
-}
-export type SidebarVariant = 'tahoe' | 'vibrancy' | 'solid' | 'transparent' | 'workspace' | 'desktop';
-export type SidebarMaterial = 'auto' | 'sidebar' | 'hud' | 'popover' | 'content';
-export type SidebarBackgroundEffect = 'none' | 'vibrancy' | 'shimmer';
+export type SidebarThemeChoice = | 'macos'
+  | 'macos-tahoe'
+  | 'macos-latest'
+  | 'tahoe'
+  | 'vibrancy'
+  | 'solid'
+  | 'transparent'
+  | 'workspace'
+  | 'desktop';
 export { default as Sidebar } from './Sidebar.stx';
-export { default as SidebarSection } from './SidebarSection.stx';
-export { default as SidebarItem } from './SidebarItem.stx';
-export { default as SidebarHeader } from './SidebarHeader.stx';
 export { default as SidebarFooter } from './SidebarFooter.stx';
+export { default as SidebarHeader } from './SidebarHeader.stx';
+export { default as SidebarItem } from './SidebarItem.stx';
+export { default as SidebarSection } from './SidebarSection.stx';
+export * from './themes';

package/dist/ui/sidebar/themes.d.ts

@@ -0,0 +1,74 @@
+export declare function resolveSidebarTheme(name?: string): SidebarTheme;
+/**
+ * Resolve an item's icon tint. Accepts a macOS system color name
+ * (`"blue"`, `"red"`, …) or any CSS color, and falls back to the
+ * theme's default icon color when unset.
+ */
+export declare function resolveIconColor(color?: string): string | undefined;
+/**
+ * Sidebar theme registry
+ *
+ * Every visual decision the sidebar makes lives here, expressed as utility
+ * classes, so a theme can be read top-to-bottom like a spec sheet.
+ *
+ * The flagship theme is `macos` — a faithful recreation of the sidebar in
+ * the latest macOS (Tahoe, macOS 26/27 "Liquid Glass"). Its metrics were
+ * measured from native apps (Mail, Music, Notes) at @2x:
+ *
+ *   row pitch 32px = 30px row + 2px gap · highlight radius 9px
+ *   label 13px · count 13px secondary gray · section header 11px semibold
+ *   icon 17px in a fixed 22px slot · disclosure gutter 18px · child indent 16px
+ *
+ * Legacy themes (`workspace`, `desktop`, `solid`, `transparent`, `vibrancy`)
+ * are preserved verbatim from the previous variant maps. `tahoe` now aliases
+ * `macos` — it always meant "look like macOS", and now it actually does.
+ */
+/** macOS system colors (light appearance) for tinting sidebar icons. */
+export declare const macosColors: {
+  blue: '#0088ff';
+  red: '#ff383c';
+  pink: '#ff2d55';
+  orange: '#ff8d28';
+  yellow: '#ffcc00';
+  green: '#34c759';
+  teal: '#00c3d0';
+  cyan: '#00c0e8';
+  indigo: '#6155f5';
+  purple: '#cb30e0';
+  brown: '#ac7f5e';
+  gray: '#8e8e93'
+};
+export declare const sidebarThemes: {
+  'tahoe': unknown;
+  'macos-tahoe': unknown;
+  'macos-latest': unknown
+};
+/** Class groups a sidebar theme provides. All values are utility classes. */
+export declare interface SidebarTheme {
+  pane: string
+  layers: {
+    shimmerRim?: boolean
+    tint?: string
+  }
+  scrollArea: string
+  sectionHeader: string
+  sectionChevron: string
+  sectionGroup: string
+  item: {
+    base: string
+    hover: string
+    active: string
+    pressed: string
+    disabled: string
+    disclosure: string
+    chevron: string
+    iconSlot: string
+    icon: string
+    image: string
+    label: string
+    count: string
+    indentPerLevel: number
+  }
+}
+export type MacosColor = keyof typeof macosColors;
+export type SidebarThemeName = keyof typeof sidebarThemes;