@pokela/components 2.7.0 → 2.10.0

package/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import { type InputHTMLAttributes } from 'react';
+/**
+ * Valintaruutu: ruutu, label ja ohjeteksti.
+ *
+ * Sovelluskomponentti (päätös 22), sivusto ei käytä tätä. Kieli on
+ * .btn-perheen: hiusviiva --line-strong, ei pyöristystä, valittu ruutu
+ * täytetään --inkillä. Rivi on vähintään --tap-min korkea.
+ *
+ * Oikea <input> on ruudun päällä näkymättömänä, joten näppäimistö,
+ * lomake ja ruudunlukija toimivat kuten natiivissa. `indeterminate`
+ * ei ole HTML-attribuutti, joten se asetetaan elementille.
+ *
+ * Virhettä ei ole tässä: se kuuluu ryhmälle (ChoiceGroup), jonka
+ * legend kertoo, mitä puuttuu.
+ */
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> & {
+    label: string;
+    /** Ohjeteksti labelin alla. */
+    hint?: string;
+    /** Osittain valittu, esim. "valitse kaikki", kun osa on valittu. */
+    indeterminate?: boolean;
+    className?: string;
+};
+export default function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/Checkbox.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef } from 'react';
+export default function Checkbox(props) {
+    const { label, hint, indeterminate, className, id: annettuId, ...input } = props;
+    const omaId = useId();
+    const id = annettuId ?? omaId;
+    const ohjeId = hint ? `${id}-ohje` : undefined;
+    const ref = useRef(null);
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = Boolean(indeterminate);
+    }, [indeterminate]);
+    return (_jsxs("div", { className: ['choice', input.disabled && 'choice--disabled', className].filter(Boolean).join(' '), children: [_jsxs("span", { className: "choice__control", children: [_jsx("input", { ...input, ref: ref, id: id, type: "checkbox", className: "choice__input", "aria-describedby": ohjeId }), _jsx("span", { className: "choice__mark", "aria-hidden": "true", children: _jsxs("svg", { viewBox: "0 0 20 20", children: [_jsx("path", { className: "choice__check", d: "M5 10 L8.5 13.5 L15 6.5" }), _jsx("path", { className: "choice__dash", d: "M5 10 H15" })] }) })] }), _jsx("label", { className: "choice__label", htmlFor: id, children: label }), hint ? (_jsx("p", { id: ohjeId, className: "choice__hint", children: hint })) : null] }));
+}

package/ChoiceGroup.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+/**
+ * Valintojen ryhmä: otsikko (legend), valinnat, ohje ja virhe.
+ *
+ * Sovelluskomponentti (päätös 22). Ryhmä on <fieldset>, joten
+ * ruudunlukija sanoo otsikon ennen jokaista valintaa. Virhe kuuluu
+ * ryhmälle eikä yksittäiselle valinnalle: "valitse yksi" koskee
+ * kaikkia. Virhetilassa jokaisen valinnan reuna on --danger, ja viesti
+ * on ikonin kanssa kuten TextFieldissä.
+ *
+ * Yksittäinenkin pakollinen valinta ("hyväksy ehdot") tehdään ryhmänä,
+ * jotta virheelle on paikka.
+ */
+export type ChoiceGroupProps = {
+    legend: string;
+    /** Ohjeteksti valintojen alla. */
+    hint?: string;
+    /** Virheviesti. Kun annettu, ryhmä on virhetilassa. */
+    error?: string;
+    children: ReactNode;
+    className?: string;
+};
+export default function ChoiceGroup({ legend, hint, error, children, className }: ChoiceGroupProps): import("react/jsx-runtime").JSX.Element;

package/ChoiceGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import Icon from './Icon';
+export default function ChoiceGroup({ legend, hint, error, children, className }) {
+    const id = useId();
+    const ohjeId = hint ? `${id}-ohje` : undefined;
+    const virheId = error ? `${id}-virhe` : undefined;
+    const kuvaus = [ohjeId, virheId].filter(Boolean).join(' ') || undefined;
+    return (_jsxs("fieldset", { className: ['choice-group', error && 'choice-group--invalid', className].filter(Boolean).join(' '), "aria-describedby": kuvaus, children: [_jsx("legend", { className: "choice-group__legend", children: legend }), children, hint ? (_jsx("p", { id: ohjeId, className: "field__hint", children: hint })) : null, error ? (_jsxs("p", { id: virheId, className: "field__error", children: [_jsx(Icon, { name: "alert" }), error] })) : null] }));
+}

