@pienter/ui 0.2.0

package/components/layout/table/table.css

@@ -0,0 +1,201 @@
+@layer components {
+    .pui-table-wrap {
+        overflow: auto;
+
+        /* the scroll port is the reference for the loading overlay's width, so its
+           spinner can stay centred in what you can actually see */
+        container-type: inline-size;
+        background: var(--bg-clr-surface);
+        border: var(--stroke-sm) solid var(--border-clr-base);
+        border-radius: var(--radius-sm); /* matches the button radius */
+    }
+
+    /* The table owns the column tracks once via --pui-table-cols; head, body and row
+       are subgrids spanning 1/-1, so one track value moves the header and every row. */
+    .pui-table {
+        display: grid;
+        grid-template-columns: var(--pui-table-cols, auto);
+        width: 100%;
+        min-width: 34rem; /* narrow-screen horizontal-scroll fallback */
+        font-size: var(--step--1);
+    }
+
+    .pui-table__head,
+    .pui-table__body,
+    .pui-table__row {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+    }
+
+    /* Containing block for the loading overlay, which is a child of the body so it
+       covers the rows and only the rows. */
+    .pui-table__body {
+        position: relative;
+    }
+
+    /* ===== rows ===== */
+
+    .pui-table__row {
+        /* Top borders give the row separators; the header row zeroes its own, so the
+           first body row's top border is the header divider and the last row stays clean. */
+        border-block-start: var(--stroke-sm) solid var(--border-clr-base);
+        transition: background-color var(--duration-base) var(--ease-base);
+
+        &:hover {
+            background: var(--bg-clr-surface-2);
+        }
+
+        &[data-head] {
+            border-block-start: 0;
+        }
+
+        &[data-selected='true'] {
+            background: var(--bg-clr-brand-soft);
+        }
+
+        &[data-clickable='true'] {
+            cursor: pointer;
+        }
+    }
+
+    /* ===== cells ===== */
+
+    .pui-table__cell {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        min-width: 0;
+        padding: var(--space-xs) var(--space-s);
+        text-align: left;
+
+        &[data-head] {
+            background: var(--bg-clr-surface-2);
+            color: var(--text-clr-base);
+            font-weight: var(--fw-control);
+        }
+
+        &[data-select] {
+            flex: 0 0 auto;
+        }
+
+        &[data-align='end'] {
+            justify-content: flex-end;
+            text-align: right;
+            font-variant-numeric: tabular-nums; /* numeric cells read cleaner */
+        }
+
+        &[data-align='center'] {
+            justify-content: center;
+            text-align: center;
+        }
+    }
+
+    /* ===== sort affordance ===== */
+
+    /* One rule for both tiers — a <button> in Vue, an <a> in Astro — so the resets below
+       deliberately cover both elements. */
+    .pui-table__sort {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-3xs);
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-weight: inherit;
+        text-decoration: none; /* the <a> tier */
+        cursor: pointer;
+
+        &:focus-visible {
+            outline: var(--outline-width) solid var(--border-clr-strong);
+            outline-offset: var(--outline-offset);
+        }
+    }
+
+    /* The glyph carries the direction (Table swaps chevron-up-down / -up / -down);
+       colour only separates the unsorted affordance from the sorted column. */
+    .pui-table__sort-arrow {
+        display: inline-flex;
+
+        /* the dim rung reads as an affordance; sorted inherits the header's own colour */
+        &[data-sort='none'] {
+            --pui-icon-clr: var(--icon-clr-dim);
+        }
+    }
+
+    /* ===== selection ===== */
+
+    /* bare select-row checkbox — intentionally NOT the field Checkbox, which
+       always renders a <label> and is too heavy for a selection gutter */
+    .pui-table__check {
+        width: var(--icon-size-md);
+        height: var(--icon-size-md);
+        accent-color: var(--bg-clr-brand);
+        cursor: pointer;
+
+        &:focus-visible {
+            outline: var(--outline-width) solid var(--outline-clr-base);
+            outline-offset: var(--outline-offset);
+        }
+    }
+
+    /* ===== loading ===== */
+
+    /* Restates background-color: this outranks .pui-table__row and transition is a
+       shorthand, so opacity alone would drop the hover fade. */
+    .pui-table__body > .pui-table__row {
+        transition:
+            background-color var(--duration-base) var(--ease-base),
+            opacity var(--duration-base) var(--ease-base);
+    }
+
+    /* Rows only — the overlay is a body child and must not dim with them. */
+    .pui-table[aria-busy='true'] .pui-table__body > .pui-table__row {
+        opacity: 0.65;
+    }
+
+    /* The overlay is absolute and adds no height, so a row-less body would collapse to
+       nothing; busy-and-childless only, so a populated table never shifts — see AUDIT.md. */
+    .pui-table[aria-busy='true'] .pui-table__body:not(:has(> .pui-table__row)) {
+        min-height: var(--pui-table-loading-min-h, 9rem);
+    }
+
+    /* A <tr> covering the body, so the spinner centres on the rows and the header
+       is untouched — no measuring, and it stays correct if the header resizes. */
+    .pui-table__loading {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+
+        /* the tint gives the blur a surface to sit in; without it the frosting
+           reads as a smudge rather than a pane */
+        background: color-mix(in srgb, var(--bg-clr-surface) 45%, transparent);
+        backdrop-filter: blur(3px);
+        -webkit-backdrop-filter: blur(3px);
+
+        /* the text ramp, not the brand — over the blur a brand hue reads as decoration */
+        --pui-icon-clr: var(--text-clr-base);
+
+        /* Centring lives on the cell: the body spans the full scrollable width, so sticky
+           + 100cqi is what keeps the spinner inside the scroll port — see AUDIT.md. */
+        & > td {
+            position: sticky;
+            left: 0;
+            display: grid;
+            place-items: center;
+            width: 100cqi;
+            height: 100%;
+        }
+    }
+
+    /* ===== empty state ===== */
+
+    .pui-table__empty {
+        grid-column: 1 / -1;
+        padding: var(--space-l);
+        color: var(--text-clr-muted);
+        text-align: center;
+    }
+}

