@pokela/components 2.14.0 → 2.16.0

package/Dialog.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+/**
+ * Modaalinen dialogi: otsikko, teksti, sisältö, toiminnot ja sulkeminen.
+ *
+ * Sovelluskomponentti (päätökset 22 ja 31). Ei varjoa eikä tummaa
+ * verhoa: sivu peittyy paperin sävyisellä verholla, ja dialogi on
+ * paperia musteen hiusviivakehyksellä. Uutta väriä ei tarvita, ja
+ * sama ratkaisu toimii molemmissa teemoissa. Mobiilissa dialogi on
+ * alareunan arkki, ja napit ovat täysleveitä.
+ *
+ * Natiivi <dialog> ja showModal(): selain pitää fokuksen dialogissa,
+ * piilottaa muun sivun ruudunlukijalta ja sulkee Escillä. Esc ja
+ * verhon klikkaus kutsuvat `onClose`a, joten tila pysyy kutsujalla.
+ *
+ * Fokus menee avattaessa ensimmäiseen fokusoitavaan: lomakkeessa
+ * ensimmäiseen kenttään, vahvistuksessa Peruuta-nappiin, kun se on
+ * toiminnoissa ensimmäisenä. Sulkunappi on DOM:ssa viimeisenä, jotta
+ * se ei vie alkufokusta. Suljettaessa fokus palaa avanneeseen nappiin.
+ */
+export type DialogProps = {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    /** Selittävä teksti otsikon alla. Ruudunlukija lukee sen avattaessa. */
+    description?: ReactNode;
+    /** Sisältö tekstin alla, esim. lomakkeen kentät. */
+    children?: ReactNode;
+    /** Napit oikeaan alakulmaan: vähiten vahingollinen ensin. */
+    actions?: ReactNode;
+    /** Sulkunapin nimi ruudunlukijalle. */
+    closeLabel?: string;
+    className?: string;
+};
+export default function Dialog({ open, onClose, title, description, children, actions, closeLabel, className, }: DialogProps): import("react/jsx-runtime").JSX.Element;

