@pokela/components 2.12.0 → 2.14.0

package/Alert.d.ts

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

package/Alert.js

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

package/Icon.d.ts

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

package/Icon.js

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

package/README.md

@@ -1,6 +1,6 @@
 # @pokela/components
 
-React-komponentit: **Pokela Design System**, versio 2.12.0.
+React-komponentit: **Pokela Design System**, versio 2.14.0.
 
 > Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
 > ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
@@ -31,6 +31,9 @@ tyylit saa myös suoraan: `@pokela/components/styles.css`.
 - `Switch`
 - `ChoiceGroup`
 - `Select`
+- `Tabs`
+- `Tab`
+- `Alert`
 - `Grid`
 - `Reveal`
 - `ThemeScript`
@@ -69,6 +72,8 @@ import Link from 'next/link';
 - `styles/text-field.css`
 - `styles/choice.css`
 - `styles/select.css`
+- `styles/tabs.css`
+- `styles/alert.css`
 
 Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
 luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi

package/Tab.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+/**
+ * Yksi välilehti ja sen paneeli. Käytetään vain `Tabs`in lapsena.
+ *
+ * Tab ei piirrä itse mitään: `Tabs` lukee sen propsit ja rakentaa
+ * niistä välilehtirivin ja paneelit, jotta ARIA-kytkennät (id:t,
+ * aria-controls, aria-labelledby) syntyvät yhdessä paikassa. Erillinen
+ * komponentti on silti tarpeen, koska kirjoitettuna se on luettavampi
+ * kuin taulukko, ja Figman Tabs / Tab -instanssi kääntyy tähän.
+ */
+export type TabProps = {
+    /** Tunniste, jolla `Tabs` tietää valitun välilehden. */
+    value: string;
+    /** Välilehden teksti. */
+    label: string;
+    /** Lukumäärä tekstin perässä, esim. avoimet tehtävät. */
+    count?: number;
+    disabled?: boolean;
+    /** Paneelin sisältö. */
+    children?: ReactNode;
+};
+export default function Tab(props: TabProps): import("react/jsx-runtime").JSX.Element;

package/Tab.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export default function Tab(props) {
+    /* Piirretään vain Tabsin kautta. Yksinään paneelin sisältö näkyy
+       sellaisenaan, ettei mitään katoa hiljaa. */
+    return _jsx(_Fragment, { children: props.children });
+}

