@stacksjs/components 0.2.118 → 0.2.120

package/dist/{Sidebar-hjazqxv8.stx → Sidebar-vgckg8f7.stx}

@@ -1,12 +1,25 @@
 <script server>
+import { normalizeSpaces, spaceIndexOf } from './spaces'
 import { resolveSidebarTheme } from './themes'
 
 // Data: [{ id, label, collapsible?, collapsed?, items: [{ id, label, icon,
 // iconColor, image, href, count, active?, disabled?, expanded?, children? }] }]
 export const sections = $props.sections || []
 
+// Arc-style spaces: [{ id, label, icon, tint, pinned, sections, action, clear }].
+// Passing them turns the sidebar into a swipeable stack of scenes instead of
+// one list. `theme` then defaults to `arc`, because spaces are that theme's
+// idea — a macOS source list has no equivalent.
+export const spaces = $props.spaces || []
+export const hasSpaces = spaces.length > 0
+export const activeSpace = $props.space || $props.activeSpace || ''
+export const showSpaceSwitcher = $props.showSpaceSwitcher ?? true
+export const showSpaceAdd = $props.showSpaceAdd ?? false
+export const spaceAddLabel = $props.spaceAddLabel || 'New space'
+export const spacePersistKey = $props.spacePersistKey || ''
+
 // `theme` is the new name; `variant` is accepted for backwards compatibility.
-export const theme = $props.theme || $props.variant || 'macos'
+export const theme = $props.theme || $props.variant || (hasSpaces ? 'arc' : 'macos')
 export const width = $props.width || 250
 export const position = $props.position || 'left'
 export const placement = $props.placement || 'fixed'
@@ -24,6 +37,14 @@ export const widthVar = $props.widthVar || '--stx-sidebar-width'
 export const collapsedClass = $props.collapsedClass || ''
 export const className = $props.className || ''
 
+// Mirror the OS light/dark preference onto the root element's `dark` class.
+// A native sidebar follows the system appearance, and Crosswind's `dark:`
+// variants are class-based, so something has to write that class — but it is
+// the document's business, not a navigation pane's. Left on by default so a
+// sidebar dropped into a page with no theme controller still behaves; turn it
+// off in any app that owns its own light/dark switch.
+export const followSystemAppearance = $props.followSystemAppearance ?? true
+
 // Unique id so the client controller can find this pane even with several
 // sidebars on the page.
 export const sidebarUid = $props.id || `stx-sidebar-${Math.random().toString(36).slice(2, 8)}`
@@ -51,6 +72,19 @@ export const paneClasses = [
   className,
 ].filter(Boolean).join(' ')
 
