@astronox/core 0.1.0

package/src/patterns/StageFlow/StageFlowArrow.astro

@@ -0,0 +1,22 @@
+<svg
+  class="stage-flow__symbol stage-flow__arrow"
+  viewBox="0 0 20 44"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <path
+    class="stage-flow__symbol-outline"
+    d="M6 6.5 15 22 6 37.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="5.5"></path>
+  <path
+    class="stage-flow__symbol-line"
+    d="M6 6.5 15 22 6 37.5"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2.75"></path>
+</svg>

package/src/patterns/StageFlow/StageFlowConnector.astro

@@ -0,0 +1,7 @@
+---
+import StageFlowArrow from './StageFlowArrow.astro';
+---
+
+<li class="stage-flow__item stage-flow__item--connector">
+  <StageFlowArrow />
+</li>

package/src/patterns/StageFlow/StageFlowConnector.css

@@ -0,0 +1,4 @@
+.stage-flow__item--connector {
+  inline-size: var(--stage-flow-connector-inline-size);
+  place-items: center;
+}

package/src/patterns/StageFlow/StageFlowStage.astro

@@ -0,0 +1,51 @@
+---
+import type { StageFlowItem } from '../../display/contracts';
+import Tag from '../../components/data-display/Tag/Tag.astro';
+import TextPair from '../../components/data-display/TextPair/TextPair.astro';
+import MediaFrame from '../../components/media/MediaFrame/MediaFrame.astro';
+import Inline from '../../composition/Inline/Inline.astro';
+import Media from '../../primitives/media/Media/Media.astro';
+
+type Props = {
+  stage: StageFlowItem;
+};
+
+const { stage }: Props = Astro.props;
+const StageTag = stage.href ? 'a' : 'div';
+const stageAttributes = stage.href ? { href: stage.href } : {};
+---
+
+<li class="stage-flow__item stage-flow__item--stage">
+  <StageTag
+    {...stageAttributes}
+    class="stage-flow__stage"
+    aria-current={stage.active ? 'page' : undefined}
+  >
+    <MediaFrame class="stage-flow__media" shape="circle" size="md">
+      {
+        stage.media ? (
+          <Media media={stage.media} fit="contain" size="fill" />
+        ) : null
+      }
+    </MediaFrame>
+    <span class="stage-flow__content">
+      <TextPair class="stage-flow__text" primary={stage.title} />
+      {
+        stage.tags && stage.tags.length > 0 ? (
+          <Inline
+            as="span"
+            class="stage-flow__tags"
+            align="center"
+            gap="sm"
+            justify="center"
+            wrap
+          >
+            {stage.tags.map((tag) => (
+              <Tag {...tag} size="sm" />
+            ))}
+          </Inline>
+        ) : null
+      }
+    </span>
+  </StageTag>
+</li>

package/src/patterns/StageFlow/StageFlowStage.css