package/components/layout/table/types.ts

@@ -0,0 +1,35 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+
+/** Cell + header alignment. `'end'` is the numeric case. */
+export type Align = 'start' | 'end' | 'center';
+
+/** A table column. Layout only — content is authored in slots (ADR 0004). */
+export interface Column {
+    /** Unique id. Also the slot name (`#<key>` on `TableRow`, `#cell:<key>` on `DataTable`) and the `DataTable` field accessor `row[key]`. */
+    key: string;
+    /** Header text. */
+    label: string;
+    /** A CSS grid track fed into the table's `grid-template-columns`: `'auto'`, `'1fr'`, `'minmax(180px, 1fr)'`. Defaults to `'auto'`. */
+    width?: string;
+    /** Cell + header alignment. */
+    align?: Align;
+    /** Renders a focusable sort affordance in the header; emits `sort` with this `key`. Never mutates data. */
+    sortable?: boolean;
+}
+
+/* Defined in `utils/sort` (sorting is a list concept), re-exported so a consumer
+   can take `Column` and `SortState` from one import. */
+export type {
+    Sort,
+    SortDirection,
+    SortState,
+} from '../../../utils/sort/index.js';
+
+/** Provided by `Table` so `TableRow` reads column layout instead of taking `columns` again. */
+export interface TableColumnsContext {
+    columns: ComputedRef<Column[]>;
+    selectable: ComputedRef<boolean>;
+    clickable: ComputedRef<boolean>;
+}
+export const TABLE_COLUMNS: InjectionKey<TableColumnsContext> =
+    Symbol('pui-table-columns');

package/components/layout/table/useTable.ts

@@ -0,0 +1,7 @@
+import type { Column } from './types.js';
+
+/** Build the `grid-template-columns` value from column widths, prepending a track for the selection gutter. */
+export function gridColumns(columns: Column[], selectable: boolean): string {
+    const tracks = columns.map((c) => c.width ?? 'auto');
+    return (selectable ? 'auto ' : '') + tracks.join(' ');
+}

package/components/navigation/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,36 @@
+---
+import './breadcrumb.css';
+
+interface Props {
+  items: { label: string; href?: string }[];
+}
+
+const { items, ...rest } = Astro.props;
+---
+
+<nav aria-label="Breadcrumb" {...rest}>
+  <ol class="pui-breadcrumb">
+    {
+      items.map((item, index) => (
+        <>
+          {index > 0 && (
+            <li class="pui-breadcrumb__sep" aria-hidden="true">
+              /
+            </li>
+          )}
+          {index < items.length - 1 ? (
+            <li class="pui-breadcrumb__item">
+              <a href={item.href} class="pui-breadcrumb__link">
+                {item.label}
+              </a>
+            </li>
+          ) : (
+            <li class="pui-breadcrumb__item" aria-current="page">
+              {item.label}
+            </li>
+          )}
+        </>
+      ))
+    }
+  </ol>
+</nav>