+// The pane carries its own width and, for spaces, the active space's palette.
+// Both are server-rendered rather than bound reactively so the sidebar is the
+// right size and the right color in the very first paint, before any client
+// script runs. The controller keeps `width` in step afterwards.
+const initialWidth = collapsed ? (collapseMode === 'hidden' ? 0 : minWidth) : width
+const normalizedSpaces = hasSpaces ? normalizeSpaces(spaces) : []
+const initialSpace = normalizedSpaces[spaceIndexOf(normalizedSpaces, activeSpace)] || null
+
+export const paneStyle = [
+  `width: ${initialWidth}px`,
+  initialSpace ? initialSpace.style : '',
+].filter(Boolean).join('; ')
+
 // Normalized ahead of the loop so template bindings stay simple accessors.
 export const sectionList = sections.map(section => ({
   id: section.id,
@@ -70,16 +104,17 @@ export const activeClasses = themeStyle.item.active
 import { findActiveSidebarHref } from './route-selection'
 
 const emit = defineEmits()
-const sidebarUidProp = '{{ sidebarUid }}'
+const componentRoot = window.__STX_CURRENT_ELEMENT__
 const collapsedProp = {{ collapsed }}
 const collapsibleProp = {{ collapsible }}
-const collapseModeProp = '{{ collapseMode }}'
+const collapseModeProp = {{ collapseMode }}
 const widthProp = {{ width }}
 const minWidthProp = {{ minWidth }}
-const persistKeyProp = '{{ persistKey }}'
-const shellSelectorProp = '{{ shellSelector }}'
-const widthVarProp = '{{ widthVar }}'
-const collapsedClassProp = '{{ collapsedClass }}'
+const persistKeyProp = {{ persistKey }}
+const shellSelectorProp = {{ shellSelector }}
+const widthVarProp = {{ widthVar }}
+const collapsedClassProp = {{ collapsedClass }}
+const followSystemAppearanceProp = {{ followSystemAppearance }}
 
 const collapsed = state(collapsedProp)
 const sidebarWidth = derived(() => {
@@ -162,7 +197,10 @@ function toggleRowDisclosure(row) {
 
 function toggleSection(section) {
   const expanded = section.getAttribute('data-expanded') !== 'false'
-  section.setAttribute('data-expanded', String(!expanded))
+  const nextExpanded = !expanded
+  section.setAttribute('data-expanded', String(nextExpanded))
+  section.querySelector('[data-sidebar-section-header]')
+    ?.setAttribute('aria-expanded', String(nextExpanded))
   syncRowVisibility()
   emit('sectionToggle', section.dataset.sectionId)
 }
@@ -320,6 +358,20 @@ function trackKeyWindow() {
 }
 
 function followSystemAppearance() {
+  // Writing the `dark` class puts a navigation component in charge of the
+  // whole document's color scheme, which is only defensible while nothing
+  // else wants the job. Two ways to say it does:
+  //
+  //   `follow-system-appearance="false"` — typed, discoverable, and the one to
+  //     reach for. An app with its own light/dark control wants this.
+  //   `data-theme` on the root — the runtime signal, for apps that decide at
+  //     load time. Re-checked on every sync, so claiming it later also works.
+  //
+  // Before the prop existed only the second was available, which meant an app
+  // that set `.dark` itself watched the sidebar quietly undo it on mount, with
+  // nothing in the component's API to suggest why.
+  if (!followSystemAppearanceProp) return
+
   const media = window.matchMedia('(prefers-color-scheme: dark)')
   function sync() {
     if (document.documentElement.dataset.theme) return
@@ -330,7 +382,7 @@ function followSystemAppearance() {
 }
 
 onMount(() => {
-  pane = document.getElementById(sidebarUidProp)
+  pane = componentRoot?.querySelector('[data-stx-sidebar]')
   if (!pane) return
 
   followSystemAppearance()
@@ -344,6 +396,13 @@ onMount(() => {
   }
   applyCollapseEffects(collapsed())
 
+  // Width is server-rendered onto the pane so it is correct in the first
+  // paint; from here on the effect keeps it in step with the collapse state.
+  // (A reactive `:style` binding would have owned the whole attribute, which
+  // would mean no width until hydration and would wipe the space palette
+  // rendered alongside it.)
+  effect(() => { pane.style.width = sidebarWidth() })
+
   pane.addEventListener('click', onClick)
   pane.addEventListener('keydown', onKeyDown)
   window.addEventListener('stx:navigate', onRouteChange)
@@ -372,13 +431,14 @@ defineExpose({ collapsed, toggle: toggleCollapse, syncRouteSelection })
   data-window-key="true"
   data-active-class="{{ activeClasses }}"
   class="{{ paneClasses }}"
-  :style="`width: ${sidebarWidth()}`"
+  style="{{ paneStyle }}"
+  @if(hasSpaces)data-sidebar-spaces="true"@endif
   :aria-hidden="String(collapsed() && collapseModeProp === 'hidden')"
   role="navigation"
   aria-label="Sidebar"
   tabindex="0"
 >
-  @if(tintClasses)
+  @if(tintClasses && !hasSpaces)
     <div class="absolute inset-0 pointer-events-none {{ tintClasses }}"></div>
   @endif
   @if(hasShimmerRim)
@@ -391,27 +451,41 @@ defineExpose({ collapsed, toggle: toggleCollapse, syncRouteSelection })
     </div>
   @endif
 
-  <div class="relative z-10 min-h-0 flex-1">
-    <div data-sidebar-scroll class="{{ scrollAreaClasses }} h-full stx-sidebar-scroll">
-      @if(sectionList.length > 0)
-        <nav class="flex flex-col">
-          @foreach(sectionList as section)
-            <SidebarSection
-              :id="section.id"
-              :label="section.label"
-              :items="section.items"
-              :collapsible="section.collapsible"
-              :collapsed="section.collapsed"
-              :theme="theme"
-            />
-          @endforeach
-        </nav>
-      @else
-        <slot />
-      @endif
+  @if(hasSpaces)
+    <div class="stx-sidebar-spaces-slot relative z-10 flex min-h-0 flex-1 flex-col">
+      <SidebarSpaces
+        :spaces="spaces"
+        :space="activeSpace"
+        :theme="theme"
+        :showSwitcher="showSpaceSwitcher"
+        :showAdd="showSpaceAdd"
+        :addLabel="spaceAddLabel"
+        :persistKey="spacePersistKey"
+      />
     </div>
-    <div data-sidebar-scroll-thumb class="stx-sidebar-scroll-thumb" aria-hidden="true"></div>
-  </div>
+  @else
+    <div class="relative z-10 min-h-0 flex-1">
+      <div data-sidebar-scroll class="{{ scrollAreaClasses }} h-full stx-sidebar-scroll">
+        @if(sectionList.length > 0)
+          <nav class="flex flex-col">
+            @foreach(sectionList as section)
+              <SidebarSection
+                :id="section.id"
+                :label="section.label"
+                :items="section.items"
+                :collapsible="section.collapsible"
+                :collapsed="section.collapsed"
+                :theme="theme"
+              />
+            @endforeach
+          </nav>
+        @else
+          <slot />
+        @endif
+      </div>
+      <div data-sidebar-scroll-thumb class="stx-sidebar-scroll-thumb" aria-hidden="true"></div>
+    </div>
+  @endif
 
   @if($slots.footer)
     <div class="relative z-10 flex-shrink-0">
@@ -537,13 +611,91 @@ defineExpose({ collapsed, toggle: toggleCollapse, syncRouteSelection })
   color: var(--stx-sidebar-icon-idle);
 }
 
+/* ---------------------------------------------------------------------------
+ * Spaces — the `arc` theme's swipeable scenes.
+ *
+ * The panel takes the active space's color, and switching spaces *crossfades*
+ * it rather than cutting. That crossfade is why the four properties below are
+ * registered with `@property`: an unregistered custom property is a token the
+ * browser cannot interpolate, so `transition` on it does nothing. Typed as
+ * `<color>`, they animate like any other color.
+ *
+ * Each space publishes both appearances as inline variables (SidebarSpaces
+ * writes them on swipe, the server writes the first one), and these rules pick
+ * between them. Keeping the choice in CSS is what lets a dark-mode space
+ * render correctly server-side, before any script runs.
+ * ------------------------------------------------------------------------- */
+@property --stx-space-from { syntax: "<color>"; inherits: true; initial-value: #f2f0ec; }
+@property --stx-space-to { syntax: "<color>"; inherits: true; initial-value: #e6e3dd; }
+@property --stx-space-ink { syntax: "<color>"; inherits: true; initial-value: #2c2a28; }
+@property --stx-space-accent { syntax: "<color>"; inherits: true; initial-value: #5b5b63; }
+
+/* The doubled attribute is for specificity, not for matching: the theme's own
+   `dark:bg-…` / `dark:text-…` utilities compile to `.dark .x`, which ties with
+   a single attribute plus the scope marker. A tie would leave the outcome to
+   stylesheet order — true today, but not something the space color should
+   depend on. */
+
+[data-sidebar-spaces="true"][data-stx-sidebar] {
+  --stx-space-from: var(--stx-space-light-from, #f2f0ec);
+  --stx-space-to: var(--stx-space-light-to, #e6e3dd);
+  --stx-space-ink: var(--stx-space-light-ink, #2c2a28);
+  --stx-space-accent: var(--stx-space-light-accent, #5b5b63);
+  /* Two layers: a sheen falling off over the top third, then the space color.
+     The sheen is what keeps a saturated space from reading as a flat swatch. */
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0) 32%),
+    linear-gradient(180deg, var(--stx-space-from) 0%, var(--stx-space-to) 100%);
+  color: var(--stx-space-ink);
+  /* Width is listed here because this rule outranks the pane's
+     `transition-[width]` utility class and would otherwise drop it. */
+  transition:
+    --stx-space-from 420ms ease,
+    --stx-space-to 420ms ease,
+    --stx-space-ink 420ms ease,
+    --stx-space-accent 420ms ease,
+    width 300ms ease-out;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-sidebar-spaces="true"][data-stx-sidebar] {
+    --stx-space-from: var(--stx-space-dark-from, #17171b);
+    --stx-space-to: var(--stx-space-dark-to, #0e0e11);
+    --stx-space-ink: var(--stx-space-dark-ink, #ededf0);
+    --stx-space-accent: var(--stx-space-dark-accent, #b9b9c2);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 30%),
+      linear-gradient(180deg, var(--stx-space-from) 0%, var(--stx-space-to) 100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-sidebar-spaces="true"][data-stx-sidebar] { transition: none; }
+}
+
+/* A component carrying a client script renders inside a scope wrapper, and
+   that wrapper is a plain block we cannot put classes on from here — so the
+   spaces root's own `flex-1` sizes itself against the wrapper instead of
+   against this column, and the switcher rail floats up under the last row
+   rather than sitting on the floor of the pane. Collapsing the wrapper out of
+   layout makes the spaces root the flex item, which is what it was written to
+   be. The selector deliberately spares the root itself, for the case where
+   there is no wrapper at all. */
+.stx-sidebar-spaces-slot > *:not([data-stx-sidebar-spaces]):not(script):not(style) {
+  display: contents;
+}
+
 /* Rows collapse like AppKit outlines: fixed row height animates to zero.
    The 32px pitch is the row itself — AppKit leaves no gap, so a run of
-   selected or hovered rows reads as one continuous block. */
+   selected or hovered rows reads as one continuous block. Arc's rows are
+   discrete cards with their own gutter, so the theme overrides the pitch. */
 [data-sidebar-row] {
-  height: 32px;
+  height: var(--stx-sidebar-row-h, 32px);
   transition: height 0.22s ease, opacity 0.16s ease;
 }
+[data-sidebar-theme="arc"] {
+  --stx-sidebar-row-h: 30px;
+}
 [data-sidebar-row][data-collapsed] {
   height: 0;
   opacity: 0;

package/dist/{SidebarFooter-0aegr99p.stx → SidebarFooter-s7skj92y.stx}

@@ -24,6 +24,26 @@ export const actionClasses = [
   'transition-colors duration-150',
   'hover:bg-black/5 dark:hover:bg-white/10',
 ].join(' ')
+
+// Arc keeps the footer to a quiet strip of ghost icons, tuned to the warm
+// panel rather than the macOS neutral.
+export const isArc = theme === 'arc'
+
+// Like the rest of the Arc chrome, these take their color from the panel so
+// they follow a space's ink instead of staying a fixed dark on top of it.
+export const arcActionClasses = [
+  'grid h-[28px] w-[28px] place-items-center rounded-[7px]',
+  'opacity-50 transition-[background-color,opacity] duration-150',
+  'hover:bg-black/[0.05] hover:opacity-100 dark:hover:bg-white/10',
+].join(' ')
+
+export const arcProfileClasses = [
+  'flex w-full items-center gap-[8px]',
+  'h-[38px] rounded-[8px] px-[6px]',
+  'text-[13px] font-medium',
+  'transition-colors duration-150',
+  'hover:bg-black/[0.05] dark:hover:bg-white/8',
+].join(' ')
 </script>
 
 <script client>
@@ -64,6 +84,32 @@ function onAction(event) {
     @endif
     <slot />
   </div>
+@elseif(isArc)
+  <div class="shrink-0 px-[10px] pb-[10px] pt-[4px]">
+    @if(name)
+      <button type="button" class="{{ arcProfileClasses }}" @click="onProfileClick()">
+        @if(avatar)
+          <img src="{{ avatar }}" alt="" class="h-[24px] w-[24px] rounded-full object-cover" />
+        @else
+          <span class="grid h-[24px] w-[24px] place-items-center rounded-full bg-black/8 text-[12px] font-semibold dark:bg-white/12">{{ name.charAt(0) }}</span>
+        @endif
+        <span class="min-w-0 flex-1 truncate text-left">{{ name }}</span>
+        @if(detail)
+          <span class="shrink-0 text-[12px] opacity-45">{{ detail }}</span>
+        @endif
+      </button>
+    @endif
+    @if(actions.length > 0)
+      <div class="flex items-center gap-[2px]">
+        @foreach(actions as action)
+          <button type="button" class="{{ arcActionClasses }}" aria-label="{{ action.label }}" data-sidebar-action="{{ action.id }}" @click="onAction($event)">
+            <span class="{{ action.icon }} h-[15px] w-[15px]" 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 />

package/dist/{SidebarHeader-ed5wb13t.stx → SidebarHeader-sa9mtdst.stx}

@@ -3,7 +3,6 @@
 // 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 || ''
@@ -28,6 +27,45 @@ export const toolbarButtonClasses = [
   'hover:bg-white/80 dark:hover:bg-white/20',
   'active:bg-white/95 dark:active:bg-white/25',
 ].join(' ')
+
+// Arc's header is quieter than macOS'. No floating glass buttons — just a
+// recessed search field and flat ghost icons, sized to sit on the panel
+// without competing with the row cards below it.
+export const isArc = theme === 'arc'
+
+// Window chrome. A macOS sidebar owns the traffic lights, so they are on by
+// default there. Arc's sidebar can go either way — a browser window puts the
+// lights and the back/forward controls in the sidebar, while an app that only
+// borrows the look wants a bare strip — so on this theme both are opt-in.
+export const showWindowControls = $props.showWindowControls ?? !isArc
+export const showNavigation = $props.showNavigation ?? false
+
+// Back / forward / reload, as in Arc's URL strip. Flat and ghosted, not glass.
+export const navButtons = [
+  { id: 'back', icon: 'i-f7-arrow-left', label: 'Back' },
+  { id: 'forward', icon: 'i-f7-arrow-right', label: 'Forward' },
+  { id: 'reload', icon: 'i-f7-arrow-clockwise', label: 'Reload' },
+]
+
+// Arc's chrome takes its color from the panel rather than declaring its own.
+// On a plain warm panel that resolves to the theme's ink; inside a space it
+// follows `--stx-space-ink` and crossfades along with the panel on every
+// swipe. A hardcoded `text-[#2c2a28]` would stay dark over a saturated space
+// and would not move when the space changed.
+export const arcSearchClasses = [
+  'h-[30px] w-full rounded-[8px] border-0',
+  'bg-black/[0.045] dark:bg-white/[0.07]',
+  'pl-[28px] pr-[8px]',
+  'text-[13px] text-current',
+  'placeholder:text-current placeholder:opacity-40',
+  'focus:outline-none focus:ring-2 focus:ring-black/10 dark:focus:ring-white/15',
+].join(' ')
+
+export const arcActionClasses = [
+  'grid h-[28px] w-[28px] place-items-center rounded-[7px]',
+  'opacity-55 transition-[background-color,opacity] duration-150',
+  'hover:bg-black/[0.05] hover:opacity-100 dark:hover:bg-white/10',
+].join(' ')
 </script>
 
 <script client>
@@ -85,6 +123,61 @@ function onWindowControl(action) {
       </div>
     </div>
   @endif
+@elseif(isArc)
+  <div class="flex flex-col gap-[8px] px-[10px] pb-[8px] pt-[12px]">
+    @if(showWindowControls || showNavigation)
+      <div class="flex items-center px-[2px] [-webkit-app-region:drag]">
+        @if(showWindowControls)
+          <div class="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>
+        @endif
+        <span class="flex-1"></span>
+        @if(showNavigation)
+          <div class="flex items-center gap-[2px] [-webkit-app-region:no-drag]">
+            @foreach(navButtons as nav)
+              <button type="button" class="{{ arcActionClasses }}" aria-label="{{ nav.label }}" data-sidebar-action="{{ nav.id }}" @click="onAction($event)">
+                <span class="{{ nav.icon }} h-[14px] w-[14px]" aria-hidden="true"></span>
+              </button>
+            @endforeach
+          </div>
+        @endif
+      </div>
+    @endif
+
+    @if(title || logo || actions.length > 0)
+      <div class="flex items-center gap-[8px]">
+        @if(logo)
+          <img src="{{ logo }}" alt="{{ title }}" class="h-[20px] w-[20px] rounded-[6px] object-cover" />
+        @endif
+        @if(title)
+          <span class="min-w-0 flex-1 truncate text-[13px] font-medium">{{ title }}</span>
+        @else
+          <span class="flex-1"></span>
+        @endif
+        @foreach(actions as action)
+          <button type="button" class="{{ arcActionClasses }}" aria-label="{{ action.label }}" data-sidebar-action="{{ action.id }}" @click="onAction($event)">
+            <span class="{{ action.icon }} h-[15px] w-[15px]" aria-hidden="true"></span>
+          </button>
+        @endforeach
+        <slot name="actions" />
+      </div>
+    @endif
+
+    @if(showSearch)
+      <div class="relative">
+        <span class="i-f7-search absolute left-[9px] top-1/2 h-[13px] w-[13px] -translate-y-1/2 opacity-40" aria-hidden="true"></span>
+        <input
+          type="text"
+          placeholder="{{ searchPlaceholder }}"
+          class="{{ arcSearchClasses }}"
+          @input="onSearchInput($event)"
+        />
+      </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)

package/dist/SidebarPinned-tvj28bm0.stx

@@ -0,0 +1,88 @@
+<script server>
+import { resolveIconColor } from './themes'
+
+// Arc's favorites grid — the block of square tiles above a space's rows.
+//
+// These are deliberately NOT sidebar rows. They carry no `data-sidebar-item`,
+// so the Sidebar controller's selection, arrow-key navigation and disclosure
+// logic skip them entirely: a pinned tile is a shortcut, not a place in the
+// list. Their own click handler emits `pinnedClick` and that is the whole
+// contract.
+export const items = ($props.items || []).map(item => ({
+  id: item.id,
+  label: item.label || '',
+  icon: item.icon || '',
+  image: item.image || '',
+  href: item.href || '',
+  iconStyle: resolveIconColor(item.iconColor) ? `color: ${resolveIconColor(item.iconColor)}` : '',
+}))
+
+export const columns = $props.columns || 4
+
+// Tiles are translucent white so they pick up whichever space color sits
+// behind them, rather than fighting it with a fixed fill.
+export const tileClasses = [
+  'grid h-[46px] place-items-center rounded-[10px]',
+  'bg-white/45 dark:bg-white/8',
+  'transition-[background-color,transform] duration-150 ease-out',
+  'hover:bg-white/72 dark:hover:bg-white/14',
+  'active:scale-[0.96]',
+].join(' ')
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onPinnedClick(event) {
+  const tile = event.target.closest('[data-space-pinned-item]')
+  if (!tile) return
+  emit('pinnedClick', { id: tile.dataset.pinnedId, href: tile.getAttribute('href') || '', event })
+}
+</script>
+
+@if(items.length > 0)
+  <div
+    data-space-pinned
+    class="grid gap-[6px] px-[8px] pb-[10px] pt-[2px]"
+    style="grid-template-columns: repeat({{ columns }}, minmax(0, 1fr))"
+    role="list"
+    aria-label="Pinned"
+    @click="onPinnedClick($event)"
+  >
+    @foreach(items as item)
+      @if(item.href)
+        <a
+          href="{{ item.href }}"
+          data-space-pinned-item
+          data-pinned-id="{{ item.id }}"
+          class="{{ tileClasses }}"
+          role="listitem"
+          title="{{ item.label }}"
+          aria-label="{{ item.label }}"
+        >
+          @if(item.image)
+            <img src="{{ item.image }}" alt="" class="h-[22px] w-[22px] rounded-[5px] object-cover" />
+          @else
+            <span class="{{ item.icon }} h-[20px] w-[20px]" @if(item.iconStyle)style="{{ item.iconStyle }}"@endif aria-hidden="true"></span>
+          @endif
+        </a>
+      @else
+        <button
+          type="button"
+          data-space-pinned-item
+          data-pinned-id="{{ item.id }}"
+          class="{{ tileClasses }}"
+          role="listitem"
+          title="{{ item.label }}"
+          aria-label="{{ item.label }}"
+        >
+          @if(item.image)
+            <img src="{{ item.image }}" alt="" class="h-[22px] w-[22px] rounded-[5px] object-cover" />
+          @else
+            <span class="{{ item.icon }} h-[20px] w-[20px]" @if(item.iconStyle)style="{{ item.iconStyle }}"@endif aria-hidden="true"></span>
+          @endif
+        </button>
+      @endif
+    @endforeach
+  </div>
+@endif