@astronox/core 0.1.0

package/src/components/navigation/DesktopNavigation.css

@@ -0,0 +1,99 @@
+.site-nav__desktop {
+  display: none;
+}
+
+.site-nav__dropdown-link {
+  border-radius: 0;
+}
+
+@media (width >= 72rem) {
+  .site-nav__desktop {
+    --site-nav-track-block-size: var(
+      --site-header-desktop-track-block-size,
+      calc(var(--nox-site-header-height) - var(--nox-border-width))
+    );
+
+    display: grid;
+    width: var(--nox-page-width);
+    block-size: var(--site-nav-track-block-size);
+    margin: 0 auto;
+    grid-template-columns:
+      minmax(0, 1fr) max-content
+      minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
+    align-items: stretch;
+  }
+
+  .site-nav__side {
+    display: flex;
+    min-width: 0;
+    min-height: 0;
+    block-size: 100%;
+    align-items: stretch;
+  }
+
+  .site-nav__group {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    block-size: 100%;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .site-nav__group .dropdown {
+    align-self: stretch;
+    block-size: 100%;
+  }
+
+  .site-nav__group--left {
+    justify-content: center;
+  }
+
+  .site-nav__group--right {
+    justify-content: center;
+  }
+
+  .site-nav__brand--desktop {
+    --site-nav-brand-block: var(--site-nav-track-block-size);
+    --site-nav-brand-inline: max-content;
+
+    block-size: 100%;
+    max-inline-size: min(26rem, 42vw);
+    justify-self: center;
+  }
+
+  .site-nav__action {
+    z-index: 3;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+  .site-nav__action--start {
+    justify-content: flex-start;
+  }
+
+  .site-nav__action--end {
+    justify-content: flex-end;
+  }
+
+  .site-nav__action > * {
+    min-width: 5.75rem;
+    border-radius: var(--nox-radius-md);
+  }
+
+  .site-nav__action
+    > .dropdown[data-dropdown-trigger-appearance='bar'] {
+    min-width: 0;
+    block-size: 100%;
+    border-radius: 0;
+  }
+
+  .site-nav__action
+    .dropdown:not([data-dropdown-trigger-appearance='bar'])
+    > [data-dropdown-trigger] {
+    inline-size: 100%;
+  }
+}

package/src/components/navigation/Header.astro

@@ -0,0 +1,73 @@
+---
+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 { Tone } from '../../theme/contracts';
+import DesktopNavigation from './DesktopNavigation.astro';
+import MobileNavigation from './MobileNavigation.astro';
+
+type Props = HTMLAttributes<'header'> & {
+  ariaLabel: string;
+  currentPath: string;
+  homeHref: string;
+  homeLabel: string;
+  identity: SiteIdentity;
+  leftItems?: readonly NavigationItem[];
+  menu: MobileNavigationLabels;
+  rightItems?: readonly NavigationItem[];
+  sticky?: boolean;
+  tone?: Tone;
+};
+
+const {
+  ariaLabel,
+  class: className,
+  currentPath,
+  'data-tone': dataTone,
+  homeHref,
+  homeLabel,
+  identity,
+  leftItems = [],
+  menu,
+  rightItems = [],
+  sticky = false,
+  tone,
+  ...attrs
+} = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<header
+  {...attrs}
+  class:list={['site-header', className]}
+  data-site-header
+  data-site-header-sticky={sticky ? true : undefined}
+  data-tone={resolvedTone}
+>
+  <nav class="site-nav" aria-label={ariaLabel}>
+    <MobileNavigation
+      identity={identity}
+      homeHref={homeHref}
+      homeLabel={homeLabel}
+      leftItems={leftItems}
+      menu={menu}
+      rightItems={rightItems}
+      currentPath={currentPath}
+    >
+      <slot name="mobile-actions" slot="actions" />
+    </MobileNavigation>
+
+    <DesktopNavigation
+      identity={identity}
+      homeHref={homeHref}
+      homeLabel={homeLabel}
+      leftItems={leftItems}
+      rightItems={rightItems}
+      currentPath={currentPath}
+    >
+      <slot name="desktop-leading-actions" slot="leading-actions" />
+      <slot name="desktop-actions" slot="actions" />
+    </DesktopNavigation>
+  </nav>
+</header>

package/src/components/navigation/Header.css

@@ -0,0 +1,20 @@
+.site-header {
+  --site-header-border-width: var(--nox-border-width);
+  --site-header-desktop-track-block-size: calc(
+    var(--nox-site-header-height) - var(--site-header-border-width)
+  );
+
+  z-index: 50;
+  top: 0;
+  border-bottom: var(--site-header-border-width) solid var(--nox-border);
+  background: color-mix(in srgb, var(--nox-surface) 94%, transparent);
+  backdrop-filter: blur(14px);
+}
+
+.site-header[data-site-header-sticky] {
+  position: sticky;
+}
+
+.site-nav {
+  position: relative;
+}

package/src/components/navigation/MobileNavigation.astro

@@ -0,0 +1,124 @@
+---
+import type { SiteIdentity } from '../../config/siteConfig';
+import type { NavigationItem } from '../../display/contracts';
+import type { MobileNavigationLabels } from './navigationTypes';
+import NavigationBrand from './NavigationBrand.astro';
+import NavigationLink from './NavigationLink.astro';
+import { isNavigationGroupItem } from './navigationState';
+
+type Props = {
+  currentPath: string;
+  homeHref: string;
+  homeLabel: string;
+  identity: SiteIdentity;
+  leftItems: readonly NavigationItem[];
+  menu: MobileNavigationLabels;
+  rightItems: readonly NavigationItem[];
+};
+
+type MobileNavigationGroup = {
+  items: readonly NavigationItem[];
+  label?: string;
+};
+
+const {
+  currentPath,
+  homeHref,
+  homeLabel,
+  identity,
+  leftItems,
+  menu,
+  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],
+        },
+  ),
+];
+---
+
+<div class="site-nav__mobile" data-mobile-navigation>
+  <div class="site-nav__mobile-bar">
+    <button
+      class="site-nav__menu-button"
+      type="button"
+      aria-label={menu.openLabel}
+      aria-controls={panelId}
+      aria-expanded="false"
+      data-mobile-navigation-trigger
+      data-mobile-navigation-open-label={menu.openLabel}
+      data-mobile-navigation-close-label={closeLabel}
+    >
+      <span class="site-nav__menu-icon" aria-hidden="true">
+        <span class="site-nav__menu-line"></span>
+        <span class="site-nav__menu-line"></span>
+        <span class="site-nav__menu-line"></span>
+      </span>
+    </button>
+
+    <NavigationBrand
+      identity={identity}
+      href={homeHref}
+      label={homeLabel}
+      class="site-nav__brand--mobile"
+    />
+
+    <div class="site-nav__mobile-action">
+      <slot name="actions" />
+    </div>
+  </div>
+
+  <div
+    class="site-nav__mobile-panel"
+    id={panelId}
+    hidden
+    data-mobile-navigation-panel
+  >
+    <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>
+            ))}
+          </>
+        ))
+      }
+    </ul>
+  </div>
+</div>
+
+<script>
+  import { initMobileNavigation } from './mobileNavigationController';
+
+  for (const root of document.querySelectorAll('[data-mobile-navigation]')) {
+    if (root instanceof HTMLElement) {
+      initMobileNavigation(root);
+    }
+  }
+</script>