package/components/navigation/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,36 @@
+<template>
+    <nav aria-label="Breadcrumb">
+        <ol class="pui-breadcrumb">
+            <template v-for="(item, index) in items" :key="index">
+                <li
+                    v-if="index > 0"
+                    class="pui-breadcrumb__sep"
+                    aria-hidden="true"
+                >
+                    /
+                </li>
+                <li
+                    v-if="index < items.length - 1"
+                    class="pui-breadcrumb__item"
+                >
+                    <a :href="item.href" class="pui-breadcrumb__link">{{
+                        item.label
+                    }}</a>
+                </li>
+                <li v-else class="pui-breadcrumb__item" aria-current="page">
+                    {{ item.label }}
+                </li>
+            </template>
+        </ol>
+    </nav>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    items: { label: string; href?: string }[];
+}>();
+</script>
+
+<style>
+@import './breadcrumb.css';
+</style>

package/components/navigation/breadcrumb/breadcrumb.css

@@ -0,0 +1,37 @@
+@layer components {
+    .pui-breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        font-size: var(--step--1);
+        color: var(--text-clr-muted);
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        flex-wrap: wrap;
+    }
+
+    .pui-breadcrumb__item {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+    }
+
+    .pui-breadcrumb__link {
+        color: var(--text-clr-muted);
+        text-decoration: none;
+    }
+
+    .pui-breadcrumb__link:hover {
+        color: var(--text-clr-base);
+    }
+
+    .pui-breadcrumb__sep {
+        color: var(--border-clr-base);
+    }
+
+    .pui-breadcrumb__item[aria-current='page'] {
+        color: var(--text-clr-base);
+        font-weight: var(--fw-semibold);
+    }
+}

package/components/navigation/navbar/Navbar.astro

