@astronox/core 0.2.2 → 0.2.3

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

@@ -0,0 +1,155 @@
+.site-footer {
+  color: var(--nox-text-muted);
+}
+
+.site-footer__content {
+  --site-footer-item-gap: var(--nox-space-2);
+  --site-footer-marker-gap: 0.0625rem;
+
+  display: grid;
+  width: var(--nox-page-width);
+  margin-inline: auto;
+  justify-items: center;
+  gap: var(--nox-space-1);
+  padding-block-end: calc(
+    var(--nox-section-compact-block-size) + var(--nox-space-7)
+  );
+  font-size: var(--nox-font-size-sm);
+  line-height: 1.25;
+  text-align: center;
+}
+
+.site-footer__group {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.site-footer__content[data-footer-columns='2'] {
+  grid-template-columns: repeat(2, max-content);
+  justify-content: center;
+  column-gap: var(--nox-space-4);
+}
+
+.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__group:nth-child(even)::before {
+  display: inline-grid;
+  width: calc(
+    var(--site-footer-item-gap) + var(--site-footer-item-gap) + 0.5em
+  );
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-border);
+  content: '|';
+  line-height: 1;
+}
+
+.site-footer__content[data-footer-columns='2']
+  > .site-footer__group:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
+.site-footer__item {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0;
+}
+
+.site-footer__separator {
+  display: inline-grid;
+  width: calc(
+    var(--site-footer-item-gap) + var(--site-footer-item-gap) + 0.5em
+  );
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--nox-border);
+  line-height: 1;
+}
+
+.site-footer__spacer {
+  width: var(--site-footer-item-gap);
+  flex: 0 0 auto;
+}
+
+.site-footer__prefix + :is(a, .site-footer__label) {
+  margin-inline-start: var(--nox-space-1);
+}
+
+.site-footer a,
+.site-footer__label {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--site-footer-marker-gap);
+}
+
+.site-footer__marker {
+  display: block;
+  width: 0.625rem;
+  height: 0.625rem;
+  flex: 0 0 auto;
+  color: var(--nox-text-muted);
+}
+
+.site-footer a {
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+  text-decoration: none;
+}
+
+.site-footer a[data-tone],
+.site-footer__label[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+.site-footer a: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 {
+  color: var(--nox-tone-color);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .site-footer a:hover {
+    color: var(--nox-content-link-color);
+    text-decoration-line: underline;
+  }
+
+  .site-footer a[data-tone]:hover {
+    color: var(--nox-tone-color);
+  }
+}
+
+@media (width < 48rem) {
+  .site-footer__content[data-footer-columns='2'] {
+    grid-template-columns: minmax(0, 1fr);
+    column-gap: 0;
+  }
+
+  .site-footer__content[data-footer-columns='2']
+    > .site-footer__group:last-child:nth-child(odd) {
+    grid-column: auto;
+  }
+
+  .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/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/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[];
+};

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

@@ -1,7 +1,17 @@
 import { getApps, initializeApp } from 'firebase/app';
-import { getFirestore } from 'firebase/firestore';
+import {
+  collection,
+  doc,
+  getFirestore,
+  serverTimestamp,
+  writeBatch,
+} from 'firebase/firestore';
 
 import type { FirebaseClientConfig } from '../../../auth/firebase/contracts';
+import type {
+  ClientFirestoreBatchOperation,
+  ClientFirestoreBatchResult,
+} from './contracts';
 
 export function createFirebaseClientFirestore(config: FirebaseClientConfig) {
   const app =
@@ -10,3 +20,37 @@ export function createFirebaseClientFirestore(config: FirebaseClientConfig) {
 
   return getFirestore(app);
 }
+
+export function createClientFirestoreServerTimestamp() {
+  return serverTimestamp();
+}
+
+export async function commitClientFirestoreBatch(
+  database: ReturnType<typeof createFirebaseClientFirestore>,
+  operations: readonly ClientFirestoreBatchOperation[],
+): Promise<ClientFirestoreBatchResult> {
+  const batch = writeBatch(database);
+  const createdIds: string[] = [];
+
+  for (const operation of operations) {
+    const documents = collection(database, operation.collection);
+    if (operation.kind === 'create') {
+      const reference = operation.id
+        ? doc(documents, operation.id)
+        : doc(documents);
+      batch.set(reference, operation.value);
+      createdIds.push(reference.id);
+      continue;
+    }
+
+    const reference = doc(documents, operation.id);
+    if (operation.kind === 'update') {
+      batch.update(reference, operation.value);
+    } else {
+      batch.delete(reference);
+    }
+  }
+
+  await batch.commit();
+  return { createdIds };
+}

package/src/display/contracts.ts

@@ -104,10 +104,13 @@ type DisplayCardLinkContent = {
   compactContent?: 'text' | 'media';
   compactText?: DisplayTextValue;
   compactVisual?: 'show' | 'hide';
+  density?: 'default' | 'relaxed';
   iconTone?: Tone;
-  label: string;
+  label?: string;
   title: string;
   meta?: DisplayTextValue;
+  textLayout?: TextPairLayout;
+  textTreatment?: 'default' | 'heading';
   media?: DisplayMedia;
   mediaPosition?: 'start' | 'end';
   mediaSize?: 'default' | 'compact' | 'small';

package/src/layouts/BaseLayout.astro

@@ -16,6 +16,7 @@ type Props = HTMLAttributes<'html'> & {
   currentPath?: string;
   breadcrumbs?: readonly BreadcrumbItem[];
   breadcrumbLabel: string;
+  breadcrumbTone?: Tone;
   scrollToTopLabel?: string;
   structuredData?: readonly JsonLdNode[];
   tone?: Tone;
@@ -23,6 +24,7 @@ type Props = HTMLAttributes<'html'> & {
 
 const {
   breadcrumbLabel,
+  breadcrumbTone,
   breadcrumbs,
   currentPath = Astro.url.pathname,
   'data-tone': dataTone,
@@ -59,7 +61,11 @@ const resolvedTone = tone ?? dataTone;
         <div class="site-main__content">
           {
             breadcrumbs?.length ? (
-              <Breadcrumbs items={breadcrumbs} label={breadcrumbLabel} />
+              <Breadcrumbs
+                items={breadcrumbs}
+                label={breadcrumbLabel}
+                tone={breadcrumbTone}
+              />
             ) : null
           }
 
@@ -68,6 +74,7 @@ const resolvedTone = tone ?? dataTone;
           </PageSurface>
         </div>
       </main>
+      <slot name="footer" />
     </div>
     {scrollToTopLabel ? <ScrollToTop label={scrollToTopLabel} /> : null}
   </body>

package/src/patterns/Combobox/comboboxController.ts

@@ -17,6 +17,13 @@ export type ComboboxNumberBounds = {
   max: number;
 };
 
+export type DynamicComboboxOption = {
+  description?: string;
+  disabled?: boolean;
+  label: string;
+  value: string;
+};
+
 type NumberBounds = {
   min: number;
   max: number;
@@ -159,6 +166,68 @@ export function clearCombobox(
   root.dispatchEvent(new Event('combobox:clear'));
 }
 
+export function setComboboxOptions(
+  root: HTMLElement,
+  options: readonly DynamicComboboxOption[],
+  selectedValues: readonly string[] = [],
+): void {
+  if (root.dataset.comboboxMode === 'number') return;
+  const optionsRoot = root.querySelector<HTMLElement>('[data-combobox-options]');
+  const empty = root.querySelector<HTMLElement>('[data-combobox-empty]');
+  if (!optionsRoot || !empty) return;
+
+  optionsRoot.querySelectorAll('[data-combobox-option]').forEach((node) => node.remove());
+  root.querySelectorAll('template[data-combobox-tag-template]').forEach((node) => node.remove());
+
+  options.forEach((option, index) => {
+    const button = document.createElement('button');
+    button.className = 'combobox__option';
+    button.id = `${root.id}-option-${index}`;
+    button.type = 'button';
+    button.role = 'option';
+    button.tabIndex = -1;
+    button.disabled = option.disabled === true;
+    button.setAttribute('aria-selected', 'false');
+    if (option.disabled) button.setAttribute('aria-disabled', 'true');
+    button.dataset.comboboxOption = option.value;
+    button.dataset.comboboxSearchText = [option.label, option.description ?? ''].join(' ');
+    button.dataset.interactionAccent = 'start';
+
+    const content = document.createElement('span');
+    content.className = 'combobox__option-content';
+    const label = document.createElement('span');
+    label.className = 'combobox__option-label';
+    label.textContent = option.label;
+    content.append(label);
+    if (option.description) {
+      const description = document.createElement('span');
+      description.className = 'combobox__option-description';
+      description.textContent = option.description;
+      content.append(description);
+    }
+    button.append(content);
+    optionsRoot.insertBefore(button, empty);
+
+    const template = document.createElement('template');
+    template.dataset.comboboxTagTemplate = option.value;
+    const tag = document.createElement('span');
+    tag.className = 'tag';
+    tag.dataset.widget = 'tag';
+    tag.dataset.size = 'sm';
+    tag.dataset.comboboxTag = option.value;
+    const tagLabel = document.createElement('span');
+    tagLabel.className = 'tag__label';
+    tagLabel.dataset.tagLabel = '';
+    tagLabel.textContent = option.label;
+    tag.append(tagLabel);
+    template.content.append(tag);
+    root.append(template);
+  });
+
+  empty.hidden = options.length > 0;
+  setComboboxValues(root, selectedValues);
+}
+
 export function setComboboxNumberValue(
   root: HTMLElement,
   requestedValue: number,

package/src/patterns/Table/TableBody.css

@@ -130,7 +130,7 @@
 }
 
 .table-body__row {
-  --table-primary-link-color: var(--nox-text);
+  --table-primary-link-color: var(--nox-content-link-color);
   --table-row-intrinsic-block-size: var(--table-row-min-block-size);
 
   display: grid;
@@ -173,7 +173,7 @@
 }
 
 .table-body__row[data-table-row-href]:focus-within {
-  --table-primary-link-color: var(--nox-link-hover);
+  --table-primary-link-color: var(--nox-content-link-color);
 }
 
 .table-body__cell {
@@ -253,7 +253,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .table-body__row[data-table-row-href]:hover {
-    --table-primary-link-color: var(--nox-link-hover);
+    --table-primary-link-color: var(--nox-content-link-color);
   }
 }
 

package/src/patterns/Table/TableCell.css

@@ -68,6 +68,10 @@
     var(--nox-motion-easing-standard);
 }
 
+.table-cell__link [data-text-weight='strong'] {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
+}
+
 .table-cell__empty {
   color: var(--nox-text-muted);
   font-size: var(--nox-font-size-sm);
@@ -93,7 +97,7 @@
 
 @media (hover: hover) and (pointer: fine) {
   .table-cell__link:hover {
-    color: var(--nox-link-hover);
+    color: var(--nox-content-link-color);
   }
 }
 

package/src/styles/base.css

@@ -70,7 +70,20 @@ body {
 }
 
 a {
-  color: inherit;
+  color: var(--nox-content-link-color);
+  font-weight: var(--nox-content-link-font-weight);
+  text-decoration: none;
+  text-decoration-thickness: 0.0625rem;
+  text-underline-offset: 0.2em;
+}
+
+a[data-tone] {
+  color: var(--nox-tone-color);
+}
+
+strong a,
+a strong {
+  font-weight: var(--nox-content-link-emphasis-font-weight);
 }
 
 a:focus-visible,
@@ -83,6 +96,12 @@ button {
   font: inherit;
 }
 
+@media (hover: hover) and (pointer: fine) {
+  a:where([href]:hover) {
+    text-decoration-line: underline;
+  }
+}
+
 img,
 svg,
 video {
@@ -104,7 +123,6 @@ p {
   overflow-y: auto;
   background: var(--nox-page-background);
   overscroll-behavior-y: contain;
-  scrollbar-gutter: stable both-edges;
 }
 
 .site-main {
@@ -113,18 +131,19 @@ p {
   display: grid;
   width: var(--nox-page-width);
   margin: 0 auto;
-  padding-block: var(--site-main-content-gap) var(--nox-space-7);
-  gap: var(--nox-layout-gap);
+  padding-block: var(--site-main-content-gap);
+  align-content: start;
 }
 
 .site-main__content {
   display: grid;
   min-width: 0;
+  align-content: start;
   gap: var(--site-main-content-gap);
 }
 
 .site-main:has(> .site-main__content > .breadcrumbs) {
-  padding-block-start: 0;
+  padding-block: 0 var(--site-main-content-gap);
 }
 
 .site-main__content:has(> .breadcrumbs) {
@@ -134,8 +153,6 @@ p {
 @media (width < 48rem) {
   .site-main {
     --site-main-content-gap: var(--nox-space-4);
-
-    padding-block-end: var(--nox-space-6);
   }
 }
 

package/src/styles/style.css

@@ -60,6 +60,7 @@
 @import '../components/navigation/Breadcrumbs/Breadcrumbs.css'
   layer(components);
 @import '../components/navigation/Header.css' layer(components);
+@import '../components/navigation/Footer/Footer.css' layer(components);
 @import '../components/navigation/NavigationBrand.css' layer(components);
 @import '../components/navigation/NavigationControl.css' layer(components);
 @import '../components/navigation/NavigationMenuList.css' layer(components);

package/src/styles/tokens.css

@@ -9,6 +9,11 @@
   --nox-source-tone-warning: #d97706;
   --nox-source-tone-danger: #dc2626;
 
+  /* Shared textual-link recipe. */
+  --nox-content-link-color: var(--nox-source-tone-info);
+  --nox-content-link-font-weight: var(--nox-font-weight-regular);
+  --nox-content-link-emphasis-font-weight: var(--nox-font-weight-medium);
+
   /* Public map seeds. Component states derive their full treatment from these. */
   --nox-source-map-available: #00b86b;
   --nox-source-map-unavailable: #f43f5e;