@stacksjs/components 0.2.167 → 0.2.168

package/dist/{SidebarSpaces-fgxhn4ac.stx → SidebarSpaces-f149wvf1.stx}

@@ -134,6 +134,32 @@ function applyTint(position) {
   style.setProperty('--stx-space-dark-accent', tint.dark.accent)
 }
 
+/**
+ * Keep the active dot on screen.
+ *
+ * The dot row scrolls once there are more spaces than fit, and without this the
+ * active dot can sit outside the visible range — an indicator that indicates
+ * nothing. Measured on a sidebar with 22 spaces: the active one was the 20th,
+ * and none of the twelve you could see was lit.
+ *
+ * `block: 'nearest'` because this must never scroll the page vertically to
+ * bring a 6px dot into view.
+ */
+function revealCurrentDot(tab) {
+  const row = tab.closest('[data-space-switcher] .stx-space-dots')
+  if (!row || row.scrollWidth <= row.clientWidth) return
+
+  const rowBox = row.getBoundingClientRect()
+  const dotBox = tab.getBoundingClientRect()
+  if (dotBox.left >= rowBox.left && dotBox.right <= rowBox.right) return
+
+  tab.scrollIntoView({
+    inline: 'center',
+    block: 'nearest',
+    behavior: animates() ? 'smooth' : 'auto',
+  })
+}
+
 function markCurrent(position) {
   const id = ids[position]
 
@@ -142,6 +168,7 @@ function markCurrent(position) {
     tab.setAttribute('data-space-current', String(current))
     tab.setAttribute('aria-selected', String(current))
     tab.tabIndex = current ? 0 : -1
+    if (current) revealCurrentDot(tab)
   })
 
   root.querySelectorAll('[data-space]').forEach((panel) => {

package/dist/index.js

@@ -1,11 +1,11 @@
 // @bun
-// ../../../../../../../tmp/stx-components-build-RdlquU/stubs/stub-0.js
+// ../../../../../../../tmp/stx-components-build-tmXNAI/stubs/stub-0.js
 var stub_0_default = { __stx: true, src: "./components/CodeBlock.stx" };
-// ../../../../../../../tmp/stx-components-build-RdlquU/stubs/stub-1.js
+// ../../../../../../../tmp/stx-components-build-tmXNAI/stubs/stub-1.js
 var stub_1_default = { __stx: true, src: "./components/Footer.stx" };
-// ../../../../../../../tmp/stx-components-build-RdlquU/stubs/stub-2.js
+// ../../../../../../../tmp/stx-components-build-tmXNAI/stubs/stub-2.js
 var stub_2_default = { __stx: true, src: "./components/Hero.stx" };
-// ../../../../../../../tmp/stx-components-build-RdlquU/stubs/stub-3.js
+// ../../../../../../../tmp/stx-components-build-tmXNAI/stubs/stub-3.js
 var stub_3_default = { __stx: true, src: "./components/Installation.stx" };
 // src/composables/useCopyCode.ts
 function useCopyCode(options) {
@@ -1146,7 +1146,7 @@ var SidebarSection_default = "./SidebarSection-zd9z35ch.stx";
 // src/ui/sidebar/SidebarSpace.stx
 var SidebarSpace_default = "./SidebarSpace-r062weq2.stx";
 // src/ui/sidebar/SidebarSpaces.stx
-var SidebarSpaces_default = "./SidebarSpaces-fgxhn4ac.stx";
+var SidebarSpaces_default = "./SidebarSpaces-f149wvf1.stx";
 // src/ui/sidebar/SidebarSpaceSwitcher.stx
 var SidebarSpaceSwitcher_default = "./SidebarSpaceSwitcher-az9wqm87.stx";
 // src/ui/sidebar/themes.ts

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/components",
   "type": "module",
-  "version": "0.2.167",
+  "version": "0.2.168",
   "description": "A modern component library built with STX, featuring headwind utility classes and TypeScript syntax highlighting.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -64,8 +64,8 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@cwcss/crosswind": "^0.2.14",
-    "@stacksjs/stx": "0.2.167",
-    "bun-plugin-stx": "0.2.167",
+    "@stacksjs/stx": "0.2.168",
+    "bun-plugin-stx": "0.2.168",
     "ts-syntax-highlighter": "^0.2.1"
   },
   "devDependencies": {

package/src/ui/sidebar/SidebarSpaces.stx

@@ -134,6 +134,32 @@ function applyTint(position) {
   style.setProperty('--stx-space-dark-accent', tint.dark.accent)
 }
 
+/**
+ * Keep the active dot on screen.
+ *
+ * The dot row scrolls once there are more spaces than fit, and without this the
+ * active dot can sit outside the visible range — an indicator that indicates
+ * nothing. Measured on a sidebar with 22 spaces: the active one was the 20th,
+ * and none of the twelve you could see was lit.
+ *
+ * `block: 'nearest'` because this must never scroll the page vertically to
+ * bring a 6px dot into view.
+ */
+function revealCurrentDot(tab) {
+  const row = tab.closest('[data-space-switcher] .stx-space-dots')
+  if (!row || row.scrollWidth <= row.clientWidth) return
+
+  const rowBox = row.getBoundingClientRect()
+  const dotBox = tab.getBoundingClientRect()
+  if (dotBox.left >= rowBox.left && dotBox.right <= rowBox.right) return
+
+  tab.scrollIntoView({
+    inline: 'center',
+    block: 'nearest',
+    behavior: animates() ? 'smooth' : 'auto',
+  })
+}
+
 function markCurrent(position) {
   const id = ids[position]
 
@@ -142,6 +168,7 @@ function markCurrent(position) {
     tab.setAttribute('data-space-current', String(current))
     tab.setAttribute('aria-selected', String(current))
     tab.tabIndex = current ? 0 : -1
+    if (current) revealCurrentDot(tab)
   })
 
   root.querySelectorAll('[data-space]').forEach((panel) => {