@astronox/core 0.4.13 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
   "license": "MIT",
   "keywords": [

package/src/components/actions/ScrollToTop/scrollToTopController.ts

@@ -4,27 +4,27 @@ const noop = (): void => undefined;
 export function initScrollToTop(control: HTMLButtonElement): () => void {
   if (control.getAttribute(initializedAttribute) === 'true') return noop;
 
-  const viewport = document.querySelector<HTMLElement>('[data-site-viewport]');
-  if (!viewport) return noop;
+  const scrollRoot = document.scrollingElement;
+  if (!scrollRoot) return noop;
 
   control.setAttribute(initializedAttribute, 'true');
 
   const sync = (): void => {
     control.hidden =
-      viewport.scrollTop <= 0 || document.fullscreenElement !== null;
+      scrollRoot.scrollTop <= 0 || document.fullscreenElement !== null;
   };
 
   const scrollToTop = (): void => {
-    viewport.scrollTo({ top: 0, behavior: 'auto' });
+    window.scrollTo({ top: 0, behavior: 'auto' });
   };
 
-  viewport.addEventListener('scroll', sync, { passive: true });
+  window.addEventListener('scroll', sync, { passive: true });
   document.addEventListener('fullscreenchange', sync);
   control.addEventListener('click', scrollToTop);
   sync();
 
   return () => {
-    viewport.removeEventListener('scroll', sync);
+    window.removeEventListener('scroll', sync);
     document.removeEventListener('fullscreenchange', sync);
     control.removeEventListener('click', scrollToTop);
     control.removeAttribute(initializedAttribute);

package/src/components/content/CardHeader/CardHeader.css

@@ -16,7 +16,7 @@
 .card-header[data-sticky-surface] {
   position: sticky;
   z-index: 41;
-  top: var(--nox-layout-gap);
+  top: calc(var(--nox-sticky-viewport-offset) + var(--nox-layout-gap));
 }
 
 .card-header__layout {

package/src/composition/Grid/Grid.css

@@ -103,6 +103,18 @@
   grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
 }
 
+.grid[data-layout='content-sidebar']:has(
+    > [data-composition='grid-item'][data-position='sticky']
+  ) {
+  --table-progressive-runway-block-size: calc(
+    100vh - var(--nox-site-header-responsive-height) - var(--nox-layout-gap) * 2
+  );
+  --table-progressive-runway-block-size: calc(
+    100dvh - var(--nox-site-header-responsive-height) - var(--nox-layout-gap) *
+      2
+  );
+}
+
 .grid[data-rows] {
   grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
 }
@@ -112,6 +124,8 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='sm'] {
+    --table-progressive-runway-block-size: 0px;
+
     grid-template-columns: 1fr;
   }
 
@@ -164,6 +178,8 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='md'] {
+    --table-progressive-runway-block-size: 0px;
+
     grid-template-columns: 1fr;
   }
 
@@ -216,6 +232,8 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='lg'] {
+    --table-progressive-runway-block-size: 0px;
+
     grid-template-columns: 1fr;
   }
 
@@ -268,6 +286,8 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='xl'] {
+    --table-progressive-runway-block-size: 0px;
+
     grid-template-columns: 1fr;
   }
 

package/src/composition/GridItem/GridItem.css

