@astronox/core 0.4.14 → 0.4.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/actions/ScrollToTop/scrollToTopController.ts +6 -4
  3. package/src/layouts/BaseLayout.astro +1 -1
  4. package/src/patterns/Combobox/comboboxController.ts +3 -3
  5. package/src/patterns/Modal/Modal.css +1 -5
  6. package/src/styles/base.css +19 -16
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@astronox/core",
3
- "version": "0.4.14",
3
+ "version": "0.4.16",
4
4
  "description": "Reusable Astro components, patterns, styles, and infrastructure for AstroNox sites.",
5
5
  "license": "MIT",
6
6
  "keywords": [
package/src/components/actions/ScrollToTop/scrollToTopController.ts CHANGED
@@ -4,7 +4,9 @@ const noop = (): void => undefined;
4
4
  export function initScrollToTop(control: HTMLButtonElement): () => void {
5
5
  if (control.getAttribute(initializedAttribute) === 'true') return noop;
6
6
 
7
- const scrollRoot = document.scrollingElement;
7
+ const scrollRoot = document.querySelector<HTMLElement>(
8
+ '[data-site-scroll-root]',
9
+ );
8
10
  if (!scrollRoot) return noop;
9
11
 
10
12
  control.setAttribute(initializedAttribute, 'true');
@@ -15,16 +17,16 @@ export function initScrollToTop(control: HTMLButtonElement): () => void {
15
17
  };
16
18
 
17
19
  const scrollToTop = (): void => {
18
- window.scrollTo({ top: 0, behavior: 'auto' });
20
+ scrollRoot.scrollTo({ top: 0, behavior: 'auto' });
19
21
  };
20
22
 
21
- window.addEventListener('scroll', sync, { passive: true });
23
+ scrollRoot.addEventListener('scroll', sync, { passive: true });
22
24
  document.addEventListener('fullscreenchange', sync);
23
25
  control.addEventListener('click', scrollToTop);
24
26
  sync();
25
27
 
26
28
  return () => {
27
- window.removeEventListener('scroll', sync);
29
+ scrollRoot.removeEventListener('scroll', sync);
28
30
  document.removeEventListener('fullscreenchange', sync);
29
31
  control.removeEventListener('click', scrollToTop);
30
32
  control.removeAttribute(initializedAttribute);
package/src/layouts/BaseLayout.astro CHANGED
@@ -65,7 +65,7 @@ const resolvedTone = tone ?? dataTone;
65
65
  <div class="site-shell">
66
66
  <slot name="skip-link" />
67
67
  <slot name="header" />
68
- <div class="site-viewport" data-site-viewport>
68
+ <div class="site-viewport" data-site-scroll-root data-site-viewport>
69
69
  <main id="content" class="site-main" tabindex="-1">
70
70
  <div class="site-main__content">
71
71
  {
package/src/patterns/Combobox/comboboxController.ts CHANGED
@@ -503,11 +503,11 @@ export function initCombobox(root: HTMLElement): () => void {
503
503
  const target = event.target;
504
504
  if (target instanceof Node && panel.contains(target)) return;
505
505
 
506
- const siteViewport = document.querySelector<HTMLElement>(
507
- '[data-site-viewport]',
506
+ const siteScrollRoot = document.querySelector<HTMLElement>(
507
+ '[data-site-scroll-root]',
508
508
  );
509
509
  const isSiteScroll =
510
- target === siteViewport || target === document || target === window;
510
+ target === siteScrollRoot || target === document || target === window;
511
511
  if (isSiteScroll && window.matchMedia(compactViewportQuery).matches) {
512
512
  close();
513
513
  blurFocusedDescendant();
package/src/patterns/Modal/Modal.css CHANGED
@@ -1,8 +1,4 @@
1
- html:has(.modal[open]) {
2
- overflow: hidden;
3
- }
4
-
5
- html:has(.modal[open]) [data-site-viewport] {
1
+ html:has(.modal[open]) [data-site-scroll-root] {
6
2
  overflow-y: hidden;
7
3
  }
8
4
 
package/src/styles/base.css CHANGED
@@ -44,44 +44,46 @@
44
44
 
45
45
  html {
46
46
  min-width: 320px;
47
+ height: 100%;
47
48
  min-height: 100%;
48
- overflow-x: hidden;
49
- overflow-y: auto;
50
- scroll-padding-block-start: var(--nox-site-header-responsive-height);
51
- scrollbar-gutter: stable;
49
+ overflow: hidden;
52
50
  background: var(--nox-page-background);
53
51
  color: var(--nox-text);
54
52
  font-family: var(--nox-font-body);
55
53
  }
56
54
 
57
55
  body {
56
+ height: 100%;
58
57
  min-height: 100%;
59
58
  margin: 0;
60
- overflow: visible;
59
+ overflow: hidden;
61
60
  background: var(--nox-page-background);
62
61
  }
63
62
 
64
- @media (hover: hover) and (pointer: fine) {
65
- body {
66
- border-inline-end: var(--nox-border-width) solid var(--nox-border);
67
- }
68
- }
69
-
70
63
  .site-shell {
71
64
  display: grid;
72
65
  width: 100%;
66
+ height: 100vh;
73
67
  min-height: 100vh;
74
68
  grid-template-rows: auto minmax(0, 1fr);
75
- overflow: visible;
69
+ overflow: hidden;
76
70
  background: var(--nox-page-background);
77
71
  }
78
72
 
79
- @supports (min-height: 100svh) {
73
+ @supports (height: 100svh) {
80
74
  .site-shell {
75
+ height: 100svh;
81
76
  min-height: 100svh;
82
77
  }
83
78
  }
84
79
 
80
+ @media (width >= 48rem) {
81
+ .site-shell {
82
+ height: 100vh;
83
+ min-height: 100vh;
84
+ }
85
+ }
86
+
85
87
  a {
86
88
  color: var(--nox-content-link-color);
87
89
  font-weight: var(--nox-content-link-font-weight);
@@ -131,13 +133,14 @@ p {
131
133
 
132
134
  .site-viewport {
133
135
  --site-content-gap: var(--nox-space-5);
134
- --nox-sticky-viewport-offset: var(--nox-site-header-responsive-height);
135
136
 
136
137
  min-width: 0;
137
138
  min-height: 0;
138
- overflow: visible;
139
+ overflow-x: hidden;
140
+ overflow-y: auto;
141
+ scrollbar-gutter: stable;
139
142
  background: var(--nox-page-background);
140
- overscroll-behavior-y: auto;
143
+ overscroll-behavior-y: contain;
141
144
  }
142
145
 
143
146
  .site-main {