@astronox/core 0.2.3 → 0.2.4

package/package.json

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

package/src/components/actions/Button/Button.css

@@ -150,7 +150,7 @@
     background: color-mix(
       in srgb,
       var(--nox-button-hover-tone-seed) 12%,
-      var(--nox-mix-light)
+      var(--nox-theme-surface-base)
     );
     color: var(--nox-button-hover-tone-seed);
   }

package/src/components/actions/CardAction/CardAction.css

@@ -130,7 +130,7 @@
   background: color-mix(
     in srgb,
     var(--card-action-hover-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
 }
 
@@ -145,7 +145,7 @@
     background: color-mix(
       in srgb,
       var(--card-action-hover-seed) 12%,
-      var(--nox-mix-light)
+      var(--nox-theme-surface-base)
     );
   }
 }
@@ -154,7 +154,7 @@
   background: color-mix(
     in srgb,
     var(--card-action-hover-seed) 18%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
 }
 

package/src/components/actions/ThemeToggle/ThemeToggle.astro

@@ -0,0 +1,59 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import DayIcon from '../../icons/DayIcon.astro';
+import NightIcon from '../../icons/NightIcon.astro';
+
+type Props = HTMLAttributes<'button'> & {
+  appearance?: 'circle' | 'utility';
+  darkLabel: string;
+  lightLabel: string;
+};
+
+const {
+  appearance = 'circle',
+  class: className,
+  darkLabel,
+  lightLabel,
+  type = 'button',
+  ...attrs
+}: Props = Astro.props;
+---
+
+<button
+  {...attrs}
+  class:list={['theme-toggle', className]}
+  type={type}
+  aria-label={darkLabel}
+  title={darkLabel}
+  data-theme-toggle
+  data-theme-toggle-appearance={appearance}
+  data-theme-toggle-dark-label={darkLabel}
+  data-theme-toggle-light-label={lightLabel}
+  data-navigation-control={appearance === 'circle' ? '' : undefined}
+  data-navigation-control-appearance={
+    appearance === 'circle' ? 'bar' : undefined
+  }
+>
+  <span
+    class="theme-toggle__icon"
+    data-theme-toggle-target="dark"
+    aria-hidden="true"
+  >
+    <NightIcon />
+  </span>
+  <span
+    class="theme-toggle__icon"
+    data-theme-toggle-target="light"
+    aria-hidden="true"
+  >
+    <DayIcon />
+  </span>
+</button>
+
+<script>
+  import { initThemeToggle } from './themeToggleController';
+
+  for (const toggle of document.querySelectorAll('[data-theme-toggle]')) {
+    if (toggle instanceof HTMLElement) initThemeToggle(toggle);
+  }
+</script>

package/src/components/actions/ThemeToggle/ThemeToggle.css

