@astronox/core 0.2.2 → 0.2.4

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

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../../theme/contracts';
+
+export type FooterItem = {
+  href?: HTMLAttributes<'a'>['href'];
+  label: string;
+  marker?: 'arrow';
+  prefix?: string;
+  rel?: HTMLAttributes<'a'>['rel'];
+  separator?: 'divider' | 'none';
+  target?: HTMLAttributes<'a'>['target'];
+  tone?: Tone;
+};
+
+export type FooterGroup = {
+  items: readonly FooterItem[];
+};

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/composition/Grid/Grid.css

@@ -115,6 +115,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='sm'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']
@@ -163,6 +167,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='md'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']
@@ -211,6 +219,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='lg'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']
@@ -259,6 +271,10 @@
     grid-template-columns: 1fr;
   }
 
+  .grid[data-layout='fixed'][data-collapse-at='xl'][data-last-row='fill'] > * {
+    grid-column: auto;
+  }
+
   .grid:is(
       [data-layout='fixed'],
       [data-layout='content-sidebar']

package/src/data/firestore/client/contracts.ts

@@ -53,3 +53,26 @@ export type ClientFirestoreRepositoryConfig<
   orderBy?: readonly ClientFirestoreOrder[];
   schema: ClientFirestoreSchema<TDocument>;
 };
+
+export type ClientFirestoreBatchOperation =
+  | {
+      collection: string;
+      id?: string;
+      kind: 'create';
+      value: Record<string, unknown>;
+    }
+  | {
+      collection: string;
+      id: string;
+      kind: 'update';
+      value: Record<string, unknown>;
+    }
+  | {
+      collection: string;
+      id: string;
+      kind: 'delete';
+    };
+
+export type ClientFirestoreBatchResult = {
+  createdIds: readonly string[];
+};