@pokela/components 2.13.0 → 2.15.0

package/Alert.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+/**
+ * Inline-ilmoitus: sävy, otsikko, teksti, toiminto ja sulkeminen.
+ *
+ * Sovelluskomponentti (päätökset 22 ja 29). Vasen viiva
+ * --hairline-strong, ei pintaa eikä kehystä: sama paksuus kuin kentän
+ * virheviivassa, ja kevein tapa erottaa ilmoitus sisällöstä.
+ *
+ * Sävyjä on kolme, ja vain virhe on värillinen (--danger). Info ja
+ * onnistui erottuvat ikonilla ja otsikolla. Varoitusta ei ole: ilman
+ * toista tilaväriä se erottuisi virheestä vain sävyllä.
+ *
+ * Ruudunlukija: virhe on role="alert", muut role="status". Rooli
+ * ilmoittaa sisällön, kun ilmoitus lisätään sivulle; jo latautuessa
+ * näkyvä ilmoitus luetaan kuten muukin teksti.
+ */
+export type AlertTone = 'info' | 'success' | 'error';
+export type AlertProps = {
+    tone?: AlertTone;
+    title: string;
+    /** Selittävä teksti otsikon alla. */
+    children?: ReactNode;
+    /** Toiminto tekstin alla, esim. `<a className="btn btn--text">`. */
+    action?: ReactNode;
+    /** Kun annettu, ilmoituksessa on sulkunappi. */
+    onDismiss?: () => void;
+    /** Sulkunapin nimi ruudunlukijalle. */
+    dismissLabel?: string;
+    className?: string;
+};
+export default function Alert({ tone, title, children, action, onDismiss, dismissLabel, className, }: AlertProps): import("react/jsx-runtime").JSX.Element;

package/Alert.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from './Icon';
+const IKONI = { info: 'info', success: 'check', error: 'alert' };
+export default function Alert({ tone = 'info', title, children, action, onDismiss, dismissLabel = 'Sulje', className, }) {
+    return (_jsxs("div", { className: ['alert', `alert--${tone}`, className].filter(Boolean).join(' '), role: tone === 'error' ? 'alert' : 'status', children: [_jsx(Icon, { name: IKONI[tone], className: "alert__icon" }), _jsxs("div", { className: "alert__content", children: [_jsx("p", { className: "alert__title", children: title }), children ? _jsx("div", { className: "alert__body", children: children }) : null, action ? _jsx("div", { className: "alert__actions", children: action }) : null] }), onDismiss ? (_jsx("button", { type: "button", className: "alert__close", "aria-label": dismissLabel, onClick: onDismiss, children: _jsx(Icon, { name: "close" }) })) : null] }));
+}

package/Icon.d.ts

@@ -18,14 +18,15 @@
  * Koot ovat tokeneita: --icon-s (12) tekstin seassa metan kanssa,
  * --icon-m (16) napin sisällä, --icon-l (24) omana painikkeenaan.
  *
- * `alert` kulkee aina virhetekstin rinnalla, ei yksin: merkitys on
- * tekstissä, ikoni ja --danger vain nopeuttavat sen löytämistä.
+ * `alert` ja `info` kulkevat aina tekstin rinnalla, eivät yksin:
+ * merkitys on tekstissä, ikoni (ja virheessä --danger) vain nopeuttaa
+ * sen löytämistä.
  *
  * Nuoli on kahta lajia eikä yhtä: `arrow-right` vie sivustolla eteen-
  * päin, `arrow-up-right` ulos. Ero on lukijalle sama kuin
  * target="_blank" ruudunlukijalle.
  */
