@astronox/core 0.4.9 → 0.4.11

package/package.json

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

package/src/components/actions/ScrollToTop/ScrollToTop.css

@@ -1,3 +1,9 @@
+.site-shell:has(> .scroll-to-top) {
+  --site-floating-control-reserve: calc(
+    var(--nox-section-compact-block-size) + var(--nox-space-5)
+  );
+}
+
 .scroll-to-top.nox-button {
   position: fixed;
   z-index: 45;

package/src/components/feedback/Tooltip/tooltipController.ts

@@ -284,11 +284,12 @@ export function initTooltip(root: HTMLElement): () => void {
     lastPointerType = '';
   };
   const handleTriggerClick = (event: MouseEvent): void => {
+    if (hoverOnly) return;
+
     const pointerType =
       'PointerEvent' in window && event instanceof PointerEvent
         ? event.pointerType
         : lastPointerType;
-    if (hoverOnly && pointerType !== 'touch') return;
     if (pointerType === 'touch') {
       event.preventDefault();
       event.stopPropagation();

package/src/components/navigation/Footer/Footer.css

@@ -12,7 +12,7 @@
   justify-items: center;
   gap: var(--nox-space-1);
   padding-block-end: calc(
-    var(--nox-section-compact-block-size) + var(--nox-space-7)
+    var(--site-content-gap) + var(--site-floating-control-reserve, 0px)
   );
   font-size: var(--nox-font-size-sm);
   line-height: 1.25;
@@ -25,6 +25,7 @@
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
+  row-gap: var(--nox-space-1);
 }
 
 .site-footer__content[data-footer-columns='2'] {
@@ -110,7 +111,9 @@
   border: 0;
   background: transparent;
   cursor: pointer;
-  font: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .site-footer a[data-tone],
@@ -146,6 +149,12 @@
 }
 
 @media (width < 48rem) {
+  .site-footer__content {
+    --site-footer-item-gap: var(--nox-space-1);
+
+    font-size: var(--nox-font-size-xs);
+  }
+
   .site-footer__content[data-footer-columns='2'] {
     grid-template-columns: minmax(0, 1fr);
     column-gap: 0;

package/src/styles/base.css

@@ -53,6 +53,8 @@ html {
 }
 
 body {
+  height: 100%;
+  min-height: 100%;
   margin: 0;
   overflow: hidden;
   background: var(--nox-page-background);
@@ -64,14 +66,22 @@ body {
   height: 100vh;
   min-height: 100vh;
   grid-template-rows: auto minmax(0, 1fr);
+  padding-block-end: inherit;
   overflow: hidden;
   background: var(--nox-page-background);
 }
 
-@supports (height: 100dvh) {
+@supports (height: 100svh) {
+  .site-shell {
+    height: 100svh;
+    min-height: 100svh;
+  }
+}
+
+@media (width >= 48rem) {
   .site-shell {
-    height: 100dvh;
-    min-height: 100dvh;
+    height: 100vh;
+    min-height: 100vh;
   }
 }
 
@@ -123,6 +133,8 @@ p {
 }
 
 .site-viewport {
+  --site-content-gap: var(--nox-space-5);
+
   min-width: 0;
   min-height: 0;
   overflow-x: hidden;
@@ -132,12 +144,10 @@ p {
 }
 
 .site-main {
-  --site-main-content-gap: var(--nox-space-5);
-
   display: grid;
   width: var(--nox-page-width);
   margin: 0 auto;
-  padding-block: var(--site-main-content-gap);
+  padding-block: var(--site-content-gap);
   align-content: start;
 }
 
@@ -145,11 +155,11 @@ p {
   display: grid;
   min-width: 0;
   align-content: start;
-  gap: var(--site-main-content-gap);
+  gap: var(--site-content-gap);
 }
 
 .site-main:has(> .site-main__content > .breadcrumbs) {
-  padding-block: 0 var(--site-main-content-gap);
+  padding-block: 0 var(--site-content-gap);
 }
 
 .site-main__content:has(> .breadcrumbs) {
@@ -157,8 +167,8 @@ p {
 }
 
 @media (width < 48rem) {
-  .site-main {
-    --site-main-content-gap: var(--nox-space-4);
+  .site-viewport {
+    --site-content-gap: var(--nox-space-4);
   }
 }
 

package/src/styles/interaction.css

@@ -50,6 +50,15 @@
 
     outline: none;
   }
+
+  [data-interaction-accent]:active {
+    background: var(--nox-interaction-accent-hover-background);
+  }
+
+  [data-interaction-accent='start']:active::before {
+    opacity: 0.72;
+    transform: scaleY(0.86);
+  }
 }
 
 @media (hover: hover) and (pointer: fine) {