@pokela/components 0.0.0-stage → 1.2.0

package/Accordion.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from 'react';
+/**
+ * Avautuva rivi.
+ *
+ * Vain yksi kerrallaan auki — siitä huolehtii <AccordionGroup>.
+ *
+ * Rivi itse EI ole listarivin sukulainen vaan sama rivi: se käyttää
+ * `.list-row`-runkoa modifioijalla `--expandable`. Ero on siinä että
+ * tämä on <button> eikä linkki, ja siksi se on oma komponenttinsa —
+ * avaustila, paneeli ja ryhmälogiikka eivät kuulu linkkiin.
+ *
+ * Toteutus on <button> + region, ei <details>, koska "vain yksi auki"
+ * vaatii jaetun tilan ja koska avautuva sisältö sisältää otsikoita
+ * joiden pitää pysyä dokumentin rakenteessa.
+ */
+export type AccordionProps = {
+    number: string;
+    title: string;
+    description: string;
+    meta: string;
+    children: ReactNode;
+    open: boolean;
+    onToggle: () => void;
+    labels: {
+        open: string;
+        close: string;
+    };
+};
+export declare function Accordion({ number, title, description, meta, children, open, onToggle, labels, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+/** Pitää huolen että vain yksi rivi on auki kerrallaan. */
+export declare function useAccordionGroup(): {
+    isOpen: (slug: string) => boolean;
+    toggle: (slug: string) => void;
+};

package/Accordion.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import Icon from './Icon';
+export function Accordion({ number, title, description, meta, children, open, onToggle, labels, }) {
+    const id = useId();
+    return (_jsxs("div", { className: "accordion", children: [_jsxs("button", { type: "button", className: "list-row list-row--numbered list-row--expandable bleed", "aria-expanded": open, "aria-controls": id, onClick: onToggle, children: [_jsx("span", { className: "meta list-row__number", children: number }), _jsxs("span", { className: "list-row__main", children: [_jsx("span", { className: "list-row__title", children: title }), _jsx("span", { className: "list-row__description", children: description })] }), _jsx("span", { className: "meta list-row__meta", children: meta }), _jsx(Icon, { name: open ? 'minus' : 'plus', size: "l", className: "list-row__icon" }), _jsx("span", { className: "visually-hidden", children: open ? labels.close : labels.open })] }), open ? (_jsx("div", { id: id, className: "accordion__panel page", role: "region", "aria-label": title, children: children })) : null] }));
+}
+/** Pitää huolen että vain yksi rivi on auki kerrallaan. */
+export function useAccordionGroup() {
+    const [openSlug, setOpenSlug] = useState(null);
+    return {
+        isOpen: (slug) => openSlug === slug,
+        toggle: (slug) => setOpenSlug((current) => (current === slug ? null : slug)),
+    };
+}

package/Grid.d.ts

@@ -0,0 +1,35 @@
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+/**
+ * 12-sarakkeinen grid (4 → 8 → 12).
+ *
+ * Sarakemäärä tulee tokenista `--columns`, joten komponentti ei tiedä
+ * breakpointeista mitään. Sijoittelu annetaan sarakkeina, ei pikseleinä:
+ *
+ *   <Col base={4} md={7}>          → koko leveys mobiilissa, 7/12 työpöydällä
+ *   <Col base={4} md={4} startMd={9}>  → sarakkeet 9–12
+ */
+type GridProps = {
+    children: ReactNode;
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Grid({ children, as: Tag, className, style }: GridProps): import("react/jsx-runtime").JSX.Element;
+type ColProps = {
+    children: ReactNode;
+    /** Sarakkeita 0–599px (max 4). Oletus: koko leveys. */
+    base?: number;
+    /** Sarakkeita 600–899px (max 8). Oletus: base skaalattuna. */
+    sm?: number;
+    /** Sarakkeita ≥900px (max 12). Oletus: sm. */
+    md?: number;
+    /** Aloitussarake ≥600px. */
+    startSm?: number;
+    /** Aloitussarake ≥900px. */
+    startMd?: number;
+    as?: ElementType;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function Col({ children, base, sm, md, startSm, startMd, as: Tag, className, style, }: ColProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/Grid.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Grid({ children, as: Tag = 'div', className, style }) {
+    return (_jsx(Tag, { className: ['grid', className].filter(Boolean).join(' '), style: style, children: children }));
+}
+export function Col({ children, base = 4, sm, md, startSm, startMd, as: Tag = 'div', className, style, }) {
+    const spanSm = sm ?? Math.min(8, base * 2);
+    const spanMd = md ?? Math.min(12, spanSm);
+    const vars = {
+        '--span-base': base,
+        '--span-sm': spanSm,
+        '--span-md': spanMd,
+        ...(startSm ? { '--start-sm': startSm } : {}),
+        ...(startMd ? { '--start-md': startMd } : {}),
+        ...style,
+    };
+    return (_jsx(Tag, { className: ['col', className].filter(Boolean).join(' '), style: vars, children: children }));
+}

package/Icon.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Ikoni.
+ *
+ * Systeemi ei käytä ikonikirjastoa — se piirtää omat merkkinsä. Syy on
+ * sama kuin kaikessa muussakin täällä: merkin pitää olla samaa kieltä
+ * kuin viiva, väli ja typografia, eikä kolmannen osapuolen piirtäjän
+ * tulkinta siitä. Käytännön syy tuli kaupan päälle: `↗` ja `✕` olivat
+ * ennen tekstimerkkejä, ja ne riippuivat siitä mitä Google Fontsin
+ * osajoukossa sattui olemaan. Figmassa nuolta ei löytynyt Archivosta
+ * lainkaan.
+ *
+ * Piirtosäännöt:
+ *   ruudukko    16 × 16, kaikki geometria puolikkaalla pikselillä
+ *   viiva       --hairline, sama kuin jokainen reuna systeemissä
+ *   päätteet    tylpät, kulmat terävät — --radius on 0
+ *   väri        currentColor, ei koskaan omaa väriä
+ *
+ * Koot ovat tokeneita: --icon-s (12) tekstin seassa metan kanssa,
+ * --icon-m (16) napin sisällä, --icon-l (24) omana painikkeenaan.
+ *
+ * Nuoli on kahta lajia eikä yhtä: `arrow-right` vie sivustolla eteen-
+ * päin, `arrow-up-right` ulos. Ero on lukijalle sama kuin
+ * target="_blank" ruudunlukijalle.
+ */
+export type IconName = 'arrow-right' | 'arrow-up-right' | 'plus' | 'minus' | 'close' | 'menu';
+export type IconSize = 's' | 'm' | 'l';
+export type IconProps = {
+    name: IconName;
+    size?: IconSize;
+    /** Nimi ruudunlukijalle. Ilman tätä ikoni on koriste (aria-hidden). */
+    label?: string;
+    className?: string;
+};
+export default function Icon({ name, size, label, className }: IconProps): import("react/jsx-runtime").JSX.Element;
+/** Ikonien nimet järjestyksessä — dokumentaatiosivut lukevat tästä. */
+export declare const ICON_NAMES: IconName[];

package/Icon.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* Polut 16×16-ruudukolla. Yksi merkki = yksi taulukollinen `d`-polkuja,
+   jotta jokainen viiva saa saman hiusviivan eikä täyttöä tarvita. */
+const PATHS = {
+    'arrow-right': ['M2.5 8.5 H13.5', 'M9.5 4.5 L13.5 8.5 L9.5 12.5'],
+    'arrow-up-right': ['M3.5 12.5 L12.5 3.5', 'M5.5 3.5 H12.5 V10.5'],
+    plus: ['M8.5 2.5 V14.5', 'M2.5 8.5 H14.5'],
+    minus: ['M2.5 8.5 H14.5'],
+    close: ['M3.5 3.5 L12.5 12.5', 'M12.5 3.5 L3.5 12.5'],
+    menu: ['M1 5.5 H15', 'M1 10.5 H15'],
+};
+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))) }));
+}
+/** Ikonien nimet järjestyksessä — dokumentaatiosivut lukevat tästä. */
+export const ICON_NAMES = Object.keys(PATHS);

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Veli-Matti Pokela
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/ListRow.d.ts