-export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu' | 'alert' | 'chevron-down' | 'check';
+export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu' | 'alert' | 'info' | 'chevron-down' | 'check';
 export type IconSize = 's' | 'm' | 'l';
 export type IconProps = {
     name: IconName;

package/Icon.js

@@ -12,6 +12,9 @@ const PATHS = {
        vinot sivut eivät osu puolikkaan pikselin ruudukolle. Piste on
        lyhyt viiva, koska täyttöä ei ole. */
     alert: ['M2.5 2.5 H14.5 V14.5 H2.5 Z', 'M8.5 5 V10', 'M8.5 11.5 V12.5'],
+    /* Tieto. Alertin neliö ylösalaisin: piste ylhäällä, varsi alla.
+       Erottuu virheestä muodolla eikä vain värillä. */
+    info: ['M2.5 2.5 H14.5 V14.5 H2.5 Z', 'M8.5 4.5 V5.5', 'M8.5 7 V12'],
     /* Selectin nuoli ja valitun vaihtoehdon merkki. 45 asteen viivat
        puolikkaan pikselin ruudukolla, kuten nuolissa. */
     'chevron-down': ['M4.5 6.5 L8.5 10.5 L12.5 6.5'],

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.13.0.
+React-komponentit: **Pokela Design System**, versio 2.15.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -33,6 +33,8 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Select`
 - `Tabs`
 - `Tab`
+- `Alert`
+- `Table`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -72,6 +74,8 @@ import Link from 'next/link';
 - `styles/choice.css`
 - `styles/select.css`
 - `styles/tabs.css`
+- `styles/alert.css`
+- `styles/table.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

@@ -18,6 +18,8 @@ Use these instead of building an equivalent.
 - `Select`
 - `Tabs`
 - `Tab`
+- `Alert`
+- `Table`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -146,6 +148,42 @@ for a step-by-step flow.
 </Tabs>
 ```
 
+`Alert` is an inline message inside the page, next to what it is about: a
+form error summary, a saved confirmation, a billing problem. `tone` is `info`
+(default), `success` or `error`; only `error` is coloured. Give a short
+`title` and the explanation as children; pass `action` for one next step (a
+`btn btn--text` link) and `onDismiss` to show a close button. Use `error` only
+for something that went wrong, never for emphasis. There is no warning tone.
+
+```jsx
+<Alert tone="error" title="Payment failed" action={<a className="btn btn--text" href="/billing">Update card</a>}>
+  The card was declined. Update it to keep the subscription.
+</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."
+/>
+```
+
 ## Patterns
 
 `PageHeader` and `Section` are patterns: they add no look of their own, only

package/guidelines/styles.md

@@ -30,7 +30,7 @@ else. Never set body text in the display face.
 <!-- generated:make-sarakkeet -->`Grid` is 12 columns: 4 on mobile, 8 from 600px, 12 from 900px.<!-- /generated --> Place
 things in columns, never in pixels. `Col` takes the span per breakpoint.
 
-**No icon libraries and no emoji.** Use `Icon`. <!-- generated:make-ikonit -->It draws its own 9 marks<!-- /generated --> on
+**No icon libraries and no emoji.** Use `Icon`. <!-- generated:make-ikonit -->It draws its own 10 marks<!-- /generated --> on
 a 16×16 grid with the same hairline as every border.
 
 ## Buttons

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` and `Select` 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

@@ -28,6 +28,10 @@ export { default as Tabs } from './Tabs.js';
 export type { TabsProps } from './Tabs.js';
 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 { 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

@@ -15,6 +15,8 @@ export { default as ChoiceGroup } from './ChoiceGroup.js';
 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 { 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.13.0",
+  "version": "2.15.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.13.0"
+    "@pokela/tokens": "^2.15.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/alert.css

@@ -0,0 +1,74 @@
+/* Inline-ilmoitus (Alert). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Vasen viiva --hairline-strong, ei pintaa eikä kehystä (päätös 29).
+   Ikoni, otsikko (paino 500) ja teksti (--ink-muted) ovat samassa
+   koossa kuin kentän virheteksti. Virheessä viiva, ikoni ja otsikko
+   ovat --danger; teksti pysyy --ink-mutedina, jotta pitkäkin selitys
+   on luettava. */
+
+.alert {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  column-gap: var(--space-12);
+  align-items: start;
+  padding: var(--space-4) 0 var(--space-4) var(--space-16);
+  border-left: var(--hairline-strong) solid var(--ink);
+  color: var(--ink);
+}
+
+/* Ikoni ensimmäisen rivin keskelle, kuten .field__errorissa. */
+.alert__icon { margin-top: calc((var(--lh-body-s) * var(--text-body-s) - var(--icon-m)) / 2); }
+
+.alert__content { min-width: 0; }
+.alert__title,
+.alert__body {
+  margin: 0;
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+}
+.alert__title { font-weight: var(--weight-500); }
+.alert__body { color: var(--ink-muted); }
+.alert__body > * { margin: 0; }
+.alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-12) var(--space-24);
+  margin-top: var(--space-12);
+}
+
+.alert--error { border-left-color: var(--danger); }
+.alert--error .alert__icon,
+.alert--error .alert__title { color: var(--danger); }
+
+/* Sulkunappi: näkyvä 32 px, osuma-alue --tap-min kuten .btn--s:ssä
+   (päätös 26). Ensimmäisen rivin keskelle, ja oikea reuna vedetään
+   ikonin reunaan, jotta X on linjassa tekstipalstan oikean reunan
+   kanssa. */
+.alert__close {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--space-32);
+  height: var(--space-32);
+  margin: calc((var(--lh-body-s) * var(--text-body-s) - var(--space-32)) / 2)
+    calc((var(--space-32) - var(--icon-m)) / -2) 0 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  color: var(--ink-muted);
+  cursor: pointer;
+}
+.alert__close::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--space-32) - var(--tap-min)) / 2);
+}
+.alert__close:hover { color: var(--ink); }
+.alert__close:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: calc(var(--focus-width) * -1);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .alert__close { transition: color var(--dur-fast) var(--ease-standard); }
+}

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

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