@@ -0,0 +1,83 @@
+.theme-toggle {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  padding: 0;
+  border: var(--nox-border-width) solid var(--nox-border);
+  background: var(--nox-surface);
+  color: var(--nox-text-muted);
+  cursor: pointer;
+}
+
+.theme-toggle[data-theme-toggle-appearance='circle'] {
+  min-inline-size: 4.75rem;
+  block-size: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.theme-toggle[data-theme-toggle-appearance='utility'] {
+  inline-size: 100%;
+  min-block-size: var(--nox-navigation-block-size);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface-muted);
+}
+
+.theme-toggle__icon {
+  display: grid;
+  inline-size: 2rem;
+  block-size: 2rem;
+  grid-area: 1 / 1;
+  place-items: center;
+}
+
+.theme-toggle[data-theme-toggle-appearance='utility'] .theme-toggle__icon {
+  inline-size: 2.125rem;
+  block-size: 2.125rem;
+}
+
+.theme-toggle[data-theme-toggle-appearance='circle'] .theme-toggle__icon {
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: 50%;
+  background: var(--nox-surface);
+}
+
+.theme-toggle__icon > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.theme-toggle [data-theme-toggle-target='light'] {
+  display: none;
+}
+
+:root[data-theme='dark'] .theme-toggle [data-theme-toggle-target='dark'] {
+  display: none;
+}
+
+:root[data-theme='dark'] .theme-toggle [data-theme-toggle-target='light'] {
+  display: grid;
+}
+
+.theme-toggle:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-focus-ring);
+  outline-offset: var(--nox-focus-ring-offset);
+}
+
+@media (hover: hover) {
+  .theme-toggle:hover {
+    background: var(--nox-surface-strong);
+    color: var(--nox-link-hover);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .theme-toggle {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      color var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+}

package/src/components/actions/ThemeToggle/themeToggleController.ts

@@ -0,0 +1,111 @@
+import type { ColorTheme } from '../../../theme/contracts';
+import { defaultThemeStorageKey } from '../../../theme/storage';
+
+const initializedToggles = new WeakSet<HTMLElement>();
+const systemThemeQuery = '(prefers-color-scheme: dark)';
+let globalListenersInitialized = false;
+
+function isColorTheme(value: string | null): value is ColorTheme {
+  return value === 'light' || value === 'dark';
+}
+
+function getStorageKey(): string {
+  return (
+    document.documentElement.dataset.themeStorageKey ??
+    defaultThemeStorageKey
+  );
+}
+
+function readStoredTheme(): ColorTheme | null {
+  try {
+    const value = window.localStorage.getItem(getStorageKey());
+    return isColorTheme(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+
+function getSystemTheme(): ColorTheme {
+  return window.matchMedia(systemThemeQuery).matches ? 'dark' : 'light';
+}
+
+function getCurrentTheme(): ColorTheme {
+  const value = document.documentElement.dataset.theme ?? null;
+  return isColorTheme(value) ? value : readStoredTheme() ?? getSystemTheme();
+}
+
+function updateToggle(toggle: HTMLElement, theme: ColorTheme): void {
+  const label =
+    theme === 'light'
+      ? toggle.dataset.themeToggleDarkLabel
+      : toggle.dataset.themeToggleLightLabel;
+
+  if (label) {
+    toggle.setAttribute('aria-label', label);
+    toggle.setAttribute('title', label);
+  }
+}
+
+function updateToggles(theme: ColorTheme): void {
+  for (const toggle of document.querySelectorAll<HTMLElement>(
+    '[data-theme-toggle]',
+  )) {
+    updateToggle(toggle, theme);
+  }
+}
+
+function applyTheme(theme: ColorTheme, persist: boolean): void {
+  document.documentElement.dataset.theme = theme;
+
+  if (persist) {
+    try {
+      window.localStorage.setItem(getStorageKey(), theme);
+    } catch {
+      // The selected theme remains active for the current document.
+    }
+  }
+
+  updateToggles(theme);
+  document.dispatchEvent(
+    new CustomEvent('astronox:theme-change', { detail: { theme } }),
+  );
+}
+
+function initializeGlobalListeners(): void {
+  if (globalListenersInitialized) return;
+  globalListenersInitialized = true;
+
+  const media = window.matchMedia(systemThemeQuery);
+  media.addEventListener('change', (event) => {
+    if (readStoredTheme() === null) {
+      applyTheme(event.matches ? 'dark' : 'light', false);
+    }
+  });
+
+  window.addEventListener('storage', (event) => {
+    if (event.key !== getStorageKey()) return;
+
+    const theme = isColorTheme(event.newValue)
+      ? event.newValue
+      : getSystemTheme();
+    applyTheme(theme, false);
+  });
+}
+
+export function initThemeToggle(toggle: HTMLElement): () => void {
+  if (initializedToggles.has(toggle)) return () => {};
+  initializedToggles.add(toggle);
+  initializeGlobalListeners();
+  updateToggle(toggle, getCurrentTheme());
+
+  const handleClick = (): void => {
+    applyTheme(getCurrentTheme() === 'light' ? 'dark' : 'light', true);
+  };
+
+  toggle.addEventListener('click', handleClick);
+
+  return () => {
+    toggle.removeEventListener('click', handleClick);
+    initializedToggles.delete(toggle);
+  };
+}

package/src/components/feedback/ThemeBootstrap/ThemeBootstrap.astro

@@ -0,0 +1,31 @@
+---
+import { defaultThemeStorageKey } from '../../../theme/storage';
+
+type Props = {
+  storageKey?: string;
+};
+
+const { storageKey = defaultThemeStorageKey }: Props = Astro.props;
+---
+
+<script is:inline define:vars={{ storageKey }}>
+  (() => {
+    const root = document.documentElement;
+    let storedTheme = null;
+
+    try {
+      const value = window.localStorage.getItem(storageKey);
+      if (value === 'light' || value === 'dark') storedTheme = value;
+    } catch {
+      // The system preference remains available without local storage.
+    }
+
+    const systemTheme = window.matchMedia?.('(prefers-color-scheme: dark)')
+      .matches
+      ? 'dark'
+      : 'light';
+
+    root.dataset.theme = storedTheme ?? systemTheme;
+    root.dataset.themeStorageKey = storageKey;
+  })();
+</script>

package/src/components/forms/ChoiceGroup/ChoiceGroup.css

@@ -81,7 +81,7 @@
   background: color-mix(
     in srgb,
     var(--nox-tone-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   color: var(--nox-tone-text);
 }

package/src/components/icons/CircleSymbolIcon.css

@@ -3,17 +3,17 @@
   --circle-symbol-icon-surface: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 32%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --circle-symbol-icon-border: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 74%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --circle-symbol-icon-mark: color-mix(
     in srgb,
     var(--circle-symbol-icon-seed) 82%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
 
   color: var(--circle-symbol-icon-mark);

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export { default as ActionListItem } from './actions/ActionListItem/ActionListItem.astro';
 export { default as Button } from './actions/Button/Button.astro';
+export { default as ThemeToggle } from './actions/ThemeToggle/ThemeToggle.astro';
 export { default as CardAction } from './actions/CardAction/CardAction.astro';
 export { default as IdentityProviderAction } from './actions/IdentityProviderAction/IdentityProviderAction.astro';
 export { default as MediaTrigger } from './actions/MediaTrigger/MediaTrigger.astro';
@@ -33,6 +34,7 @@ export { default as TextInput } from './forms/TextInput/TextInput.astro';
 export { default as Textarea } from './forms/Textarea/Textarea.astro';
 export { default as Spinner } from './feedback/Spinner/Spinner.astro';
 export { default as PreferenceBootstrap } from './feedback/PreferenceBootstrap/PreferenceBootstrap.astro';
+export { default as ThemeBootstrap } from './feedback/ThemeBootstrap/ThemeBootstrap.astro';
 export { default as Tooltip } from './feedback/Tooltip/Tooltip.astro';
 export { default as CanvasFrame } from './media/CanvasFrame/CanvasFrame.astro';
 export { default as EmbedFrame } from './media/EmbedFrame/EmbedFrame.astro';

package/src/components/navigation/DesktopNavigation.css

@@ -81,7 +81,10 @@
 
   .site-nav__action > * {
     min-width: 5.75rem;
-    border-radius: var(--nox-radius-md);
+  }
+
+  .site-nav__action > [data-theme-toggle-appearance='circle'] {
+    min-width: 4.75rem;
   }
 
   .site-nav__action

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 > * {
@@ -101,13 +110,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 +136,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 +237,20 @@ 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);

package/src/components/navigation/navigationTypes.ts

@@ -1,11 +1,19 @@
 import type { AstroComponent } from '../widgetTypes';
-import type { DisplayMedia } from '../../display/contracts';
+import type {
+  DisplayMedia,
+  NavigationLinkItem,
+} from '../../display/contracts';
 
 export type MobileNavigationLabels = {
   closeLabel?: string;
   openLabel: string;
 };
 
+export type MobileNavigationControlItem = NavigationLinkItem & {
+  accentColor?: string;
+  labelVisibility?: 'accessible' | 'visible';
+};
+
 type SubNavigationVisual =
   | { icon?: AstroComponent; media?: never }
   | { icon?: never; media: DisplayMedia };

package/src/display/contracts.ts

@@ -311,6 +311,7 @@ type NavigationItemBase = {
   rel?: string;
   target?: '_blank' | '_self';
   hreflang?: string;
+  icon?: AstroComponent;
   media?: DisplayMedia;
   mediaFrame?: 'bordered';
   mediaShape?: 'circle' | 'rectangle';

package/src/layouts/BaseLayout.astro

@@ -9,6 +9,8 @@ import type { Tone } from '../theme/contracts';
 import PageSurface from './PageSurface.astro';
 import Breadcrumbs from '../components/navigation/Breadcrumbs/Breadcrumbs.astro';
 import ScrollToTop from '../components/actions/ScrollToTop/ScrollToTop.astro';
+import ThemeBootstrap from '../components/feedback/ThemeBootstrap/ThemeBootstrap.astro';
+import { defaultThemeStorageKey } from '../theme/storage';
 
 type Props = HTMLAttributes<'html'> & {
   meta: PageMeta;
@@ -20,6 +22,7 @@ type Props = HTMLAttributes<'html'> & {
   scrollToTopLabel?: string;
   structuredData?: readonly JsonLdNode[];
   tone?: Tone;
+  themeStorageKey?: string;
 };
 
 const {
@@ -33,6 +36,7 @@ const {
   site,
   structuredData,
   tone,
+  themeStorageKey = defaultThemeStorageKey,
   ...htmlAttrs
 } = Astro.props;
 const lang = meta.lang ?? site.defaultMeta.lang;
@@ -44,6 +48,7 @@ const resolvedTone = tone ?? dataTone;
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <ThemeBootstrap storageKey={themeStorageKey} />
     <SeoHead
       breadcrumbs={breadcrumbs}
       meta={meta}

package/src/patterns/MapViewport/MapViewport.css

@@ -155,12 +155,12 @@
   --map-viewport-cell-surface: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 38%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --map-viewport-cell-surface-hover: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 52%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --map-viewport-cell-background: color-mix(
     in srgb,
@@ -175,7 +175,7 @@
   --map-viewport-cell-border: color-mix(
     in srgb,
     var(--map-viewport-cell-seed) 74%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
 
   fill: var(--map-viewport-cell-background);

package/src/styles/style.css

@@ -17,6 +17,7 @@
 @import '../components/actions/ActionListItem/ActionListItem.css'
   layer(components);
 @import '../components/actions/Button/Button.css' layer(components);
+@import '../components/actions/ThemeToggle/ThemeToggle.css' layer(components);
 @import '../components/actions/CardAction/CardAction.css'
   layer(components);
 @import '../components/actions/ScrollToTop/ScrollToTop.css'

package/src/styles/tokens.css

@@ -27,6 +27,42 @@
   --nox-mix-light: #ffffff;
   --nox-mix-dark: #020617;
   --nox-tone-seed: var(--nox-source-tone-neutral);
+
+  /* Theme recipe anchors. Light mode preserves the original palette. */
+  --nox-theme-page-base: var(--nox-mix-light);
+  --nox-theme-surface-base: var(--nox-mix-light);
+  --nox-theme-text-base: var(--nox-mix-dark);
+  --nox-theme-text-disabled-base: var(--nox-mix-light);
+  --nox-theme-border-base: var(--nox-mix-light);
+  --nox-theme-inverse-base: var(--nox-mix-light);
+  --nox-theme-shadow-base: var(--nox-mix-dark);
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+
+  --nox-source-tone-neutral: #8f9bad;
+  --nox-source-tone-primary: #a78bfa;
+  --nox-source-tone-info: #73a4ff;
+  --nox-source-tone-success: #42d392;
+  --nox-source-tone-warning: #f0ad55;
+  --nox-source-tone-danger: #f47777;
+
+  --nox-source-map-available: #42d392;
+  --nox-source-map-unavailable: #fb7185;
+  --nox-source-map-field: #fbbf24;
+  --nox-source-map-grass: #84cc16;
+  --nox-source-map-mountain: #94a3b8;
+  --nox-source-map-water: #38bdf8;
+  --nox-source-map-range: #60a5fa;
+
+  --nox-theme-page-base: #0f1218;
+  --nox-theme-surface-base: #171b23;
+  --nox-theme-text-base: #f8fafc;
+  --nox-theme-text-disabled-base: #657184;
+  --nox-theme-border-base: #252b35;
+  --nox-theme-inverse-base: #0f1218;
+  --nox-theme-shadow-base: #000000;
 }
 
 :root,
@@ -35,51 +71,55 @@
   --nox-page-background: color-mix(
     in srgb,
     var(--nox-tone-seed) 11%,
-    var(--nox-mix-light)
+    var(--nox-theme-page-base)
   );
   --nox-surface: color-mix(
     in srgb,
     var(--nox-tone-seed) 2%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-surface-muted: color-mix(
     in srgb,
     var(--nox-tone-seed) 8%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-surface-strong: color-mix(
     in srgb,
     var(--nox-tone-seed) 14%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
 
-  --nox-text: color-mix(in srgb, var(--nox-tone-seed) 18%, var(--nox-mix-dark));
+  --nox-text: color-mix(
+    in srgb,
+    var(--nox-tone-seed) 18%,
+    var(--nox-theme-text-base)
+  );
   --nox-text-muted: color-mix(
     in srgb,
     var(--nox-tone-seed) 52%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --nox-text-subtle: color-mix(
     in srgb,
     var(--nox-tone-seed) 68%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --nox-text-disabled: color-mix(
     in srgb,
     var(--nox-tone-seed) 36%,
-    var(--nox-mix-light)
+    var(--nox-theme-text-disabled-base)
   );
-  --nox-text-inverse: var(--nox-mix-light);
+  --nox-text-inverse: var(--nox-theme-inverse-base);
 
   --nox-border: color-mix(
     in srgb,
     var(--nox-tone-seed) 28%,
-    var(--nox-mix-light)
+    var(--nox-theme-border-base)
   );
   --nox-border-muted: color-mix(
     in srgb,
     var(--nox-tone-seed) 18%,
-    var(--nox-mix-light)
+    var(--nox-theme-border-base)
   );
 
   /* Tone interaction slots. */
@@ -89,12 +129,12 @@
   --nox-tone-hover-background: color-mix(
     in srgb,
     var(--nox-tone-seed) 12%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-tone-active-background: color-mix(
     in srgb,
     var(--nox-tone-seed) 20%,
-    var(--nox-mix-light)
+    var(--nox-theme-surface-base)
   );
   --nox-tone-border: color-mix(
     in srgb,
@@ -104,13 +144,13 @@
   --nox-tone-text: color-mix(
     in srgb,
     var(--nox-tone-seed) 72%,
-    var(--nox-mix-dark)
+    var(--nox-theme-text-base)
   );
   --nox-tone-focus-ring: var(--nox-tone-seed);
   --nox-tone-shadow: color-mix(
     in srgb,
     var(--nox-tone-seed) 24%,
-    var(--nox-mix-dark)
+    var(--nox-theme-shadow-base)
   );
 
   /* Shared framed-data surface slots. */

package/src/theme/contracts.ts

@@ -5,3 +5,5 @@ export type Tone =
   | 'success'
   | 'warning'
   | 'danger';
+
+export type ColorTheme = 'light' | 'dark';

package/src/theme/index.ts

@@ -1 +1,2 @@
 export * from './contracts';
+export * from './storage';

package/src/theme/storage.ts

@@ -0,0 +1 @@
+export const defaultThemeStorageKey = 'astronox:theme';