package/Icon.d.ts

@@ -18,11 +18,14 @@
  * 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ä.
+ *
  * 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';
+export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu' | 'alert';
 export type IconSize = 's' | 'm' | 'l';
 export type IconProps = {
     name: IconName;

package/Icon.js

@@ -8,6 +8,10 @@ const PATHS = {
     minus: ['M2.5 8.5 H14.5'],
     close: ['M3.5 3.5 L12.5 12.5', 'M12.5 3.5 L3.5 12.5'],
     menu: ['M1 5.5 H15', 'M1 10.5 H15'],
+    /* Virhe. Neliö eikä kolmio tai ympyrä: kaaria ei ole, ja kolmion
+       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'],
 };
 export default function Icon({ name, size = 'm', label, className }) {
     return (_jsx("svg", { className: ['icon', `icon--${size}`, className].filter(Boolean).join(' '), viewBox: "0 0 16 16", role: label ? 'img' : undefined, "aria-label": label, "aria-hidden": label ? undefined : true, focusable: "false", children: PATHS[name].map((d) => (_jsx("path", { d: d }, d))) }));

package/PageHeader.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+/**
+ * Sivun otsikko (pattern).
+ * ---------------------------------------------------------------
+ * Patterni ei tuo omaa ulkoasua: se asettelee olemassa olevat
+ * typografialuokat aina samalla tavalla. Otsikko (`display-xl`) ja
+ * sivutieto (`meta`) ovat samalla rivillä leveämmällä ruudulla,
+ * ingressi (`body-l`) otsikon alla samassa sarakkeessa.
+ *
+ * Ennen tätä sama rakenne kirjoitettiin jokaiselle sivulle käsin, ja
+ * Figma Make arvasi sen: ingressi päätyi sarakkeisiin 9–12, irti
+ * otsikosta (päätös 21).
+ */
+export default function PageHeader({ title, meta, lede, }: {
+    title: ReactNode;
+    meta?: ReactNode;
+    lede?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/PageHeader.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sivun otsikko (pattern).
+ * ---------------------------------------------------------------
+ * Patterni ei tuo omaa ulkoasua: se asettelee olemassa olevat
+ * typografialuokat aina samalla tavalla. Otsikko (`display-xl`) ja
+ * sivutieto (`meta`) ovat samalla rivillä leveämmällä ruudulla,
+ * ingressi (`body-l`) otsikon alla samassa sarakkeessa.
+ *
+ * Ennen tätä sama rakenne kirjoitettiin jokaiselle sivulle käsin, ja
+ * Figma Make arvasi sen: ingressi päätyi sarakkeisiin 9–12, irti
+ * otsikosta (päätös 21).
+ */
+export default function PageHeader({ title, meta, lede, }) {
+    return (_jsxs("header", { className: "page page-header", children: [_jsxs("div", { className: "page-head", children: [_jsx("h1", { className: "display-xl", children: title }), meta ? _jsx("p", { className: "meta", children: meta }) : null] }), lede ? _jsx("p", { className: "body-l measure page-header__lede", children: lede }) : null] }));
+}

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.7.0.
+React-komponentit: **Pokela Design System**, versio 2.10.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -23,6 +23,13 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Accordion`
 - `Timeline`
 - `ExplodedView`
+- `PageHeader`
+- `Section`
+- `TextField`
+- `Checkbox`
+- `Radio`
+- `Switch`
+- `ChoiceGroup`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -57,6 +64,9 @@ import Link from 'next/link';
 - `styles/accordion.css`
 - `styles/timeline.css`
 - `styles/exploded-view.css`
+- `styles/patterns.css`
+- `styles/text-field.css`
+- `styles/choice.css`
 
 Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
 luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi

package/Radio.d.ts

@@ -0,0 +1,17 @@
+import { type InputHTMLAttributes } from 'react';
+/**
+ * Radiopainike: yksi vaihtoehto ryhmästä, josta valitaan yksi.
+ *
+ * Sovelluskomponentti (päätös 22). Ympyrä on systeemin ainoa pyöreä
+ * muoto (päätös 24): ilman sitä radio ja valintaruutu näyttäisivät
+ * samalta, eikä käyttäjä näkisi, valitaanko yksi vai monta.
+ *
+ * Käytä aina ChoiceGroupin sisällä samalla `name`-arvolla.
+ */
+export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className'> & {
+    label: string;
+    /** Ohjeteksti labelin alla. */
+    hint?: string;
+    className?: string;
+};
+export default function Radio(props: RadioProps): import("react/jsx-runtime").JSX.Element;

package/Radio.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export default function Radio(props) {
+    const { label, hint, className, id: annettuId, ...input } = props;
+    const omaId = useId();
+    const id = annettuId ?? omaId;
+    const ohjeId = hint ? `${id}-ohje` : undefined;
+    return (_jsxs("div", { className: ['choice', 'choice--radio', input.disabled && 'choice--disabled', className]
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("span", { className: "choice__control", children: [_jsx("input", { ...input, id: id, type: "radio", className: "choice__input", "aria-describedby": ohjeId }), _jsx("span", { className: "choice__mark", "aria-hidden": "true" })] }), _jsx("label", { className: "choice__label", htmlFor: id, children: label }), hint ? (_jsx("p", { id: ohjeId, className: "choice__hint", children: hint })) : null] }));
+}

package/Section.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+/**
+ * Osio (pattern).
+ * ---------------------------------------------------------------
+ * Sivun osio otsikkoineen. Kaksi asettelua, molemmat sivustolta:
+ *
+ *   stacked  otsikko ja sivutieto rivinä, sisältö alla
+ *            (työlista, Tietoa, System)
+ *   aside    otsikko vasemmassa sarakkeessa, sisältö oikealla;
+ *            pienellä ruudulla päällekkäin (casesivujen lohkot)
+ *
+ * Otsikko on aina `h2.meta`: se nimeää osion, sisällön oma otsikko
+ * (esim. `display-m`) kuuluu `children`-osaan.
+ */
+export type SectionLayout = 'stacked' | 'aside';
+export default function Section({ title, meta, id, layout, className, children, }: {
+    title: ReactNode;
+    meta?: ReactNode;
+    /** Otsikon id; osio nimetään sillä (`aria-labelledby`). */
+    id?: string;
+    layout?: SectionLayout;
+    className?: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/Section.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function Section({ title, meta, id, layout = 'stacked', className, children, }) {
+    const otsikko = (_jsx("h2", { id: id, className: "meta", children: title }));
+    if (layout === 'aside') {
+        return (_jsxs("section", { className: ['page section--aside', className].filter(Boolean).join(' '), "aria-labelledby": id, children: [otsikko, children] }));
+    }
+    return (_jsxs("section", { className: ['page section', className].filter(Boolean).join(' '), "aria-labelledby": id, children: [_jsxs("div", { className: "section-head", children: [otsikko, meta ? _jsx("span", { className: "meta", children: meta }) : null] }), children] }));
+}

package/Switch.d.ts

@@ -0,0 +1,19 @@
+import { type InputHTMLAttributes } from 'react';
+/**
+ * Kytkin: asetus, joka tulee voimaan heti.
+ *
+ * Sovelluskomponentti (päätös 22). Valintaruutu tallennetaan napilla,
+ * kytkin ei. Siksi kytkin on asetuslistan rivi: label vasemmalla,
+ * kytkin oikeassa reunassa. Kisko ja nuppi ovat neliöt kuten muu
+ * systeemi; päällä kisko täyttyy --inkillä.
+ *
+ * Alla on <input type="checkbox" role="switch">, joten ruudunlukija
+ * sanoo "päällä" tai "pois".
+ */
+export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'className' | 'role'> & {
+    label: string;
+    /** Ohjeteksti labelin alla. */
+    hint?: string;
+    className?: string;
+};
+export default function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/Switch.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export default function Switch(props) {
+    const { label, hint, className, id: annettuId, ...input } = props;
+    const omaId = useId();
+    const id = annettuId ?? omaId;
+    const ohjeId = hint ? `${id}-ohje` : undefined;
+    return (_jsxs("div", { className: ['choice', 'choice--switch', input.disabled && 'choice--disabled', className]
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("span", { className: "choice__control", children: [_jsx("input", { ...input, id: id, type: "checkbox", role: "switch", className: "choice__input", "aria-describedby": ohjeId }), _jsx("span", { className: "choice__mark", "aria-hidden": "true" })] }), _jsx("label", { className: "choice__label", htmlFor: id, children: label }), hint ? (_jsx("p", { id: ohjeId, className: "choice__hint", children: hint })) : null] }));
+}

package/TextField.d.ts

@@ -0,0 +1,35 @@
+import { type InputHTMLAttributes } from 'react';
+/**
+ * Tekstikenttä: label, kenttä, ohjeteksti ja virhe yhtenä.
+ *
+ * Sivusto ei käytä tätä. Se on kirjastossa sovellusnäkymiä varten
+ * (päätös 22), jotta Make voi rakentaa
+ * lomakkeen systeemin omista osista eikä keksi omaansa.
+ *
+ * Kieli on .btn-perheen: hiusviiva ilman pyöristystä, hover paksuntaa
+ * alaviivan kuten tekstinapissa, focus on sivuston yhteinen rengas.
+ * Virhe on systeemin ainoa tilaväri --danger, aina ikonin ja tekstin
+ * kanssa, ettei merkitys jää värin varaan.
+ *
+ * Tilat ovat propseja, eivät luokkia: `error` ja `disabled`. Hover ja
+ * focus ovat CSS:n tiloja. `multiline` vaihtaa kentän tekstialueeksi;
+ * muuten sama komponentti, koska label, ohje ja virhe ovat samat.
+ */
+type Yhteiset = {
+    label: string;
+    /** Ohjeteksti kentän alla. */
+    hint?: string;
+    /** Virheviesti. Kun annettu, kenttä on virhetilassa (aria-invalid). */
+    error?: string;
+    /** Valinnaisen kentän merkintä labelin perässä, esim. "(valinnainen)". */
+    optional?: string;
+    className?: string;
+};
+export type TextFieldProps = Yhteiset & Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> & {
+    /** Tekstialue (<textarea>) yhden rivin kentän sijaan. */
+    multiline?: boolean;
+    /** Tekstialueen rivit. */
+    rows?: number;
+};
+export default function TextField(props: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/TextField.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import Icon from './Icon';
+export default function TextField(props) {
+    const { label, hint, error, optional, className, multiline, rows, id: annettuId, ...kentta } = props;
+    const omaId = useId();
+    const id = annettuId ?? omaId;
+    const ohjeId = hint ? `${id}-ohje` : undefined;
+    const virheId = error ? `${id}-virhe` : undefined;
+    const kuvaus = [ohjeId, virheId].filter(Boolean).join(' ') || undefined;
+    const yhteiset = {
+        id,
+        className: 'field__control',
+        'aria-invalid': error ? true : undefined,
+        'aria-describedby': kuvaus,
+    };
+    return (_jsxs("div", { className: ['field', error && 'field--invalid', kentta.disabled && 'field--disabled', className]
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("label", { className: "field__label", htmlFor: id, children: [label, optional ? _jsxs("span", { className: "field__optional", children: [" ", optional] }) : null] }), multiline ? (_jsx("textarea", { ...kentta, rows: rows, ...yhteiset })) : (_jsx("input", { ...kentta, ...yhteiset })), hint ? (_jsx("p", { id: ohjeId, className: "field__hint", children: hint })) : null, error ? (_jsxs("p", { id: virheId, className: "field__error", children: [_jsx(Icon, { name: "alert" }), error] })) : null] }));
+}

package/guidelines/components.md

@@ -8,6 +8,13 @@ Use these instead of building an equivalent.
 - `Accordion`, `useAccordionGroup`
 - `Timeline`, `TimelineItem`
 - `ExplodedView`
+- `PageHeader`
+- `Section`
+- `TextField`
+- `Checkbox`
+- `Radio`
+- `Switch`
+- `ChoiceGroup`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -69,4 +76,55 @@ reader, described by `label`.
 />
 ```
 
+`TextField` is the form field: label, input, hint and error in one. Use it
+for every text input and text area (`multiline`) instead of a bare `<input>`.
+Pass `error` with a message to show the error state; never colour a field
+yourself. Mark an optional field with `optional="(optional)"`, not an asterisk
+on the required ones. Put form buttons after the fields with the `.btn`
+classes.
+
+```jsx
+<TextField label="Email" type="email" error="The address is missing a domain." />
+<TextField label="Message" optional="(optional)" multiline hint="Up to 500 characters." />
+```
+
+`Checkbox`, `Radio` and `Switch` are the choices; put them inside a
+`ChoiceGroup`, which gives the group its title (`legend`), `hint` and `error`.
+Use `Checkbox` for options saved with a button, `Radio` (same `name`) when
+exactly one option is picked, and `Switch` for a setting that takes effect at
+once, never in a form with a save button. An error belongs to the group, not
+to a single choice; a single required choice ("accept the terms") is still a
+`ChoiceGroup`.
+
+```jsx
+<ChoiceGroup legend="Visibility" error="Pick one.">
+  <Radio name="visibility" value="public" label="Public" hint="Anyone with the link." />
+  <Radio name="visibility" value="team" label="Team only" />
+</ChoiceGroup>
+<ChoiceGroup legend="Notifications">
+  <Switch label="Email notifications" defaultChecked />
+</ChoiceGroup>
+```
+
+## Patterns
+
+`PageHeader` and `Section` are patterns: they add no look of their own, only
+the layout every page uses. Build pages from them instead of arranging
+headings and grids yourself.
+
+`PageHeader` is the page's title with an optional `meta` and `lede`. The lede
+always sits under the title in the same column, never beside it.
+
+`Section` names a part of the page with a small `title` (and optional
+`meta`). `layout="stacked"` puts the title row above the content;
+`layout="aside"` puts the title in a narrow left column and the content
+beside it. Use one layout per page.
+
+```jsx
+<PageHeader title="From idea to launch" meta="9 weeks" lede="Each phase ends in a shared decision." />
+<Section title="Road to launch" layout="aside">
+  <Timeline>…</Timeline>
+</Section>
+```
+
 `Reveal` fades its children in on scroll. Wrap sections, not single elements.

package/guidelines/setup.md

@@ -1,5 +1,27 @@
 # Setup
 
+## Before you build
+
+First decide which of three jobs this is. If the request does not make it
+clear, ask this one question and wait: **"Are you building a view, a new
+component, or a change to an existing component?"**
+
+1. **A view or prototype**, new or existing. Ask what the page is, what is
+   on it and what can be clicked. Build it only from this package: pages
+   start with `PageHeader`, content goes in `Section`s. If the view needs a
+   part the package does not have, do not invent it inside the view: build
+   it separately as in 2 and label it "Proposed component".
+2. **A new component.** Ask its name, what it does, its states, and which
+   existing component is closest. Build it alone on an empty page, every
+   state visible side by side, using only tokens. Name its props like the
+   package's components (`variant`, `size`, `title`, `meta`), so it can
+   become a pull request and a story as is.
+3. **A change to an existing component.** Package components cannot be
+   edited here. Show the change as a new state next to the current one and
+   label it "Proposed change".
+
+## Install
+
 Install **both** packages as direct dependencies, at the same, latest
 version. `@pokela/components` uses the tokens of the same release.
 

package/guidelines/styles.md

@@ -30,5 +30,5 @@ 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 6 marks<!-- /generated --> on
+**No icon libraries and no emoji.** Use `Icon`. <!-- generated:make-ikonit -->It draws its own 7 marks<!-- /generated --> on
 a 16×16 grid with the same hairline as every border.

package/guidelines/tokens.md

@@ -8,10 +8,15 @@ inversion — `--invert-surface` with `--invert-ink` — or the quiet
 `--badge-surface`. Do not introduce a brand blue, a primary green, or any
 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` and `ChoiceGroup` 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
 (`--hairline`), never elevation.
 
-**No rounded corners.** `--radius` is `0`. Everything is square.
+**No rounded corners.** `--radius` is `0`. Everything is square. The one
+exception is `Radio`, which is a circle so it never reads as a checkbox.
 
 <!-- generated:make-valit -->**No spacing outside the scale.** 16 steps, each named by its value:<!-- /generated -->
 `--space-24` is 24px. If a value is missing, use the nearest step rather than

package/index.d.ts

@@ -9,6 +9,19 @@ export { default as Timeline, TimelineItem } from './Timeline.js';
 export type { TimelineVariant } from './Timeline.js';
 export { default as ExplodedView } from './ExplodedView.js';
 export type { ExplodedTila, ExplodedLayer } from './ExplodedView.js';
+export { default as PageHeader } from './PageHeader.js';
+export { default as Section } from './Section.js';
+export type { SectionLayout } from './Section.js';
+export { default as TextField } from './TextField.js';
+export type { TextFieldProps } from './TextField.js';
+export { default as Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
+export { default as Radio } from './Radio.js';
+export type { RadioProps } from './Radio.js';
+export { default as Switch } from './Switch.js';
+export type { SwitchProps } from './Switch.js';
+export { default as ChoiceGroup } from './ChoiceGroup.js';
+export type { ChoiceGroupProps } from './ChoiceGroup.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

@@ -5,6 +5,13 @@ export { default as ListRow } from './ListRow.js';
 export { Accordion, useAccordionGroup } from './Accordion.js';
 export { default as Timeline, TimelineItem } from './Timeline.js';
 export { default as ExplodedView } from './ExplodedView.js';
+export { default as PageHeader } from './PageHeader.js';
+export { default as Section } from './Section.js';
+export { default as TextField } from './TextField.js';
+export { default as Checkbox } from './Checkbox.js';
+export { default as Radio } from './Radio.js';
+export { default as Switch } from './Switch.js';
+export { default as ChoiceGroup } from './ChoiceGroup.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.7.0",
+  "version": "2.10.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.7.0"
+    "@pokela/tokens": "^2.10.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/choice.css

@@ -0,0 +1,195 @@
+/* Valinnat: Checkbox, Radio, Switch ja ChoiceGroup.
+   ==================================================================
+   Sovelluskomponentteja (päätös 22), sivusto ei käytä näitä. Kieli on
+   .btn- ja .field-perheen: hiusviiva --line-strong, ei pyöristystä
+   (paitsi radio, päätös 24), valittu = täytetty --ink.
+
+   Oikea <input> on merkin päällä näkymättömänä (opacity 0), joten
+   klikkaus, näppäimistö ja lomake toimivat natiivisti, ja merkin tila
+   luetaan inputin tilasta: `.choice__input:checked + .choice__mark`.
+
+   Hover paksuntaa reunan sisäänpäin piirretyllä viivalla eikä
+   border-widthillä: kytkimen nuppi on sijoitettu reunan sisään, eikä
+   se saa nytkähtää. */
+
+.choice {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: var(--space-12);
+  align-items: start;
+  min-height: var(--tap-min);
+  /* Yksirivinen valinta on --tap-min korkea, teksti keskellä. */
+  padding-block: calc((var(--tap-min) - var(--lh-body) * var(--text-body)) / 2);
+}
+
+.choice__control {
+  position: relative;
+  display: block;
+  width: var(--space-20);
+  height: var(--space-20);
+  /* Merkki ensimmäisen rivin keskelle. */
+  margin-top: calc((var(--lh-body) * var(--text-body) - var(--space-20)) / 2);
+}
+
+.choice__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.choice__mark {
+  position: absolute;
+  inset: 0;
+  border: var(--hairline) solid var(--line-strong);
+  border-radius: var(--radius);
+  background: var(--paper);
+  pointer-events: none;
+  transition:
+    background var(--dur-fast) var(--ease-standard),
+    border-color var(--dur-fast) var(--ease-standard),
+    box-shadow var(--dur-fast) var(--ease-standard);
+}
+
+.choice__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; }
+.choice__mark path {
+  fill: none;
+  stroke: var(--paper);
+  stroke-width: var(--hairline-strong);
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  opacity: 0;
+}
+
+.choice__label {
+  font-size: var(--text-body);
+  line-height: var(--lh-body);
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.choice__hint {
+  grid-column: 2;
+  margin: 0;
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  color: var(--ink-muted);
+}
+
+/* ---- tilat ------------------------------------------------------- */
+
+.choice:hover .choice__input:not(:disabled) + .choice__mark {
+  box-shadow: inset 0 0 0 var(--hairline) var(--line-strong);
+}
+
+.choice__input:focus-visible + .choice__mark {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: var(--focus-offset);
+}
+
+.choice__input:checked + .choice__mark,
+.choice__input:indeterminate + .choice__mark {
+  background: var(--ink);
+  border-color: var(--ink);
+}
+.choice__input:checked:not(:indeterminate) + .choice__mark .choice__check,
+.choice__input:indeterminate + .choice__mark .choice__dash { opacity: 1; }
+
+/* ---- radio: ympyrä ja piste --------------------------------------- */
+
+.choice--radio .choice__mark { border-radius: 50%; }
+.choice--radio .choice__input:checked + .choice__mark {
+  background: var(--paper);
+  box-shadow: inset 0 0 0 var(--hairline) var(--ink);
+}
+.choice--radio .choice__input:checked + .choice__mark::after {
+  content: '';
+  position: absolute;
+  inset: calc(var(--space-4) + var(--hairline));
+  border-radius: 50%;
+  background: var(--ink);
+}
+
+/* ---- kytkin: kisko ja nuppi, label vasemmalla --------------------- */
+
+.choice--switch { grid-template-columns: 1fr auto; column-gap: var(--space-24); }
+.choice--switch .choice__control {
+  grid-column: 2;
+  grid-row: 1;
+  width: var(--space-40);
+  height: var(--space-24);
+  margin-top: calc((var(--lh-body) * var(--text-body) - var(--space-24)) / 2);
+}
+.choice--switch .choice__label { grid-column: 1; grid-row: 1; }
+.choice--switch .choice__hint { grid-column: 1; }
+
+/* Nuppi on 16 px ja istuu 4 px:n päässä kiskon ulkoreunasta. */
+.choice--switch .choice__mark::after {
+  content: '';
+  position: absolute;
+  top: calc((var(--space-24) - var(--space-16)) / 2 - var(--hairline));
+  left: calc((var(--space-24) - var(--space-16)) / 2 - var(--hairline));
+  width: var(--space-16);
+  height: var(--space-16);
+  background: var(--ink-muted);
+  transition:
+    transform var(--dur-base) var(--ease-out),
+    background var(--dur-fast) var(--ease-standard);
+}
+.choice--switch .choice__input:checked + .choice__mark::after {
+  transform: translateX(var(--space-16));
+  background: var(--paper);
+}
+
+/* ---- disabled ---------------------------------------------------- */
+
+.choice--disabled .choice__label,
+.choice--disabled .choice__hint { color: var(--ink-faint); cursor: not-allowed; }
+.choice__input:disabled { cursor: not-allowed; }
+.choice__input:disabled + .choice__mark {
+  background: var(--paper-alt);
+  border-color: var(--ink-faint);
+}
+.choice__input:disabled:checked + .choice__mark,
+.choice__input:disabled:indeterminate + .choice__mark {
+  background: var(--ink-faint);
+  border-color: var(--ink-faint);
+}
+.choice__input:disabled + .choice__mark .choice__check,
+.choice__input:disabled + .choice__mark .choice__dash { stroke: var(--paper-alt); }
+.choice--radio .choice__input:disabled:checked + .choice__mark { background: var(--paper-alt); box-shadow: none; }
+.choice--radio .choice__input:disabled:checked + .choice__mark::after,
+.choice--switch .choice__input:disabled + .choice__mark::after { background: var(--ink-faint); }
+.choice--switch .choice__input:disabled:checked + .choice__mark::after { background: var(--paper-alt); }
+
+/* ---- ryhmä ------------------------------------------------------- */
+
+.choice-group {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+/* Sama kuin .field__label: ryhmän otsikko on lomakkeen label. */
+.choice-group__legend {
+  padding: 0;
+  margin-bottom: var(--space-4);
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  font-weight: var(--weight-500);
+  color: var(--ink);
+}
+
+.choice-group > .field__hint,
+.choice-group > .field__error { margin-top: var(--space-4); }
+
+/* Virhe: jokaisen valinnan reuna --danger ja paksumpi, kuten kentässä. */
+.choice-group--invalid .choice__input:not(:checked) + .choice__mark {
+  border-color: var(--danger);
+  box-shadow: inset 0 0 0 var(--hairline) var(--danger);
+}

package/styles/patterns.css

@@ -0,0 +1,38 @@
+/* Patternit: sivun otsikko ja osio (PageHeader, Section).
+   Eivät tuo omaa ulkoasua, vain asettelun olemassa oleville
+   typografialuokille. Siirretty work.css:stä ja case.css:stä, jotta
+   ne lähtevät paketin mukana (päätös 21). */
+
+.page-head {
+  padding-top: var(--space-40);
+  padding-bottom: var(--space-32);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-12);
+}
+@media (min-width: 600px) {
+  .page-head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--space-24); }
+}
+@media (min-width: 900px) { .page-head { padding-top: var(--space-56); padding-bottom: var(--space-40); } }
+
+/* Ingressi otsikon alla, samassa sarakkeessa. */
+.page-header__lede { margin: 0; padding-bottom: var(--space-40); }
+
+.section-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-16);
+  padding-bottom: var(--space-16);
+}
+
+.section--aside {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-20);
+  padding-block: var(--section-gap);
+  border-top: var(--hairline) solid var(--line);
+}
+@media (min-width: 900px) {
+  .section--aside { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-40); }
+}

package/styles/text-field.css

@@ -0,0 +1,91 @@
+/* Tekstikenttä (TextField). Sovellusnäkymien komponentti, ei sivuston.
+   ==================================================================
+   Sama kieli kuin .btn: hiusviiva, ei pyöristystä, ei varjoa. Kenttä
+   on 48 px, nappia (44) korkeampi: 16 px:n teksti rivivälillä 1.65
+   tarvitsee tilaa, ja kirjoitettava pinta saa olla painettavaa
+   suurempi. */
+
+.field { display: grid; gap: var(--space-8); align-content: start; }
+
+.field__label {
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  font-weight: var(--weight-500);
+  color: var(--ink);
+}
+.field__optional { font-weight: var(--weight-400); color: var(--ink-faint); }
+
+.field__control {
+  appearance: none;
+  width: 100%;
+  margin: 0;
+  /* 16 px eikä body-s: iOS zoomaa alle 16 px:n kentät. */
+  font: inherit;
+  font-size: var(--text-body);
+  line-height: var(--lh-body);
+  color: var(--ink);
+  background: var(--paper);
+  height: var(--space-48);
+  padding: 0 var(--space-16);
+  border: var(--hairline) solid var(--line-strong);
+  border-radius: var(--radius);
+  transition: border-color var(--dur-fast) var(--ease-standard);
+}
+.field__control::placeholder { color: var(--ink-faint); opacity: 1; }
+
+textarea.field__control {
+  height: auto;
+  min-height: var(--space-128);
+  padding: var(--space-12) var(--space-16);
+  resize: vertical;
+}
+
+/* Hover = alaviiva paksunee, sama liike kuin .btn--text:llä. Kenttä
+   on border-box ja kiinteän korkuinen, joten mitään ei nytkähdä. */
+.field__control:hover:not(:disabled) { border-bottom-width: var(--hairline-strong); }
+
+.field__hint {
+  margin: 0;
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  color: var(--ink-muted);
+}
+
+/* ---- virhe ------------------------------------------------------- */
+
+/* Koko reuna paksunee, ei vain alaviiva: virhe ei saa näyttää
+   hoverilta. Padding kevenee saman verran, joten teksti pysyy
+   paikallaan. */
+.field--invalid .field__control {
+  border-color: var(--danger);
+  border-width: var(--hairline-strong);
+  padding-inline: calc(var(--space-16) - (var(--hairline-strong) - var(--hairline)));
+}
+.field--invalid textarea.field__control {
+  padding-block: calc(var(--space-12) - (var(--hairline-strong) - var(--hairline)));
+}
+
+.field__error {
+  margin: 0;
+  display: flex;
+  gap: var(--space-8);
+  align-items: flex-start;
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  font-weight: var(--weight-500);
+  color: var(--danger);
+}
+/* Ikoni ensimmäisen rivin keskelle: (rivinkorkeus − ikoni) / 2. */
+.field__error .icon { margin-top: calc((var(--lh-body-s) * var(--text-body-s) - var(--icon-m)) / 2); }
+
+/* ---- disabled ---------------------------------------------------- */
+
+/* Sama kuin .btn[disabled]: viiva haalenee, teksti faint. Pinta on
+   paper-alt, jotta tyhjäkin kenttä erottuu käytössä olevasta. */
+.field--disabled .field__label { color: var(--ink-faint); }
+.field__control:disabled {
+  background: var(--paper-alt);
+  border-color: var(--line);
+  color: var(--ink-faint);
+  cursor: not-allowed;
+}

package/styles.css

@@ -7,3 +7,6 @@
 @import './styles/accordion.css';
 @import './styles/timeline.css';
 @import './styles/exploded-view.css';
+@import './styles/patterns.css';
+@import './styles/text-field.css';
+@import './styles/choice.css';