@astronox/core 0.4.15 → 0.4.17

package/package.json

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

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

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

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,7 +71,10 @@ 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-viewport>

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/Combobox/comboboxController.ts

@@ -503,11 +503,11 @@ export function initCombobox(root: HTMLElement): () => void {
     const target = event.target;
     if (target instanceof Node && panel.contains(target)) return;
 
-    const siteViewport = document.querySelector<HTMLElement>(
-      '[data-site-viewport]',
+    const siteScrollRoot = document.querySelector<HTMLElement>(
+      '[data-site-scroll-root]',
     );
     const isSiteScroll =
-      target === siteViewport || target === document || target === window;
+      target === siteScrollRoot || target === document || target === window;
     if (isSiteScroll && window.matchMedia(compactViewportQuery).matches) {
       close();
       blurFocusedDescendant();

package/src/patterns/Modal/Modal.css

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

package/src/styles/base.css

@@ -44,42 +44,50 @@
 
 html {
   min-width: 320px;
+  height: 100%;
   min-height: 100%;
-  scroll-padding-block-start: var(--nox-site-header-responsive-height);
-  scrollbar-gutter: stable;
+  overflow: hidden;
   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: 100%;
+  height: 100vh;
   min-height: 100vh;
   grid-template-rows: auto minmax(0, 1fr);
-  overflow-x: clip;
-  overflow-y: visible;
+  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 (min-height: 100svh) {
+@supports (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);
@@ -135,7 +143,26 @@ p {
   min-height: 0;
   overflow: visible;
   background: var(--nox-page-background);
-  overscroll-behavior-y: auto;
+}
+
+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;
+  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 {