@@ -0,0 +1,47 @@
+import type { ElementType } from 'react';
+export type ListRowProps = {
+    /** Työn nimi. */
+    title: string;
+    /** Järjestysnumero vasempaan laitaan. Valinnainen. */
+    number?: string;
+    /** Yhden lauseen kuvaus. Valinnainen. */
+    description?: string;
+    /** Rooli tai vuosi, oikeaan laitaan metana. Valinnainen. */
+    meta?: string;
+    /** `m` on isompi otsikko ja väljempi rytmi — työlistan kärkirivit. */
+    size?: 's' | 'm';
+    href: string;
+    /** Lisäluokka, esim. `invert` kun tila näytetään staattisena. */
+    className?: string;
+    /**
+     * Linkkikomponentti. Oletus on tavallinen `<a>`, jotta komponentti ei
+     * ole sidottu mihinkään reititykseen — se on ehto sille että tämä voi
+     * elää npm-paketissa. Next.js-sovellus antaa tähän `next/link`:n ja
+     * saa reitityksen takaisin.
+     */
+    as?: ElementType;
+};
+/**
+ * Listarivi — sivuston tunnuskomponentti.
+ *
+ * Yksi rivi, kolme käyttöä. Sivustolla oli pitkään kolme lähes
+ * samanlaista riviä: etusivun listarivi, työlistan kärkirivi ja
+ * aiemman työn avautuva rivi. Niillä oli sama viiva, sama käännös ja
+ * sama sisältö mutta kolme eri toteutusta, jotka ehtivät jo ajautua
+ * erilleen. Nyt runko on yksi ja erot ovat modifioijia.
+ *
+ * Avautuva rivi on <Accordion>: se on <button> eikä linkki, joten se
+ * ei mahdu tähän propsiksi ilman että komponentista tulee kaksi
+ * komponenttia yhdessä. Se käyttää samaa `.list-row`-runkoa.
+ *
+ * Hover kääntää pinnan mustaksi. Logiikka on kokonaan CSS:ssä
+ * (styles/components/list-row.css), joten komponentti ei tiedä
+ * tiloista mitään.
+ *
+ * `.bleed` hoitaa vaakapaddingin, jotta rivi ulottuu reunaan mutta
+ * teksti pysyy .page:n linjassa.
+ *
+ * Linkki tulee `as`-propsina eikä tuontina. Siksi komponentti ei tiedä
+ * Next.js:stä mitään ja kelpaa sellaisenaan mihin tahansa projektiin.
+ */
+export default function ListRow({ title, number, description, meta, size, href, className, as: Link, }: ListRowProps): import("react/jsx-runtime").JSX.Element;

