@pokela/components 2.9.0 → 2.11.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

@@ -25,7 +25,7 @@
  * 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';
+export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu' | 'alert' | 'chevron-down' | 'check';
 export type IconSize = 's' | 'm' | 'l';
 export type IconProps = {
     name: IconName;

package/Icon.js

@@ -12,6 +12,10 @@ 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'],
+    /* 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'],
+    check: ['M3.5 8.5 L6.5 11.5 L13.5 4.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/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.9.0.
+React-komponentit: **Pokela Design System**, versio 2.11.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -26,6 +26,11 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `PageHeader`
 - `Section`
 - `TextField`
+- `Checkbox`
+- `Radio`
+- `Switch`
+- `ChoiceGroup`
+- `Select`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -62,6 +67,8 @@ import Link from 'next/link';
 - `styles/exploded-view.css`
 - `styles/patterns.css`
 - `styles/text-field.css`
+- `styles/choice.css`
+- `styles/select.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/Select.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Valintalista: label, kenttä, oma lista, ohjeteksti ja virhe.
+ *
+ * Sovelluskomponentti (päätös 22). Suljettu kenttä on TextFieldin
+ * kenttä; lista on systeemin oma (päätös 25), koska Vellu halusi
+ * listankin hiusviivakieleen. Natiivi <select> antaisi saavutettavuuden
+ * ilmaiseksi, joten tämä toteuttaa sen itse WAI-ARIA APG:n
+ * "select-only combobox" -mallin mukaan:
+ *
+ *   kenttä   role="combobox", aria-expanded, aria-controls,
+ *            aria-activedescendant. Fokus pysyy kentässä koko ajan;
+ *            lista näyttää aktiivisen vaihtoehdon.
+ *   lista    role="listbox", vaihtoehdot role="option" ja
+ *            aria-selected.
+ *
+ * Näppäimet: suljettuna Enter, välilyönti, nuolet, Home ja End
+ * avaavat, kirjain hyppää vaihtoehtoon. Auki nuolet, Home, End,
+ * PageUp ja PageDown liikkuvat, Enter ja välilyönti valitsevat, Esc
+ * sulkee muuttamatta, Tab valitsee ja siirtyy eteenpäin. Kirjoittaminen
+ * hakee alkukirjaimilla. Klikkaus listan ulkopuolelle sulkee.
+ *
+ * Lomakkeeseen arvo menee piilokentästä, kun `name` on annettu.
+ */
+export type SelectOption = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type SelectProps = {
+    label: string;
+    options: SelectOption[];
+    /** Ohjattu arvo. Käytä `onChange`:n kanssa. */
+    value?: string;
+    /** Alkuarvo, kun arvoa ei ohjata. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** Teksti kun mitään ei ole valittu, esim. "Valitse rooli". */
+    placeholder?: 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;
+    disabled?: boolean;
+    required?: boolean;
+    /** Lomakekentän nimi. Arvo lähtee lomakkeen mukana piilokentästä. */
+    name?: string;
+    id?: string;
+    className?: string;
+};
+export default function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;

package/Select.js

@@ -0,0 +1,218 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import Icon from './Icon';
+/** Montako riviä PageUp ja PageDown hyppäävät: listan näkyvä korkeus. */
+const SIVU = 6;
+/** Kuinka kauan kirjainhaku muistaa edelliset kirjaimet. */
+const HAKU_MS = 500;
+export default function Select(props) {
+    const { label, options, value: ohjattu, defaultValue, onChange, placeholder, hint, error, optional, disabled, required, name, id: annettuId, className, } = props;
+    const omaId = useId();
+    const id = annettuId ?? omaId;
+    const labelId = `${id}-label`;
+    const listaId = `${id}-lista`;
+    const ohjeId = hint ? `${id}-ohje` : undefined;
+    const virheId = error ? `${id}-virhe` : undefined;
+    const kuvaus = [ohjeId, virheId].filter(Boolean).join(' ') || undefined;
+    const optioId = (i) => `${id}-optio-${i}`;
+    const [oma, setOma] = useState(defaultValue);
+    const arvo = ohjattu !== undefined ? ohjattu : oma;
+    const valittu = options.findIndex((o) => o.value === arvo);
+    const [auki, setAuki] = useState(false);
+    const [aktiivinen, setAktiivinen] = useState(-1);
+    const [ylos, setYlos] = useState(false);
+    const kentta = useRef(null);
+    const lista = useRef(null);
+    const juuri = useRef(null);
+    const haku = useRef({ teksti: '', aika: 0 });
+    const kaytossa = useCallback((i) => i >= 0 && i < options.length && !options[i].disabled, [options]);
+    /** Seuraava käytössä oleva vaihtoehto suuntaan `askel`, tai sama jos reunassa. */
+    const siirra = useCallback((alku, askel) => {
+        let i = alku;
+        for (let n = 0; n < options.length; n++) {
+            const seuraava = i + askel;
+            if (seuraava < 0 || seuraava >= options.length)
+                break;
+            i = seuraava;
+            if (kaytossa(i))
+                return i;
+        }
+        return kaytossa(alku) ? alku : -1;
+    }, [options, kaytossa]);
+    const ensimmainen = useCallback(() => siirra(-1, 1), [siirra]);
+    const viimeinen = useCallback(() => siirra(options.length, -1), [siirra, options.length]);
+    const valitse = (i) => {
+        if (!kaytossa(i))
+            return;
+        const uusi = options[i].value;
+        if (ohjattu === undefined)
+            setOma(uusi);
+        if (uusi !== arvo)
+            onChange?.(uusi);
+    };
+    const avaa = (aktiivi) => {
+        if (disabled)
+            return;
+        setAuki(true);
+        setAktiivinen(aktiivi >= 0 ? aktiivi : ensimmainen());
+    };
+    const sulje = () => {
+        setAuki(false);
+        setAktiivinen(-1);
+    };
+    /* Aktiivinen vaihtoehto pysyy näkyvissä pitkässä listassa. */
+    useEffect(() => {
+        if (!auki || aktiivinen < 0)
+            return;
+        document.getElementById(optioId(aktiivinen))?.scrollIntoView({ block: 'nearest' });
+    }, [auki, aktiivinen]);
+    /* Lista aukeaa ylös, jos alla ei ole tilaa mutta yllä on. */
+    useEffect(() => {
+        if (!auki || !kentta.current || !lista.current)
+            return;
+        const k = kentta.current.getBoundingClientRect();
+        const korkeus = lista.current.offsetHeight;
+        const alla = window.innerHeight - k.bottom;
+        setYlos(alla < korkeus && k.top > alla);
+    }, [auki]);
+    /* Klikkaus tai kosketus komponentin ulkopuolella sulkee. */
+    useEffect(() => {
+        if (!auki)
+            return;
+        const ulkona = (e) => {
+            if (!juuri.current?.contains(e.target))
+                sulje();
+        };
+        document.addEventListener('pointerdown', ulkona);
+        return () => document.removeEventListener('pointerdown', ulkona);
+    }, [auki]);
+    /** Kirjainhaku: kirjaimet kertyvät hetken, ja sama kirjain kiertää vaihtoehtoja. */
+    const hae = (merkki) => {
+        const nyt = Date.now();
+        const h = haku.current;
+        h.teksti = nyt - h.aika > HAKU_MS ? merkki : h.teksti + merkki;
+        h.aika = nyt;
+        const sama = h.teksti.split('').every((c) => c === h.teksti[0]);
+        const etsittava = (sama ? h.teksti[0] : h.teksti).toLocaleLowerCase('fi');
+        const lahto = auki ? aktiivinen : valittu;
+        const alku = sama || h.teksti.length === 1 ? lahto + 1 : Math.max(lahto, 0);
+        for (let n = 0; n < options.length; n++) {
+            const i = (alku + n) % options.length;
+            if (kaytossa(i) && options[i].label.toLocaleLowerCase('fi').startsWith(etsittava))
+                return i;
+        }
+        return -1;
+    };
+    const nappain = (e) => {
+        if (disabled)
+            return;
+        const { key, altKey } = e;
+        if (!auki) {
+            if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ') {
+                e.preventDefault();
+                avaa(valittu >= 0 ? valittu : key === 'ArrowUp' ? viimeinen() : ensimmainen());
+            }
+            else if (key === 'Home') {
+                e.preventDefault();
+                avaa(ensimmainen());
+            }
+            else if (key === 'End') {
+                e.preventDefault();
+                avaa(viimeinen());
+            }
+            else if (key.length === 1 && !e.ctrlKey && !e.metaKey && !altKey) {
+                const i = hae(key);
+                if (i >= 0)
+                    avaa(i);
+            }
+            return;
+        }
+        switch (key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                setAktiivinen((a) => siirra(a, 1));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (altKey) {
+                    valitse(aktiivinen);
+                    sulje();
+                }
+                else
+                    setAktiivinen((a) => siirra(a, -1));
+                break;
+            case 'Home':
+                e.preventDefault();
+                setAktiivinen(ensimmainen());
+                break;
+            case 'End':
+                e.preventDefault();
+                setAktiivinen(viimeinen());
+                break;
+            case 'PageDown':
+                e.preventDefault();
+                setAktiivinen((a) => {
+                    let i = a;
+                    for (let n = 0; n < SIVU; n++)
+                        i = siirra(i, 1);
+                    return i;
+                });
+                break;
+            case 'PageUp':
+                e.preventDefault();
+                setAktiivinen((a) => {
+                    let i = a;
+                    for (let n = 0; n < SIVU; n++)
+                        i = siirra(i, -1);
+                    return i;
+                });
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (key === ' ' && haku.current.teksti && Date.now() - haku.current.aika < HAKU_MS) {
+                    /* Välilyönti kesken haun on osa hakua ("Uusi Seelanti"). */
+                    const i = hae(' ');
+                    if (i >= 0)
+                        setAktiivinen(i);
+                    break;
+                }
+                valitse(aktiivinen);
+                sulje();
+                break;
+            case 'Escape':
+                e.preventDefault();
+                sulje();
+                break;
+            case 'Tab':
+                /* Tab hyväksyy aktiivisen ja antaa fokuksen siirtyä. */
+                valitse(aktiivinen);
+                sulje();
+                break;
+            default:
+                if (key.length === 1 && !e.ctrlKey && !e.metaKey && !altKey) {
+                    const i = hae(key);
+                    if (i >= 0)
+                        setAktiivinen(i);
+                }
+        }
+    };
+    const naytettava = valittu >= 0 ? options[valittu].label : placeholder;
+    return (_jsxs("div", { ref: juuri, className: ['field', 'select', error && 'field--invalid', disabled && 'field--disabled', className]
+            .filter(Boolean)
+            .join(' '), children: [_jsxs("span", { id: labelId, className: "field__label", onClick: () => kentta.current?.focus(), children: [label, optional ? _jsxs("span", { className: "field__optional", children: [" ", optional] }) : null] }), _jsxs("div", { className: "select__wrap", children: [_jsxs("div", { ref: kentta, id: id, role: "combobox", tabIndex: disabled ? -1 : 0, className: ['field__control', 'select__control', valittu < 0 && 'select__control--placeholder']
+                            .filter(Boolean)
+                            .join(' '), "aria-labelledby": labelId, "aria-controls": listaId, "aria-expanded": auki, "aria-haspopup": "listbox", "aria-activedescendant": auki && aktiivinen >= 0 ? optioId(aktiivinen) : undefined, "aria-describedby": kuvaus, "aria-invalid": error ? true : undefined, "aria-required": required || undefined, "aria-disabled": disabled || undefined, onClick: () => (auki ? sulje() : avaa(valittu)), onKeyDown: nappain, onBlur: (e) => {
+                            if (!juuri.current?.contains(e.relatedTarget))
+                                sulje();
+                        }, children: [_jsx("span", { className: "select__value", children: naytettava }), _jsx(Icon, { name: "chevron-down", className: "select__chevron" })] }), _jsx("ul", { ref: lista, id: listaId, role: "listbox", "aria-labelledby": labelId, tabIndex: -1, hidden: !auki, className: ['select__list', ylos && 'select__list--up'].filter(Boolean).join(' '), children: options.map((o, i) => (_jsxs("li", { id: optioId(i), role: "option", "aria-selected": i === valittu, "aria-disabled": o.disabled || undefined, className: ['select__option', i === aktiivinen && 'is-active'].filter(Boolean).join(' '), 
+                            /* Fokus pysyy kentässä: hiiren painallus ei saa viedä sitä. */
+                            onPointerDown: (e) => e.preventDefault(), onPointerMove: () => kaytossa(i) && i !== aktiivinen && setAktiivinen(i), onClick: () => {
+                                if (!kaytossa(i))
+                                    return;
+                                valitse(i);
+                                sulje();
+                                kentta.current?.focus();
+                            }, children: [_jsx("span", { children: o.label }), i === valittu ? _jsx(Icon, { name: "check", className: "select__check" }) : null] }, o.value))) })] }), name ? _jsx("input", { type: "hidden", name: name, value: arvo ?? '' }) : null, 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/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/guidelines/components.md

@@ -11,6 +11,11 @@ Use these instead of building an equivalent.
 - `PageHeader`
 - `Section`
 - `TextField`
+- `Checkbox`
+- `Radio`
+- `Switch`
+- `ChoiceGroup`
+- `Select`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -82,6 +87,47 @@ 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>
+```
+
+`Select` picks one value from a list: same field as `TextField` when closed,
+the system's own list when open. Use it when there are more than about five
+options or the list would crowd the page; with fewer, use `Radio` in a
+`ChoiceGroup` so every option is visible. Pass `options` as
+`{ value, label, disabled? }`, give a `placeholder` when nothing is selected
+yet, and pass `name` to send the value with a form. It follows the WAI-ARIA
+select-only combobox: arrow keys, Home and End, type-ahead and Escape all
+work, so do not build a dropdown from a button and a menu.
+
+```jsx
+<Select
+  label="Role"
+  placeholder="Pick a role"
+  options={[
+    { value: 'developer', label: 'Developer' },
+    { value: 'designer', label: 'Designer' },
+  ]}
+  error="Pick a role to continue."
+/>
+```
+
 ## Patterns
 
 `PageHeader` and `Section` are patterns: they add no look of their own, only

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

package/guidelines/tokens.md

@@ -9,13 +9,14 @@ 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` already applies it, always
+for emphasis, buttons or decoration. `TextField`, `ChoiceGroup` and `Select` 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

@@ -14,6 +14,16 @@ 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 { default as Select } from './Select.js';
+export type { SelectOption, SelectProps } from './Select.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

@@ -8,6 +8,11 @@ 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 { default as Select } from './Select.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.9.0",
+  "version": "2.11.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.9.0"
+    "@pokela/tokens": "^2.11.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/select.css

@@ -0,0 +1,101 @@
+/* Valintalista (Select). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Suljettu kenttä on .field__control (text-field.css): 48 px,
+   hiusviiva, hover paksuntaa alaviivan, virhe ja disabled samoin.
+   Tässä on vain se, mikä selectillä on omaa: nuoli, haalea
+   placeholder ja oma lista (päätös 25).
+
+   Lista on samaa kieltä: musteviiva, rivi --tap-min, rivien välissä
+   hiusviiva. Aktiivinen rivi (hiiri tai nuolinäppäin) saa pinnan
+   --paper-alt, valittu rivi painon 500 ja merkin. */
+
+.select__wrap { position: relative; }
+
+.select__control {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  cursor: pointer;
+  user-select: none;
+  /* Nuoli on rivin sisällä, joten oikea reuna on sama kuin vasen. */
+}
+.select__value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.select__control--placeholder .select__value { color: var(--ink-faint); }
+
+.select__chevron { color: var(--ink); }
+@media (prefers-reduced-motion: no-preference) {
+  .select__chevron { transition: transform var(--dur-fast) var(--ease-standard); }
+}
+.select__control[aria-expanded='true'] .select__chevron { transform: rotate(180deg); }
+
+/* Auki kenttä on musteella, kuten fokus: lista kuuluu siihen. */
+.select__control[aria-expanded='true'] { border-color: var(--ink); }
+.field--invalid .select__control[aria-expanded='true'] { border-color: var(--danger); }
+.select__control:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: var(--focus-offset);
+}
+
+.field--disabled .select__control { cursor: not-allowed; }
+.field--disabled .select__value,
+.field--disabled .select__chevron { color: var(--ink-faint); }
+.field--disabled .select__control {
+  background: var(--paper-alt);
+  border-color: var(--line);
+}
+/* Kenttä on div, joten text-field.css:n :not(:disabled) ei estä
+   hoveria. Estetään se tässä. */
+.field--disabled .select__control:hover { border-bottom-width: var(--hairline); }
+
+/* ---- lista ------------------------------------------------------- */
+
+.select__list {
+  position: absolute;
+  z-index: 10;
+  /* Väli jättää fokusrenkaalle tilaa: rengas on 4 px kentän ulkopuolella. */
+  top: calc(100% + var(--space-8));
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--paper);
+  border: var(--hairline) solid var(--ink);
+  /* Kuusi riviä näkyvissä, loput vierittyvät. */
+  max-height: calc(var(--tap-min) * 6);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.select__list[hidden] { display: none; }
+.select__list--up { top: auto; bottom: calc(100% + var(--space-8)); }
+
+.select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-12);
+  min-height: var(--tap-min);
+  padding: 0 var(--space-16);
+  font-size: var(--text-body);
+  line-height: var(--lh-body);
+  color: var(--ink);
+  cursor: pointer;
+}
+.select__option + .select__option { border-top: var(--hairline) solid var(--line); }
+.select__option.is-active { background: var(--paper-alt); }
+.select__option[aria-selected='true'] { font-weight: var(--weight-500); }
+.select__option[aria-disabled='true'] { color: var(--ink-faint); cursor: not-allowed; }
+.select__check { color: var(--ink); }
+
+/* Korkea kontrasti (Windows): taustaväri katoaa, joten aktiivinen rivi
+   tarvitsee viivan. */
+@media (forced-colors: active) {
+  .select__option.is-active { outline: var(--focus-width) solid Highlight; outline-offset: calc(var(--focus-width) * -1); }
+  .select__option[aria-selected='true'] { forced-color-adjust: none; }
+}

package/styles.css

@@ -9,3 +9,5 @@
 @import './styles/exploded-view.css';
 @import './styles/patterns.css';
 @import './styles/text-field.css';
+@import './styles/choice.css';
+@import './styles/select.css';