@astronox/core 0.2.3 → 0.3.0

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

@@ -0,0 +1,33 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { AdSlotState } from '../../../ads/contracts';
+
+type Props = Omit<HTMLAttributes<'aside'>, 'aria-label'> & {
+  label: string;
+  size?: 'compact' | 'standard' | 'tall';
+  state?: AdSlotState;
+};
+
+const {
+  class: className,
+  label,
+  size = 'standard',
+  state = 'idle',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<aside
+  {...attrs}
+  class:list={['ad-slot', className]}
+  data-ad-size={size}
+  data-ad-state={state}
+  data-widget="ad-slot"
+  aria-label={label}
+  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

@@ -0,0 +1,53 @@
+.ad-slot {
+  --ad-slot-min-block-size: 6rem;
+
+  display: grid;
+  inline-size: 100%;
+  min-block-size: var(--ad-slot-min-block-size);
+  overflow: hidden;
+  place-items: center;
+}
+
+.ad-slot[data-ad-size='compact'] {
+  --ad-slot-min-block-size: 4rem;
+}
+
+.ad-slot[data-ad-size='tall'] {
+  --ad-slot-min-block-size: 15rem;
+}
+
+.ad-slot__content,
+.ad-slot__fallback {
+  grid-area: 1 / 1;
+  inline-size: 100%;
+}
+
+.ad-slot__fallback {
+  display: none;
+  block-size: 100%;
+}
+
+.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 {
+  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/DesktopNavigation.css

@@ -81,11 +81,13 @@
 
   .site-nav__action > * {
     min-width: 5.75rem;
-    border-radius: var(--nox-radius-md);
   }
 
-  .site-nav__action
-    > .dropdown[data-dropdown-trigger-appearance='bar'] {
+  .site-nav__action > [data-theme-toggle-appearance='circle'] {
+    min-width: 4.75rem;
+  }
+
+  .site-nav__action > .dropdown[data-dropdown-trigger-appearance='bar'] {
     min-width: 0;
     block-size: 100%;
     border-radius: 0;

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

@@ -33,15 +33,11 @@
   column-gap: var(--nox-space-4);
 }
 
-.site-footer__content[data-footer-columns='2'][
-  data-footer-column-separator='divider'
-] {
+.site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider'] {
   column-gap: 0;
 }
 
-.site-footer__content[data-footer-columns='2'][
-  data-footer-column-separator='divider'
-]
+.site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider']
   > .site-footer__group:nth-child(even)::before {
   display: inline-grid;
   width: calc(
@@ -146,9 +142,7 @@
     grid-column: auto;
   }
 
-  .site-footer__content[data-footer-columns='2'][
-    data-footer-column-separator='divider'
-  ]
+  .site-footer__content[data-footer-columns='2'][data-footer-column-separator='divider']
     > .site-footer__group:nth-child(even)::before {
     content: none;
   }

package/src/components/navigation/Header.astro

@@ -1,8 +1,14 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 import type { SiteIdentity } from '../../config/siteConfig';
-import type { MobileNavigationLabels } from './navigationTypes';
-import type { NavigationItem } from '../../display/contracts';
+import type {
+  MobileNavigationControlItem,
+  MobileNavigationLabels,
+} from './navigationTypes';
+import type {
+  NavigationItem,
+  NavigationLinkItem,
+} from '../../display/contracts';
 import type { Tone } from '../../theme/contracts';
 import DesktopNavigation from './DesktopNavigation.astro';
 import MobileNavigation from './MobileNavigation.astro';
@@ -15,6 +21,9 @@ type Props = HTMLAttributes<'header'> & {
   identity: SiteIdentity;
   leftItems?: readonly NavigationItem[];
   menu: MobileNavigationLabels;
+  mobileFooterItems?: readonly MobileNavigationControlItem[];
+  mobileItems?: readonly NavigationLinkItem[];
+  mobileUtilityItems?: readonly MobileNavigationControlItem[];
   rightItems?: readonly NavigationItem[];
   sticky?: boolean;
   tone?: Tone;
@@ -30,12 +39,16 @@ const {
   identity,
   leftItems = [],
   menu,
+  mobileFooterItems = [],
+  mobileItems,
+  mobileUtilityItems = [],
   rightItems = [],
   sticky = false,
   tone,
   ...attrs
 } = Astro.props;
 const resolvedTone = tone ?? dataTone;
+const hasMobileUtilityActions = Astro.slots.has('mobile-utility-actions');
 ---
 
 <header
@@ -52,10 +65,15 @@ const resolvedTone = tone ?? dataTone;
       homeLabel={homeLabel}
       leftItems={leftItems}
       menu={menu}
+      mobileFooterItems={mobileFooterItems}
+      mobileItems={mobileItems}
+      mobileUtilityItems={mobileUtilityItems}
+      hasUtilityActions={hasMobileUtilityActions}
       rightItems={rightItems}
       currentPath={currentPath}
     >
       <slot name="mobile-actions" slot="actions" />
+      <slot name="mobile-utility-actions" slot="utility-actions" />
     </MobileNavigation>
 
     <DesktopNavigation

package/src/components/navigation/MobileNavigation.astro

@@ -1,52 +1,56 @@
 ---
 import type { SiteIdentity } from '../../config/siteConfig';
-import type { NavigationItem } from '../../display/contracts';
-import type { MobileNavigationLabels } from './navigationTypes';
+import type {
+  NavigationItem,
+  NavigationLinkItem,
+} from '../../display/contracts';
+import type {
+  MobileNavigationControlItem,
+  MobileNavigationLabels,
+} from './navigationTypes';
+import CardLink from '../content/CardLink/CardLink.astro';
 import NavigationBrand from './NavigationBrand.astro';
 import NavigationLink from './NavigationLink.astro';
-import { isNavigationGroupItem } from './navigationState';
+import {
+  isNavigationGroupItem,
+  isNavigationItemActive,
+} from './navigationState';
 
 type Props = {
   currentPath: string;
+  hasUtilityActions?: boolean;
   homeHref: string;
   homeLabel: string;
   identity: SiteIdentity;
   leftItems: readonly NavigationItem[];
   menu: MobileNavigationLabels;
+  mobileFooterItems: readonly MobileNavigationControlItem[];
+  mobileItems?: readonly NavigationLinkItem[];
+  mobileUtilityItems: readonly MobileNavigationControlItem[];
   rightItems: readonly NavigationItem[];
 };
 
-type MobileNavigationGroup = {
-  items: readonly NavigationItem[];
-  label?: string;
-};
-
 const {
   currentPath,
+  hasUtilityActions,
   homeHref,
   homeLabel,
   identity,
   leftItems,
   menu,
+  mobileFooterItems,
+  mobileItems,
+  mobileUtilityItems,
   rightItems,
 } = Astro.props;
 const panelId = 'site-nav-mobile-panel';
 const closeLabel = menu.closeLabel ?? menu.openLabel;
-const mobileGroups: MobileNavigationGroup[] = [
-  {
-    items: leftItems,
-  },
-  ...rightItems.map((item) =>
-    isNavigationGroupItem(item)
-      ? {
-          label: item.label,
-          items: item.items,
-        }
-      : {
-          items: [item],
-        },
-  ),
-];
+const fallbackItems = [...leftItems, ...rightItems].flatMap((item) =>
+  isNavigationGroupItem(item) ? [...item.items] : [item],
+);
+const resolvedMobileItems = mobileItems ?? fallbackItems;
+const resolvedHasUtilityActions =
+  hasUtilityActions ?? Astro.slots.has('utility-actions');
 ---
 
 <div class="site-nav__mobile" data-mobile-navigation>
@@ -88,28 +92,88 @@ const mobileGroups: MobileNavigationGroup[] = [
   >
     <ul class="site-nav__mobile-list">
       {
-        mobileGroups.map((group) => (
-          <>
-            {group.label ? (
-              <li class="site-nav__mobile-group-label">
-                <span>{group.label}</span>
-              </li>
-            ) : null}
-            {group.items.map((item) => (
-              <li>
-                <NavigationLink
-                  item={item}
-                  currentPath={currentPath}
-                  accent="start"
-                  appearance="menu"
-                  class="site-nav__mobile-link"
-                />
-              </li>
-            ))}
-          </>
-        ))
+        resolvedMobileItems.map((item) => {
+          const active = isNavigationItemActive(item, currentPath);
+          const rel =
+            item.rel ??
+            (item.target === '_blank' ? 'noopener noreferrer' : undefined);
+
+          return (
+            <li>
+              <CardLink
+                class="site-nav__mobile-link"
+                disabled={item.disabled}
+                href={item.href}
+                media={item.media}
+                mediaSize="compact"
+                rel={rel}
+                target={item.target}
+                textTreatment="heading"
+                title={item.label}
+                aria-current={active ? 'page' : undefined}
+              />
+            </li>
+          );
+        })
       }
     </ul>
+
+    {
+      mobileUtilityItems.length > 0 ||
+      resolvedHasUtilityActions ||
+      mobileFooterItems.length > 0 ? (
+        <div class="site-nav__mobile-controls">
+          {mobileUtilityItems.length > 0 || resolvedHasUtilityActions ? (
+            <ul class="site-nav__mobile-utility">
+              {mobileUtilityItems.map((item) => (
+                <li>
+                  <NavigationLink
+                    item={item}
+                    currentPath={currentPath}
+                    appearance="menu"
+                    class="site-nav__mobile-utility-link"
+                    data-mobile-navigation-label-visibility={
+                      item.labelVisibility
+                    }
+                  />
+                </li>
+              ))}
+              {resolvedHasUtilityActions ? (
+                <li>
+                  <slot name="utility-actions" />
+                </li>
+              ) : null}
+            </ul>
+          ) : null}
+
+          {mobileFooterItems.length > 0 ? (
+            <ul class="site-nav__mobile-footer">
+              {mobileFooterItems.map((item) => (
+                <li>
+                  <NavigationLink
+                    item={item}
+                    currentPath={currentPath}
+                    appearance="menu"
+                    class="site-nav__mobile-footer-link"
+                    data-mobile-navigation-accent={
+                      item.accentColor ? true : undefined
+                    }
+                    data-mobile-navigation-label-visibility={
+                      item.labelVisibility
+                    }
+                    style={
+                      item.accentColor
+                        ? `--mobile-navigation-accent: ${item.accentColor};`
+                        : undefined
+                    }
+                  />
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </div>
+      ) : null
+    }
   </div>
 </div>
 

package/src/components/navigation/MobileNavigation.css

@@ -4,14 +4,18 @@
 }
 
 .site-nav__mobile-bar {
+  --site-nav-mobile-side-size: 4.75rem;
+
   position: relative;
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns:
+    var(--site-nav-mobile-side-size)
+    minmax(0, 1fr)
+    var(--site-nav-mobile-side-size);
   align-items: center;
-  width: var(--nox-page-width);
+  width: 100%;
   min-height: var(--nox-site-header-compact-height);
-  margin: 0 auto;
-  gap: clamp(var(--nox-space-1), 2vw, var(--nox-space-3));
+  gap: 0;
 }
 
 .site-nav__menu-button {
@@ -29,6 +33,7 @@
   background: var(--nox-surface);
   color: var(--nox-text);
   cursor: pointer;
+  justify-self: center;
 }
 
 .site-nav__menu-icon {
@@ -72,12 +77,16 @@
 
 .site-nav__brand--mobile {
   z-index: 1;
-  justify-self: stretch;
+  padding-inline: var(--nox-page-gutter);
+  justify-self: center;
 }
 
 .site-nav__mobile-action {
   z-index: 2;
-  justify-self: end;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  justify-self: center;
 }
 
 .site-nav__mobile-action > * {
@@ -85,8 +94,7 @@
   border-radius: var(--nox-radius-md);
 }
 
-.site-nav__mobile-action
-  > .dropdown[data-dropdown-trigger-appearance='bar'] {
+.site-nav__mobile-action > .dropdown[data-dropdown-trigger-appearance='bar'] {
   min-width: 0;
   block-size: var(--nox-site-header-compact-height);
   border-radius: 0;
@@ -101,13 +109,15 @@
 .site-nav__mobile-panel {
   position: absolute;
   z-index: 2;
+  display: grid;
   inset-inline: 0;
   top: 100%;
   width: 100%;
-  max-height: calc(100vh - var(--nox-site-header-compact-height));
-  max-height: calc(100dvh - var(--nox-site-header-compact-height));
+  height: calc(100vh - var(--nox-site-header-compact-height));
+  height: calc(100dvh - var(--nox-site-header-compact-height));
+  grid-template-rows: minmax(0, 1fr) auto;
   overflow-x: hidden;
-  overflow-y: auto;
+  overflow-y: hidden;
   padding: var(--nox-space-3);
   border-top: 3px solid var(--nox-link-active);
   border-bottom: var(--nox-border-width) solid var(--nox-border);
@@ -125,30 +135,90 @@
 .site-nav__mobile-list {
   display: grid;
   width: 100%;
+  min-height: 0;
   margin: 0;
   padding: 0;
-  gap: var(--nox-space-1);
+  align-content: start;
+  gap: var(--nox-space-3);
   list-style: none;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 .site-nav__mobile-link {
-  min-height: 3.125rem;
-  padding-block: 0;
-  border-radius: var(--nox-radius-sm);
+  --surface-radius: var(--nox-radius-md);
 }
 
-.site-nav__mobile-group-label {
-  display: flex;
-  min-height: 1.5rem;
-  align-items: flex-end;
+.site-nav__mobile-link[aria-current='page'] .text-pair__primary {
+  position: relative;
+}
+
+.site-nav__mobile-link[aria-current='page'] .text-pair__primary::after {
+  position: absolute;
+  right: 0;
+  bottom: calc(0px - var(--nox-space-2));
+  left: 0;
+  height: 2px;
+  border-radius: var(--nox-radius-pill);
+  background: var(--nox-source-tone-success);
+  content: '';
+}
+
+.site-nav__mobile-controls {
+  display: grid;
   margin-top: var(--nox-space-2);
-  padding: var(--nox-space-2) var(--nox-space-4) 0;
-  color: var(--nox-text-subtle);
-  font-size: var(--nox-font-size-xs);
-  font-weight: var(--nox-font-weight-strong);
-  letter-spacing: var(--nox-letter-spacing-wider);
-  line-height: 1;
-  text-transform: uppercase;
+  padding: var(--nox-space-2) 0 0;
+  gap: var(--nox-space-3);
+}
+
+.site-nav__mobile-utility,
+.site-nav__mobile-footer {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.site-nav__mobile-utility {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--nox-space-3);
+}
+
+.site-nav__mobile-footer {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--nox-space-3);
+}
+
+.site-nav__mobile-utility-link,
+.site-nav__mobile-footer-link {
+  min-height: var(--nox-navigation-block-size);
+  justify-content: center;
+  padding: 0;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface-muted);
+}
+
+.site-nav__mobile-footer-link[data-mobile-navigation-accent] {
+  border-color: var(--mobile-navigation-accent);
+  background: var(--mobile-navigation-accent);
+  color: #fff;
+}
+
+[data-mobile-navigation-label-visibility='accessible']
+  [data-navigation-control-label] {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.site-nav__mobile-footer-link [data-navigation-control-media] {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  border-radius: 0;
 }
 
 html[data-mobile-navigation-open],
@@ -166,6 +236,12 @@ html[data-mobile-navigation-open] body {
   .site-nav__menu-button:hover {
     background: var(--nox-surface-muted);
   }
+
+  .site-nav__mobile-footer-link[data-mobile-navigation-accent]:hover {
+    border-color: color-mix(in srgb, var(--mobile-navigation-accent) 88%, #000);
+    background: color-mix(in srgb, var(--mobile-navigation-accent) 88%, #000);
+    color: #fff;
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {

package/src/components/navigation/NavigationBrand.css

@@ -33,7 +33,7 @@
 .site-nav__brand--mobile {
   --site-nav-brand-block: var(--nox-site-header-compact-height);
   --site-nav-brand-inline: 100%;
-  --site-nav-brand-image-scale: 56%;
+  --site-nav-brand-image-scale: 64%;
 }
 
 .site-nav__brand-name {

package/src/components/navigation/NavigationControl.css

@@ -39,6 +39,20 @@
   block-size: 100%;
 }
 
+[data-navigation-control-icon] {
+  display: grid;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  flex: 0 0 auto;
+  place-items: center;
+}
+
+[data-navigation-control-icon] > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 [data-navigation-control-media-frame='bordered'] {
   border: var(--nox-border-width) solid var(--nox-border);
 }
@@ -92,11 +106,11 @@
 [data-navigation-control][data-navigation-control-appearance='bar']::after {
   position: absolute;
   right: var(--nox-space-4);
-  bottom: var(--nox-space-2);
+  bottom: var(--nox-space-4);
   left: var(--nox-space-4);
   height: 3px;
   border-radius: var(--nox-radius-pill);
-  background: var(--nox-link-active);
+  background: var(--nox-source-tone-success);
   content: '';
   opacity: 0;
   transform: translateY(var(--nox-space-1));

package/src/components/navigation/NavigationItemContent.astro

@@ -7,10 +7,15 @@ type Props = {
 };
 
 const { item } = Astro.props;
+const Icon = item.icon;
 ---
 
 {
-  item.media ? (
+  Icon ? (
+    <span data-navigation-control-icon aria-hidden="true">
+      <Icon />
+    </span>
+  ) : item.media ? (
     <span
       data-navigation-control-media
       data-navigation-control-media-frame={item.mediaFrame}

package/src/components/navigation/mobileNavigationController.ts

@@ -82,20 +82,6 @@ export function initMobileNavigation(root: HTMLElement): () => void {
     }
   };
 
-  const handlePanelClick = (event: MouseEvent): void => {
-    const target = event.target;
-
-    if (!(target instanceof Element)) {
-      return;
-    }
-
-    const link = target.closest('a[href]');
-
-    if (link && panel.contains(link)) {
-      close(true);
-    }
-  };
-
   const handleDesktopMediaChange = (): void => {
     if (desktopMedia.matches) {
       close(false);
@@ -105,7 +91,6 @@ export function initMobileNavigation(root: HTMLElement): () => void {
   setOpen(isOpen);
 
   trigger.addEventListener('click', handleTriggerClick);
-  panel.addEventListener('click', handlePanelClick);
   document.addEventListener('click', handleDocumentClick);
   document.addEventListener('keydown', handleDocumentKeydown);
   desktopMedia.addEventListener('change', handleDesktopMediaChange);
@@ -113,7 +98,6 @@ export function initMobileNavigation(root: HTMLElement): () => void {
   return () => {
     setOpen(false);
     trigger.removeEventListener('click', handleTriggerClick);
-    panel.removeEventListener('click', handlePanelClick);
     document.removeEventListener('click', handleDocumentClick);
     document.removeEventListener('keydown', handleDocumentKeydown);
     desktopMedia.removeEventListener('change', handleDesktopMediaChange);