package/ListRow.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Listarivi — sivuston tunnuskomponentti.
+ *
+ * Yksi rivi, kolme käyttöä. Sivustolla oli pitkään kolme lähes
+ * samanlaista riviä: etusivun listarivi, työlistan kärkirivi ja
+ * aiemman työn avautuva rivi. Niillä oli sama viiva, sama käännös ja
+ * sama sisältö mutta kolme eri toteutusta, jotka ehtivät jo ajautua
+ * erilleen. Nyt runko on yksi ja erot ovat modifioijia.
+ *
+ * Avautuva rivi on <Accordion>: se on <button> eikä linkki, joten se
+ * ei mahdu tähän propsiksi ilman että komponentista tulee kaksi
+ * komponenttia yhdessä. Se käyttää samaa `.list-row`-runkoa.
+ *
+ * Hover kääntää pinnan mustaksi. Logiikka on kokonaan CSS:ssä
+ * (styles/components/list-row.css), joten komponentti ei tiedä
+ * tiloista mitään.
+ *
+ * `.bleed` hoitaa vaakapaddingin, jotta rivi ulottuu reunaan mutta
+ * teksti pysyy .page:n linjassa.
+ *
+ * Linkki tulee `as`-propsina eikä tuontina. Siksi komponentti ei tiedä
+ * Next.js:stä mitään ja kelpaa sellaisenaan mihin tahansa projektiin.
+ */
+export default function ListRow({ title, number, description, meta, size = 's', href, className, as: Link = 'a', }) {
+    return (_jsxs(Link, { href: href, className: [
+            'list-row bleed',
+            number ? 'list-row--numbered' : null,
+            size === 'm' ? 'list-row--m' : null,
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [number ? _jsx("span", { className: "meta list-row__number", children: number }) : null, _jsxs("span", { className: "list-row__main", children: [_jsx("span", { className: "list-row__title", children: title }), description ? _jsx("span", { className: "list-row__description", children: description }) : null] }), meta ? _jsx("span", { className: "meta list-row__meta", children: meta }) : null] }));
+}

package/README.md

@@ -1,3 +1,60 @@
-# Temporary Holding Version
+# @pokela/components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React-komponentit: **Pokela Design System**, versio 1.2.0.
+
+> Generoitu hakemistosta `components/` — samoista tiedostoista joita sivusto
+> ajaa. Älä muokkaa käsin: muutokset tehdään lähteeseen ja paketti
+> rakennetaan uudelleen komennolla `npm run paketti`.
+
+## Käyttö
+
+```js
+import { ListRow, Icon, Accordion, Grid, Col, Reveal } from '@pokela/components';
+import '@pokela/components/styles.css';
+```
+
+`styles.css` tuo myös `@pokela/tokens`:n muuttujat, joten erillistä tuontia ei
+tarvita.
+
+## Komponentit
+
+- `Icon`
+- `ListRow`
+- `Accordion`
+- `Grid`
+- `Reveal`
+- `ThemeScript`
+- `ThemeToggle`
+
+### Linkit
+
+`ListRow` ei ole sidottu mihinkään reititykseen. Oletuksena se renderöi
+tavallisen `<a>`:n; Next.js-sovellus antaa oman linkkinsä propsina:
+
+```jsx
+import Link from 'next/link';
+
+<ListRow as={Link} title="Työn nimi" href="/tyot/esimerkki" />
+```
+
+## Mitä paketissa EI ole
+
+- **Media, LogoRow, CaseText, CaseBlock, CaseBlocks, CaseBlockDerived, ListRowShowcase** — lukevat sivuston omaa sisältöä (`@/content`, `@/lib`)
+- **Nav, Footer** — tarvitsevat sivuston sanakirjan ja reitityksen
+- **BeforeAfter** — rakentuu Median varaan, ja Media lukee kuvamanifestia
+- **ComponentView, PrintCv** — ovat riippumattomia mutta sivuston ominaisuuksia — lähdekoodinäkymä ja CV:n tulostusasu — eivät design systemin osia
+
+## Tyylit
+
+- `styles/base.css`
+- `styles/icon.css`
+- `styles/list-row.css`
+- `styles/accordion.css`
+
+Luokat ovat globaaleja, eivät CSS-moduuleja. Se on tarkoituksellista: sama
+luokka on myös Figmassa komponentin nimenä, ja hajautettu nimi katkaisisi
+yhteyden.
+
+## Lisenssi
+
+MIT. Koskee tätä pakettia, ei sitä repoa josta se on generoitu.

package/Reveal.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+/**
+ * Reveal: 12px nousu + häivytys kerran, kun lohko tulee näkyviin.
+ *
+ * prefers-reduced-motion hoidetaan CSS:ssä (.reveal-säännöt ovat
+ * no-preference-median sisällä), joten tämä ei tarvitse omaa
+ * haaraa — luokka vain ei tee mitään jos liikettä ei haluta.
+ */
+export default function Reveal({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/Reveal.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+/**
+ * Reveal: 12px nousu + häivytys kerran, kun lohko tulee näkyviin.
+ *
+ * prefers-reduced-motion hoidetaan CSS:ssä (.reveal-säännöt ovat
+ * no-preference-median sisällä), joten tämä ei tarvitse omaa
+ * haaraa — luokka vain ei tee mitään jos liikettä ei haluta.
+ */
+export default function Reveal({ children }) {
+    const ref = useRef(null);
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        const node = ref.current;
+        if (!node || shown)
+            return;
+        if (!('IntersectionObserver' in window)) {
+            setShown(true);
+            return;
+        }
+        const io = new IntersectionObserver(([entry]) => {
+            if (entry.isIntersecting) {
+                setShown(true);
+                io.disconnect();
+            }
+        }, { rootMargin: '0px 0px -10% 0px' });
+        io.observe(node);
+        return () => io.disconnect();
+    }, [shown]);
+    return (_jsx("div", { ref: ref, className: shown ? 'reveal is-in' : 'reveal', children: children }));
+}

package/ThemeScript.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Teeman palautus ennen ensimmäistä maalausta.
+ *
+ * Ilman tätä sivu välähtäisi vaaleana ennen kuin tallennettu tumma
+ * teema ehtii päälle. Skripti on tarkoituksella pieni ja synkroninen,
+ * ja se ajetaan <head>issä ennen tyylejä.
+ *
+ * Ilman tallennettua valintaa data-themeä ei aseteta lainkaan, jolloin
+ * tokens.css:n `color-scheme: light dark` seuraa käyttöjärjestelmää.
+ */
+export declare const THEME_STORAGE_KEY = "pokela-theme";
+export default function ThemeScript(): import("react/jsx-runtime").JSX.Element;

package/ThemeScript.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Teeman palautus ennen ensimmäistä maalausta.
+ *
+ * Ilman tätä sivu välähtäisi vaaleana ennen kuin tallennettu tumma
+ * teema ehtii päälle. Skripti on tarkoituksella pieni ja synkroninen,
+ * ja se ajetaan <head>issä ennen tyylejä.
+ *
+ * Ilman tallennettua valintaa data-themeä ei aseteta lainkaan, jolloin
+ * tokens.css:n `color-scheme: light dark` seuraa käyttöjärjestelmää.
+ */
+export const THEME_STORAGE_KEY = 'pokela-theme';
+const script = `(function(){try{var t=localStorage.getItem(${JSON.stringify(THEME_STORAGE_KEY)});if(t==='light'||t==='dark'){document.documentElement.setAttribute('data-theme',t)}}catch(e){}})()`;
+export default function ThemeScript() {
+    return _jsx("script", { dangerouslySetInnerHTML: { __html: script } });
+}

package/ThemeToggle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Teemanvaihto tekstinappina — ei ikonia, ei väriä.
+ * Kierto: järjestelmä → vaalea → tumma → järjestelmä.
+ *
+ * `data-theme` puuttuu kun valinta on "järjestelmä", jolloin
+ * tokens.css:n light-dark() seuraa prefers-color-schemeä.
+ */
+export default function ThemeToggle({ labels, }: {
+    labels: {
+        theme: string;
+        light: string;
+        dark: string;
+        system: string;
+    };
+}): import("react/jsx-runtime").JSX.Element;

package/ThemeToggle.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { THEME_STORAGE_KEY } from './ThemeScript';
+/**
+ * Teemanvaihto tekstinappina — ei ikonia, ei väriä.
+ * Kierto: järjestelmä → vaalea → tumma → järjestelmä.
+ *
+ * `data-theme` puuttuu kun valinta on "järjestelmä", jolloin
+ * tokens.css:n light-dark() seuraa prefers-color-schemeä.
+ */
+export default function ThemeToggle({ labels, }) {
+    const [theme, setTheme] = useState('system');
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+        try {
+            const stored = localStorage.getItem(THEME_STORAGE_KEY);
+            if (stored === 'light' || stored === 'dark')
+                setTheme(stored);
+        }
+        catch {
+            /* private mode — pidetään järjestelmän teema */
+        }
+    }, []);
+    function apply(next) {
+        setTheme(next);
+        const root = document.documentElement;
+        if (next === 'system')
+            root.removeAttribute('data-theme');
+        else
+            root.setAttribute('data-theme', next);
+        try {
+            if (next === 'system')
+                localStorage.removeItem(THEME_STORAGE_KEY);
+            else
+                localStorage.setItem(THEME_STORAGE_KEY, next);
+        }
+        catch {
+            /* valinta jää tälle sivulataukselle */
+        }
+    }
+    const order = ['system', 'light', 'dark'];
+    const label = { system: labels.system, light: labels.light, dark: labels.dark }[theme];
+    return (_jsx("button", { type: "button", className: "meta meta--s toggle", onClick: () => apply(order[(order.indexOf(theme) + 1) % order.length]), "aria-label": `${labels.theme}: ${label}`, 
+        /* Ennen hydraatiota näytetään neutraali merkintä, jottei
+           palvelimen ja selaimen tila eroa toisistaan. */
+        suppressHydrationWarning: true, children: mounted ? label : labels.theme }));
+}

