@astronox/core 0.3.1 → 0.4.1

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

@@ -72,6 +72,7 @@ export function initTooltip(root: HTMLElement): () => void {
     ':scope > [data-tooltip-panel]',
   );
   if (!trigger || !panel) return noop;
+  const activeTrigger = trigger;
 
   const hoverOnly = root.dataset.tooltipActivation === 'hover';
   root.setAttribute(initializedAttribute, 'true');
@@ -106,6 +107,7 @@ export function initTooltip(root: HTMLElement): () => void {
   let hoveredPanel = false;
   let openListenersActive = false;
   let pinned = false;
+  let lastPointerType = '';
 
   const isOpen = (): boolean => panel.matches(':popover-open');
 
@@ -239,12 +241,12 @@ export function initTooltip(root: HTMLElement): () => void {
   };
 
   const handleTriggerPointerEnter = (event: PointerEvent): void => {
-    if (hoverOnly && event.pointerType === 'touch') return;
+    if (event.pointerType === 'touch') return;
     hoveredTrigger = true;
     show();
   };
   const handleTriggerPointerLeave = (event: PointerEvent): void => {
-    if (hoverOnly && event.pointerType === 'touch') return;
+    if (event.pointerType === 'touch') return;
     hoveredTrigger = false;
 
     if (hoverOnly) {
@@ -263,6 +265,7 @@ export function initTooltip(root: HTMLElement): () => void {
     scheduleClose();
   };
   const handleFocusIn = (): void => {
+    if (lastPointerType === 'touch') return;
     if (
       hoverOnly &&
       !trigger.matches(':focus-visible') &&
@@ -274,7 +277,23 @@ export function initTooltip(root: HTMLElement): () => void {
     show();
   };
   const handleFocusOut = (): void => scheduleClose();
-  const handleTriggerClick = (): void => {
+  const handleTriggerPointerDown = (event: PointerEvent): void => {
+    lastPointerType = event.pointerType;
+  };
+  const handleTriggerKeyDown = (): void => {
+    lastPointerType = '';
+  };
+  const handleTriggerClick = (event: MouseEvent): void => {
+    const pointerType =
+      'PointerEvent' in window && event instanceof PointerEvent
+        ? event.pointerType
+        : lastPointerType;
+    if (hoverOnly && pointerType !== 'touch') return;
+    if (pointerType === 'touch') {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
     if (pinned) {
       close();
       return;
@@ -299,6 +318,12 @@ export function initTooltip(root: HTMLElement): () => void {
     if (!(event instanceof CustomEvent) || event.detail?.root === root) return;
     close();
   };
+  const visibilityObserver =
+    'IntersectionObserver' in window
+      ? new IntersectionObserver((entries) => {
+          if (entries.some((entry) => !entry.isIntersecting)) close();
+        })
+      : null;
   function addOpenListeners(): void {
     if (openListenersActive) return;
     openListenersActive = true;
@@ -309,6 +334,7 @@ export function initTooltip(root: HTMLElement): () => void {
     window.addEventListener('scroll', requestPosition, true);
     window.visualViewport?.addEventListener('resize', requestPosition);
     window.visualViewport?.addEventListener('scroll', requestPosition);
+    visibilityObserver?.observe(activeTrigger);
   }
   function removeOpenListeners(): void {
     if (!openListenersActive) return;
@@ -320,13 +346,16 @@ export function initTooltip(root: HTMLElement): () => void {
     window.removeEventListener('scroll', requestPosition, true);
     window.visualViewport?.removeEventListener('resize', requestPosition);
     window.visualViewport?.removeEventListener('scroll', requestPosition);
+    visibilityObserver?.unobserve(activeTrigger);
   }
 
+  trigger.addEventListener('pointerdown', handleTriggerPointerDown);
   trigger.addEventListener('pointerenter', handleTriggerPointerEnter);
   trigger.addEventListener('pointerleave', handleTriggerPointerLeave);
   trigger.addEventListener('focusin', handleFocusIn);
   trigger.addEventListener('focusout', handleFocusOut);
-  if (!hoverOnly) trigger.addEventListener('click', handleTriggerClick);
+  trigger.addEventListener('keydown', handleTriggerKeyDown);
+  trigger.addEventListener('click', handleTriggerClick);
   if (!hoverOnly) {
     panel.addEventListener('pointerenter', handlePanelPointerEnter);
     panel.addEventListener('pointerleave', handlePanelPointerLeave);
@@ -338,11 +367,14 @@ export function initTooltip(root: HTMLElement): () => void {
     if (positionFrame !== undefined) {
       window.cancelAnimationFrame(positionFrame);
     }
+    visibilityObserver?.disconnect();
+    trigger.removeEventListener('pointerdown', handleTriggerPointerDown);
     trigger.removeEventListener('pointerenter', handleTriggerPointerEnter);
     trigger.removeEventListener('pointerleave', handleTriggerPointerLeave);
     trigger.removeEventListener('focusin', handleFocusIn);
     trigger.removeEventListener('focusout', handleFocusOut);
-    if (!hoverOnly) trigger.removeEventListener('click', handleTriggerClick);
+    trigger.removeEventListener('keydown', handleTriggerKeyDown);
+    trigger.removeEventListener('click', handleTriggerClick);
     if (!hoverOnly) {
       panel.removeEventListener('pointerenter', handlePanelPointerEnter);
       panel.removeEventListener('pointerleave', handlePanelPointerLeave);

package/src/components/monetization/AdSlot/AdSlot.astro

@@ -27,7 +27,4 @@ const {
   aria-busy={state === 'loading' ? 'true' : 'false'}
 >
   <div class="ad-slot__content"><slot /></div>
-  <div class="ad-slot__fallback">
-    <slot name="fallback"><div class="ad-slot__fallback-canvas"></div></slot>
-  </div>
 </aside>

package/src/components/monetization/AdSlot/AdSlot.css

@@ -16,38 +16,15 @@
   --ad-slot-min-block-size: 15rem;
 }
 
-.ad-slot__content,
-.ad-slot__fallback {
-  grid-area: 1 / 1;
+.ad-slot__content {
   inline-size: 100%;
 }
 
-.ad-slot__fallback {
-  display: none;
-  block-size: 100%;
+.ad-slot[data-ad-state='filled'] {
+  min-block-size: 0;
 }
 
-.ad-slot__fallback-canvas {
-  block-size: 100%;
-  min-block-size: var(--ad-slot-min-block-size);
-  background:
-    linear-gradient(
-      135deg,
-      transparent 0 46%,
-      color-mix(in srgb, var(--nox-theme-border-base) 55%, transparent) 46% 54%,
-      transparent 54% 100%
-    ),
-    var(--nox-surface-muted);
-  border: 1px solid var(--nox-theme-border-base);
-  inline-size: 100%;
-}
-
-.ad-slot[data-ad-state='blocked'] .ad-slot__content,
-.ad-slot[data-ad-state='unavailable'] .ad-slot__content {
+.ad-slot[data-ad-state='blocked'],
+.ad-slot[data-ad-state='unavailable'] {
   display: none;
 }
-
-.ad-slot[data-ad-state='blocked'] .ad-slot__fallback,
-.ad-slot[data-ad-state='unavailable'] .ad-slot__fallback {
-  display: block;
-}

package/src/components/navigation/Breadcrumbs/Breadcrumbs.astro

@@ -16,6 +16,7 @@ const {
   'data-tone': dataTone,
   items,
   label = defaultCoreMessages.navigation.breadcrumbs,
+  tabindex: tabIndex = 0,
   tone,
   ...attrs
 } = Astro.props;
@@ -28,6 +29,7 @@ const resolvedTone = tone ?? dataTone ?? 'info';
       {...attrs}
       class:list={['breadcrumbs', className]}
       aria-label={label}
+      tabindex={tabIndex}
       data-widget="breadcrumbs"
       data-tone={resolvedTone}
     >

package/src/components/navigation/Breadcrumbs/Breadcrumbs.css

@@ -1,17 +1,26 @@
 .breadcrumbs {
   min-width: 0;
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: thin;
+  touch-action: pan-x pan-y;
   color: var(--nox-tone-color);
   font-size: var(--nox-font-size-sm);
   font-weight: var(--nox-font-weight-medium);
   line-height: 1.35;
 }
 
+.breadcrumbs:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: calc(var(--nox-focus-ring-width) * -1);
+}
+
 .breadcrumbs__list {
   display: flex;
   flex-wrap: nowrap;
   align-items: stretch;
-  min-width: 0;
+  min-width: max-content;
   min-block-size: calc(
     1.35em + var(--site-main-content-gap, var(--nox-space-5)) +
       var(--site-main-content-gap, var(--nox-space-5))
@@ -30,8 +39,7 @@
 }
 
 .breadcrumbs__item:last-child {
-  flex: 1 1 auto;
-  overflow: hidden;
+  flex: 0 0 auto;
 }
 
 .breadcrumbs__item > span {
@@ -63,8 +71,6 @@
 }
 
 .breadcrumbs__item:last-child > :is(a, span) {
-  overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
 }
 

package/src/components/navigation/Footer/Footer.astro

@@ -46,6 +46,7 @@ const resolveRel = (target: FooterItem['target'], rel?: FooterItem['rel']) =>
           {items.map(
             (
               {
+                button,
                 href,
                 label: itemLabel,
                 marker,
@@ -83,6 +84,13 @@ const resolveRel = (target: FooterItem['target'], rel?: FooterItem['rel']) =>
                       ) : null}
                       <span>{itemLabel}</span>
                     </a>
+                  ) : button ? (
+                    <button {...button} type="button" data-tone={itemTone}>
+                      {marker === 'arrow' ? (
+                        <ArrowRightIcon class="site-footer__marker" />
+                      ) : null}
+                      <span>{itemLabel}</span>
+                    </button>
                   ) : (
                     <span class="site-footer__label" data-tone={itemTone}>
                       {marker === 'arrow' ? (

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

@@ -78,11 +78,12 @@
   flex: 0 0 auto;
 }
 
-.site-footer__prefix + :is(a, .site-footer__label) {
+.site-footer__prefix + :is(a, button, .site-footer__label) {
   margin-inline-start: var(--nox-space-1);
 }
 
 .site-footer a,
+.site-footer button,
 .site-footer__label {
   display: inline-flex;
   min-width: 0;
@@ -98,35 +99,48 @@
   color: var(--nox-text-muted);
 }
 
-.site-footer a {
+.site-footer :is(a, button) {
   color: var(--nox-content-link-color);
   font-weight: var(--nox-content-link-emphasis-font-weight);
   text-decoration: none;
 }
 
+.site-footer button {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
 .site-footer a[data-tone],
+.site-footer button[data-tone],
 .site-footer__label[data-tone] {
   color: var(--nox-tone-color);
 }
 
-.site-footer a:focus-visible {
+.site-footer :is(a, button):focus-visible {
   border-radius: var(--nox-radius-sm);
   outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
   outline-offset: var(--nox-focus-ring-offset);
   color: var(--nox-content-link-color);
 }
 
-.site-footer a[data-tone]:focus-visible {
+.site-footer :is(a, button)[data-tone]:focus-visible {
   color: var(--nox-tone-color);
 }
 
+.site-footer button[hidden] {
+  display: none;
+}
+
 @media (hover: hover) and (pointer: fine) {
-  .site-footer a:hover {
+  .site-footer :is(a, button):hover {
     color: var(--nox-content-link-color);
     text-decoration-line: underline;
   }
 
-  .site-footer a[data-tone]:hover {
+  .site-footer :is(a, button)[data-tone]:hover {
     color: var(--nox-tone-color);
   }
 }

package/src/components/navigation/Footer/contracts.ts

@@ -2,6 +2,7 @@ import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
 
 export type FooterItem = {
+  button?: Omit<HTMLAttributes<'button'>, 'type'>;
   href?: HTMLAttributes<'a'>['href'];
   label: string;
   marker?: 'arrow';

package/src/composition/Grid/Grid.css

@@ -1,5 +1,5 @@
 .grid-container {
-  container-type: inline-size;
+  container: nox-grid / inline-size;
   min-width: 0;
 }
 

package/src/composition/SurfaceGroup/SurfaceGroup.astro

@@ -2,8 +2,9 @@
 import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../theme/contracts';
 
-type SurfaceGroupElement = 'div' | 'section' | 'nav';
+type SurfaceGroupElement = 'article' | 'div' | 'section' | 'nav';
 type SurfaceGroupAttributes = HTMLAttributes<'div'> &
+  HTMLAttributes<'article'> &
   HTMLAttributes<'section'> &
   HTMLAttributes<'nav'>;
 

package/src/composition/SurfaceGroup/SurfaceGroup.css

@@ -17,24 +17,32 @@
 }
 
 .surface-group:has(> [data-sticky-surface])::before {
-  --surface-group-sticky-occlusion-size: calc(
-    var(--nox-layout-gap) + var(--nox-section-responsive-block-size)
-  );
-
   position: sticky;
   z-index: 39;
   top: 0;
   display: block;
   min-width: 0;
-  min-height: var(--surface-group-sticky-occlusion-size);
+  min-height: var(
+    --surface-group-sticky-occlusion-size,
+    calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+  );
   visibility: hidden;
-  flex: 0 0 var(--surface-group-sticky-occlusion-size);
-  margin-block-end: calc(-1 * var(--surface-group-sticky-occlusion-size));
+  flex: 0 0
+    var(
+      --surface-group-sticky-occlusion-size,
+      calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+    );
+  margin-block-end: calc(
+    -1 *
+      var(
+        --surface-group-sticky-occlusion-size,
+        calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size))
+      )
+  );
   background: var(--nox-page-background);
   content: '';
 }
 
-.surface-group:has(> [data-sticky-surface]):not([data-sticky-measured])::before,
 .surface-group[data-sticky-active]::before {
   visibility: visible;
 }
@@ -61,8 +69,8 @@
 
 .surface-group
   > [data-surface]:not([hidden]):has(~ [data-surface]:not([hidden])) {
-  border-end-start-radius: 0;
-  border-end-end-radius: 0;
+  border-end-start-radius: var(--surface-group-connected-border-end-radius, 0);
+  border-end-end-radius: var(--surface-group-connected-border-end-radius, 0);
 }
 
 .surface-group > [data-surface]:not([hidden]) ~ [data-surface]:not([hidden]) {
@@ -70,11 +78,3 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-
-@container nox-surface-group (width < 32rem) {
-  .surface-group:has(> [data-sticky-surface])::before {
-    --surface-group-sticky-occlusion-size: calc(
-      var(--nox-layout-gap) + var(--nox-section-compact-block-size)
-    );
-  }
-}

package/src/composition/SurfaceGroup/stickySurfaceGroupController.ts

@@ -46,6 +46,10 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
     const stickyOffset =
       Number.parseFloat(window.getComputedStyle(stickySurface).top) || 0;
+    root.style.setProperty(
+      '--surface-group-sticky-occlusion-size',
+      `${stickyOffset + stickySurface.getBoundingClientRect().height}px`,
+    );
     observer = new IntersectionObserver(
       ([entry]) => {
         if (!entry) return;
@@ -74,10 +78,14 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
 
   root.setAttribute('data-sticky-initialized', 'true');
   window.addEventListener('resize', scheduleObserve, { passive: true });
+  const resizeObserver =
+    'ResizeObserver' in window ? new ResizeObserver(scheduleObserve) : null;
+  resizeObserver?.observe(stickySurface);
   observe();
 
   return () => {
     window.removeEventListener('resize', scheduleObserve);
+    resizeObserver?.disconnect();
     observer?.disconnect();
     sentinel.remove();
 
@@ -88,5 +96,6 @@ export const initStickySurfaceGroup = (root: HTMLElement): (() => void) => {
     root.removeAttribute('data-sticky-active');
     root.removeAttribute('data-sticky-initialized');
     root.removeAttribute('data-sticky-measured');
+    root.style.removeProperty('--surface-group-sticky-occlusion-size');
   };
 };

package/src/config/environment.ts

@@ -14,14 +14,64 @@ export function readOptionalEnvironmentValue(
   return resolved || undefined;
 }
 
+export function readRequiredEnvironmentBoolean(
+  name: string,
+  value: string | undefined,
+): boolean {
+  const resolved = readRequiredEnvironmentValue(name, value);
+  if (resolved === 'true') return true;
+  if (resolved === 'false') return false;
+  throw new Error(`Invalid environment boolean: ${name}`);
+}
+
+export function readEnvironmentStringArray(
+  name: string,
+  value: string | undefined,
+): readonly string[] {
+  const resolved = readRequiredEnvironmentValue(name, value);
+  let entries: unknown[];
+
+  if (resolved.startsWith('[')) {
+    try {
+      const parsed: unknown = JSON.parse(resolved);
+      if (!Array.isArray(parsed)) throw new Error();
+      entries = parsed;
+    } catch {
+      throw new Error(`Invalid environment string array: ${name}`);
+    }
+  } else {
+    entries = [resolved];
+  }
+
+  if (
+    entries.length === 0 ||
+    entries.some((entry) => typeof entry !== 'string' || !entry.trim())
+  ) {
+    throw new Error(`Invalid environment string array: ${name}`);
+  }
+
+  return [...new Set(entries.map((entry) => (entry as string).trim()))];
+}
+
 export function readRequiredEnvironmentUrl(
   name: string,
   value: string | undefined,
 ): string {
   const resolved = readRequiredEnvironmentValue(name, value);
+  return parseEnvironmentUrl(name, resolved);
+}
+
+export function readOptionalEnvironmentUrl(
+  name: string,
+  value: string | undefined,
+): string | undefined {
+  const resolved = readOptionalEnvironmentValue(value);
+  return resolved ? parseEnvironmentUrl(name, resolved) : undefined;
+}
 
+function parseEnvironmentUrl(name: string, value: string): string {
   try {
-    const url = new URL(resolved);
+    const url = new URL(value);
     if (url.protocol !== 'http:' && url.protocol !== 'https:')
       throw new Error();
     return url.toString();
@@ -35,9 +85,23 @@ export function readEnvironmentRecord(
   value: string | undefined,
 ): Readonly<Record<string, string>> {
   const resolved = readRequiredEnvironmentValue(name, value);
+  return parseEnvironmentRecord(name, resolved);
+}
 
+export function readOptionalEnvironmentRecord(
+  name: string,
+  value: string | undefined,
+): Readonly<Record<string, string>> | undefined {
+  const resolved = readOptionalEnvironmentValue(value);
+  return resolved ? parseEnvironmentRecord(name, resolved) : undefined;
+}
+
+function parseEnvironmentRecord(
+  name: string,
+  value: string,
+): Readonly<Record<string, string>> {
   try {
-    const parsed: unknown = JSON.parse(resolved);
+    const parsed: unknown = JSON.parse(value);
     if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
       throw new Error();
     }

package/src/layouts/BaseLayout.astro

@@ -6,6 +6,7 @@ import type { PageMeta } from '../config/pageMeta';
 import type { SiteConfig } from '../config/siteConfig';
 import type { JsonLdNode } from '../seo/structuredData';
 import type { Tone } from '../theme/contracts';
+import { adAnnotationExclusionAttributes } from '../ads/contracts';
 import PageSurface from './PageSurface.astro';
 import Breadcrumbs from '../components/navigation/Breadcrumbs/Breadcrumbs.astro';
 import ScrollToTop from '../components/actions/ScrollToTop/ScrollToTop.astro';
@@ -15,6 +16,7 @@ import { defaultThemeStorageKey } from '../theme/storage';
 type Props = HTMLAttributes<'html'> & {
   meta: PageMeta;
   site: SiteConfig;
+  pageSurfaceAttributes?: HTMLAttributes<'div'>;
   currentPath?: string;
   breadcrumbs?: readonly BreadcrumbItem[];
   breadcrumbLabel: string;
@@ -32,6 +34,7 @@ const {
   currentPath = Astro.url.pathname,
   'data-tone': dataTone,
   meta,
+  pageSurfaceAttributes,
   scrollToTopLabel,
   site,
   structuredData,
@@ -67,6 +70,7 @@ const resolvedTone = tone ?? dataTone;
           {
             breadcrumbs?.length ? (
               <Breadcrumbs
+                {...adAnnotationExclusionAttributes}
                 items={breadcrumbs}
                 label={breadcrumbLabel}
                 tone={breadcrumbTone}
@@ -74,8 +78,9 @@ const resolvedTone = tone ?? dataTone;
             ) : null
           }
 
-          <PageSurface>
+          <PageSurface {...pageSurfaceAttributes}>
             <slot />
+            <slot name="page-end" />
           </PageSurface>
         </div>
       </main>