@stacksjs/components 0.2.91 → 0.2.92

package/src/ui/sidebar/themes.ts

@@ -0,0 +1,240 @@
+/**
+ * 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 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',
+} as const
+
+export type MacosColor = keyof typeof macosColors
+
+/** Class groups a sidebar theme provides. All values are utility classes. */
+export interface SidebarTheme {
+  /** The <aside> pane itself: material, text color, borders. */
+  pane: string
+  /** Extra overlay layers rendered inside the pane (visual only). */
+  layers: {
+    /** Liquid Glass edge highlight — a bright rim that subtly shimmers. */
+    shimmerRim?: boolean
+    /** Soft tint gradient blended over the material. */
+    tint?: string
+  }
+  /** Scrollable content area between header and footer. */
+  scrollArea: string
+  /** Section header row (e.g. "Favorites", "iCloud"). */
+  sectionHeader: string
+  /** Chevron inside the section header (revealed on hover). */
+  sectionChevron: string
+  /** Wrapper around a section's items. */
+  sectionGroup: string
+  /** One navigation row, layout + typography. State styles live below. */
+  item: {
+    base: string
+    hover: string
+    active: string
+    pressed: string
+    disabled: string
+    /** Fixed-width leading slot the disclosure chevron sits in. */
+    disclosure: string
+    /** Chevron glyph itself (rotates 90° when expanded). */
+    chevron: string
+    /** Fixed-width slot that centers the 17px icon. */
+    iconSlot: string
+    icon: string
+    /** Thumbnail images (album art, avatars) rendered instead of an icon. */
+    image: string
+    label: string
+    /** Right-aligned unread/item count — plain gray text on macOS. */
+    count: string
+    /** Indentation added per nesting depth. */
+    indentPerLevel: number
+  }
+}
+
+const macos: SidebarTheme = {
+  pane: [
+    // Frosted sidebar material. In a Craft window with `webSidebarMaterial`
+    // the native vibrancy shows through; in a browser the backdrop blur
+    // approximates it over whatever sits behind the 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,
+  },
+}
+
+/**
+ * Legacy themes carried over from the old per-component variant maps so
+ * existing apps keep rendering identically. New work should use `macos`.
+ */
+const workspace: SidebarTheme = {
+  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,
+  },
+}
+
+const desktop: SidebarTheme = {
+  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,
+  },
+}
+
+const solid: SidebarTheme = {
+  ...macos,
+  pane: 'bg-stone-100 dark:bg-neutral-900 text-black dark:text-white select-none',
+  layers: {},
+}
+
+const transparent: SidebarTheme = {
+  ...macos,
+  pane: 'bg-transparent text-black dark:text-white select-none',
+  layers: {},
+}
+
+const vibrancy: SidebarTheme = {
+  ...macos,
+  pane: 'bg-white/50 dark:bg-black/40 backdrop-blur-3xl backdrop-saturate-200 text-black dark:text-white select-none',
+  layers: {},
+}
+
+export const sidebarThemes: Record<string, SidebarTheme> = {
+  macos,
+  // Historical names people may still pass — all render the macOS look.
+  'tahoe': macos,
+  'macos-tahoe': macos,
+  'macos-latest': macos,
+  workspace,
+  desktop,
+  solid,
+  transparent,
+  vibrancy,
+}
+
+export type SidebarThemeName = keyof typeof sidebarThemes
+
+export function resolveSidebarTheme(name?: string): SidebarTheme {
+  return sidebarThemes[name || 'macos'] || sidebarThemes.macos
+}
+
+/**
+ * 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 function resolveIconColor(color?: string): string | undefined {
+  if (!color)
+    return undefined
+  return macosColors[color as MacosColor] || color
+}

package/stx-plugin.ts

@@ -0,0 +1,19 @@
+/**
+ * stx plugin shim for @stacksjs/components.
+ *
+ * Register in a project's stx config to make every library component
+ * (<Sidebar>, <Button>, <Dialog>, …) resolvable by tag name — component
+ * resolution walks subdirectories, so the grouped `src/ui/<name>/` layout
+ * works as-is:
+ *
+ * ```ts
+ * // stx.config.ts / config/ui.ts
+ * export default {
+ *   plugins: ['@stacksjs/components/stx-plugin'],
+ * }
+ * ```
+ */
+export default {
+  name: '@stacksjs/components',
+  components: './src/ui',
+}

package/dist/Sidebar-0jzasrmt.stx