package/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Icon, ICON_NAMES } from './Icon.js';
+export type { IconName, IconSize, IconProps } from './Icon.js';
+export { default as ListRow } from './ListRow.js';
+export type { ListRowProps } from './ListRow.js';
+export { Accordion, useAccordionGroup } from './Accordion.js';
+export type { AccordionProps } from './Accordion.js';
+export { Grid, Col } from './Grid.js';
+export { default as Reveal } from './Reveal.js';
+export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';
+export { default as ThemeToggle } from './ThemeToggle.js';

package/index.js

@@ -0,0 +1,8 @@
+/* @pokela/components — kokooma. Generoitu, ks. scripts/paketti-komponentit.mjs. */
+export { default as Icon, ICON_NAMES } from './Icon.js';
+export { default as ListRow } from './ListRow.js';
+export { Accordion, useAccordionGroup } from './Accordion.js';
+export { Grid, Col } from './Grid.js';
+export { default as Reveal } from './Reveal.js';
+export { default as ThemeScript, THEME_STORAGE_KEY } from './ThemeScript.js';
+export { default as ThemeToggle } from './ThemeToggle.js';

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@pokela/components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.2.0",
+  "description": "React-komponentit: Pokela Design System. Generoitu tiedostoista components/, ei käsin ylläpidetty.",
+  "license": "MIT",
+  "author": "Veli-Matti Pokela",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./styles.css": "./styles.css",
+    "./styles/*": "./styles/*"
+  },
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "styles.css",
+    "styles/",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@pokela/tokens": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VeliMattiPokela/pokela.fi.git",
+    "directory": "packages/components"
+  }
+}

package/styles/accordion.css

