@astronox/core 0.4.16 → 0.4.17

package/package.json

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

package/src/layouts/BaseLayout.astro

@@ -12,6 +12,7 @@ import Breadcrumbs from '../components/navigation/Breadcrumbs/Breadcrumbs.astro'
 import ScrollToTop from '../components/actions/ScrollToTop/ScrollToTop.astro';
 import ThemeBootstrap from '../components/feedback/ThemeBootstrap/ThemeBootstrap.astro';
 import { defaultThemeStorageKey } from '../theme/storage';
+import type { SiteScrollMode } from './contracts';
 
 type Props = HTMLAttributes<'html'> & {
   meta: PageMeta;
@@ -22,6 +23,7 @@ type Props = HTMLAttributes<'html'> & {
   breadcrumbLabel: string;
   breadcrumbTone?: Tone;
   scrollToTopLabel?: string;
+  scrollMode?: SiteScrollMode;
   structuredData?: readonly JsonLdNode[];
   tone?: Tone;
   themeStorageKey?: string;
@@ -36,6 +38,7 @@ const {
   meta,
   pageSurfaceAttributes,
   scrollToTopLabel,
+  scrollMode = 'shell',
   site,
   structuredData,
   tone,
@@ -47,7 +50,13 @@ const resolvedTone = tone ?? dataTone;
 ---
 
 <!doctype html>
-<html {...htmlAttrs} lang={lang} data-tone={resolvedTone}>
+<html
+  {...htmlAttrs}
+  lang={lang}
+  data-site-scroll-mode={scrollMode}
+  data-site-scroll-root={scrollMode === 'document' ? true : undefined}
+  data-tone={resolvedTone}
+>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -62,10 +71,13 @@ const resolvedTone = tone ?? dataTone;
     <slot name="head" />
   </head>
   <body>
-    <div class="site-shell">
+    <div
+      class="site-shell"
+      data-site-scroll-root={scrollMode === 'shell' ? true : undefined}
+    >
       <slot name="skip-link" />
       <slot name="header" />
-      <div class="site-viewport" data-site-scroll-root data-site-viewport>
+      <div class="site-viewport" data-site-viewport>
         <main id="content" class="site-main" tabindex="-1">
           <div class="site-main__content">
             {

package/src/layouts/contracts.ts

@@ -0,0 +1 @@
+export type SiteScrollMode = 'document' | 'shell';

package/src/layouts/index.ts

@@ -1,2 +1,3 @@
 export { default as BaseLayout } from './BaseLayout.astro';
 export { default as PageSurface } from './PageSurface.astro';
+export type { SiteScrollMode } from './contracts';

package/src/patterns/Modal/Modal.css

@@ -1,3 +1,4 @@
+html:has(.modal[open])[data-site-scroll-root],
 html:has(.modal[open]) [data-site-scroll-root] {
   overflow-y: hidden;
 }

package/src/styles/base.css

@@ -66,8 +66,12 @@ body {
   height: 100vh;
   min-height: 100vh;
   grid-template-rows: auto minmax(0, 1fr);
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scroll-padding-block-start: var(--nox-site-header-responsive-height);
+  scrollbar-gutter: stable;
   background: var(--nox-page-background);
+  overscroll-behavior-y: contain;
 }
 
 @supports (height: 100svh) {
@@ -133,16 +137,34 @@ 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: visible;
+  background: var(--nox-page-background);
+}
+
+html[data-site-scroll-mode='document'] {
+  height: auto;
   overflow-x: hidden;
   overflow-y: auto;
+  scroll-padding-block-start: var(--nox-site-header-responsive-height);
   scrollbar-gutter: stable;
-  background: var(--nox-page-background);
   overscroll-behavior-y: contain;
 }
 
+html[data-site-scroll-mode='document'] body {
+  height: auto;
+  overflow: visible;
+}
+
+html[data-site-scroll-mode='document'] .site-shell {
+  height: auto;
+  grid-template-rows: auto auto;
+  overflow: visible;
+}
+
 .site-main {
   display: grid;
   width: var(--nox-page-width);