package/Tabs.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+/**
+ * Välilehdet: rivi välilehtiä ja valitun paneeli.
+ *
+ * Sovelluskomponentti (päätökset 22 ja 28). Ulkoasu on navin
+ * aktiivisen linkin kieli: valittu välilehti saa musteviivan
+ * (--hairline-strong) rivin hiusviivan päälle, muut ovat haaleampia.
+ *
+ * Rakenne WAI-ARIA APG:n Tabs-mallin mukaan, automaattinen aktivointi:
+ *
+ *   rivi      role="tablist", aria-label
+ *   välilehti role="tab", aria-selected, aria-controls. Vain valittu
+ *             on sarkainjärjestyksessä (roving tabindex).
+ *   paneeli   role="tabpanel", aria-labelledby, tabindex=0, jotta
+ *             sarkain vie paneeliin silloinkin, kun siinä ei ole
+ *             fokusoitavaa.
+ *
+ * Näppäimet: vasen ja oikea nuoli siirtävät ja valitsevat (rivin
+ * päästä toiseen), Home ja End vievät päihin. Pois käytöstä olevat
+ * ohitetaan. Paneelit vaihtuvat heti, joten valinta seuraa fokusta.
+ */
+export type TabsProps = {
+    /** Rivin nimi ruudunlukijalle, esim. "Asetukset". Ei näy. */
+    label: string;
+    /** Ohjattu valinta. Käytä `onChange`:n kanssa. */
+    value?: string;
+    /** Alkuvalinta, kun valintaa ei ohjata. Oletus: ensimmäinen käytössä oleva. */
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** `Tab`-elementit. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+};
+export default function Tabs({ label, value: ohjattu, defaultValue, onChange, children, id: annettuId, className }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/Tabs.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useId, useRef, useState } from 'react';
+import Tab from './Tab';
+export default function Tabs({ label, value: ohjattu, defaultValue, onChange, children, id: annettuId, className }) {
+    const omaId = useId();
+    const id = annettuId ?? omaId;
+    const tabId = (i) => `${id}-tab-${i}`;
+    const paneeliId = (i) => `${id}-paneeli-${i}`;
+    const tabit = Children.toArray(children).filter((c) => isValidElement(c) && c.type === Tab);
+    const kaytossa = (i) => i >= 0 && i < tabit.length && !tabit[i].props.disabled;
+    const [oma, setOma] = useState(defaultValue);
+    const pyydetty = ohjattu !== undefined ? ohjattu : oma;
+    let valittu = tabit.findIndex((t) => t.props.value === pyydetty);
+    if (!kaytossa(valittu))
+        valittu = tabit.findIndex((_, i) => kaytossa(i));
+    const napit = useRef([]);
+    const valitse = (i) => {
+        if (!kaytossa(i))
+            return;
+        const uusi = tabit[i].props.value;
+        if (ohjattu === undefined)
+            setOma(uusi);
+        if (i !== valittu)
+            onChange?.(uusi);
+    };
+    /** Seuraava käytössä oleva suuntaan `askel`, rivin päästä toiseen. */
+    const seuraava = (alku, askel) => {
+        const n = tabit.length;
+        for (let k = 1; k <= n; k++) {
+            const i = (((alku + askel * k) % n) + n) % n;
+            if (kaytossa(i))
+                return i;
+        }
+        return alku;
+    };
+    const nappain = (e) => {
+        let kohde = -1;
+        if (e.key === 'ArrowRight')
+            kohde = seuraava(valittu, 1);
+        else if (e.key === 'ArrowLeft')
+            kohde = seuraava(valittu, -1);
+        else if (e.key === 'Home')
+            kohde = seuraava(-1, 1);
+        else if (e.key === 'End')
+            kohde = seuraava(tabit.length, -1);
+        else
+            return;
+        e.preventDefault();
+        valitse(kohde);
+        napit.current[kohde]?.focus();
+    };
+    return (_jsxs("div", { className: ['tabs', className].filter(Boolean).join(' '), children: [_jsx("div", { className: "tabs__list", role: "tablist", "aria-label": label, onKeyDown: nappain, children: tabit.map((t, i) => {
+                    const on = i === valittu;
+                    return (_jsxs("button", { ref: (el) => {
+                            napit.current[i] = el;
+                        }, type: "button", role: "tab", id: tabId(i), className: "tabs__tab", "aria-selected": on, "aria-controls": paneeliId(i), "aria-disabled": t.props.disabled || undefined, tabIndex: on ? 0 : -1, onClick: () => valitse(i), children: [t.props.label, t.props.count !== undefined ? _jsx("span", { className: "tabs__count", children: t.props.count }) : null] }, t.props.value));
+                }) }), tabit.map((t, i) => (_jsx("div", { role: "tabpanel", id: paneeliId(i), className: "tabs__panel", "aria-labelledby": tabId(i), tabIndex: 0, hidden: i !== valittu, children: t.props.children }, t.props.value)))] }));
+}

package/guidelines/components.md

@@ -16,6 +16,9 @@ Use these instead of building an equivalent.
 - `Switch`
 - `ChoiceGroup`
 - `Select`
+- `Tabs`
+- `Tab`
+- `Alert`
 - `Grid`, `Col`
 - `Reveal`
 - `ThemeScript`, `THEME_STORAGE_KEY`