@@ -0,0 +1,106 @@
+.stage-flow__item--stage {
+  inline-size: max-content;
+  min-inline-size: var(--stage-flow-stage-min-inline-size);
+}
+
+.stage-flow__stage {
+  display: grid;
+  inline-size: max-content;
+  min-inline-size: var(--stage-flow-stage-min-inline-size);
+  min-block-size: 9.75rem;
+  align-content: start;
+  justify-items: center;
+  padding: var(--nox-space-2);
+  gap: var(--nox-space-3);
+  border-radius: var(--nox-radius-lg);
+  background: transparent;
+  color: var(--nox-text);
+  text-align: center;
+  text-decoration: none;
+}
+
+.stage-flow__stage[href] {
+  cursor: pointer;
+}
+
+.stage-flow__media {
+  --media-frame-size: var(--stage-flow-media-size);
+}
+
+.stage-flow__stage:focus-visible {
+  outline: none;
+}
+
+.stage-flow__stage[aria-current='page'] [data-widget='media-frame'] {
+  border-width: 4px;
+  border-color: var(--nox-tone-color);
+  background:
+    radial-gradient(
+      circle at 50% 42%,
+      color-mix(in srgb, var(--nox-tone-color) 18%, transparent),
+      transparent 58%
+    ),
+    var(--nox-tone-background);
+  box-shadow:
+    0 0 0 1px var(--nox-tone-color),
+    0 0.35rem 0.75rem
+      color-mix(in srgb, var(--nox-tone-shadow) 16%, transparent);
+}
+
+.stage-flow__stage:focus-visible [data-widget='media-frame'] {
+  box-shadow:
+    0 0 0 1px var(--nox-border),
+    0 0 0 5px color-mix(in srgb, var(--nox-tone-focus-ring) 22%, transparent),
+    0 0.5rem 1rem color-mix(in srgb, var(--nox-tone-shadow) 18%, transparent);
+}
+
+.stage-flow__stage[aria-current='page']:focus-visible
+  [data-widget='media-frame'] {
+  border-color: var(--nox-tone-color);
+  box-shadow:
+    0 0 0 1px var(--nox-tone-color),
+    0 0 0 6px color-mix(in srgb, var(--nox-tone-focus-ring) 18%, transparent),
+    0 0.5rem 1rem color-mix(in srgb, var(--nox-tone-shadow) 18%, transparent);
+}
+
+.stage-flow__content {
+  display: grid;
+  min-inline-size: 0;
+  justify-items: center;
+  gap: var(--nox-space-2);
+}
+
+.stage-flow__text {
+  --text-pair-primary-color: var(--nox-tone-text);
+}
+
+.stage-flow__tags {
+  max-inline-size: 100%;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .stage-flow__stage[href]:not([aria-current='page']):hover
+    [data-widget='media-frame'] {
+    box-shadow:
+      0 0 0 1px var(--nox-border),
+      0 0 0 5px color-mix(in srgb, var(--nox-tone-color) 16%, transparent),
+      0 0.5rem 1rem color-mix(in srgb, var(--nox-tone-shadow) 18%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .stage-flow__stage [data-widget='media-frame'] {
+    transition:
+      background-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      border-color var(--nox-motion-duration-sm)
+        var(--nox-motion-easing-standard),
+      box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+  }
+}
+
+@container (width < 32rem) {
+  .stage-flow__stage {
+    min-block-size: 8.75rem;
+  }
+}

package/src/patterns/StageFlow/StageFlowStep.astro

@@ -0,0 +1,24 @@
+---
+import type { StageFlowItem } from '../../display/contracts';
+import StageFlowAlternative from './StageFlowAlternative.astro';
+import StageFlowStage from './StageFlowStage.astro';
+
+type Props = {
+  options: readonly StageFlowItem[];
+};
+
+const { options }: Props = Astro.props;
+---
+
+<li class="stage-flow__item stage-flow__item--step">
+  <ol class="stage-flow__step-options">
+    {
+      options.map((option, index) => (
+        <>
+          {index > 0 ? <StageFlowAlternative /> : null}
+          <StageFlowStage stage={option} />
+        </>
+      ))
+    }
+  </ol>
+</li>

package/src/patterns/StageFlow/StageFlowStep.css

@@ -0,0 +1,19 @@
+.stage-flow__item--step {
+  inline-size: max-content;
+}
+
+.stage-flow__step-options {
+  display: grid;
+  align-items: center;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  gap: var(--nox-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.stage-flow__item--alternative {
+  inline-size: var(--stage-flow-alternative-inline-size);
+  place-items: center;
+}

package/src/patterns/StageFlow/StageFlowSymbol.css

@@ -0,0 +1,28 @@
+.stage-flow__symbol {
+  display: block;
+  block-size: 2.9rem;
+  color: var(--nox-tone-color);
+  filter: drop-shadow(
+    0 0.18rem 0.22rem
+      color-mix(in srgb, var(--nox-tone-shadow) 18%, transparent)
+  );
+  overflow: visible;
+}
+
+.stage-flow__arrow {
+  inline-size: 1.45rem;
+}
+
+.stage-flow__alternative {
+  inline-size: 1.1rem;
+}
+
+.stage-flow__symbol-outline {
+  color: var(--nox-tone-color);
+  opacity: 0.92;
+}
+
+.stage-flow__symbol-line {
+  color: var(--nox-surface);
+  opacity: 0.98;
+}

package/src/patterns/Table/Table.astro

@@ -0,0 +1,176 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type {
+  TableColumn,
+  TablePaginationModel,
+  TableRow,
+} from '../../display/contracts';
+import type { Tone } from '../../theme/contracts';
+import SurfaceGroup from '../../composition/SurfaceGroup/SurfaceGroup.astro';
+import TableBody from './TableBody.astro';
+import TableFooter from './TableFooter.astro';
+import TableHeader from './TableHeader.astro';
+import TablePagination from './TablePagination.astro';
+import {
+  getTableColumnDensity,
+  getTableMinimumInlineSize,
+  getTableColumnTemplate,
+  type TableLayout,
+} from './tableLayout';
+
+type TableSortMessages = {
+  sortBy: string;
+  sortAscending: string;
+  sortDescending: string;
+  sortNone: string;
+};
+
+type TablePaginationMessages = {
+  error: string;
+  loading: string;
+  nextPage: string;
+};
+
+type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
+  caption: string;
+  columns: readonly TableColumn[];
+  density?: 'regular' | 'compact';
+  emptyMessage: string;
+  errorMessage?: string;
+  filterEmptyMessage?: string;
+  header?: 'visible' | 'hidden';
+  inlineOverflow?: 'auto' | 'wrap';
+  layout?: TableLayout;
+  pagination?: TablePaginationModel;
+  paginationKey?: string;
+  paginationMessages?: TablePaginationMessages;
+  rowSizing?: 'content' | 'fill';
+  rows: readonly TableRow[];
+  skeletonRows?: number;
+  sortMessages?: TableSortMessages;
+  stickyHeader?: boolean;
+  tone?: Tone;
+};
+
+const {
+  caption,
+  class: className,
+  columns,
+  'data-tone': dataTone,
+  density = 'regular',
+  emptyMessage,
+  errorMessage,
+  filterEmptyMessage,
+  header = 'visible',
+  inlineOverflow = 'auto',
+  layout = 'default',
+  pagination,
+  paginationKey,
+  paginationMessages,
+  rowSizing = 'content',
+  rows,
+  skeletonRows,
+  sortMessages,
+  stickyHeader = false,
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const minimumInlineSize = getTableMinimumInlineSize(columns, layout);
+const overflowColumnTemplate =
+  layout === 'index'
+    ? getTableColumnTemplate(columns, layout, 'overflow')
+    : undefined;
+const tableStyle = [
+  `--table-column-template: ${getTableColumnTemplate(columns, layout)}`,
+  minimumInlineSize
+    ? `--table-index-min-inline-size: ${minimumInlineSize}`
+    : undefined,
+  overflowColumnTemplate
+    ? `--table-index-overflow-column-template: ${overflowColumnTemplate}`
+    : undefined,
+]
+  .filter(Boolean)
+  .join('; ');
+const columnDensity = getTableColumnDensity(columns);
+const resolvedTone = tone ?? dataTone;
+const hasSortableColumns = columns.some((column) => column.sort);
+const hasFooter = Astro.slots.has('footer');
+
+if (header === 'visible' && hasSortableColumns && !sortMessages) {
+  throw new Error('Sortable table columns require localized sort messages');
+}
+if (pagination?.nextHref && !paginationMessages) {
+  throw new Error('Paginated tables require localized pagination messages');
+}
+---
+
+<div
+  {...attrs}
+  class:list={['table', className]}
+  data-widget="table"
+  data-composition="table"
+  data-table-column-density={columnDensity}
+  data-table-density={density}
+  data-table-inline-overflow={inlineOverflow}
+  data-table-index-minimum-rem={
+    minimumInlineSize ? Number.parseFloat(minimumInlineSize) : undefined
+  }
+  data-table-layout={layout}
+  data-table-key={paginationKey}
+  data-table-scroll-root
+  data-table-sticky-header={stickyHeader ? true : undefined}
+  data-tone={resolvedTone}
+  style={tableStyle}
+>
+  <SurfaceGroup>
+    <slot name="heading" />
+    {
+      header === 'visible' ? (
+        <TableHeader columns={columns} sortMessages={sortMessages} />
+      ) : null
+    }
+    <TableBody
+      caption={caption}
+      columns={columns}
+      emptyMessage={emptyMessage}
+      errorMessage={errorMessage}
+      filterEmptyMessage={filterEmptyMessage}
+      layout={layout}
+      rowSizing={rowSizing}
+      rows={rows}
+    />
+    {
+      pagination && paginationMessages ? (
+        <TablePagination
+          columns={columns}
+          errorLabel={paginationMessages.error}
+          loadingLabel={paginationMessages.loading}
+          nextLabel={paginationMessages.nextPage}
+          pagination={pagination}
+          skeletonRows={skeletonRows}
+        />
+      ) : null
+    }
+    {
+      hasFooter ? (
+        <TableFooter padding="none">
+          <slot name="footer" />
+        </TableFooter>
+      ) : null
+    }
+  </SurfaceGroup>
+</div>
+
+<script>
+  import { initTableProgressive } from './tableProgressiveController';
+  import { initTableScroll } from './tableScrollController';
+  import { initTableSort } from './tableSortController';
+
+  for (const root of document.querySelectorAll('[data-table-scroll-root]')) {
+    if (root instanceof HTMLElement) {
+      initTableScroll(root);
+      initTableProgressive(root);
+      initTableSort(root);
+    }
+  }
+</script>

package/src/patterns/Table/Table.css

@@ -0,0 +1,70 @@
+.table {
+  --table-section-block-size: 3rem;
+  --table-header-column-template: var(--table-column-template);
+  --table-header-content-inline-size: 100%;
+  --table-cell-padding-block: var(--nox-space-1);
+  --table-cell-padding-inline: var(--nox-space-2);
+  --table-edge-padding-inline: var(--nox-space-4);
+  --table-header-letter-spacing: var(--nox-letter-spacing-wider);
+  --table-sort-gap: var(--nox-space-1);
+  --table-sort-icon-size: 0.75rem;
+  --table-row-min-block-size: 4.5rem;
+  --table-row-narrow-min-block-size: 3.75rem;
+
+  container: nox-table / inline-size;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.table[data-table-column-density='compact'] {
+  --table-cell-padding-inline: var(--nox-space-1);
+  --table-edge-padding-inline: var(--nox-space-3);
+  --table-header-letter-spacing: 0;
+  --table-sort-gap: calc(var(--nox-space-1) / 2);
+  --table-sort-icon-size: 0.6875rem;
+}
+
+.table[data-table-density='compact'] {
+  --table-row-min-block-size: var(--table-section-block-size);
+  --table-row-narrow-min-block-size: var(--table-section-block-size);
+}
+
+.table[data-table-layout='index'] {
+  --table-index-row-block-size: var(--table-row-min-block-size);
+}
+
+.table[data-table-layout='index'][data-table-index-overflow] {
+  --table-column-template: var(--table-index-overflow-column-template);
+  --text-pair-truncate-overflow: visible;
+  --text-pair-truncate-text-overflow: clip;
+}
+
+.table[data-table-sticky-header] [data-table-header] {
+  position: sticky;
+  z-index: 40;
+  top: 0;
+}
+
+.table[data-table-sticky-header]:has([data-sticky-surface])
+  [data-table-header] {
+  top: calc(var(--nox-layout-gap) + var(--nox-section-responsive-block-size));
+}
+
+@container nox-table (width < 32rem) {
+  .table {
+    --table-cell-padding-inline: var(--nox-space-1);
+    --table-edge-padding-inline: var(--nox-space-2);
+  }
+
+  .table[data-table-sticky-header]:has([data-sticky-surface])
+    [data-table-header] {
+    top: calc(var(--nox-layout-gap) + var(--nox-section-compact-block-size));
+  }
+}
+
+@container nox-table (width < 36rem) {
+  .table[data-table-layout='index'] {
+    --table-index-row-block-size: var(--table-row-narrow-min-block-size);
+  }
+}

package/src/patterns/Table/TableBody.astro

@@ -0,0 +1,185 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { TableCell, TableColumn, TableRow } from '../../display/contracts';
+import type { Tone } from '../../theme/contracts';
+import TableSortIcon from '../../components/icons/TableSortIcon.astro';
+import TextBlock from '../../primitives/text/TextBlock/TextBlock.astro';
+import TableCellContent from './TableCell.astro';
+import {
+  getTableColumnAlignment,
+  type TableLayout,
+} from './tableLayout';
+
+type Props = HTMLAttributes<'div'> & {
+  caption: string;
+  columns: readonly TableColumn[];
+  'data-tone'?: Tone;
+  emptyMessage: string;
+  errorMessage?: string;
+  filterEmptyMessage?: string;
+  layout?: TableLayout;
+  rowSizing?: 'content' | 'fill';
+  rows: readonly TableRow[];
+};
+
+const {
+  caption,
+  class: className,
+  columns,
+  'data-tone': dataTone,
+  emptyMessage,
+  errorMessage,
+  filterEmptyMessage,
+  layout = 'default',
+  rowSizing = 'content',
+  rows,
+  ...attrs
+}: Props = Astro.props;
+
+const getCell = (row: TableRow, column: TableColumn): TableCell | undefined =>
+  row.cells[column.id];
+const hasExplicitRowHeader = columns.some((column) => column.rowHeader);
+const state = errorMessage ? 'error' : rows.length === 0 ? 'empty' : undefined;
+const stateMessage =
+  errorMessage ?? (state === 'empty' ? emptyMessage : undefined);
+---
+
+<div
+  {...attrs}
+  class:list={['table-body', className]}
+  data-widget="table-body"
+  data-surface
+  data-table-row-navigation
+  data-table-row-sizing={rowSizing}
+  data-table-scrollport="body"
+  data-tooltip-boundary
+  data-tone={dataTone}
+>
+  <table class="table-body__table">
+    <caption class="table-body__visually-hidden">{caption}</caption>
+    <thead class="table-body__visually-hidden">
+      <tr>
+        {
+          columns.map((column) => (
+            <th scope="col">
+              {column.hiddenLabel ? <span>{column.label}</span> : column.label}
+            </th>
+          ))
+        }
+      </tr>
+    </thead>
+    <tbody class="table-body__rows" data-table-column-grid data-table-rows>
+      <tr class="table-body__sizing-row" aria-hidden="true">
+        {
+          columns.map((column) => (
+            <td
+              class="table-body__sizing-cell"
+              data-table-column-role={column.role}
+            >
+              {!column.hiddenLabel ? (
+                <span class="table-body__sizing-content">
+                  <span>{column.label}</span>
+                  {column.sort ? <TableSortIcon aria-hidden="true" /> : null}
+                </span>
+              ) : null}
+            </td>
+          ))
+        }
+      </tr>
+      {
+        state && stateMessage ? (
+          <tr class="table-body__row" data-table-state={state}>
+            <td
+              class="table-body__cell"
+              colspan={Math.max(1, columns.length)}
+              data-table-state={state}
+            >
+              <TextBlock
+                text={stateMessage}
+                role={state === 'error' ? 'alert' : 'status'}
+              />
+            </td>
+          </tr>
+        ) : (
+          rows.map((row) => {
+            const rowHref = row.href;
+
+            return (
+              <tr
+                class="table-body__row"
+                hidden={row.hidden}
+                data-table-row
+                data-table-row-key={row.key}
+                data-table-row-href={rowHref}
+                data-table-filter-values={
+                  row.filters ? JSON.stringify(row.filters) : undefined
+                }
+                data-table-sort-values={
+                  row.sortValues ? JSON.stringify(row.sortValues) : undefined
+                }
+                data-interaction-accent={rowHref ? 'start' : undefined}
+                data-interaction-accent-within={rowHref ? true : undefined}
+              >
+                {columns.map((column, columnIndex) => {
+                  const cell = getCell(row, column);
+                  const isRowHeader = hasExplicitRowHeader
+                    ? column.rowHeader === true
+                    : columnIndex === 0;
+                  const CellTag = isRowHeader ? 'th' : 'td';
+
+                  return (
+                    <CellTag
+                      class="table-body__cell"
+                      scope={isRowHeader ? 'row' : undefined}
+                      data-align={getTableColumnAlignment(column)}
+                      data-table-column={column.id}
+                      data-table-column-role={column.role}
+                      data-tooltip-trigger={
+                        cell?.tooltip?.trim() ? true : undefined
+                      }
+                    >
+                      <TableCellContent
+                        cell={cell}
+                        rowHref={rowHref}
+                        truncate={layout === 'index'}
+                        wrap={column.wrap ?? false}
+                      />
+                    </CellTag>
+                  );
+                })}
+              </tr>
+            );
+          })
+        )
+      }
+      {
+        filterEmptyMessage && !state ? (
+          <tr
+            class="table-body__row"
+            data-table-state="empty"
+            data-table-filter-empty
+            hidden
+          >
+            <td
+              class="table-body__cell"
+              colspan={Math.max(1, columns.length)}
+              data-table-state="empty"
+            >
+              <TextBlock text={filterEmptyMessage} role="status" />
+            </td>
+          </tr>
+        ) : null
+      }
+    </tbody>
+  </table>
+</div>
+
+<script>
+  import { initTableRowNavigation } from './tableRowNavigationController';
+
+  for (const root of document.querySelectorAll('[data-table-row-navigation]')) {
+    if (root instanceof HTMLElement) {
+      initTableRowNavigation(root);
+    }
+  }
+</script>