@astronox/core 0.1.0

package/src/patterns/Table/TableBody.css

@@ -0,0 +1,262 @@
+.table-body {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: var(--nox-surface);
+  --table-body-row-border-color: var(--surface-border-color);
+  --table-body-row-border-width: var(--nox-border-width);
+
+  container-type: inline-size;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  border-radius: var(--surface-radius);
+  background: var(--surface-background);
+}
+
+.table-body__table {
+  display: grid;
+  inline-size: max-content;
+  min-inline-size: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.table-body__rows {
+  display: grid;
+  inline-size: auto;
+  min-inline-size: 100%;
+  grid-template-columns: var(--table-column-template);
+}
+
+.table[data-table-layout='index'] .table-body__table {
+  inline-size: 100%;
+  min-inline-size: var(--table-index-min-inline-size);
+}
+
+.table[data-table-layout='index'] .table-body__rows {
+  inline-size: 100%;
+  min-inline-size: 100%;
+}
+
+.table[data-table-layout='index'][data-table-index-overflow]
+  .table-body__table {
+  inline-size: max-content;
+  min-inline-size: 100%;
+}
+
+.table[data-table-layout='index'][data-table-index-overflow]
+  .table-body__cell {
+  overflow: visible;
+}
+
+.table[data-table-inline-overflow='wrap'] .table-body {
+  overflow-x: hidden;
+}
+
+.table[data-table-inline-overflow='wrap'] .table-body__table,
+.table[data-table-inline-overflow='wrap'] .table-body__rows {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.table-body__sizing-row {
+  display: grid;
+  visibility: hidden;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  block-size: 0;
+  min-block-size: 0;
+  pointer-events: none;
+}
+
+.table-body__sizing-cell {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  padding-inline: var(--table-cell-padding-inline);
+  border: 0;
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--table-header-letter-spacing);
+  line-height: 1.2;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.table-body__sizing-cell:first-child {
+  padding-inline-start: var(--table-edge-padding-inline);
+}
+
+.table-body__sizing-cell:last-child {
+  padding-inline-end: var(--table-edge-padding-inline);
+}
+
+.table-body__sizing-content {
+  display: inline-flex;
+  inline-size: max-content;
+  align-items: center;
+  gap: var(--table-sort-gap);
+}
+
+.table-body__sizing-content > svg {
+  inline-size: var(--table-sort-icon-size);
+  block-size: var(--table-sort-icon-size);
+}
+
+.table-body__row[data-table-state] {
+  grid-template-columns: subgrid;
+}
+
+.table-body[data-table-row-sizing='fill'] {
+  display: grid;
+}
+
+.table-body[data-table-row-sizing='fill'] .table-body__table,
+.table-body[data-table-row-sizing='fill'] .table-body__rows {
+  min-block-size: 100%;
+}
+
+.table-body[data-table-row-sizing='fill'] .table-body__table {
+  display: grid;
+}
+
+.table-body[data-table-row-sizing='fill'] .table-body__rows {
+  align-content: stretch;
+  grid-template-rows: 0;
+  grid-auto-rows: minmax(min-content, 1fr);
+}
+
+.table-body__row {
+  --table-primary-link-color: var(--nox-text);
+  --table-row-intrinsic-block-size: var(--table-row-min-block-size);
+
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  inline-size: auto;
+  border-block-end: 0;
+  contain-intrinsic-block-size: auto var(--table-row-intrinsic-block-size);
+  content-visibility: visible;
+}
+
+.table-body__row:has(~ .table-body__row:not([hidden])) {
+  border-block-end: var(--table-body-row-border-width) solid
+    var(--table-body-row-border-color);
+}
+
+.table-body__row[data-table-state] {
+  grid-template-columns: subgrid;
+}
+
+.table-body__row[hidden] {
+  display: none;
+}
+
+.table[data-table-layout='index']
+  .table-body__row:not([data-table-state]) {
+  block-size: var(--table-index-row-block-size);
+  min-block-size: var(--table-index-row-block-size);
+  overflow: hidden;
+}
+
+.table-body__row[data-table-row-href] {
+  cursor: pointer;
+}
+
+.table-body__row[data-table-row-href]:focus-within {
+  --table-primary-link-color: var(--nox-link-hover);
+}
+
+.table-body__cell {
+  display: grid;
+  min-width: 0;
+  min-height: var(--table-row-min-block-size);
+  align-items: center;
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+  border: 0;
+  line-height: 1.35;
+  text-align: start;
+  vertical-align: middle;
+}
+
+.table-body__cell[data-align='center'] {
+  justify-items: center;
+  text-align: center;
+}
+
+.table-body__cell[data-align='end'] {
+  justify-items: end;
+  text-align: end;
+}
+
+.table-body__cell:first-child {
+  padding-inline-start: var(--table-edge-padding-inline);
+}
+
+.table-body__cell:last-child {
+  padding-inline-end: var(--table-edge-padding-inline);
+}
+
+.table[data-table-layout='index']
+  .table-body__row:not([data-table-state])
+  .table-body__cell {
+  block-size: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.table[data-table-layout='index']
+  .table-body__cell[data-table-column-role='primary']
+  ~ .table-body__cell {
+  justify-items: center;
+  text-align: center;
+}
+
+.table[data-table-layout='index']
+  .table-body__cell[data-table-column-role='primary']
+  ~ .table-body__cell
+  .table-cell {
+  justify-items: center;
+  text-align: center;
+}
+
+.table[data-table-column-density='compact']
+  .table-body__cell[data-table-column-role='value'] {
+  font-size: var(--nox-font-size-sm);
+}
+
+.table-body__cell[data-table-state] {
+  min-height: 5rem;
+  grid-column: 1 / -1;
+  justify-items: center;
+  color: var(--nox-text-muted);
+  text-align: center;
+}
+
+.table-body__visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .table-body__row[data-table-row-href]:hover {
+    --table-primary-link-color: var(--nox-link-hover);
+  }
+}
+
+@container (width < 36rem) {
+  .table-body__row {
+    --table-row-intrinsic-block-size: var(--table-row-narrow-min-block-size);
+  }
+
+  .table-body__cell {
+    min-height: var(--table-row-narrow-min-block-size);
+  }
+}

package/src/patterns/Table/TableCell.astro

@@ -0,0 +1,59 @@
+---
+import type { TableCell } from '../../display/contracts';
+import Tooltip from '../../components/feedback/Tooltip/Tooltip.astro';
+import TableCellValue from './TableCellValue.astro';
+
+type Props = {
+  cell?: TableCell;
+  rowHref?: string;
+  truncate?: boolean;
+  wrap?: boolean;
+};
+
+const { cell, rowHref, truncate = false, wrap = false }: Props = Astro.props;
+const tooltip = cell?.tooltip?.trim();
+const layout =
+  cell?.kind === 'text' || cell?.kind === 'link' ? cell.layout : undefined;
+
+const rootAttributes = cell
+  ? {
+      class: 'table-cell',
+      'data-table-cell-layout': layout,
+      'data-table-cell-kind': cell.kind,
+      'data-wrap': wrap ? true : undefined,
+    }
+  : undefined;
+---
+
+{
+  cell ? (
+    tooltip ? (
+      <Tooltip
+        activation="hover"
+        alignTo="boundary"
+        content={tooltip}
+        triggerScope="ancestor"
+      >
+        <div {...rootAttributes}>
+          <TableCellValue
+            cell={cell}
+            rowHref={rowHref}
+            truncate={truncate}
+            wrap={wrap}
+          />
+        </div>
+      </Tooltip>
+    ) : (
+      <div {...rootAttributes}>
+        <TableCellValue
+          cell={cell}
+          rowHref={rowHref}
+          truncate={truncate}
+          wrap={wrap}
+        />
+      </div>
+    )
+  ) : (
+    <span class="table-cell__empty">—</span>
+  )
+}

package/src/patterns/Table/TableCell.css

@@ -0,0 +1,99 @@
+.table-cell {
+  display: grid;
+  min-width: 0;
+  min-inline-size: 0;
+  gap: var(--nox-space-1);
+  white-space: nowrap;
+}
+
+.table-cell:not([data-wrap]):not([data-table-cell-layout='split']) {
+  inline-size: max-content;
+  min-inline-size: max-content;
+}
+
+.table-cell[data-table-cell-layout='split'] {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.table-cell[data-wrap] {
+  inline-size: 100%;
+  min-inline-size: 0;
+  white-space: normal;
+}
+
+.table[data-table-layout='index'] .table-cell {
+  inline-size: 100%;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  overflow: hidden;
+}
+
+.table[data-table-layout='index'][data-table-index-overflow] .table-cell {
+  inline-size: max-content;
+  max-inline-size: none;
+  overflow: visible;
+}
+
+.table-cell[data-table-cell-kind='tags']:not([data-wrap])
+  > [data-composition='inline'] {
+  inline-size: max-content;
+  min-inline-size: max-content;
+}
+
+.table-cell[data-table-cell-kind='tags']:not([data-wrap])
+  > [data-composition='inline']
+  > [data-widget='tag'] {
+  flex: none;
+  max-inline-size: none;
+}
+
+.table-cell__link {
+  --text-pair-primary-color: currentColor;
+
+  display: block;
+  min-width: 0;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  border-radius: var(--nox-radius-sm);
+  color: var(--table-primary-link-color, var(--nox-text));
+  text-decoration: none;
+  transition: color var(--nox-motion-duration-sm)
+    var(--nox-motion-easing-standard);
+}
+
+.table-cell__empty {
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-medium);
+  line-height: 1.35;
+}
+
+.table-cell__media {
+  --media-object-inline-size: 100%;
+  --media-object-block-size: auto;
+  --media-object-radius: var(--nox-radius-sm);
+
+  display: grid;
+  inline-size: 4rem;
+  block-size: 4rem;
+  max-inline-size: 100%;
+}
+
+.table-cell__media[data-media-presentation-size='compact'] {
+  inline-size: var(--nox-compact-media-responsive-size);
+  block-size: var(--nox-compact-media-responsive-size);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .table-cell__link:hover {
+    color: var(--nox-link-hover);
+  }
+}
+
+@container (width < 36rem) {
+  .table-cell__media:not([data-media-presentation-size='compact']) {
+    inline-size: 3.25rem;
+    block-size: 3.25rem;
+  }
+}

package/src/patterns/Table/TableCellValue.astro

@@ -0,0 +1,86 @@
+---
+import type { DisplayTextValue, TableCell } from '../../display/contracts';
+import BadgeList from '../../components/data-display/BadgeList/BadgeList.astro';
+import IconList from '../../components/data-display/IconList/IconList.astro';
+import TextPair from '../../components/data-display/TextPair/TextPair.astro';
+import Media from '../../primitives/media/Media/Media.astro';
+import Inline from '../../composition/Inline/Inline.astro';
+import Tag from '../../components/data-display/Tag/Tag.astro';
+
+type Props = {
+  cell: TableCell;
+  rowHref?: string;
+  truncate?: boolean;
+  wrap: boolean;
+};
+
+const { cell, rowHref, truncate = false, wrap }: Props = Astro.props;
+
+const formatValue = (value: DisplayTextValue): string => String(value);
+---
+
+{
+  cell.kind === 'text' ? (
+    <TextPair
+      primary={formatValue(cell.value)}
+      primaryColor={cell.primaryColor}
+      primarySize={cell.primarySize}
+      primaryWeight={cell.primaryWeight ?? 'regular'}
+      secondary={cell.description}
+      secondaryWeight={cell.secondaryWeight}
+      layout={cell.layout}
+      truncate={truncate}
+    />
+  ) : null
+}
+
+{
+  cell.kind === 'link' ? (
+    <a
+      class="table-cell__link"
+      href={cell.href}
+      data-table-row-primary-link={cell.href === rowHref ? true : undefined}
+    >
+      <TextPair
+        primary={cell.label}
+        primaryColor={cell.primaryColor}
+        primarySize={cell.primarySize}
+        primaryWeight={cell.primaryWeight}
+        secondary={cell.description}
+        secondaryWeight={cell.secondaryWeight}
+        layout={cell.layout}
+        truncate={truncate}
+      />
+    </a>
+  ) : null
+}
+
+{
+  cell.kind === 'media' ? (
+    <Media
+      class="table-cell__media"
+      data-media-presentation-size={cell.size ?? 'default'}
+      media={cell.media}
+      fit="contain"
+      size="fill"
+    />
+  ) : null
+}
+
+{cell.kind === 'badges' ? <BadgeList badges={cell.badges} /> : null}
+
+{
+  cell.kind === 'icons' ? (
+    <IconList items={cell.items} label={cell.label} size={cell.size} />
+  ) : null
+}
+
+{
+  cell.kind === 'tags' ? (
+    <Inline align="center" gap="sm" wrap={wrap}>
+      {cell.tags.map((tag) => (
+        <Tag {...tag} size="sm" />
+      ))}
+    </Inline>
+  ) : null
+}

package/src/patterns/Table/TableFooter.astro

@@ -0,0 +1,32 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+
+type TableFooterPadding = 'none' | 'sm' | 'md' | 'lg';
+
+type Props = HTMLAttributes<'div'> & {
+  padding?: TableFooterPadding;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  padding = 'md',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+---
+
+<div
+  {...attrs}
+  class:list={['table-footer', className]}
+  data-widget="table-footer"
+  data-padding={padding}
+  data-table-footer
+  data-tone={resolvedTone}
+  data-surface
+>
+  <slot />
+</div>

package/src/patterns/Table/TableFooter.css

@@ -0,0 +1,31 @@
+.table-footer {
+  --surface-border-width: var(--nox-border-width);
+  --surface-border-color: var(--nox-border);
+  --surface-radius: var(--nox-radius-md);
+  --surface-background: var(--nox-surface-muted);
+
+  display: flex;
+  block-size: var(--table-section-block-size, 3rem);
+  min-width: 0;
+  align-items: stretch;
+  border: var(--surface-border-width) solid var(--surface-border-color);
+  border-radius: var(--surface-radius);
+  overflow: clip;
+  background: var(--surface-background);
+}
+
+.table-footer[data-padding='none'] {
+  padding: 0;
+}
+
+.table-footer[data-padding='sm'] {
+  padding: var(--nox-space-2);
+}
+
+.table-footer[data-padding='md'] {
+  padding: var(--nox-space-3);
+}
+
+.table-footer[data-padding='lg'] {
+  padding: var(--nox-space-4);
+}

package/src/patterns/Table/TableHeader.astro

@@ -0,0 +1,118 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { TableColumn } from '../../display/contracts';
+import type { Tone } from '../../theme/contracts';
+import TableSortIcon from '../../components/icons/TableSortIcon.astro';
+import { getTableHeaderAlignment } from './tableLayout';
+
+type Props = HTMLAttributes<'div'> & {
+  'data-tone'?: Tone;
+  columns: readonly TableColumn[];
+  sortMessages?: {
+    sortBy: string;
+    sortAscending: string;
+    sortDescending: string;
+    sortNone: string;
+  };
+};
+
+const {
+  class: className,
+  columns,
+  'data-tone': dataTone,
+  sortMessages,
+  ...attrs
+}: Props = Astro.props;
+const hasSortableColumns = columns.some((column) => column.sort);
+---
+
+<div
+  {...attrs}
+  class:list={['table-header', className]}
+  data-widget="table-header"
+  data-table-header
+  data-table-header-overflow
+  data-surface
+  data-table-scrollport="header"
+  data-scrollbar="hidden"
+  data-tone={dataTone}
+  aria-hidden={hasSortableColumns ? undefined : 'true'}
+>
+  <div class="table-header__row">
+    {
+      columns.map((column) => (
+        <div
+          class="table-header__cell"
+          data-align={getTableHeaderAlignment(column)}
+          data-table-column-role={column.role}
+          data-table-sortable={column.sort ? true : undefined}
+        >
+          {column.sort ? (
+            <button
+              class="table-header__sort"
+              type="button"
+              data-table-sort-column={column.id}
+              data-table-sort-direction="none"
+              data-table-sort-label={column.label}
+              data-table-sort-type={column.sort.type}
+              data-table-sort-tie-breaker={column.sort.tieBreaker}
+              aria-label={sortMessages?.sortBy.replace('{label}', column.label)}
+              aria-pressed="false"
+              data-table-sort-ascending-label={sortMessages?.sortAscending}
+              data-table-sort-descending-label={sortMessages?.sortDescending}
+              data-table-sort-none-label={sortMessages?.sortNone}
+            >
+              <span
+                class="table-header__label"
+                data-table-header-overflow-label
+                data-table-header-overflow-text={column.label}
+                aria-hidden="true"
+              >
+                <span
+                  class="table-header__label-text"
+                  data-table-header-overflow-text-node
+                >
+                  {column.label}
+                </span>
+                <span class="table-header__overflow-marker">.</span>
+              </span>
+              <TableSortIcon
+                class="table-header__sort-icon"
+                aria-hidden="true"
+              />
+            </button>
+          ) : column.hiddenLabel ? (
+            <span class="table-header__visually-hidden">{column.label}</span>
+          ) : (
+            <span
+              class="table-header__label"
+              data-table-header-overflow-label
+              data-table-header-overflow-text={column.label}
+              aria-hidden={hasSortableColumns ? 'true' : undefined}
+            >
+              <span
+                class="table-header__label-text"
+                data-table-header-overflow-text-node
+              >
+                {column.label}
+              </span>
+              <span class="table-header__overflow-marker">.</span>
+            </span>
+          )}
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<script>
+  import { initTableHeaderOverflow } from './tableHeaderOverflowController';
+
+  for (const root of document.querySelectorAll(
+    '[data-table-header-overflow]',
+  )) {
+    if (root instanceof HTMLElement) {
+      initTableHeaderOverflow(root);
+    }
+  }
+</script>