@astronox/core 0.4.15 → 0.4.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astronox/core",
-  "version": "0.4.15",
+  "version": "0.4.16",
   "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

@@ -65,7 +65,7 @@ const resolvedTone = tone ?? dataTone;
     <div class="site-shell">
       <slot name="skip-link" />
       <slot name="header" />
-      <div class="site-viewport" data-site-viewport>
+      <div class="site-viewport" data-site-scroll-root data-site-viewport>
         <main id="content" class="site-main" tabindex="-1">
           <div class="site-main__content">
             {

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,4 @@
-html:has(.modal[open]) {
-  overflow: hidden;
-}
-
-html:has(.modal[open]) [data-site-viewport] {
+html:has(.modal[open]) [data-site-scroll-root] {
   overflow-y: hidden;
 }
 

package/src/styles/base.css

@@ -44,42 +44,46 @@
 
 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: hidden;
   background: var(--nox-page-background);
 }
 
-@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);
@@ -129,13 +133,14 @@ 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;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
   background: var(--nox-page-background);
-  overscroll-behavior-y: auto;
+  overscroll-behavior-y: contain;
 }
 
 .site-main {