@@ -0,0 +1,41 @@
+/* Avautuva rivi (haitari). Runko on listarivi, tässä on paneeli. */
+
+/* Viivat tulevat rivistä (.list-row), ei käärestä — muuten
+   yläviivoja olisi kaksi päällekkäin. Sulkeva viiva on
+   list-row.css:ssä sääntönä `.list-rows > *:last-child > .list-row`. */
+
+/* Rivin ulkoasu tulee list-row.css:stä (.list-row--expandable).
+   Täällä on vain se mikä on tälle komponentille omaa: paneeli ja
+   sen sisältö. */
+
+.accordion__panel { padding-block: var(--space-40) var(--space-56); }
+
+/* ---- avautuva sisältö ------------------------------------------- */
+
+.detail { display: flex; flex-direction: column; gap: var(--space-56); }
+
+.detail__head { display: flex; flex-direction: column; gap: var(--space-20); }
+.detail__intro { color: var(--ink-muted); }
+
+.detail__role { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
+@media (min-width: 900px) { .detail__role { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-40); } }
+.detail__role-col { display: flex; flex-direction: column; gap: var(--space-12); }
+.detail__role-title { margin: 0; font-size: var(--text-body-l); }
+.detail__role-note { color: var(--ink-faint); margin: 0; }
+
+.detail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-8); }
+.detail__list li { font-size: var(--text-body-s); line-height: var(--lh-body-s); padding-left: var(--space-16); position: relative; }
+.detail__list li::before { content: '—'; position: absolute; left: 0; color: var(--ink-faint); }
+.detail__list--muted li { color: var(--ink-muted); }
+
+.detail__sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
+@media (min-width: 900px) { .detail__sections { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-40); } }
+.detail__sections-body { display: flex; flex-direction: column; }
+.detail__section { padding-block: var(--space-24); border-top: var(--hairline) solid var(--line); }
+.detail__section:first-child { border-top: 0; padding-top: 0; }
+.detail__section-title { margin: 0 0 var(--space-8); font-size: var(--text-body-l); font-weight: var(--weight-500); }
+.detail__section-body { margin: 0; color: var(--ink-muted); }
+
+.detail__media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-24); }
+@media (min-width: 900px) { .detail__media { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+.detail__media > .compare { grid-column: 1 / -1; }

package/styles/base.css

@@ -0,0 +1,308 @@
+/* Pokela — layout-primitiivit
+   ------------------------------------------------------------------
+   Ei uusia värejä eikä kokoja: kaikki arvot tulevat tokens.css:stä.
+   Jokaisella tämän tiedoston luokalla on vastine Storybookissa.
+*/
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-ui);
+  font-size: var(--text-body);
+  line-height: var(--lh-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+
+  /* Bodoni Modasta on ladattu vain leikkaukset 400 ja 500. Jos jokin
+     pyytää lihavaa — esimerkiksi selaimen oletustyyli <h1>–<h6>:lle —
+     selain venyttäisi 400:n paksummaksi. Didonessa se tuhoaa juuri
+     sen mikä tekee siitä didonen: hiusviivojen ja tolppien
+     kontrastin. Kursiivin synteesi jätetään päälle, koska
+     koodilohkojen kommentit nojaavat siihen. */
+  font-synthesis-weight: none;
+}
+
+img, svg, video { display: block; max-width: 100%; }
+
+/* Focus: 2px musteviiva 2px offsetilla. Yksi sääntö, koko sivustolle. */
+:focus-visible {
+  outline: var(--focus-width) solid var(--ink);
+  outline-offset: var(--focus-offset);
+}
+/* Käännetyllä pinnalla focus kääntyy mukana. */
+.invert :focus-visible { outline-color: var(--invert-ink); }
+
+/* ---- typografia ---------------------------------------------------- */
+
+.display-xl, .display-l, .display-m, .display-s {
+  font-family: var(--font-display);
+  font-weight: var(--weight-400);
+  margin: 0;
+  text-wrap: balance;
+}
+.display-xl { font-size: var(--text-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); }
+.display-l  { font-size: var(--text-display-l);  line-height: var(--lh-display-l);  letter-spacing: var(--tr-display-l); }
+.display-m  { font-size: var(--text-display-m);  line-height: var(--lh-display-m);  letter-spacing: var(--tr-display-m); }
+.display-s  { font-size: var(--text-display-s);  line-height: var(--lh-display-s);  letter-spacing: var(--tr-display-s); }
+
+.body-l { font-size: var(--text-body-l); line-height: var(--lh-body-l); margin: 0; }
+.body-s { font-size: var(--text-body-s); line-height: var(--lh-body-s); margin: 0; }
+
+/* Leipätekstin mitta. Ei koskaan yli 62 merkkiä. */
+.measure { max-width: var(--measure); }
+
+.meta {
+  /* Nollaus, koska .meta osuu myös <p>- ja <h2>-elementteihin. Ilman
+     tätä selaimen oletusmarginaali (1em = 11px) livahti mukaan
+     paikkoihin joissa väli tulee vanhemman gapista. */
+  margin: 0;
+  font-family: var(--font-ui);
+  font-size: var(--text-meta);
+  line-height: var(--lh-meta);
+  font-weight: var(--weight-600);
+  letter-spacing: var(--tr-meta);
+  text-transform: uppercase;
+  color: var(--ink-faint);
+}
+.meta--s { font-size: var(--text-meta-s); line-height: var(--lh-meta-s); letter-spacing: var(--tr-meta-s); }
+.meta--ink { color: var(--ink); }
+
+a { color: inherit; text-decoration: none; }
+a:hover { text-decoration: underline; text-underline-offset: var(--space-4); }
+
+/* ---- sivu ja grid -------------------------------------------------- */
+
+.page {
+  max-width: var(--max-width);
+  margin-inline: auto;
+  padding-inline: var(--page-padding);
+}
+
+/* Täysleveä kaista joka hoitaa oman sivupaddinginsa.
+   Käytetään listariveille ja käännetyille palkeille — ne ulottuvat
+   reunaan, mutta sisältö pysyy samassa linjassa .page:n kanssa. */
+.bleed {
+  width: 100%;
+  padding-inline: max(var(--page-padding), calc((100% - var(--max-width)) / 2 + var(--page-padding)));
+}
+
+.section { margin-block: var(--section-gap); }
+
+/* 12-sarakkeinen grid: 4 → 8 → 12. Sarakemäärä tulee tokenista,
+   joten yksikään komponentti ei tiedä breakpointeista mitään. */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  column-gap: var(--gutter);
+  row-gap: var(--space-32);
+}
+
+/* Col: leveys ja aloitussarake per breakpoint.
+   Arvot annetaan custom-propertyinä (--span-base / --span-sm / --span-md),
+   jolloin JSX kertoo sijoittelun ja CSS vain toteuttaa sen. */
+.col { grid-column: span var(--span-base) / span var(--span-base); }
+@media (min-width: 600px) {
+  .col { grid-column: var(--start-sm, auto) / span var(--span-sm); }
+}
+@media (min-width: 900px) {
+  .col { grid-column: var(--start-md, auto) / span var(--span-md); }
+}
+
+.rule { border: 0; border-top: var(--hairline) solid var(--line); margin: 0; }
+.rule--strong { border-top-color: var(--line-strong); }
+
+/* Käännetty pinta. Ainoa tehoväline — ei värejä, ei varjoja. */
+.invert {
+  background: var(--invert-surface);
+  color: var(--invert-ink);
+}
+.invert .meta { color: var(--invert-faint); }
+
+/* ---- napit --------------------------------------------------------- */
+
+.btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: var(--space-8);
+  font-family: var(--font-ui);
+  font-size: var(--text-body-s);
+  font-weight: var(--weight-500);
+  line-height: 1;
+  min-height: var(--tap-min);
+  padding: var(--space-12) var(--space-24);
+  border-radius: var(--radius);
+  border: var(--hairline) solid transparent;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  transition:
+    background var(--dur-fast) var(--ease-standard),
+    border-color var(--dur-fast) var(--ease-standard),
+    color var(--dur-fast) var(--ease-standard);
+}
+.btn:hover { text-decoration: none; }
+
+/* Mobiilissa päätoiminto on täysleveä, 600px:stä sisällön mukainen. */
+.btn--block { width: 100%; }
+@media (min-width: 600px) { .btn--block { width: auto; } }
+
+/* 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); }
+
+.btn--ghost { border-color: var(--ink); color: var(--ink); }
+.btn--ghost:hover { background: var(--ink); color: var(--paper); }
+
+.btn--text {
+  min-height: 0;
+  padding: 0 0 var(--space-8);
+  border: 0;
+  border-bottom: var(--hairline) solid currentColor;
+}
+
+/* Hiljainen kytkin: teemanvaihto ja vastaavat. Ei .btn-perheen jäsen —
+   typografia tulee .meta:sta ja nappimaisuus riisutaan kokonaan, joten
+   se ei kilpaile sivun oikeiden toimintojen kanssa. Kosketusalue on
+   silti täysi: padding kasvattaa sen ja yhtä suuri negatiivinen margin
+   kumoaa vaikutuksen taittoon.
+
+   Ei ollut navigaatiokohtainen, vaikka asui aiemmin nav.css:ssä nimellä
+   .nav__toggle. Nimi esti ThemeTogglen viennin komponenttipakettiin,
+   koska komponentti olisi tarvinnut Navin tyylit. */
+.toggle {
+  background: none;
+  border: 0;
+  padding: var(--space-12);
+  margin: calc(var(--space-12) * -1);
+  min-width: var(--tap-min);
+  min-height: var(--tap-min);
+  cursor: pointer;
+  transition: color var(--dur-fast) var(--ease-standard);
+}
+.toggle:hover { color: var(--ink); }
+
+/* Tekstinapilla ei ole pintaa jota kääntää, joten hover on sama liike
+   kuin .case-linkillä: viiva paksunee. Padding kevenee saman verran
+   kuin viiva kasvaa, jotta napin korkeus ei muutu eikä ympärillä oleva
+   teksti nytkähdä osoittimen alla. */
+.btn--text:hover {
+  border-bottom-width: var(--hairline-strong);
+  padding-bottom: calc(var(--space-8) - (var(--hairline-strong) - var(--hairline)));
+}
+
+.btn[disabled], .btn[aria-disabled='true'] {
+  color: var(--ink-faint);
+  border-color: var(--line);
+  background: none;
+  cursor: not-allowed;
+}
+
+/* Kosketuslaitteella hoveria ei ole — käännös tulee :active-tilassa.
+   Tämä lohko on viimeisenä, joten se voittaa hover-säännöt. */
+@media (hover: none) {
+  .btn--primary:hover { background: var(--ink); color: var(--paper); }
+  .btn--ghost:hover { background: none; color: var(--ink); }
+  .btn--text:hover {
+    border-bottom-width: var(--hairline);
+    padding-bottom: var(--space-8);
+  }
+
+  .btn--primary:active { background: var(--paper); color: var(--ink); }
+  .btn--ghost:active { background: var(--ink); color: var(--paper); }
+  .btn--text:active {
+    border-bottom-width: var(--hairline-strong);
+    padding-bottom: calc(var(--space-8) - (var(--hairline-strong) - var(--hairline)));
+  }
+}
+
+/* ---- media (kuvapaikka) ----------------------------------------------------- */
+
+.media {
+  position: relative;
+  background: repeating-linear-gradient(
+    135deg,
+    var(--placeholder-base) 0 12px,
+    var(--placeholder-stripe) 12px 24px
+  );
+  display: flex;
+  align-items: flex-end;
+  padding: var(--space-16);
+}
+@media (min-width: 600px) { .media { padding: var(--space-24); } }
+
+/* Kun paikassa on kuva, raidoitus ja sisennys eivät ole tarpeen:
+   kuva täyttää laatikon reunasta reunaan. Sama .media-luokka säilyy,
+   jotta kuvasuhde tulee samasta paikasta kummassakin tilassa eikä
+   layout liiku kun kuva ilmestyy. */
+.media--kuva {
+  display: block;
+  padding: 0;
+  background: var(--placeholder-base);
+  overflow: hidden;
+}
+
+/* Kuvasuhteet: mobiilissa pystympi, työpöydällä editoriaalinen.
+   21:9 hero on mobiilissa 4:5 — muuten kuvasta ei näe mitään. */
+.media-hero     { aspect-ratio: 4 / 5; }
+.media-4-3      { aspect-ratio: 4 / 3; }
+.media-4-5      { aspect-ratio: 4 / 5; }
+.media-3-4      { aspect-ratio: 3 / 4; }
+.media-1-1      { aspect-ratio: 1 / 1; }
+@media (min-width: 600px) { .media-hero { aspect-ratio: 16 / 9; } }
+@media (min-width: 900px) { .media-hero { aspect-ratio: 21 / 9; } }
+
+.media-fill { width: 100%; height: 100%; object-fit: cover; }
+
+/* Paikanvaraajan merkintä: järjestysnumero ja tunniste. Vain
+   kehityksessä (Media.tsx päättää), ja tarkoitus on että pudotettavan
+   tiedoston nimen voi lukea suoraan sivulta ilman terminaalia.
+
+   Tyyli on sivuston oma: numerot ovat täällä .meta-kokoisia vaimeita
+   merkintöjä (ks. ListRow, CV, artefaktilista), eivät
+   display-elementtejä. Iso lihava numero nurkassa luki sisältönä eikä
+   rakennustelineenä.
+
+   Numero täydellä musteella, tunniste vaimeana: numero on se jota
+   vilkaistaan, tunniste se joka kopioidaan. Tunniste ilman
+   versaalimuunnosta, koska se on kopioitava tiedostonimi. */
+.media__teksti { display: flex; flex-direction: column; gap: var(--space-8); }
+.media__merkinta { display: flex; align-items: baseline; gap: var(--space-12); flex-wrap: wrap; }
+.media__numero { color: var(--ink); font-variant-numeric: tabular-nums; }
+.media__tunnus { color: var(--ink-faint); text-transform: none; }
+.media__muoto { color: var(--ink-faint); margin-inline-start: auto; text-transform: none; }
+
+
+/* ---- reveal --------------------------------------------------------- */
+
+@media (prefers-reduced-motion: no-preference) {
+  .reveal { opacity: 0; transform: translateY(var(--reveal-shift)); }
+  .reveal.is-in {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--dur-reveal) var(--ease-out),
+      transform var(--dur-reveal) var(--ease-out);
+  }
+}
+
+/* ---- saavutettavuus -------------------------------------------------- */
+
+.visually-hidden {
+  position: absolute; width: 1px; height: 1px;
+  padding: 0; margin: -1px; overflow: hidden;
+  clip-path: inset(50%); white-space: nowrap; border: 0;
+}
+
+.skip-link {
+  position: absolute; left: var(--space-16); top: var(--space-16);
+  z-index: 100;
+  transform: translateY(-200%);
+  background: var(--ink); color: var(--paper);
+  padding: var(--space-12) var(--space-16);
+}
+.skip-link:focus { transform: none; }