@@ -1,330 +0,0 @@
-<script server>
-export const sections = $props.sections || []
-export const collapsed = $props.collapsed ?? false
-export const collapsible = $props.collapsible ?? true
-export const width = $props.width || 240
-export const minWidth = $props.minWidth || 64
-export const collapseMode = $props.collapseMode || 'rail'
-export const variant = $props.variant || 'tahoe'
-export const position = $props.position || 'left'
-export const placement = $props.placement || 'fixed'
-export const bordered = $props.bordered ?? true
-export const materialOpacity = $props.materialOpacity ?? (variant === 'desktop' ? 0.78 : 0.7)
-export const materialDarkOpacity = $props.materialDarkOpacity ?? (variant === 'desktop' ? 0.8 : materialOpacity)
-export const materialScheme = $props.materialScheme || 'system'
-export const persistKey = $props.persistKey || ''
-export const shellSelector = $props.shellSelector || ''
-export const widthVar = $props.widthVar || '--stx-sidebar-width'
-export const collapsedClass = $props.collapsedClass || ''
-export const nativeMaterialCollapse = $props.nativeMaterialCollapse ?? (variant === 'desktop' && collapseMode === 'hidden')
-export const className = $props.className || ''
-
-const variantStyles = {
-  tahoe: {
-    bg: 'bg-white/70 dark:bg-black/50',
-    border: 'border-black/5 dark:border-white/10',
-    backdrop: 'backdrop-blur-2xl backdrop-saturate-180',
-    tint: true,
-  },
-  vibrancy: {
-    bg: 'bg-white/50 dark:bg-black/40',
-    border: 'border-white/20 dark:border-white/10',
-    backdrop: 'backdrop-blur-3xl backdrop-saturate-200',
-    tint: false,
-  },
-  solid: {
-    bg: 'bg-stone-100 dark:bg-neutral-900',
-    border: 'border-stone-200 dark:border-neutral-800',
-    backdrop: '',
-    tint: false,
-  },
-  transparent: {
-    bg: 'bg-transparent',
-    border: 'border-transparent',
-    backdrop: '',
-    tint: false,
-  },
-  workspace: {
-    bg: 'bg-[#f4f4f3] dark:bg-neutral-950',
-    border: 'border-transparent',
-    backdrop: '',
-    tint: false,
-    nav: 'px-5 py-5 space-y-1',
-    slot: 'px-5 py-5',
-  },
-  desktop: {
-    bg: 'bg-[#f3f3f1]/48 dark:bg-neutral-950/32',
-    border: 'border-white/15 dark:border-white/10',
-    backdrop: 'backdrop-blur-3xl backdrop-saturate-150',
-    tint: false,
-    shimmer: true,
-    nav: 'px-5 py-2 space-y-1',
-    slot: 'px-5 py-2',
-  },
-}
-
-const style = variantStyles[variant] || variantStyles.tahoe
-export const variantTint = style.tint
-export const variantShimmer = style.shimmer
-const borderSide = position === 'left' ? 'border-r' : 'border-l'
-const borderClasses = bordered ? `${borderSide} ${style.border}` : ''
-const positionClass = position === 'left' ? 'left-0' : 'right-0'
-const placementClasses = {
-  fixed: `fixed inset-y-0 z-50 ${positionClass}`,
-  sticky: 'sticky top-0 h-screen',
-  static: 'relative h-full',
-}
-
-export const containerClasses = [
-  placementClasses[placement] || placementClasses.fixed,
-  'flex flex-col',
-  'transition-all duration-300 ease-out',
-  'overflow-hidden',
-  style.bg,
-  style.backdrop,
-  borderClasses,
-  className,
-].filter(Boolean).join(' ')
-
-export const collapseBtnPosition = variant === 'desktop'
-  ? (position === 'left' ? 'left-[166px]' : 'right-[166px]')
-  : (position === 'left' ? 'right-2' : 'left-2')
-export const navClasses = style.nav || 'px-3 py-2 space-y-1'
-export const slotClasses = style.slot || 'px-3 py-2'
-</script>
-
-<script client>
-const emit = defineEmits()
-const collapsedProp = {{ collapsed }}
-const collapsibleProp = {{ collapsible }}
-const widthProp = {{ width }}
-const minWidthProp = {{ minWidth }}
-const collapseModeProp = {{ collapseMode }}
-const sectionsProp = {{ sections }}
-const positionProp = {{ position }}
-const variantProp = {{ variant }}
-const materialOpacityProp = {{ materialOpacity }}
-const materialDarkOpacityProp = {{ materialDarkOpacity }}
-const materialSchemeProp = {{ materialScheme }}
-const persistKeyProp = {{ persistKey }}
-const shellSelectorProp = {{ shellSelector }}
-const widthVarProp = {{ widthVar }}
-const collapsedClassProp = {{ collapsedClass }}
-const nativeMaterialCollapseProp = {{ nativeMaterialCollapse }}
-
-const collapsed = state(collapsedProp)
-const isHovered = state(false)
-const hasNativeSidebar = state(false)
-
-const showExpanded = derived(() => !collapsed() || isHovered())
-const sidebarWidth = derived(() => {
-  if (collapsed() && collapseModeProp === 'hidden') return '0px'
-  if (collapsed() && !isHovered()) return `${minWidthProp}px`
-  return `${widthProp}px`
-})
-const collapseAriaLabel = derived(() => collapsed() ? 'Expand sidebar' : 'Collapse sidebar')
-
-function applyCollapseEffects(nextCollapsed) {
-  if (persistKeyProp) {
-    try {
-      window.localStorage?.setItem(persistKeyProp, nextCollapsed ? 'true' : 'false')
-    }
-    catch {}
-  }
-
-  if (shellSelectorProp) {
-    document.querySelectorAll(shellSelectorProp).forEach((shell) => {
-      shell.style?.setProperty?.(widthVarProp, nextCollapsed && collapseModeProp === 'hidden' ? '0px' : `${widthProp}px`)
-      if (shell.dataset) shell.dataset.sidebarCollapsed = nextCollapsed ? 'true' : 'false'
-    })
-  }
-
-  document.documentElement.dataset.stxSidebarCollapsed = nextCollapsed ? 'true' : 'false'
-  if (collapsedClassProp) {
-    document.documentElement.classList.toggle(collapsedClassProp, nextCollapsed)
-  }
-
-  if (nativeMaterialCollapseProp) {
-    window.craft?.window?.setWebSidebarCollapsed?.(nextCollapsed).catch?.(() => {})
-  }
-}
-
-function setCollapsed(nextCollapsed, shouldEmit = true) {
-  collapsed.set(nextCollapsed)
-  applyCollapseEffects(nextCollapsed)
-  if (shouldEmit) emit('collapse', nextCollapsed)
-}
-
-function onMouseEnter() {
-  if (collapsed() && collapsibleProp && collapseModeProp !== 'hidden') isHovered.set(true)
-}
-
-function onMouseLeave() {
-  isHovered.set(false)
-}
-
-function toggleCollapse() {
-  setCollapsed(!collapsed())
-}
-
-function onSectionToggle(sectionId) {
-  emit('sectionToggle', sectionId)
-}
-
-function onItemClick(event) {
-  emit('itemClick', event.detail)
-}
-
-function isCraftRuntime() {
-  return window.__craftNativeSidebar === true
-    || window.craft?.__craft_bridge_loaded === true
-    || !!window.craft?.window
-    || !!window.webkit?.messageHandlers?.craft
-}
-
-onMount(async () => {
-  if (persistKeyProp) {
-    try {
-      const saved = window.localStorage?.getItem(persistKeyProp)
-      if (saved === 'true' || saved === 'false') collapsed.set(saved === 'true')
-    }
-    catch {}
-  }
-
-  applyCollapseEffects(collapsed())
-
-  if (variantProp === 'desktop' && isCraftRuntime()) {
-    document.documentElement.classList.add('has-stx-sidebar-material')
-    if (document.body?.dataset) document.body.dataset.sidebarMaterial = 'desktop'
-  }
-
-  hasNativeSidebar.set(isCraftRuntime() && window.craft?.hasNativeSidebar?.() === true)
-
-  const nativeSidebarApi = window.craft?.nativeUI || window.craft?.components
-  if (isCraftRuntime() && nativeSidebarApi?.createSidebar) {
-    try {
-      const sidebar = await nativeSidebarApi.createSidebar({
-        position: positionProp,
-        width: widthProp,
-        minWidth: minWidthProp,
-        collapseMode: collapseModeProp,
-        collapsible: collapsibleProp,
-        variant: variantProp,
-        material: variantProp === 'desktop' ? 'sidebar' : undefined,
-        backgroundEffect: variantProp === 'desktop' ? 'vibrancy' : undefined,
-        materialOpacity: materialOpacityProp,
-        materialDarkOpacity: materialDarkOpacityProp,
-        materialScheme: materialSchemeProp,
-        allowsVibrancy: variantProp === 'desktop' || variantProp === 'vibrancy' || variantProp === 'tahoe',
-        sections: sectionsProp.map(s => ({
-          id: s.id,
-          label: s.label,
-          items: s.items?.map(i => ({ id: i.id, label: i.label, icon: i.icon, href: i.href, badge: i.badge })),
-        })),
-      })
-      if (sidebar) hasNativeSidebar.set(true)
-    }
-    catch (err) {
-      console.warn('[Sidebar] Failed to create native sidebar, using web fallback:', err)
-    }
-  }
-})
-
-defineExpose({ collapsed, toggle: toggleCollapse })
-</script>
-
-<aside
-  :show="!hasNativeSidebar()"
-  class="{{ containerClasses }} sidebar-container"
-  data-sidebar-variant="{{ variant }}"
-  data-sidebar-material-scheme="{{ materialScheme }}"
-  :aria-hidden="String(collapsed() && collapseModeProp === 'hidden')"
-  :style="`width: ${sidebarWidth()}; --stx-sidebar-material-opacity: ${materialOpacityProp}; --stx-sidebar-material-dark-opacity: ${materialDarkOpacityProp}`"
-  @mouseenter="onMouseEnter()"
-  @mouseleave="onMouseLeave()"
-  role="navigation"
-  aria-label="Sidebar navigation"
->
-  @if(variantTint)
-    <div class="absolute inset-0 pointer-events-none bg-gradient-to-b from-amber-50/30 via-orange-50/20 to-stone-100/30 dark:from-neutral-800/20 dark:via-neutral-900/10 dark:to-neutral-800/20 mix-blend-overlay"></div>
-  @endif
-  @if(variantShimmer)
-    <div class="absolute inset-0 pointer-events-none 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%)]"></div>
-  @endif
-
-  @if($slots.header)
-    <div class="flex-shrink-0 relative z-10">
-      <slot name="header" />
-    </div>
-  @endif
-
-  <div class="flex-1 overflow-y-auto overflow-x-hidden relative z-10">
-    @if(sections.length > 0)
-      <nav class="{{ navClasses }}">
-        @foreach(section in sections)
-          <SidebarSection
-            :id="section.id"
-            :label="section.label"
-            :icon="section.icon"
-            :items="section.items"
-            :expanded="section.expanded !== false"
-            :collapsible="section.collapsible !== false"
-            :showLabel="showExpanded()"
-            :variant="variant"
-            @toggle="onSectionToggle(section.id)"
-            @itemClick="onItemClick($event)"
-          />
-        @endforeach
-      </nav>
-    @else
-      <div class="{{ slotClasses }}">
-        <slot />
-      </div>
-    @endif
-  </div>
-
-  @if($slots.footer)
-    <div class="flex-shrink-0 relative z-10">
-      <slot name="footer" />
-    </div>
-  @endif
-
-  @if(collapsible)
-    <button
-      type="button"
-      class="absolute top-4 {{ collapseBtnPosition }} p-1.5 rounded-lg text-stone-400 hover:text-stone-600 hover:bg-black/5 dark:hover:text-neutral-300 dark:hover:bg-white/10 transition-colors z-20"
-      @click="toggleCollapse()"
-      :aria-label="collapseAriaLabel()"
-      data-sidebar-collapse
-      data-stx-sidebar-collapse-button
-    >
-      <div :show="!collapsed()" class="i-hugeicons-sidebar-left w-5 h-5"></div>
-      <div :show="collapsed()" class="i-hugeicons-sidebar-right w-5 h-5"></div>
-    </button>
-  @endif
-</aside>
-
-<style scoped>
-.overflow-y-auto::-webkit-scrollbar { width: 6px; }
-.overflow-y-auto::-webkit-scrollbar-track { background: transparent; }
-.overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 3px; }
-.overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.25); }
-.sidebar-container[data-sidebar-variant="desktop"] {
-  background-color: rgba(246, 246, 244, var(--stx-sidebar-material-opacity, 0.78));
-  backdrop-filter: blur(24px) saturate(1.08);
-  -webkit-backdrop-filter: blur(24px) saturate(1.08);
-}
-html.has-native-sidebar [data-stx-native-window-controls] {
-  display: none;
-}
-html.has-native-sidebar [data-stx-sidebar-web-chrome] {
-  margin-left: 202px;
-}
-@media (prefers-color-scheme: dark) {
-  .sidebar-container[data-sidebar-variant="desktop"]:not([data-sidebar-material-scheme="light"]) {
-    background-color: rgba(24, 24, 23, var(--stx-sidebar-material-dark-opacity, 0.8));
-  }
-  .overflow-y-auto::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.15); }
-  .overflow-y-auto::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.25); }
-}
-</style>