@pokela/components 2.10.0 → 2.12.0

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.10.0.
+React-komponentit: **Pokela Design System**, versio 2.12.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -30,6 +30,7 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Radio`
 - `Switch`
 - `ChoiceGroup`
+- `Select`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -67,6 +68,7 @@ import Link from 'next/link';
 - `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/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/guidelines/components.md

@@ -15,6 +15,7 @@ Use these instead of building an equivalent.
 - `Radio`
 - `Switch`
 - `ChoiceGroup`
+- `Select`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -106,6 +107,27 @@ to a single choice; a single required choice ("accept the terms") is still a
 </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,25 @@ 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.
+
+## Buttons
+
+A button is a class, not a component: `btn` plus `btn--primary`, `btn--ghost`
+or `btn--text`, on a `<button>` or an `<a>`. Use one primary per view. The
+default size needs no class. Use `btn--s` in dense places such as a toolbar
+above a table, and `btn--l` only for the one main action on a page. Text
+buttons have one size. Keep at least `--space-12` between small buttons: each
+one still has a 44 px touch area.
+
+An icon-only button is `btn--icon` with `btn--primary` or `btn--ghost`, never
+`btn--text`. Always give it an `aria-label`, because nothing on screen names it.
+
+```jsx
+<button type="button" className="btn btn--ghost btn--s">Filter</button>
+<button type="button" className="btn btn--primary btn--icon btn--s" aria-label="New project">
+  <Icon name="plus" />
+</button>
+<a href="/contact" className="btn btn--primary btn--l">Get in touch <Icon name="arrow-right" /></a>
+```

package/guidelines/tokens.md

@@ -9,7 +9,7 @@ inversion — `--invert-surface` with `--invert-ink` — or the quiet
 coloured button. Colour on the page comes only from photographs.
 
 The one exception is `--danger`, a state colour for errors only. Do not use it
-for emphasis, buttons or decoration. `TextField` and `ChoiceGroup` already apply 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

package/index.d.ts

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

@@ -12,6 +12,7 @@ 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.10.0",
+  "version": "2.12.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.10.0"
+    "@pokela/tokens": "^2.12.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/base.css

@@ -168,6 +168,39 @@ a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
 .btn--block { width: 100%; }
 @media (min-width: 600px) { .btn--block { width: auto; } }
 
+/* Koot (päätös 26). Oletus on m: 44 px, sama kuin --tap-min. s on
+   tiiviisiin näkymiin (työkalurivi), l sivun ainoaan päätoimintoon.
+   Kieli ei muutu koon mukana: viiva, paino ja käännös ovat samat.
+   Tekstinapilla ei ole kokoja, koska sillä ei ole pintaa. */
+.btn--s {
+  position: relative;
+  min-height: var(--space-32);
+  padding: var(--space-8) var(--space-16);
+}
+/* Näkyvä 32 px, osuma-alue silti --tap-min: näkymätön laajennus ylös
+   ja alas. Siksi s-nappien väli on vähintään --space-12, muuten
+   alueet menevät päällekkäin. Laajennus lasketaan reunaviivan
+   sisäpuolelta (absoluuttinen asemointi alkaa padding-laatikosta),
+   joten viiva vähennetään. */
+.btn--s::after {
+  content: '';
+  position: absolute;
+  inset: calc((var(--space-32) - var(--tap-min)) / 2 - var(--hairline)) calc(var(--hairline) * -1);
+}
+.btn--l {
+  min-height: var(--space-56);
+  padding: var(--space-16) var(--space-32);
+  font-size: var(--text-body);
+}
+
+/* Pelkkä ikoni: neliö, jonka sivu on napin korkeus. Nimi tulee aina
+   aria-labelilla, koska tekstiä ei ole. Vain primary ja ghost. */
+.btn--icon { flex: none; width: var(--tap-min); padding: 0; }
+.btn--icon.btn--s { width: var(--space-32); }
+.btn--icon.btn--s::after { inset: calc((var(--space-32) - var(--tap-min)) / 2 - var(--hairline)); }
+.btn--icon.btn--l { width: var(--space-56); }
+.btn--icon.btn--l .icon { width: var(--icon-l); height: var(--icon-l); }
+
 /* Hover = käännös. Reunaviiva tulee border-colorista, ei varjosta. */
 .btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
 .btn--primary:hover { background: var(--paper); color: var(--ink); }

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

@@ -10,3 +10,4 @@
 @import './styles/patterns.css';
 @import './styles/text-field.css';
 @import './styles/choice.css';
+@import './styles/select.css';