@pokela/components 2.9.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/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.9.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
@@ -26,6 +26,10 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `PageHeader`
 - `Section`
 - `TextField`
+- `Checkbox`
+- `Radio`
+- `Switch`
+- `ChoiceGroup`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -62,6 +66,7 @@ import Link from 'next/link';
 - `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/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,10 @@ Use these instead of building an equivalent.
 - `PageHeader`
 - `Section`
 - `TextField`
+- `Checkbox`
+- `Radio`
+- `Switch`
+- `ChoiceGroup`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -82,6 +86,26 @@ 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

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

@@ -14,6 +14,14 @@ 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

@@ -8,6 +8,10 @@ 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.9.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.9.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.css

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