@@ -44,13 +44,14 @@
 .grid-item[data-position='sticky'] {
   position: sticky;
   z-index: 1;
-  top: var(--nox-layout-gap);
+  top: calc(var(--nox-sticky-viewport-offset) + var(--nox-layout-gap));
   padding-block-end: var(--nox-border-width);
   max-block-size: calc(
-    100vh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+    100vh - var(--nox-site-header-responsive-height) - var(--nox-layout-gap) * 2
   );
   max-block-size: calc(
-    100dvh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+    100dvh - var(--nox-site-header-responsive-height) - var(--nox-layout-gap) *
+      2
   );
   align-self: start;
   overflow-x: hidden;

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -29,7 +29,7 @@
 
   position: sticky;
   z-index: 39;
-  top: 0;
+  top: var(--nox-sticky-viewport-offset);
   display: block;
   min-width: 0;
   min-height: var(--surface-group-sticky-occlusion-size);

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -6,6 +6,10 @@ const getScrollParent = (element: HTMLElement): HTMLElement | Window => {
   let parent = element.parentElement;
 
   while (parent) {
+    if (parent === document.body || parent === document.documentElement) {
+      return window;
+    }
+
     const styles = window.getComputedStyle(parent);
 
     if (/(auto|scroll|overlay)/.test(styles.overflowY)) {

package/src/patterns/Combobox/comboboxController.ts

@@ -506,9 +506,8 @@ export function initCombobox(root: HTMLElement): () => void {
     const siteViewport = document.querySelector<HTMLElement>(
       '[data-site-viewport]',
     );
-    const isSiteScroll = siteViewport
-      ? target === siteViewport
-      : target === document || target === window;
+    const isSiteScroll =
+      target === siteViewport || target === document || target === window;
     if (isSiteScroll && window.matchMedia(compactViewportQuery).matches) {
       close();
       blurFocusedDescendant();

package/src/patterns/Modal/Modal.css

@@ -7,6 +7,8 @@ html:has(.modal[open]) [data-site-viewport] {
 }
 
 .modal {
+  --nox-sticky-viewport-offset: 0px;
+
   position: fixed;
   inset: 0;
   inline-size: 100%;

package/src/patterns/Table/Table.css

@@ -44,13 +44,14 @@
 .table[data-table-sticky-header] [data-table-header] {
   position: sticky;
   z-index: 40;
-  top: 0;
+  top: var(--nox-sticky-viewport-offset);
 }
 
 .table[data-table-sticky-header]:has([data-sticky-surface])
   [data-table-header] {
   top: calc(
-    var(--nox-layout-gap) + var(--surface-group-sticky-surface-block-size)
+    var(--nox-sticky-viewport-offset) + var(--nox-layout-gap) +
+      var(--surface-group-sticky-surface-block-size)
   );
 }
 

package/src/patterns/Table/TablePagination.css

@@ -49,13 +49,19 @@
   position: relative;
   display: block;
   overflow: visible;
-  block-size: 0;
-  min-block-size: 0;
+  block-size: var(--table-progressive-runway-block-size, 0px);
+  min-block-size: var(--table-progressive-runway-block-size, 0px);
   border: 0;
   border-radius: 0;
   background: transparent;
 }
 
+.table-pagination[data-table-progressive-enhanced='true']
+  .table-pagination__sentinel {
+  inset-block-start: 0;
+  inset-block-end: auto;
+}
+
 .table-pagination[data-table-progressive-enhanced='true']
   .table-pagination__content {
   block-size: 0;

package/src/patterns/Table/tableViewport.ts

@@ -18,29 +18,57 @@ export function resolveTableStartScrollTop({
 }
 
 export function resolveTableScrollRoot(root: HTMLElement): HTMLElement | null {
-  return root.closest<HTMLElement>('[data-site-viewport]');
+  let candidate = root.parentElement;
+
+  while (candidate) {
+    if (candidate === document.body || candidate === document.documentElement) {
+      return null;
+    }
+
+    if (
+      /(auto|scroll|overlay)/u.test(
+        window.getComputedStyle(candidate).overflowY,
+      )
+    ) {
+      return candidate;
+    }
+
+    candidate = candidate.parentElement;
+  }
+
+  return null;
 }
 
 function resolveTableStickyOffset(root: HTMLElement): number {
-  const stickySurface = root.querySelector<HTMLElement>(
-    '[data-sticky-surface]',
-  );
-  if (!stickySurface) return 0;
+  const stickyElement =
+    root.querySelector<HTMLElement>('[data-sticky-surface]') ??
+    root.querySelector<HTMLElement>('[data-table-header]');
+  if (!stickyElement) return 0;
 
-  return Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
+  return Number.parseFloat(window.getComputedStyle(stickyElement).top) || 0;
 }
 
 export function revealTableStart(root: HTMLElement): void {
   const scrollRoot = resolveTableScrollRoot(root);
-  if (!scrollRoot) return;
+  const documentScrollRoot = document.scrollingElement;
+  if (!scrollRoot && !documentScrollRoot) return;
+
+  const currentScrollTop = scrollRoot
+    ? scrollRoot.scrollTop
+    : documentScrollRoot!.scrollTop;
 
   const nextScrollTop = resolveTableStartScrollTop({
-    currentScrollTop: scrollRoot.scrollTop,
+    currentScrollTop,
     stickyOffset: resolveTableStickyOffset(root),
     tableTop: root.getBoundingClientRect().top,
-    viewportTop: scrollRoot.getBoundingClientRect().top,
+    viewportTop: scrollRoot?.getBoundingClientRect().top ?? 0,
   });
-  if (nextScrollTop !== scrollRoot.scrollTop) {
+
+  if (nextScrollTop === currentScrollTop) return;
+
+  if (scrollRoot) {
     scrollRoot.scrollTop = nextScrollTop;
+  } else {
+    window.scrollTo({ top: nextScrollTop, behavior: 'auto' });
   }
 }

package/src/styles/base.css

@@ -44,46 +44,42 @@
 
 html {
   min-width: 320px;
-  height: 100%;
   min-height: 100%;
-  overflow: hidden;
+  scroll-padding-block-start: var(--nox-site-header-responsive-height);
+  scrollbar-gutter: stable;
   background: var(--nox-page-background);
   color: var(--nox-text);
   font-family: var(--nox-font-body);
 }
 
 body {
-  height: 100%;
   min-height: 100%;
   margin: 0;
-  overflow: hidden;
   background: var(--nox-page-background);
 }
 
+@media (hover: hover) and (pointer: fine) {
+  body {
+    border-inline-end: var(--nox-border-width) solid var(--nox-border);
+  }
+}
+
 .site-shell {
   display: grid;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
   min-height: 100vh;
   grid-template-rows: auto minmax(0, 1fr);
-  overflow: hidden;
+  overflow-x: clip;
+  overflow-y: visible;
   background: var(--nox-page-background);
 }
 
-@supports (height: 100svh) {
+@supports (min-height: 100svh) {
   .site-shell {
-    height: 100svh;
     min-height: 100svh;
   }
 }
 
-@media (width >= 48rem) {
-  .site-shell {
-    height: 100vh;
-    min-height: 100vh;
-  }
-}
-
 a {
   color: var(--nox-content-link-color);
   font-weight: var(--nox-content-link-font-weight);
@@ -133,13 +129,13 @@ p {
 
 .site-viewport {
   --site-content-gap: var(--nox-space-5);
+  --nox-sticky-viewport-offset: var(--nox-site-header-responsive-height);
 
   min-width: 0;
   min-height: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: visible;
   background: var(--nox-page-background);
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: auto;
 }
 
 .site-main {

package/src/styles/tokens.css

@@ -215,6 +215,8 @@
   --nox-navigation-compact-block-size: 3rem;
   --nox-site-header-height: 4.75rem;
   --nox-site-header-compact-height: 4rem;
+  --nox-site-header-responsive-height: var(--nox-site-header-height);
+  --nox-sticky-viewport-offset: 0px;
 
   /* Spacing scale. */
   --nox-space: 0.25rem;
@@ -289,5 +291,6 @@
   :root {
     --nox-section-responsive-block-size: var(--nox-section-compact-block-size);
     --nox-compact-media-responsive-size: 2.125rem;
+    --nox-site-header-responsive-height: var(--nox-site-header-compact-height);
   }
 }