package/styles/icon.css

@@ -0,0 +1,40 @@
+/* Ikoni — systeemin oma piirretty merkki.
+   ==================================================================
+   Ei kirjastoa. Geometria on components/Icon.tsx:ssä, tässä on se
+   mikä tekee merkistä osan systeemiä: hiusviiva, currentColor ja
+   kolme kokoa tokeneista.
+
+   `vector-effect: non-scaling-stroke` on tässä olennainen. Ilman sitä
+   viivanpaksuus skaalautuisi ruudukon mukana: 16-ruudukon 1 yksikköä
+   olisi 24 pikselin ikonissa 1,5 pikseliä ja 12 pikselin ikonissa
+   0,75. Kanssa sen `stroke-width` luetaan ruudun koordinaatistossa,
+   jolloin --hairline on hiusviiva joka koossa — juuri se mitä token
+   lupaa. */
+
+.icon {
+  display: inline-block;
+  flex: none;
+  width: var(--icon-m);
+  height: var(--icon-m);
+  /* Ikoni istuu tekstin seassa, joten se lasketaan perusviivalle.
+     `vertical-align: middle` keskittäisi sen x-korkeuden puoliväliin
+     ja nostaisi merkin liian ylös metatekstin rinnalla. */
+  vertical-align: -0.125em;
+  color: inherit;
+}
+
+.icon path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--hairline);
+  /* Tylpät päätteet ja terävät kulmat, koska --radius on 0.
+     Nämä ovat SVG:n oletukset — ne on kirjoitettu näkyviin, koska ne
+     ovat systeemin päätös eivätkä sattuma. */
+  stroke-linecap: butt;
+  stroke-linejoin: miter;
+  vector-effect: non-scaling-stroke;
+}
+
+.icon--s { width: var(--icon-s); height: var(--icon-s); }
+.icon--m { width: var(--icon-m); height: var(--icon-m); }
+.icon--l { width: var(--icon-l); height: var(--icon-l); }

