@astronox/core 0.4.6 → 0.4.7

package/package.json

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

package/src/composition/Stack/Stack.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../theme/contracts';
 
 type StackElement = 'div' | 'form' | 'section' | 'nav';
-type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'layout';
 type StackAttributes = HTMLAttributes<'div'> &
   HTMLAttributes<'form'> &
   HTMLAttributes<'section'> &

package/src/composition/Stack/Stack.css

@@ -29,3 +29,7 @@
 .stack[data-gap='xl'] {
   --stack-gap: var(--nox-space-6);
 }
+
+.stack[data-gap='layout'] {
+  --stack-gap: var(--nox-layout-gap);
+}

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -16,9 +16,15 @@
   pointer-events: none;
 }
 
+.surface-group:has(> [data-sticky-surface]) {
+  --surface-group-sticky-surface-block-size: var(
+    --nox-section-responsive-block-size
+  );
+}
+
 .surface-group:has(> [data-sticky-surface])::before {
   --surface-group-sticky-occlusion-size: calc(
-    var(--nox-layout-gap) + var(--nox-section-responsive-block-size)
+    var(--nox-layout-gap) + var(--surface-group-sticky-surface-block-size)
   );
 
   position: sticky;
@@ -71,9 +77,9 @@
 }
 
 @container nox-surface-group (width < 32rem) {
-  .surface-group:has(> [data-sticky-surface])::before {
-    --surface-group-sticky-occlusion-size: calc(
-      var(--nox-layout-gap) + var(--nox-section-compact-block-size)
+  .surface-group:has(> [data-sticky-surface]) {
+    --surface-group-sticky-surface-block-size: var(
+      --nox-section-compact-block-size
     );
   }
 }

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -1,4 +1,6 @@
 const noop = () => {};
+const stickySurfaceBlockSizeProperty =
+  '--surface-group-sticky-surface-block-size';
 
 const getScrollParent = (element: HTMLElement): HTMLElement | Window => {
   let parent = element.parentElement;
@@ -37,12 +39,21 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
   stickySurface.before(sentinel);
 
   let observer: IntersectionObserver | null = null;
+  let surfaceResizeObserver: ResizeObserver | null = null;
   let resizeFrame = 0;
 
   const observe = () => {
     resizeFrame = 0;
     observer?.disconnect();
 
+    const stickySurfaceBlockSize = stickySurface.getBoundingClientRect().height;
+    if (stickySurfaceBlockSize > 0) {
+      root.style.setProperty(
+        stickySurfaceBlockSizeProperty,
+        `${stickySurfaceBlockSize}px`,
+      );
+    }
+
     const stickyOffset =
       Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
     observer = new IntersectionObserver(
@@ -72,11 +83,15 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
   root.setAttribute('data-sticky-initialized', 'true');
   window.addEventListener('resize', scheduleObserve, { passive: true });
+  surfaceResizeObserver =
+    'ResizeObserver' in window ? new ResizeObserver(scheduleObserve) : null;
+  surfaceResizeObserver?.observe(stickySurface);
   observe();
 
   return () => {
     window.removeEventListener('resize', scheduleObserve);
     observer?.disconnect();
+    surfaceResizeObserver?.disconnect();
     sentinel.remove();
 
     if (resizeFrame !== 0) {
@@ -85,5 +100,6 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
     root.removeAttribute('data-sticky-active');
     root.removeAttribute('data-sticky-initialized');
+    root.style.removeProperty(stickySurfaceBlockSizeProperty);
   };
 };

package/src/patterns/Table/Table.css

@@ -49,7 +49,9 @@
 
 .table[data-table-sticky-header]:has([data-sticky-surface])
   [data-table-header] {
-  top: calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size));
+  top: calc(
+    var(--nox-layout-gap) + var(--surface-group-sticky-surface-block-size)
+  );
 }
 
 @container nox-table (width < 32rem) {
@@ -57,11 +59,6 @@
     --table-cell-padding-inline: var(--nox-space-1);
     --table-edge-padding-inline: var(--nox-space-2);
   }
-
-  .table[data-table-sticky-header]:has([data-sticky-surface])
-    [data-table-header] {
-    top: calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size));
-  }
 }
 
 @container nox-table (width < 36rem) {

package/src/patterns/Table/tableViewport.ts

@@ -1,17 +1,17 @@
 type TableStartScrollInput = {
   currentScrollTop: number;
-  layoutGap: number;
+  stickyOffset: number;
   tableTop: number;
   viewportTop: number;
 };
 
 export function resolveTableStartScrollTop({
   currentScrollTop,
-  layoutGap,
+  stickyOffset,
   tableTop,
   viewportTop,
 }: TableStartScrollInput): number {
-  const targetTop = viewportTop + layoutGap;
+  const targetTop = viewportTop + stickyOffset;
   if (tableTop >= targetTop) return currentScrollTop;
 
   return Math.max(0, currentScrollTop + tableTop - targetTop);
@@ -21,18 +21,22 @@ export function resolveTableScrollRoot(root: HTMLElement): HTMLElement | null {
   return root.closest<HTMLElement>('[data-site-viewport]');
 }
 
+function resolveTableStickyOffset(root: HTMLElement): number {
+  const stickySurface = root.querySelector<HTMLElement>(
+    '[data-sticky-surface]',
+  );
+  if (!stickySurface) return 0;
+
+  return Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
+}
+
 export function revealTableStart(root: HTMLElement): void {
   const scrollRoot = resolveTableScrollRoot(root);
   if (!scrollRoot) return;
 
   const nextScrollTop = resolveTableStartScrollTop({
     currentScrollTop: scrollRoot.scrollTop,
-    layoutGap:
-      Number.parseFloat(
-        window
-          .getComputedStyle(document.documentElement)
-          .getPropertyValue('--nox-layout-gap'),
-      ) || 0,
+    stickyOffset: resolveTableStickyOffset(root),
     tableTop: root.getBoundingClientRect().top,
     viewportTop: scrollRoot.getBoundingClientRect().top,
   });