package/Dialog.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+import Icon from './Icon';
+export default function Dialog({ open, onClose, title, description, children, actions, closeLabel = 'Sulje', className, }) {
+    const ref = useRef(null);
+    const avaaja = useRef(null);
+    const otsikkoId = useId();
+    const tekstiId = useId();
+    useEffect(() => {
+        const el = ref.current;
+        if (!el)
+            return;
+        if (open && !el.open) {
+            avaaja.current = document.activeElement;
+            el.showModal();
+        }
+        else if (!open && el.open) {
+            el.close();
+            avaaja.current?.focus();
+        }
+    }, [open]);
+    return (_jsx("dialog", { ref: ref, className: ['dialog', className].filter(Boolean).join(' '), "aria-labelledby": otsikkoId, "aria-describedby": description ? tekstiId : undefined, onCancel: (e) => {
+            /* Esc: selain sulkisi itse, mutta tila on kutsujalla. */
+            e.preventDefault();
+            onClose();
+        }, onClick: (e) => {
+            /* Klikkaus osuu itse dialogiin vain verhon kohdalla: sisältö on
+               .dialog__panelissa, joka täyttää dialogin. */
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs("div", { className: "dialog__panel", children: [_jsxs("div", { className: "dialog__header", children: [_jsx("h2", { id: otsikkoId, className: "dialog__title", children: title }), description ? (_jsx("div", { id: tekstiId, className: "dialog__description", children: description })) : null] }), children ? _jsx("div", { className: "dialog__body", children: children }) : null, actions ? _jsx("div", { className: "dialog__actions", children: actions }) : null, _jsx("button", { type: "button", className: "dialog__close", "aria-label": closeLabel, onClick: onClose, children: _jsx(Icon, { name: "close" }) })] }) }));
+}

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.14.0.
+React-komponentit: **Pokela Design System**, versio 2.16.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -34,6 +34,8 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Tabs`
 - `Tab`
 - `Alert`
+- `Table`
+- `Dialog`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -74,6 +76,8 @@ import Link from 'next/link';
 - `styles/select.css`
 - `styles/tabs.css`
 - `styles/alert.css`
+- `styles/table.css`
+- `styles/dialog.css`
 
 Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
 luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi

package/Table.d.ts

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+/**
+ * Taulukko: sarakkeet, rivit, lajittelu ja tyhjä tila.
+ *
+ * Sovelluskomponentti (päätökset 22 ja 30). Rivit erotetaan
+ * hiusviivalla, otsikkorivin alla on musteviiva. Ei pystyviivoja,
+ * raitoja eikä pintaa: sama kieli kuin ListRow'ssa. Otsikot ovat
+ * metatekstiä, jotta huomio menee dataan.
+ *
+ * Saavutettavuus:
+ *   · oikea <table>, jolla on <caption> (oletuksena piilotettu) ja
+ *     <th scope="col">
+ *   · lajiteltava otsikko on <th>:n sisällä oleva nappi, ja <th>
+ *     kertoo järjestyksen aria-sortilla (APG: Sortable Table)
+ *   · kun taulukko ei mahdu, vierityslaatikosta tulee nimetty alue,
+ *     johon pääsee sarkaimella ja jota voi vierittää nuolilla
+ *
+ * Lajittelu tehdään täällä: rivit annetaan sellaisinaan, ja taulukko
+ * järjestää ne valitun sarakkeen mukaan. Tila voi olla ohjattu (`sort`
+ * + `onSortChange`) tai oma (`defaultSort`).
+ */
+export type TableSortDirection = 'ascending' | 'descending';
+export type TableSort = {
+    key: string;
+    direction: TableSortDirection;
+};
+export type TableColumn<R> = {
+    /** Sarakkeen avain. Ilman `cell`iä solu näyttää `row[key]`. */
+    key: string;
+    header: string;
+    /** Luku: oikealle ja tasalevyisin numeroin. */
+    numeric?: boolean;
+    /** Toissijainen tieto --ink-mutedilla. */
+    muted?: boolean;
+    sortable?: boolean;
+    /** Otsikko vain ruudunlukijalle, esim. toimintosarake. */
+    hideHeader?: boolean;
+    cell?: (row: R) => ReactNode;
+    /** Arvo, jonka mukaan lajitellaan. Oletus `row[key]`. */
+    sortValue?: (row: R) => string | number;
+};
+export type TableProps<R> = {
+    /** Taulukon nimi. Ruudunlukija lukee sen aina. */
+    caption: string;
+    /** Näytä nimi myös näkyvästi taulukon yläpuolella. */
+    showCaption?: boolean;
+    columns: TableColumn<R>[];
+    rows: R[];
+    rowKey: (row: R) => string;
+    sort?: TableSort | null;
+    defaultSort?: TableSort | null;
+    onSortChange?: (sort: TableSort) => void;
+    /** Teksti, kun rivejä ei ole. */
+    empty?: ReactNode;
+    className?: string;
+};
+export default function Table<R>({ caption, showCaption, columns, rows, rowKey, sort, defaultSort, onSortChange, empty, className, }: TableProps<R>): import("react/jsx-runtime").JSX.Element;

package/Table.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import Icon from './Icon';
+const vertailija = new Intl.Collator('fi', { numeric: true, sensitivity: 'base' });
+function arvo(rivi, sarake) {
+    if (sarake.sortValue)
+        return sarake.sortValue(rivi);
+    const v = rivi[sarake.key];
+    return typeof v === 'number' ? v : String(v ?? '');
+}
+export default function Table({ caption, showCaption = false, columns, rows, rowKey, sort, defaultSort = null, onSortChange, empty = 'Ei rivejä.', className, }) {
+    const [omaSort, setOmaSort] = useState(defaultSort);
+    const nykyinen = sort !== undefined ? sort : omaSort;
+    const jarjestetty = useMemo(() => {
+        const sarake = nykyinen && columns.find((c) => c.key === nykyinen.key);
+        if (!nykyinen || !sarake)
+            return rows;
+        const suunta = nykyinen.direction === 'ascending' ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const x = arvo(a, sarake);
+            const y = arvo(b, sarake);
+            const ero = typeof x === 'number' && typeof y === 'number' ? x - y : vertailija.compare(String(x), String(y));
+            return ero * suunta;
+        });
+    }, [rows, columns, nykyinen]);
+    const lajittele = (key) => {
+        const seuraava = {
+            key,
+            direction: nykyinen?.key === key && nykyinen.direction === 'ascending' ? 'descending' : 'ascending',
+        };
+        if (sort === undefined)
+            setOmaSort(seuraava);
+        onSortChange?.(seuraava);
+    };
+    /* Vierityslaatikko on alue ja sarkainpysäkki vain, kun se oikeasti
+       vierittyy: muuten se olisi turha pysäkki jokaisella näppäimistön
+       käyttäjällä. `data-scrolled` näyttää kiinnitetyn sarakkeen viivan
+       vasta, kun sen alle on vieritetty jotain. */
+    const laatikko = useRef(null);
+    const [vierittyy, setVierittyy] = useState(false);
+    useEffect(() => {
+        const el = laatikko.current;
+        if (!el)
+            return;
+        const mittaa = () => setVierittyy(el.scrollWidth > el.clientWidth + 1);
+        const vieritys = () => el.toggleAttribute('data-scrolled', el.scrollLeft > 0);
+        mittaa();
+        const ro = new ResizeObserver(mittaa);
+        ro.observe(el);
+        el.addEventListener('scroll', vieritys, { passive: true });
+        return () => {
+            ro.disconnect();
+            el.removeEventListener('scroll', vieritys);
+        };
+    }, []);
+    const captionId = useId();
+    return (_jsx("div", { ref: laatikko, className: ['table', className].filter(Boolean).join(' '), role: vierittyy ? 'region' : undefined, "aria-labelledby": vierittyy ? captionId : undefined, tabIndex: vierittyy ? 0 : undefined, children: _jsxs("table", { className: "table__table", children: [_jsx("caption", { id: captionId, className: showCaption ? 'table__caption' : 'visually-hidden', children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((c) => {
+                            const suunta = nykyinen?.key === c.key ? nykyinen.direction : undefined;
+                            return (_jsx("th", { scope: "col", className: c.numeric ? 'table__num' : undefined, "aria-sort": c.sortable ? (suunta ?? 'none') : undefined, children: c.hideHeader ? (_jsx("span", { className: "visually-hidden", children: c.header })) : c.sortable ? (_jsxs("button", { type: "button", className: "table__sort", "data-direction": suunta, onClick: () => lajittele(c.key), children: [c.header, _jsx(Icon, { name: "chevron-down", size: "s", className: "table__sort-icon" })] })) : (c.header) }, c.key));
+                        }) }) }), _jsx("tbody", { children: jarjestetty.length === 0 ? (_jsx("tr", { className: "table__empty", children: _jsx("td", { colSpan: columns.length, children: empty }) })) : (jarjestetty.map((rivi) => (_jsx("tr", { children: columns.map((c) => (_jsx("td", { className: [c.numeric && 'table__num', c.muted && 'table__muted'].filter(Boolean).join(' ') || undefined, children: c.cell ? c.cell(rivi) : String(rivi[c.key] ?? '') }, c.key))) }, rowKey(rivi))))) })] }) }));
+}

package/guidelines/components.md

@@ -19,6 +19,8 @@ Use these instead of building an equivalent.
 - `Tabs`
 - `Tab`
 - `Alert`
+- `Table`
+- `Dialog`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -160,6 +162,50 @@ for something that went wrong, never for emphasis. There is no warning tone.
 </Alert>
 ```
 
+`Table` is for data people compare across rows: members, invoices, logs.
+Never use it for layout or for a list of links (use `ListRow`). Pass
+`columns` and `rows`; mark numbers `numeric` (right-aligned, tabular) and
+secondary text `muted`. `sortable` columns sort when the header is clicked;
+set `defaultSort` for the initial order. Always give a `caption`; it is read
+by screen readers even when hidden. Status in a cell is an icon and text in
+`table__status` (`table__status--error` for failures), never colour alone; a
+row action is a `table__action` link whose name includes the row.
+
+```jsx
+<Table
+  caption="Team members"
+  columns={[
+    { key: 'name', header: 'Name', sortable: true },
+    { key: 'changes', header: 'Changes', numeric: true, sortable: true },
+  ]}
+  rows={members}
+  rowKey={(m) => m.id}
+  defaultSort={{ key: 'name', direction: 'ascending' }}
+  empty="No members yet. Invite the first one."
+/>
+```
+
+`Dialog` is a modal for one decision or a short form: confirm a deletion,
+invite a member. Never use it for content people read, and never stack two.
+Control it with `open` and `onClose`; Esc and a click on the veil call
+`onClose`. Give a short `title` (a question for confirmations), the
+consequence as `description`, form fields as children, and buttons in
+`actions` with the least destructive first (`btn--ghost` Cancel, then
+`btn--primary`). Use `btn--s` buttons. On mobile it becomes a bottom sheet.
+
+```jsx
+<Dialog
+  open={open}
+  onClose={() => setOpen(false)}
+  title="Remove Sara from the team?"
+  description="Access ends immediately. You can invite them again later."
+  actions={<>
+    <button className="btn btn--ghost btn--s" onClick={() => setOpen(false)}>Cancel</button>
+    <button className="btn btn--primary btn--s" onClick={remove}>Remove member</button>
+  </>}
+/>
+```
+
 ## Patterns
 
 `PageHeader` and `Section` are patterns: they add no look of their own, only

package/guidelines/tokens.md

@@ -9,7 +9,7 @@ inversion — `--invert-surface` with `--invert-ink` — or the quiet
 coloured button. Colour on the page comes only from photographs.
 
 The one exception is `--danger`, a state colour for errors only. Do not use it
-for emphasis, buttons or decoration. `TextField`, `ChoiceGroup`, `Select` and `Alert` already apply it, always
+for emphasis, buttons or decoration. `TextField`, `ChoiceGroup`, `Select`, `Alert` and `Table` already apply it, always
 with the `alert` icon and a message, so the meaning never depends on colour.
 
 **No shadows.** There are no shadow tokens. Separation is a 1px line

package/index.d.ts

@@ -30,6 +30,10 @@ export { default as Tab } from './Tab.js';
 export type { TabProps } from './Tab.js';
 export { default as Alert } from './Alert.js';
 export type { AlertTone, AlertProps } from './Alert.js';
+export { default as Table } from './Table.js';
+export type { TableSortDirection, TableSort, TableColumn, TableProps } from './Table.js';
+export { default as Dialog } from './Dialog.js';
+export type { DialogProps } from './Dialog.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
 export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';

package/index.js

@@ -16,6 +16,8 @@ export { default as Select } from './Select.js';
 export { default as Tabs } from './Tabs.js';
 export { default as Tab } from './Tab.js';
 export { default as Alert } from './Alert.js';
+export { default as Table } from './Table.js';
+export { default as Dialog } from './Dialog.js';
 export { Grid, Col } from './Grid.js';
 export { default as Reveal } from './Reveal.js';
 export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pokela/components",
-  "version": "2.14.0",
+  "version": "2.16.0",
   "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
   "license": "MIT",
   "author": "Veli-Matti Pokela",
@@ -27,7 +27,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@pokela/tokens": "^2.14.0"
+    "@pokela/tokens": "^2.16.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/dialog.css

@@ -0,0 +1,125 @@
+/* Dialogi (Dialog). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Paperiverho ja hiusviivakehys (päätös 31). Systeemissä ei ole
+   varjoja eikä verhoväriä: sivu peittyy paperin sävyisellä verholla,
+   ja dialogi erottuu siitä musteviivalla. Verho on läpikuultavaa
+   paperia, joten se toimii samoin molemmissa teemoissa.
+
+   Mobiili ensin: alareunan arkki, jonka yläreunassa on viiva. 600 px
+   alkaen keskitetty dialogi, jonka ympärillä on kehys. */
+
+.dialog {
+  inset: auto 0 0;
+  width: 100%;
+  max-width: 100%;
+  max-height: calc(100dvh - var(--space-32));
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--paper);
+  color: var(--ink);
+  border: 0;
+  border-top: var(--hairline) solid var(--ink);
+}
+.dialog::backdrop {
+  background: color-mix(in srgb, var(--paper) 88%, transparent);
+}
+
+/* Sivu ei vierity dialogin alla. */
+html:has(.dialog[open]) { overflow: hidden; }
+
+.dialog__panel {
+  position: relative;
+  display: grid;
+  gap: var(--space-24);
+  padding: var(--space-24) var(--space-16) var(--space-32);
+}
+
+.dialog__header {
+  display: grid;
+  gap: var(--space-8);
+  /* Tila sulkunapille, ettei pitkä otsikko mene sen alle. */
+  padding-right: var(--space-40);
+}
+.dialog__title {
+  margin: 0;
+  font-family: var(--font-ui);
+  font-size: var(--text-body-l);
+  line-height: var(--lh-body-l);
+  font-weight: var(--weight-500);
+}
+.dialog__description {
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  color: var(--ink-muted);
+}
+.dialog__description > * { margin: 0; }
+
+.dialog__body {
+  display: grid;
+  gap: var(--space-16);
+}
+
+/* Mobiilissa napit täysleveinä allekkain, ensisijainen (viimeinen)
+   ylimpänä peukalon ulottuvilla. */
+.dialog__actions {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--space-12);
+}
+.dialog__actions > .btn { width: 100%; }
+
+/* Sulkunappi: näkyvä 32 px, osuma-alue --tap-min, kuten Alertissa. */
+.dialog__close {
+  position: absolute;
+  top: var(--space-16);
+  right: var(--space-8);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-32);
+  height: var(--space-32);
+  padding: 0;
+  background: none;
+  border: 0;
+  color: var(--ink-muted);
+  cursor: pointer;
+}
+.dialog__close::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--space-32) - var(--tap-min)) / 2);
+}
+.dialog__close:hover { color: var(--ink); }
+
+@media (min-width: 600px) {
+  .dialog {
+    inset: 0;
+    width: calc(100% - var(--space-32));
+    max-width: 480px;
+    margin: auto;
+    border: var(--hairline) solid var(--ink);
+  }
+  .dialog__panel { padding: var(--space-32); }
+  .dialog__close { top: var(--space-24); right: var(--space-24); }
+  .dialog__actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  .dialog__actions > .btn { width: auto; }
+}
+
+/* Liike: dialogi nousee ja verho häivyttää. Ei liikettä, jos käyttäjä
+   on sen kieltänyt. */
+@media (prefers-reduced-motion: no-preference) {
+  .dialog[open] { animation: dialog-esiin var(--dur-base) var(--ease-out); }
+  .dialog[open]::backdrop { animation: dialog-verho var(--dur-base) var(--ease-out); }
+  .dialog__close { transition: color var(--dur-fast) var(--ease-standard); }
+}
+@keyframes dialog-esiin { from { opacity: 0; transform: translateY(var(--space-8)); } }
+@keyframes dialog-verho { from { opacity: 0; } }
+
+@media (forced-colors: active) {
+  .dialog::backdrop { background: Canvas; opacity: 0.88; }
+}