@@ -0,0 +1,62 @@
+---
+import './navbar.css';
+
+interface Props {
+  brandMark?: string;
+  brandName?: string;
+  brandHref?: string;
+  links?: { label: string; href: string; current?: boolean }[];
+  ariaLabel?: string;
+}
+
+const {
+  brandMark,
+  brandName,
+  brandHref = '/',
+  links,
+  ariaLabel = 'Main navigation',
+  ...rest
+} = Astro.props;
+
+const hasBrandSlot = Astro.slots.has('brand');
+---
+
+<header
+  class="pui-navbar container"
+  data-container-size="xl"
+  aria-label={ariaLabel}
+  {...rest}
+>
+  <nav class="pui-navbar__content container-content">
+    {
+      hasBrandSlot ? (
+        <slot name="brand" />
+      ) : (
+        <a href={brandHref} class="pui-navbar__brand">
+          {brandMark && <span class="pui-navbar__mark">{brandMark}</span>}
+          {brandName && <span class="pui-navbar__wordmark">{brandName}</span>}
+        </a>
+      )
+    }
+    {
+      links?.length && (
+        <ul class="pui-navbar__list">
+          {links.map((link) => (
+            <li>
+              <a
+                class="pui-navbar__link"
+                href={link.href}
+                aria-current={link.current ? 'page' : undefined}
+              >
+                {link.label}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )
+    }
+    <div class="pui-navbar__actions">
+      <slot name="actions" />
+    </div>
+  </nav>
+</header>

package/components/navigation/navbar/Navbar.vue

@@ -0,0 +1,50 @@
+<template>
+    <nav class="pui-navbar" :aria-label="ariaLabel">
+        <slot name="brand">
+            <a :href="brandHref" class="pui-navbar__brand">
+                <span v-if="brandMark" class="pui-navbar__mark">{{
+                    brandMark
+                }}</span>
+                <span v-if="brandName" class="pui-navbar__wordmark">{{
+                    brandName
+                }}</span>
+            </a>
+        </slot>
+        <ul v-if="links?.length" class="pui-navbar__list">
+            <li v-for="link in links" :key="link.href">
+                <a
+                    class="pui-navbar__link"
+                    :href="link.href"
+                    :aria-current="link.current ? 'page' : undefined"
+                    >{{ link.label }}</a
+                >
+            </li>
+        </ul>
+        <div class="pui-navbar__actions">
+            <slot name="actions" />
+        </div>
+    </nav>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+    defineProps<{
+        brandMark?: string;
+        brandName?: string;
+        brandHref?: string;
+        links?: { label: string; href: string; current?: boolean }[];
+        ariaLabel?: string;
+    }>(),
+    {
+        brandMark: undefined,
+        brandName: undefined,
+        brandHref: '/',
+        links: undefined,
+        ariaLabel: 'Main navigation',
+    },
+);
+</script>
+
+<style>
+@import './navbar.css';
+</style>

package/components/navigation/navbar/navbar.css

@@ -0,0 +1,77 @@
+@layer components {
+    .pui-navbar {
+        background: hsl(from var(--bg-clr-base) h s l / 0.92);
+        backdrop-filter: blur(8px);
+        border-block-end: var(--stroke-sm) solid var(--border-clr-base);
+    }
+
+    .pui-navbar__content {
+        display: flex;
+    }
+
+    .pui-navbar__brand {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        color: var(--text-clr-base);
+        text-decoration: none;
+    }
+
+    .pui-navbar__mark {
+        width: 1.75rem;
+        height: 1.75rem;
+        background: var(--bg-clr-brand);
+        color: var(--bg-clr-brand-ink);
+        border: var(--stroke-md) solid var(--border-clr-strong);
+        border-radius: var(--radius-xs);
+        font-family: var(--ff-display);
+        font-weight: var(--fw-display);
+        display: grid;
+        place-items: center;
+        font-size: var(--step--1);
+        line-height: 1;
+    }
+
+    .pui-navbar__wordmark {
+        font-family: var(--ff-display);
+        font-weight: var(--fw-display);
+        font-size: var(--step-1);
+        letter-spacing: var(--ls-display);
+    }
+
+    .pui-navbar__list {
+        display: flex;
+        gap: var(--space-s);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        margin-inline-start: var(--space-xs);
+    }
+
+    .pui-navbar__link {
+        font-size: var(--step--1);
+        font-weight: var(--fw-semibold);
+        color: var(--text-clr-base);
+        text-decoration: none;
+        padding-block: var(--space-3xs);
+    }
+
+    .pui-navbar__link[aria-current='page'] {
+        border-block-end: 2px solid var(--border-clr-brand);
+    }
+
+    .pui-navbar__link:hover {
+        color: var(--text-clr-brand);
+    }
+
+    .pui-navbar__link:focus-visible {
+        outline: 3px solid var(--outline-clr-base);
+        outline-offset: 2px;
+    }
+
+    .pui-navbar__actions {
+        margin-inline-start: auto;
+        display: flex;
+        gap: var(--space-2xs);
+    }
+}

package/components/navigation/pagination/Pagination.vue

@@ -0,0 +1,107 @@
+<template>
+    <nav aria-label="Pagination">
+        <ul class="pui-pagination">
+            <li>
+                <button
+                    class="pui-pagination__item"
+                    :disabled="currentPage <= 1"
+                    aria-label="Previous page"
+                    @click="emit('update:currentPage', currentPage - 1)"
+                >
+                    <Icon name="chevron-left" size="sm" />
+                </button>
+            </li>
+
+            <template v-for="page in visiblePages" :key="page">
+                <li v-if="page === '...'">
+                    <span class="pui-pagination__ellipsis">&hellip;</span>
+                </li>
+                <li v-else>
+                    <button
+                        class="pui-pagination__item"
+                        :aria-current="
+                            page === currentPage ? 'page' : undefined
+                        "
+                        @click="emit('update:currentPage', page as number)"
+                    >
+                        {{ page }}
+                    </button>
+                </li>
+            </template>
+
+            <li>
+                <button
+                    class="pui-pagination__item"
+                    :disabled="currentPage >= totalPages"
+                    aria-label="Next page"
+                    @click="emit('update:currentPage', currentPage + 1)"
+                >
+                    <Icon name="chevron-right" size="sm" />
+                </button>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import Icon from '../../display/icon/Icon.vue';
+
+const props = withDefaults(
+    defineProps<{
+        currentPage: number;
+        totalPages: number;
+        maxVisible?: number;
+    }>(),
+    {
+        maxVisible: 5,
+    },
+);
+
+const emit = defineEmits<{
+    'update:currentPage': [page: number];
+}>();
+
+const visiblePages = computed(() => {
+    const total = props.totalPages;
+    const current = props.currentPage;
+    const max = props.maxVisible;
+
+    if (total <= max) {
+        return Array.from({ length: total }, (_, i) => i + 1);
+    }
+
+    const pages: (number | '...')[] = [];
+
+    // Always show first page
+    pages.push(1);
+
+    // Calculate the range around the current page
+    const rangeStart = Math.max(2, current - 1);
+    const rangeEnd = Math.min(total - 1, current + 1);
+
+    // Add leading ellipsis if there is a gap after page 1
+    if (rangeStart > 2) {
+        pages.push('...');
+    }
+
+    // Add pages in the range
+    for (let i = rangeStart; i <= rangeEnd; i++) {
+        pages.push(i);
+    }
+
+    // Add trailing ellipsis if there is a gap before last page
+    if (rangeEnd < total - 1) {
+        pages.push('...');
+    }
+
+    // Always show last page
+    pages.push(total);
+
+    return pages;
+});
+</script>
+
+<style>
+@import './pagination.css';
+</style>