@@ -128,6 +131,35 @@ work, so do not build a dropdown from a button and a menu.
 />
 ```
 
+`Tabs` switches between views of the same thing, such as the sections of a
+settings page. Give it a `label` for screen readers and one `Tab` per view with
+`value`, `label` and the panel as children; `count` adds a number after the
+label and `disabled` keeps a tab visible but unusable. It follows the WAI-ARIA
+tabs pattern: arrow keys move and select, Home and End jump to the ends, and
+Tab moves into the panel. Do not use it for site navigation (that is `Nav`) or
+for a step-by-step flow.
+
+```jsx
+<Tabs label="Settings" defaultValue="team">
+  <Tab value="general" label="General">…</Tab>
+  <Tab value="team" label="Team" count={4}>…</Tab>
+  <Tab value="billing" label="Billing" disabled>…</Tab>
+</Tabs>
+```
+
+`Alert` is an inline message inside the page, next to what it is about: a
+form error summary, a saved confirmation, a billing problem. `tone` is `info`
+(default), `success` or `error`; only `error` is coloured. Give a short
+`title` and the explanation as children; pass `action` for one next step (a
+`btn btn--text` link) and `onDismiss` to show a close button. Use `error` only
+for something that went wrong, never for emphasis. There is no warning tone.
+
+```jsx
+<Alert tone="error" title="Payment failed" action={<a className="btn btn--text" href="/billing">Update card</a>}>
+  The card was declined. Update it to keep the subscription.
+</Alert>
+```
+
 ## Patterns
 
 `PageHeader` and `Section` are patterns: they add no look of their own, only

package/guidelines/styles.md

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

package/guidelines/tokens.md

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

@@ -24,6 +24,12 @@ 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 { default as Tabs } from './Tabs.js';
+export type { TabsProps } from './Tabs.js';
+export { default as Tab } from './Tab.js';
+export type { TabProps } from './Tab.js';
+export { default as Alert } from './Alert.js';
+export type { AlertTone, AlertProps } from './Alert.js';
 export { 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

@@ -13,6 +13,9 @@ 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 { default as Tabs } from './Tabs.js';
+export { default as Tab } from './Tab.js';
+export { default as Alert } from './Alert.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.12.0",
+  "version": "2.14.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.12.0"
+    "@pokela/tokens": "^2.14.0"
   },
   "peerDependencies": {
     "react": ">=18"

package/styles/alert.css

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

package/styles/tabs.css

@@ -0,0 +1,83 @@
+/* Välilehdet (Tabs). Sovelluskomponentti, sivusto ei käytä tätä.
+   ==================================================================
+   Navin aktiivisen linkin kieli (päätös 28): rivi välilehtiä
+   hiusviivan päällä, valittu saa musteviivan --hairline-strong, joka
+   peittää hiusviivan. Valitsematon on --ink-muted ja tummuu hoverissa.
+
+   Välilehdellä on 8 px sivusisennys, jotta fokusrengas mahtuu sen
+   sisään: rivi vierittyy kapealla näytöllä, ja vierittyvä laatikko
+   leikkaisi ulkopuolisen renkaan. Sisennys kumotaan rivin
+   negatiivisella marginaalilla, joten teksti alkaa palstan reunasta.
+   Siksi hiusviiva on taustana eikä reunana: reuna jatkuisi 8 px yli. */
+
+.tabs__list {
+  display: flex;
+  gap: var(--space-16);
+  margin-inline: calc(var(--space-8) * -1);
+  overflow-x: auto;
+  scrollbar-width: none;
+  background: linear-gradient(var(--line), var(--line)) no-repeat var(--space-8) 100% /
+    calc(100% - var(--space-16)) var(--hairline);
+}
+.tabs__list::-webkit-scrollbar { display: none; }
+
+.tabs__tab {
+  position: relative;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8);
+  min-height: var(--tap-min);
+  padding: 0 var(--space-8);
+  margin: 0;
+  background: none;
+  border: 0;
+  font-family: var(--font-ui);
+  font-size: var(--text-body-s);
+  font-weight: var(--weight-500);
+  line-height: 1;
+  color: var(--ink-muted);
+  white-space: nowrap;
+  cursor: pointer;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .tabs__tab { transition: color var(--dur-fast) var(--ease-standard); }
+}
+.tabs__tab::after {
+  content: '';
+  position: absolute;
+  left: var(--space-8);
+  right: var(--space-8);
+  bottom: 0;
+  height: var(--hairline-strong);
+}
+.tabs__tab:hover { color: var(--ink); }
+.tabs__tab[aria-selected='true'] { color: var(--ink); }
+.tabs__tab[aria-selected='true']::after { background: var(--ink); }
+.tabs__tab:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: calc(var(--focus-width) * -1);
+}
+.tabs__tab[aria-disabled='true'] { color: var(--ink-faint); cursor: not-allowed; }
+
+.tabs__count {
+  font-size: var(--text-meta-s);
+  font-weight: var(--weight-600);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-faint);
+}
+.tabs__tab[aria-selected='true'] .tabs__count { color: var(--ink-muted); }
+
+.tabs__panel { padding-top: var(--space-24); }
+.tabs__panel:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: var(--focus-offset);
+}
+
+/* Korkean kontrastin tilassa taustat katoavat: valinnan viiva
+   piirretään järjestelmän värillä. */
+@media (forced-colors: active) {
+  .tabs__tab::after { forced-color-adjust: none; }
+  .tabs__tab[aria-selected='true']::after { background: Highlight; }
+  .tabs__tab[aria-disabled='true'] { color: GrayText; }
+}

package/styles.css

@@ -11,3 +11,5 @@
 @import './styles/text-field.css';
 @import './styles/choice.css';
 @import './styles/select.css';
+@import './styles/tabs.css';
+@import './styles/alert.css';