@astronox/core 0.4.4 → 0.4.5

package/package.json

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

package/src/composition/Grid/Grid.css

@@ -103,6 +103,31 @@
   grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
 }
 
+.grid[data-layout='content-sidebar']:where(
+    :has(> [data-composition='grid-item'][data-position='sticky'])
+  ) {
+  --grid-sticky-viewport-block-size: calc(
+    100vh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+  );
+  --grid-sticky-viewport-block-size: calc(
+    100dvh - var(--nox-site-header-height) - var(--nox-layout-gap) * 2
+  );
+  --grid-sticky-peer-position: sticky;
+  --grid-sticky-peer-inset-block-start: var(--nox-layout-gap);
+  --table-progressive-runway-block-size: var(--grid-sticky-viewport-block-size);
+
+  min-block-size: var(--grid-sticky-viewport-block-size);
+}
+
+.grid[data-layout='content-sidebar']:where(
+    :has(> [data-composition='grid-item'][data-position='sticky'])
+  )
+  > [data-composition='grid-item'][data-position='static']
+  > .grid-item__content {
+  position: var(--grid-sticky-peer-position);
+  inset-block-start: var(--grid-sticky-peer-inset-block-start);
+}
+
 .grid[data-rows] {
   grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
 }
@@ -112,6 +137,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='sm'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 
@@ -164,6 +192,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='md'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 
@@ -216,6 +247,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='lg'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 
@@ -268,6 +302,9 @@
       [data-layout='fixed'],
       [data-layout='content-sidebar']
     )[data-collapse-at='xl'] {
+    --grid-sticky-viewport-block-size: 0px;
+    --grid-sticky-peer-position: static;
+    --grid-sticky-peer-inset-block-start: auto;
     grid-template-columns: 1fr;
   }
 

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;
@@ -76,7 +82,8 @@
   .table-pagination__link:focus-visible {
   z-index: 1;
   inset-inline: 0;
-  inset-block-end: 0;
+  inset-block-start: 0;
+  inset-block-end: auto;
   display: grid;
   overflow: visible;
   width: auto;

package/src/patterns/Table/tableProgressiveController.ts

@@ -406,6 +406,7 @@ export function initTableProgressive(root: HTMLElement): () => void {
     generation += 1;
     request?.abort();
     request = null;
+    activePagination.hidden = false;
     updateTableState(state);
     addSkeleton(batchSize);
     detachRenderedRows();