@astronox/core 0.1.0

package/src/patterns/Table/TableHeader.css

@@ -0,0 +1,209 @@
+.table-header {
+  --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);
+
+  container-type: inline-size;
+  block-size: var(--table-section-block-size, 3rem);
+  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-header__row {
+  display: grid;
+  block-size: 100%;
+  inline-size: var(--table-header-content-inline-size);
+  grid-template-columns: var(--table-header-column-template);
+}
+
+.table-header__cell {
+  display: grid;
+  block-size: 100%;
+  min-width: 0;
+  min-height: 0;
+  align-items: center;
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+  color: var(--nox-text);
+  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;
+  overflow-wrap: normal;
+  text-align: start;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.table-header__cell[data-table-sortable] {
+  padding: 0;
+}
+
+.table-header__sort {
+  display: inline-flex;
+  inline-size: 100%;
+  block-size: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: start;
+  gap: var(--table-sort-gap);
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+
+.table-header__sort-icon {
+  flex: none;
+}
+
+.table-header__label {
+  display: inline-flex;
+  min-width: 0;
+  max-inline-size: 100%;
+  align-items: center;
+}
+
+.table-header__label-text {
+  min-width: 0;
+}
+
+.table-header__overflow-marker {
+  display: none;
+  flex: none;
+}
+
+.table[data-table-layout='index'] .table-header__label {
+  flex: 0 1 auto;
+}
+
+.table[data-table-layout='index'] .table-header__label-text {
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+}
+
+.table-header__label[data-table-header-overflowed]
+  .table-header__overflow-marker {
+  display: inline;
+}
+
+.table-header__cell[data-align='center'] .table-header__sort {
+  justify-content: center;
+}
+
+.table-header__cell[data-align='end'] .table-header__sort {
+  justify-content: end;
+}
+
+.table-header__sort-icon {
+  inline-size: var(--table-sort-icon-size);
+  block-size: var(--table-sort-icon-size);
+  color: var(--nox-text-muted);
+}
+
+.table-header__sort[data-table-sort-direction='ascending']
+  [data-table-sort-arrow='descending'],
+.table-header__sort[data-table-sort-direction='descending']
+  [data-table-sort-arrow='ascending'] {
+  display: none;
+}
+
+.table-header__sort[data-table-sort-direction]:not(
+    [data-table-sort-direction='none']
+  ) {
+  background: var(--nox-tone-active-background);
+  color: var(--nox-tone-color);
+}
+
+.table-header__sort[data-table-sort-direction]:not(
+    [data-table-sort-direction='none']
+  )
+  .table-header__sort-icon {
+  color: currentColor;
+}
+
+.table-header__sort:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: calc(var(--nox-focus-ring-width) * -1);
+}
+
+.table-header__cell[data-align='center'] {
+  justify-items: center;
+  text-align: center;
+}
+
+.table[data-table-layout='index']
+  .table-header__cell[data-table-column-role='primary']
+  ~ .table-header__cell {
+  justify-items: center;
+  text-align: center;
+}
+
+.table[data-table-layout='index']
+  .table-header__cell[data-table-column-role='primary']
+  ~ .table-header__cell
+  .table-header__sort {
+  justify-content: center;
+}
+
+.table-header__cell[data-align='end'] {
+  justify-items: end;
+  text-align: end;
+}
+
+.table-header__cell:first-child {
+  padding-inline-start: var(--table-edge-padding-inline);
+}
+
+.table-header__cell:last-child {
+  padding-inline-end: var(--table-edge-padding-inline);
+}
+
+.table-header__cell[data-table-sortable]:first-child {
+  padding-inline-start: 0;
+}
+
+.table-header__cell[data-table-sortable]:last-child {
+  padding-inline-end: 0;
+}
+
+.table-header__cell[data-table-sortable]:first-child .table-header__sort {
+  padding-inline-start: var(--table-edge-padding-inline);
+}
+
+.table-header__cell[data-table-sortable]:last-child .table-header__sort {
+  padding-inline-end: var(--table-edge-padding-inline);
+}
+
+.table-header__visually-hidden {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@container (width < 36rem) {
+  .table-header__cell {
+    font-size: var(--nox-font-size-xs);
+  }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .table-header__sort:hover {
+    background: var(--nox-tone-hover-background);
+    color: var(--nox-tone-color);
+  }
+}

package/src/patterns/Table/TablePagination.astro

@@ -0,0 +1,70 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type {
+  TableColumn,
+  TablePaginationModel,
+} from '../../display/contracts';
+import TableFooter from './TableFooter.astro';
+import TableSkeleton from './TableSkeleton.astro';
+
+type Props = HTMLAttributes<'div'> & {
+  columns: readonly TableColumn[];
+  errorLabel: string;
+  loadingLabel: string;
+  nextLabel: string;
+  pagination: TablePaginationModel;
+  skeletonRows?: number;
+};
+
+const {
+  class: className,
+  columns,
+  errorLabel,
+  loadingLabel,
+  nextLabel,
+  pagination,
+  skeletonRows = 3,
+  ...attrs
+}: Props = Astro.props;
+---
+
+{
+  pagination.nextHref ? (
+    <TableFooter
+      {...attrs}
+      class:list={['table-pagination', className]}
+      padding="none"
+      data-table-pagination
+      data-table-page={pagination.page}
+      data-table-total-pages={pagination.totalPages}
+      data-table-loading-label={loadingLabel}
+      data-table-error-label={errorLabel}
+      data-table-progressive-state="idle"
+    >
+      <template data-table-skeleton-template>
+        <TableSkeleton columns={columns} rows={skeletonRows} />
+      </template>
+      <div class="table-pagination__content">
+        <a
+          class="table-pagination__link"
+          href={pagination.nextHref}
+          data-table-pagination-link
+        >
+          {nextLabel}
+        </a>
+        <span
+          class="table-pagination__status"
+          data-table-pagination-status
+          role="status"
+          aria-live="polite"
+          hidden
+        />
+        <span
+          class="table-pagination__sentinel"
+          data-table-pagination-sentinel
+          aria-hidden="true"
+        />
+      </div>
+    </TableFooter>
+  ) : null
+}

package/src/patterns/Table/TablePagination.css

@@ -0,0 +1,133 @@
+.table-pagination__content {
+  position: relative;
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  place-items: stretch;
+}
+
+.table-pagination__link {
+  display: grid;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 100%;
+  place-items: center;
+  padding-inline: var(--nox-space-4);
+  color: var(--nox-tone-color);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.table-pagination__status {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.table-pagination__link:focus-visible {
+  outline: var(--nox-focus-ring-width) solid var(--nox-tone-focus-ring);
+  outline-offset: calc(var(--nox-focus-ring-width) * -1);
+}
+
+.table-pagination__sentinel {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: 1px;
+  pointer-events: none;
+}
+
+.table-pagination[data-table-progressive-enhanced='true'] {
+  position: relative;
+  display: block;
+  overflow: visible;
+  block-size: 0;
+  min-block-size: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.table-pagination[data-table-progressive-enhanced='true']
+  .table-pagination__content {
+  block-size: 0;
+}
+
+.table-pagination[data-table-progressive-enhanced='true']
+  .table-pagination__link {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.table-pagination[data-table-progressive-enhanced='true']
+  .table-pagination__link:focus-visible {
+  z-index: 1;
+  inset-inline: 0;
+  inset-block-end: 0;
+  display: grid;
+  overflow: visible;
+  width: auto;
+  height: var(--table-section-block-size, 3rem);
+  padding-inline: var(--nox-space-4);
+  border: var(--nox-border-width) solid var(--nox-border);
+  border-radius: var(--nox-radius-md);
+  clip: auto;
+  background: var(--nox-surface-muted);
+  white-space: normal;
+}
+
+.table-pagination[data-table-progressive-state='loading']
+  .table-pagination__link {
+  display: none;
+}
+
+.table-pagination[data-table-progressive-state='loading']
+  .table-pagination__status {
+  position: static;
+  display: grid;
+  overflow: visible;
+  width: 100%;
+  height: 100%;
+  place-items: center;
+  padding-inline: var(--nox-space-4);
+  clip: auto;
+  color: var(--nox-text-muted);
+  font-size: var(--nox-font-size-sm);
+  font-weight: var(--nox-font-weight-strong);
+  letter-spacing: var(--nox-letter-spacing-wide);
+  line-height: 1;
+  text-align: center;
+  text-transform: uppercase;
+  white-space: normal;
+}
+
+.table-pagination[data-table-progressive-enhanced='true']
+  .table-pagination__status {
+  position: absolute;
+  display: inline;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .table-pagination__link:hover {
+    background: var(--nox-tone-hover-background);
+  }
+}

package/src/patterns/Table/TableSkeleton.astro

@@ -0,0 +1,36 @@
+---
+import type { TableColumn } from '../../display/contracts';
+import { getTableColumnAlignment } from './tableLayout';
+
+type Props = {
+  columns: readonly TableColumn[];
+  rows?: number;
+};
+
+const { columns, rows = 3 }: Props = Astro.props;
+const rowCount = Math.max(1, Math.floor(rows));
+---
+
+<table class="table-skeleton" aria-hidden="true">
+  <tbody>
+    {
+      Array.from({ length: rowCount }, () => (
+        <tr
+          class="table-skeleton__row"
+          data-table-skeleton-row
+          aria-hidden="true"
+        >
+          {columns.map((column) => (
+            <td
+              class="table-skeleton__cell"
+              data-align={getTableColumnAlignment(column)}
+              data-table-column-role={column.role}
+            >
+              <span class="table-skeleton__placeholder" />
+            </td>
+          ))}
+        </tr>
+      ))
+    }
+  </tbody>
+</table>

package/src/patterns/Table/TableSkeleton.css

@@ -0,0 +1,81 @@
+.table-skeleton {
+  display: none;
+}
+
+.table-skeleton__row {
+  display: grid;
+  min-width: 0;
+  min-height: var(--table-row-min-block-size);
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  border-block-start: var(--nox-border-width) solid var(--nox-border);
+}
+
+.table-skeleton__cell {
+  display: grid;
+  min-width: 0;
+  align-items: center;
+  padding: var(--table-cell-padding-block) var(--table-cell-padding-inline);
+}
+
+.table-skeleton__cell[data-align='center'] {
+  justify-items: center;
+}
+
+.table-skeleton__cell[data-align='end'] {
+  justify-items: end;
+}
+
+.table[data-table-layout='index']
+  .table-skeleton__cell[data-table-column-role='primary']
+  ~ .table-skeleton__cell {
+  justify-items: center;
+}
+
+.table-skeleton__cell:first-child {
+  padding-inline-start: var(--table-edge-padding-inline);
+}
+
+.table-skeleton__cell:last-child {
+  padding-inline-end: var(--table-edge-padding-inline);
+}
+
+.table-skeleton__placeholder {
+  inline-size: min(100%, 8rem);
+  block-size: 0.875rem;
+  border-radius: var(--nox-radius-sm);
+  background: linear-gradient(
+    90deg,
+    var(--nox-surface-muted) 0%,
+    var(--nox-surface-strong) 50%,
+    var(--nox-surface-muted) 100%
+  );
+  background-size: 200% 100%;
+}
+
+.table[data-table-layout='index'] .table-skeleton__row {
+  block-size: var(--table-index-row-block-size);
+  min-height: var(--table-index-row-block-size);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .table-skeleton__placeholder {
+    animation: table-skeleton-pulse 1.4s ease-in-out infinite;
+  }
+}
+
+@keyframes table-skeleton-pulse {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@container (width < 36rem) {
+  .table-skeleton__row {
+    min-height: var(--table-row-narrow-min-block-size);
+  }
+}

package/src/patterns/Table/tableCellController.ts

@@ -0,0 +1,11 @@
+import type { DisplayTextValue } from '../../display/contracts';
+
+export function setTableTextCellValue(
+  cell: HTMLElement,
+  value: DisplayTextValue,
+): void {
+  const valueNode = cell.querySelector<HTMLElement>(
+    '[data-part="text-pair-primary"]',
+  );
+  if (valueNode) valueNode.textContent = String(value);
+}