package/styles/table.css

@@ -0,0 +1,184 @@
+/* Taulukko (Table). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Rivit hiusviivalla, otsikkorivin alla musteviiva (päätös 30). Ei
+   pystyviivoja, raitoja eikä pintaa. Otsikot ovat metatekstiä, data
+   Body/S:ää. Rivi on vähintään --tap-min, jotta solun linkkiin ja
+   nappiin osuu sormella.
+
+   Laatikolla on 8 px sivusisennys samasta syystä kuin välilehtirivillä:
+   se vierittyy, ja vierittyvä laatikko leikkaisi fokusrenkaan reunoilta.
+   Sisennys kumotaan negatiivisella marginaalilla, joten taulukko alkaa
+   palstan reunasta. Laatikon oma fokusrengas on sivuston oletus, ulkona:
+   sisäpuolinen jäisi kiinnitetyn sarakkeen alle. */
+
+.table {
+  margin-inline: calc(var(--space-8) * -1);
+  padding-inline: var(--space-8);
+  overflow-x: auto;
+}
+
+.table__table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  color: var(--ink);
+}
+
+.table__caption {
+  padding-bottom: var(--space-12);
+  font-weight: var(--weight-500);
+  text-align: left;
+}
+
+.table th,
+.table td {
+  height: var(--tap-min);
+  padding: 0 var(--space-16) 0 0;
+  text-align: left;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.table th:last-child,
+.table td:last-child { padding-right: 0; }
+
+.table th {
+  font-family: var(--font-ui);
+  font-size: var(--text-meta);
+  line-height: var(--lh-meta);
+  font-weight: var(--weight-600);
+  letter-spacing: var(--tr-meta);
+  text-transform: uppercase;
+  color: var(--ink-muted);
+  border-bottom: var(--hairline) solid var(--ink);
+}
+.table th[aria-sort='ascending'],
+.table th[aria-sort='descending'] { color: var(--ink); }
+
+.table td { border-bottom: var(--hairline) solid var(--line); }
+
+.table .table__num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.table__muted { color: var(--ink-muted); }
+
+/* Lajittelunappi täyttää otsikkosolun korkeuden, ja sen 8 px sivu-
+   sisennys kumotaan, jotta teksti pysyy sarakkeen linjassa ja
+   fokusrengas mahtuu napin sisään. Nuoli on näkymätön, kunnes sarake
+   on lajiteltu, tai näkyy haaleana hoverissa ja fokuksessa: se kertoo,
+   että saraketta voi lajitella. Nouseva järjestys osoittaa ylös. */
+.table__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  /* Hiusviiva on rivin alareunassa, joten nappi on sen verran matalampi. */
+  min-height: calc(var(--tap-min) - var(--hairline));
+  margin: 0 calc(var(--space-8) * -1);
+  padding: 0 var(--space-8);
+  background: none;
+  border: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+.table__sort-icon { opacity: 0; }
+.table__sort:hover,
+.table__sort:focus-visible { color: var(--ink); }
+.table__sort:hover .table__sort-icon,
+.table__sort:focus-visible .table__sort-icon { opacity: 1; color: var(--ink-faint); }
+.table__sort[data-direction] .table__sort-icon { opacity: 1; color: var(--ink); }
+.table__sort[data-direction='ascending'] .table__sort-icon { transform: rotate(180deg); }
+.table__sort:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: calc(var(--focus-width) * -1);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .table__sort { transition: color var(--dur-fast) var(--ease-standard); }
+  .table__sort-icon { transition: opacity var(--dur-fast) var(--ease-standard); }
+}
+
+/* Rivi korostuu vain osoittimen alla, ei kosketuksella: napautus ei
+   saa jättää riviä korostetuksi. */
+@media (hover: hover) {
+  .table tbody tr:not(.table__empty):hover td { background: var(--paper-alt); }
+}
+
+/* Ensimmäinen sarake pysyy paikallaan, kun taulukkoa vieritetään.
+   Varjo täyttää laatikon 8 px sisennyksen, jotta alle vierittyvä teksti
+   ei näy sen läpi. Viiva tulee vasta, kun jotain on vierittynyt alle. */
+.table th:first-child,
+.table td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--paper);
+  box-shadow: calc(var(--space-8) * -1) 0 0 var(--paper);
+}
+.table[data-scrolled] th:first-child,
+.table[data-scrolled] td:first-child {
+  box-shadow:
+    calc(var(--space-8) * -1) 0 0 var(--paper),
+    inset calc(var(--hairline) * -1) 0 0 var(--line);
+}
+@media (hover: hover) {
+  .table tbody tr:not(.table__empty):hover td:first-child {
+    box-shadow: calc(var(--space-8) * -1) 0 0 var(--paper);
+  }
+  .table[data-scrolled] tbody tr:not(.table__empty):hover td:first-child {
+    box-shadow:
+      calc(var(--space-8) * -1) 0 0 var(--paper),
+      inset calc(var(--hairline) * -1) 0 0 var(--line);
+  }
+}
+
+.table__empty td {
+  position: static;
+  height: auto;
+  padding: var(--space-32) 0;
+  color: var(--ink-muted);
+  white-space: normal;
+}
+
+/* Toiminto solussa, esim. Muokkaa. Alleviivaus tekstin omalla viivalla
+   eikä .btn--textin alareunalla, jotta teksti pysyy rivin muun tekstin
+   linjassa. Osuma-alue on rivin korkuinen. */
+.table__action {
+  position: relative;
+  color: var(--ink);
+  text-decoration: underline;
+  text-decoration-thickness: var(--hairline);
+  text-underline-offset: var(--space-4);
+}
+.table__action:hover {
+  text-decoration: underline;
+  text-decoration-thickness: var(--hairline-strong);
+}
+.table__action::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: var(--tap-min);
+  transform: translateY(-50%);
+}
+
+/* Tila solussa: ikoni ja teksti, ei koskaan pelkkä väri. Virhe on
+   --danger kuten kentässä ja ilmoituksessa. */
+/* Lohko eikä inline-flex: ikonilla ei ole perusviivaa, joten
+   inline-flex nostaisi tekstin rivin muun tekstin yläpuolelle. */
+.table__status {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8);
+}
+.table__status--error { color: var(--danger); }
+
+@media (forced-colors: active) {
+  .table th:first-child,
+  .table td:first-child { box-shadow: none; }
+}

package/styles.css

@@ -13,3 +13,5 @@
 @import './styles/select.css';
 @import './styles/tabs.css';
 @import './styles/alert.css';
+@import './styles/table.css';
+@import './styles/dialog.css';