package/styles/list-row.css

@@ -0,0 +1,206 @@
+/* Listarivi — sivuston tunnuskomponentti.
+   ==================================================================
+   Yksi rivi, kolme käyttöä. Sivustolla oli pitkään kolme lähes
+   samanlaista riviä — listarivi, työlistan kärkirivi ja avautuva
+   rivi — joilla oli sama viiva, sama käännös ja sama sisältö, mutta
+   kolme eri toteutusta. Nyt runko on yksi ja erot ovat modifioijia:
+
+     .list-row                 nimi + kuvaus + rooli, linkkinä
+     .list-row--numbered       numerosarake vasemmalle
+     .list-row--m              isompi otsikko ja väljempi rytmi
+     .list-row--expandable     + / − -osoitin oikeaan laitaan
+
+   Vaakapadding tulee .bleed-utilitystä, ei tästä: muuten rivi saa
+   sivupaddingin kahdesti .page-käärön sisällä.
+*/
+
+/* ---- runko --------------------------------------------------------- */
+
+.list-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'main'
+    'meta';
+  align-items: baseline;
+  gap: var(--space-8) var(--space-16);
+  width: 100%;
+  padding-block: var(--space-20);
+  min-height: var(--tap-min);
+  border-top: var(--hairline) solid var(--line);
+  color: var(--ink);
+  text-align: left;
+  transition:
+    background var(--dur-base) var(--ease-standard),
+    color var(--dur-base) var(--ease-standard);
+}
+
+@media (min-width: 600px) {
+  .list-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'main meta';
+    gap: var(--space-24);
+    padding-block: var(--space-28);
+  }
+}
+
+.list-rows > .list-row:last-child,
+.list-rows > *:last-child > .list-row {
+  border-bottom: var(--hairline) solid var(--line);
+}
+
+/* ---- osat ---------------------------------------------------------- */
+
+.list-row__number { grid-area: num; }
+.list-row__meta { grid-area: meta; }
+
+/* Nimi + kuvaus omana pinonaan, jotta rooli voi asettua oikeaan
+   laitaan nimen perusviivalle. */
+.list-row__main {
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+.list-row__title {
+  font-family: var(--font-display);
+  font-size: var(--text-display-s);
+  line-height: var(--lh-display-s);
+  letter-spacing: var(--tr-display-s);
+}
+
+.list-row__description {
+  font-size: var(--text-body-s);
+  line-height: var(--lh-body-s);
+  color: var(--ink-muted);
+}
+
+/* ---- numerollinen -------------------------------------------------- */
+
+.list-row--numbered {
+  grid-template-columns: var(--space-36) minmax(0, 1fr);
+  /* Roolilla on oma alue myös mobiilissa. Ilman sitä `grid-area`
+     ei osu mihinkään, selain sijoittaa sen automaattisesti ja luo
+     implisiittisen sarakkeen — pääsisältö kutistui 86 pikseliin. */
+  grid-template-areas:
+    'num main'
+    '.   meta';
+}
+@media (min-width: 600px) {
+  .list-row--numbered {
+    grid-template-columns: var(--space-56) minmax(0, 1fr) auto;
+    grid-template-areas: 'num main meta';
+  }
+}
+
+/* ---- iso koko ------------------------------------------------------ */
+
+.list-row--m { padding-block: var(--space-24); }
+@media (min-width: 600px) {
+  .list-row--m { padding-block: var(--space-32); }
+  .list-row--m.list-row--numbered { grid-template-columns: var(--space-56) minmax(0, 1fr) 260px; }
+}
+.list-row--m .list-row__main { gap: var(--space-12); }
+.list-row--m .list-row__title {
+  font-size: var(--text-display-m);
+  line-height: var(--lh-display-m);
+  letter-spacing: var(--tr-display-m);
+}
+.list-row--m .list-row__description { max-width: var(--measure); }
+
+/* ---- avautuva ------------------------------------------------------
+   Merkki on systeemin oma ikoni (plus / minus), ei tekstimerkki eikä
+   kirjaston ikoni — ks. components/Icon.tsx. Nimi oli välillä `sign`
+   ja `indicator`; molemmat olivat kiertoilmauksia sille ettei näitä
+   merkkejä haluttu kutsua ikoneiksi. Nyt ne ovat ikoneita, ja slotin
+   nimi on `icon`. */
+
+.list-row--expandable {
+  grid-template-columns: var(--space-36) minmax(0, 1fr) auto;
+  grid-template-areas: 'num main icon';
+  background: none;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  font: inherit;
+  cursor: pointer;
+}
+/* Mobiilissa merkki vie tilan, joten rooli jää pois. */
+.list-row--expandable .list-row__meta { display: none; }
+
+@media (min-width: 600px) {
+  .list-row--expandable {
+    grid-template-columns: var(--space-56) minmax(0, 1fr) auto var(--space-24);
+    grid-template-areas: 'num main meta icon';
+  }
+  .list-row--expandable .list-row__meta { display: block; }
+}
+
+.list-row__icon {
+  grid-area: icon;
+  /* Ei align-selfiä: ikoni kohdistuu rivin perusviivalle kuten numero
+     ja meta. SVG:llä ei ole perusviivaa, joten selain käyttää sen
+     alareunaa — merkki istuu otsikon riville, ei kahden tekstirivin
+     pystykeskelle. Koko tulee .icon--l:stä. */
+}
+
+/* ---- käännös ------------------------------------------------------- */
+
+/* `.invert` on mukana, jotta tila voidaan näyttää myös staattisena
+   (esim. dokumentaatiossa) ilman omaa sääntöä — muuten .list-row:n
+   oma `color` voittaisi utilityn samalla spesifisyydellä ja teksti
+   jäisi näkymättömiin. `aria-expanded` on avatun rivin sama tila. */
+.list-row:hover,
+.list-row:focus-visible,
+.list-row.invert,
+.list-row[aria-expanded='true'] {
+  background: var(--invert-surface);
+  color: var(--invert-ink);
+  text-decoration: none;
+}
+.list-row:hover .list-row__description,
+.list-row:focus-visible .list-row__description,
+.list-row.invert .list-row__description,
+.list-row[aria-expanded='true'] .list-row__description,
+.list-row:hover .meta,
+.list-row:focus-visible .meta,
+.list-row.invert .meta,
+.list-row[aria-expanded='true'] .meta { color: var(--invert-faint); }
+
+/* Focus-renkaan pitää näkyä käännetyllä pinnalla. */
+.list-row:focus-visible {
+  outline-color: var(--invert-ink);
+  outline-offset: calc(var(--focus-offset) * -2);
+}
+
+/* Sisarrivit vaimennetaan hoverin aikana. */
+.list-rows:hover .list-row:not(:hover) { color: var(--ink-faint); }
+.list-rows:hover .list-row:not(:hover) .list-row__description { color: var(--ink-faint); }
+
+/* Kosketus: ei hoveria, käännös :active-tilassa. Viimeisenä = voittaa. */
+@media (hover: none) {
+  .list-row:hover {
+    background: transparent;
+    color: var(--ink);
+  }
+  .list-row:hover .list-row__description { color: var(--ink-muted); }
+  .list-row:hover .meta { color: var(--ink-faint); }
+  .list-rows:hover .list-row:not(:hover) { color: var(--ink); }
+  .list-rows:hover .list-row:not(:hover) .list-row__description { color: var(--ink-muted); }
+
+  .list-row:active,
+  .list-row[aria-expanded='true'] {
+    background: var(--invert-surface);
+    color: var(--invert-ink);
+  }
+  .list-row:active .list-row__description,
+  .list-row[aria-expanded='true'] .list-row__description,
+  .list-row:active .meta,
+  .list-row[aria-expanded='true'] .meta { color: var(--invert-faint); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .list-row { transition: none; }
+}

package/styles.css

@@ -0,0 +1,6 @@
+/* @pokela/components — kaikki tyylit. Järjestys on merkitsevä. */
+@import '@pokela/tokens/tokens.css';
+@import './styles/base.css';
+@import './styles/icon.css';
+@import './styles/list-row.css';
+@import './styles/accordion.css';