package/src/components/navigation/MobileNavigation.css

@@ -0,0 +1,177 @@
+.site-nav__mobile {
+  position: relative;
+  display: block;
+}
+
+.site-nav__mobile-bar {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  width: var(--nox-page-width);
+  min-height: var(--nox-site-header-compact-height);
+  margin: 0 auto;
+  gap: clamp(var(--nox-space-1), 2vw, var(--nox-space-3));
+}
+
+.site-nav__menu-button {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--nox-space-2);
+  gap: 0.28rem;
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  color: var(--nox-text);
+  cursor: pointer;
+}
+
+.site-nav__menu-icon {
+  position: relative;
+  display: grid;
+  width: 1.35rem;
+  height: 1rem;
+  place-items: center;
+}
+
+.site-nav__menu-line {
+  position: absolute;
+  width: 1.35rem;
+  height: 0.15rem;
+  border-radius: var(--nox-radius-pill);
+  background: currentColor;
+}
+
+.site-nav__menu-line:nth-child(1) {
+  transform: translateY(-0.38rem);
+}
+
+.site-nav__menu-line:nth-child(3) {
+  transform: translateY(0.38rem);
+}
+
+.site-nav__mobile[data-mobile-navigation-open]
+  .site-nav__menu-line:nth-child(1) {
+  transform: rotate(45deg);
+}
+
+.site-nav__mobile[data-mobile-navigation-open]
+  .site-nav__menu-line:nth-child(2) {
+  opacity: 0;
+}
+
+.site-nav__mobile[data-mobile-navigation-open]
+  .site-nav__menu-line:nth-child(3) {
+  transform: rotate(-45deg);
+}
+
+.site-nav__brand--mobile {
+  z-index: 1;
+  justify-self: stretch;
+}
+
+.site-nav__mobile-action {
+  z-index: 2;
+  justify-self: end;
+}
+
+.site-nav__mobile-action > * {
+  min-width: 4.75rem;
+  border-radius: var(--nox-radius-md);
+}
+
+.site-nav__mobile-action
+  > .dropdown[data-dropdown-trigger-appearance='bar'] {
+  min-width: 0;
+  block-size: var(--nox-site-header-compact-height);
+  border-radius: 0;
+}
+
+.site-nav__mobile-action
+  .dropdown:not([data-dropdown-trigger-appearance='bar'])
+  > [data-dropdown-trigger] {
+  inline-size: 100%;
+}
+
+.site-nav__mobile-panel {
+  position: absolute;
+  z-index: 2;
+  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));
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--nox-space-3);
+  border-top: 3px solid var(--nox-link-active);
+  border-bottom: var(--nox-border-width) solid var(--nox-border);
+  border-end-start-radius: var(--nox-radius-md);
+  border-end-end-radius: var(--nox-radius-md);
+  background: var(--nox-surface);
+  box-shadow: var(--nox-shadow-surface);
+  overscroll-behavior: contain;
+}
+
+.site-nav__mobile-panel[hidden] {
+  display: none;
+}
+
+.site-nav__mobile-list {
+  display: grid;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  gap: var(--nox-space-1);
+  list-style: none;
+}
+
+.site-nav__mobile-link {
+  min-height: 3.125rem;
+  padding-block: 0;
+  border-radius: var(--nox-radius-sm);
+}
+
+.site-nav__mobile-group-label {
+  display: flex;
+  min-height: 1.5rem;
+  align-items: flex-end;
+  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;
+}
+
+html[data-mobile-navigation-open],
+html[data-mobile-navigation-open] body {
+  overflow: hidden;
+}
+
+@media (width >= 72rem) {
+  .site-nav__mobile {
+    display: none;
+  }
+}
+
+@media (hover: hover) {
+  .site-nav__menu-button:hover {
+    background: var(--nox-surface-muted);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .site-nav__menu-line {
+    transition:
+      opacity var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+      transform var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+}

package/src/components/navigation/NavigationBrand.astro

@@ -0,0 +1,63 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { SiteIdentity } from '../../config/siteConfig';
+import type { Tone } from '../../theme/contracts';
+import Media from '../../primitives/media/Media/Media.astro';
+
+type Props = Omit<HTMLAttributes<'a'>, 'href'> & {
+  identity: SiteIdentity;
+  class?: string;
+  'data-tone'?: Tone;
+  href: string;
+  label: string;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  href,
+  identity,
+  label,
+  ...attrs
+}: Props = Astro.props;
+const logo = identity.logo;
+const logoAspectRatio = logo ? `${logo.width} / ${logo.height}` : undefined;
+---
+
+<a
+  {...attrs}
+  class:list={['site-nav__brand', className]}
+  href={href}
+  aria-label={label}
+  data-tone={dataTone}
+>
+  {
+    logo ? (
+      <div
+        class="site-nav__brand-logo-frame"
+        style={`--site-nav-brand-logo-aspect-ratio: ${logoAspectRatio};`}
+      >
+        <Media
+          class="site-nav__brand-logo"
+          media={{
+            src: logo.src,
+            alt: logo.alt,
+            width: logo.width,
+            height: logo.height,
+            loading: 'eager',
+            decoding: 'sync',
+            fetchPriority: 'high',
+          }}
+          fit="contain"
+        />
+      </div>
+    ) : (
+      <>
+        <span class="site-nav__brand-name">{identity.name}</span>
+        {identity.shortName ? (
+          <span class="site-nav__brand-detail">{identity.shortName}</span>
+        ) : null}
+      </>
+    )
+  }
+</a>

package/src/components/navigation/NavigationBrand.css

@@ -0,0 +1,52 @@
+.site-nav__brand {
+  --site-nav-brand-block: var(--nox-site-header-height);
+  --site-nav-brand-inline: min(26rem, 42vw);
+  --site-nav-brand-image-scale: 58%;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--site-nav-brand-inline);
+  block-size: var(--site-nav-brand-block);
+  min-width: 0;
+  overflow: visible;
+  color: var(--nox-text);
+  text-decoration: none;
+}
+
+.site-nav__brand-logo-frame {
+  display: grid;
+  block-size: var(--site-nav-brand-image-scale);
+  max-inline-size: 100%;
+  aspect-ratio: var(--site-nav-brand-logo-aspect-ratio);
+}
+
+.site-nav__brand-logo-frame [data-widget='media'] {
+  inline-size: 100%;
+  block-size: 100%;
+  --media-object-inline-size: auto;
+  --media-object-block-size: auto;
+  --media-object-max-inline-size: 100%;
+  --media-object-max-block-size: 100%;
+}
+
+.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-name {
+  font-size: var(--nox-font-size-md);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+}
+
+.site-nav__brand-detail {
+  color: var(--nox-text-muted);
+  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;
+}