Added — a timeline: `.gk-timeline` A log of steps, one under the other: what ran, in which order, how each step ended. The SSI Panel's "Shorts" module makes a short video in several steps and has to show the person who approves it where the time and the money went and where a step broke; any admin that runs a pipeline needs the same list. Markup and classes only — the page that has the steps writes them, so there is no PHP class and no script. ```html <ol class="gk-timeline" role="list" aria-label="Steps of the run"> <li class="gk-timeline-step gk-timeline-failed"> <span class="gk-timeline-marker" aria-hidden="true"></span> <div class="gk-timeline-body"> <div class="gk-timeline-head"> <span class="gk-timeline-title">Make the pictures</span> <span class="gk-timeline-state">Failed</span> <span class="gk-timeline-time"><time datetime="2026-10-17T09:12:08">09:12:08</time> · 31 s</span> </div> <div class="gk-timeline-chips"><span class="gk-label gk-label-gray">Image service</span></div> <p class="gk-timeline-error">The image service did not answer after 3 tries.</p> </div> </li> </ol> ``` · **A real ordered list**, named and with `role="list"`: the numbers and bullets are off (the markers and the line draw the sequence), and a screen reader that sees `list-style: none` drops the list unless the role says it is one. · **Five states, each a shape AND a word — never colour alone.** `gk-timeline-ok` (a check), `gk-timeline-failed` (a cross), `gk-timeline-running` (a ring with a gap, turning), `gk-timeline-waiting` (an empty dashed ring with a dot), `gk-timeline-skipped` (a dash) on the `<li>`; the word stands beside the title in `.gk-timeline-state`; the marker is empty and `aria-hidden`, CSS draws it. The symbols are lines and borders in the colour of the text, not fills, so `forced-colors` keeps them. `aria-current="step"` goes on the running step. · **Parts:** `.gk-timeline-head` (title, state word and time on a row; on a phone the time goes under them), `.gk-timeline-time`, `.gk-timeline-chips` (the `.gk-label` GridKit has — cost, provider — allowed to wrap), `.gk-timeline-detail`, and `.gk-timeline-error`: the message of a failed step as a tinted block with a 4px edge in the error container pair. A title, detail, message or chip with an address in it breaks inside the column from 320px up. · **Roles only, no dark rule**, so light, `[data-gk-mode="dark"]` and `.gk-dark` follow from the tokens. The word of a tone uses the text-safe variants (`--gk-success-text`, `--gk-danger-text`, `--gk-primary-text`), the marker the container pair of its tone. · **The one thing that moves** is the ring of the running step (`gk-spin`, reused); it stands still under `prefers-reduced-motion`. Text measured in a browser in all six themes and without one, light and both dark spellings, on a card and on the page, weakest value (light / dark / dark class): title, word, time and detail 5.36 / 5.62 / 5.62, the symbol on its disc 6.50 / 4.95 / 4.95 (the skipped dash and the gray chip), the error message 7.97 / 7.97 / 7.97 (WCAG AA asks 4.5:1). Added — a portrait video frame: `.gk-video-frame` A frame for a 9:16 video or picture — a short, a story, a phone screenshot. A bare `<video>` of a vertical file is as wide as its column and three screens tall. ```html <figure class="gk-video-frame gk-video-frame-safe"> <div class="gk-video-frame-media"> <video controls playsinline preload="metadata" aria-label="Version 3 of the short" src="/v/3.mp4"></video> </div> <figcaption class="gk-video-frame-caption">Version 3 · 24 s</figcaption> </figure> ``` · **The shape and its limits.** `.gk-video-frame-media` is `aspect-ratio: 9 / 16`, rounded and cut at the corners; the `<video>` or `<img>` lies IN it (absolute — a portrait file in the flow gives an aspect-ratio box a height of its own) and is shown whole (`object-fit: contain`, on black). The height is limited by `--gk-video-frame-max-h` — 75% of the window, `75dvh` with `75vh` behind it — and the frame takes its WIDTH from that limit, `min(100%, limit × 9/16)`: with `width: 100%` and a `max-height` alone, a limit that bites leaves a wide, flat box. Never wider than its column, 9:16 at every width and window height. · **No autoplay.** The documented markup has `controls` and `playsinline` and a name; the stylesheet has nothing to do with playing. · **Safe zones: `gk-video-frame-safe`.** Guide lines over the picture for the zones a platform covers with its own buttons — the top 10% and the bottom 20% — as hatching with a dashed edge. They take no room and never catch a click (the video's controls lie in the bottom zone); the two numbers are `--gk-video-safe-top` and `--gk-video-safe-bottom`, because YouTube Shorts and Instagram Reels differ. · **Nothing to show yet, and it broke: `gk-video-frame-busy`, `gk-video-frame-error`.** `.gk-empty` is reused, filling the box (its 56px of padding would not fit a frame 150px wide); the busy symbol pulses (`gk-dot-pulse`, reused) and stands still under reduced motion; the failed state is in the error colour. A box with nothing in it has a dashed edge, so it shows on a page of the same grey. A message too long for a small frame scrolls inside the box. · Colours are roles, apart from the black behind a video and the guide lines. Weakest text value of the empty states and the caption, six themes, both modes (light / dark / dark class): 5.52 / 5.62 / 5.62. Tests · `tests/timeline.test.php` (new) and `tests/video-frame.test.php` (new): the rules of each block as written above, read from the stylesheet — five different symbols, the word beside the title, roles only and no dark rule, the ring and the pulse the only motion and both stopped under reduced motion, long words, the width formula, the safe zones on request and click-through, `.gk-empty` reused, its place before the last block — the text of every state computed from the tokens, light and dark, and the documented markup (list role, hidden marker, a word in every step; a figure, `controls`, `playsinline`, no `autoplay`). `tests/css-helpers.php` holds the small readers both use. 279 and 148 assertions; the suite 7022 (6489 before). · `ci/browser-timeline-video.js` (new, 53 cases, with the fixture mode `--timeline-video`): the blocks in a browser — the accessibility tree, five distinct symbols centred in their discs, the line, the animation and its stopping, the error block, both dark spellings, forced colours, the keyboard, 360 and 320px; the frame's 9:16 at every column width and window height, the picture in the box, the zones' height, a click on the play button through the bottom zone, the empty states, a phone. · `ci/farben.js` (+62 texts, 167 in all): every text of both blocks (title, word, time, detail, chip, symbol, message; title, sentence, symbol, caption) against the ground it stands on, on a card and on the page, in every theme and mode. · `tests/blocks.test.php`: the marks window moved to 1.96 / 1.95 — the timeline and the frame are the blocks new in 1.96, the message the one changed in 1.95, the picker (1.94) has fallen out of the window. `css/blocks.json`: the blocks "Timeline" and "Portrait video frame"; the demo shows both (a sample video of 9 KB and a picture in `demo/media/`); SPEC.md, the README and the skill describe them. · Counter-checks (`scripts/gegenprobe.php` of the Panel): 74 mutations of `css/gridkit.css`, each turns the named check red — 30 in the suite, 33 in `ci/browser-timeline-video.js`, 11 in `ci/farben.js`; the order mutation (both blocks moved behind the last block) was done by hand. Three mutations first stayed green and changed things: a disc that ignored the mode (the check now compares the disc, not only its symbol), a cross whose second stroke was `display: none` (the stroke has to be drawn), and a `min-width: 0` on the body that proved dead (the grid track `minmax(0, 1fr)` does that work; the declaration, and two like it on the title and the frame, are gone). Several runs of the browser script failed on a loaded server with a timeout in `scrollIntoViewIfNeeded`; the script now waits for animation frames and for the loaded video instead of fixed pauses, and its default timeout is 20 s. ---

Added — a small message: `.gk-message-sm` The SSI Panel put a privacy sentence above its chat as a `.gk-field-hint`: 12px grey text that read like body copy. A `.gk-message` has the look such a sentence needs — tinted ground, border, a symbol in the signal colour, `.gk-message-header` as the title — but it is too heavy for that place: padding 14px 20px and a 16px margin underneath. `.gk-message-sm` keeps the look and shrinks the box: ```html <div class="gk-message gk-message-info gk-message-sm"> <span class="material-icons" aria-hidden="true">lock</span> <div class="gk-message-content">The conversation is stored on our server and never passed on.</div> </div> ``` · **The box:** padding `10px 14px`, gap `10px`, text `--gk-text-label` (13px) over a line height of 1.45, the symbol one step down (`--gk-icon-sm`, 18px), the title 2px above its text, and **no margin** (`margin: 0`) — the surroundings set the spacing; a `gk-mb-*` on it still wins. The text may wrap: `min-width: 0` on `.gk-message-content` and `overflow-wrap: anywhere`, so a long address breaks instead of pushing out of the box. · **No colour of its own.** It takes the tone from `.gk-message-info`, `-success`, `-warning`, `-error` or none, light and dark, exactly as the message does — there is no dark rule for it. · **Its place in the file is part of the rule.** After the phone rules, because `.gk-message` gets padding `12px 14px` on a phone at the same weight and the later rule wins (on a phone the small one stays at 10px); before the margin utilities, for the same reason the other way round. · **`.gk-message-compact` is not this, and is unchanged.** It already existed (padding `10px 16px`, 13px) and keeps the 16px margin of `.gk-message`; some twenty Panel views use it and count on that margin, so taking it away would have moved all of them. The small message is a class of its own. Text on the tinted band, measured in a browser in all six themes and without one, light and both dark spellings (`[data-gk-mode="dark"]`, `.gk-dark`), with and without `themes.css` — weakest value per tone, light / dark / dark class: neutral 16.30 / 14.03 / 14.64, info 7.40 / 5.66 / 6.76, success 8.31 / 7.92 / 9.45, warning 6.11 / 8.24 / 9.76, error 7.91 / 6.93 / 8.12 (WCAG AA asks 4.5:1). The message without `-sm` is identical to the digit — the same colours — and had not been measured at all before. Tests · `tests/message-sm.test.php` (new): the box as written above and denser than `.gk-message` and `.gk-message-compact`, read from their rules; the text size a token between 12px and the body size; the rule after the phone rule of `.gk-message` and before `.gk-mb-0`; no colour, background or border in any rule of `.gk-message-sm` and no dark rule of its own; `.gk-message` and `.gk-message-compact` as they were; the dark text of every tone on its tint over each dark ground a message sits on, computed, at least 4.5:1. · `ci/farben.js`: the neutral small message in the palette check, and Text and Title of every tone — with and without `-sm` — against the band that really lies under them, in every theme and mode. · `ci/browser.js`: the small message in a browser — box, symbol, title, a long address that breaks, `gk-mb-3` that still wins, the empty announcement that still takes no room, phone width and dark mode. · `tests/blocks.test.php`: the marks speak of the last two minors, and those moved to 1.95 and 1.94 — the picker is the block new in 1.94, the message the one changed in 1.95, and the region (1.93) is now the block that has fallen out of the window and carries no mark. · `css/blocks.json`: `gk-message-sm` in the Message block; the demo shows it; SPEC.md and the skill describe it. ---

Added — the image picker: choose one image out of many, in a compact grid `GridKit\ImagePicker` and `GK.picker`. A list of images with a full row each is fine for three and unusable for thirty; the SSI Panel built that list by hand — preview left, title, a loose button right — and with ten images a header-picture choice filled the screen (a phone: 4 700 px for thirty). The picker is a grid of 16:9 tiles, about 150 px wide, two to a row on a phone, that works like a radio group, shows the first two rows with a "Show all 30" button and opens the viewer on a large version of the picture it was given. ```php \GridKit\ImagePicker::render([ ['value' => 'a.webp', 'title' => 'Fireplace at dusk', 'thumb' => '/t/a.webp', 'full' => '/g/a.webp', 'meta' => 'Own image', 'checked' => true], ['value' => 'b.webp', 'title' => 'Mountain road', 'thumb' => '/t/b.webp', 'full' => '/g/b.webp', 'meta' => 'AI generated', 'badge' => 'AI', 'actions' => [['name' => 'remove', 'label' => 'Remove']]], ['value' => 'c.webp', 'title' => 'Not released yet', 'note' => 'Waiting for approval', 'disabled' => true], ], ['name' => 'cover', 'label' => 'Header image']); ``` · **Native radios underneath.** One `<input type="radio">` per image, drawn by its own box-shadow over the picture, so a click or a tap lands on it, the form submits its value and Tab, the arrow keys and a screen reader work without a line of script. Picking is the radio's own `change` event: a page that listened to the old list needs nothing new. The radio is named by the tile's title (`aria-labelledby`, the title is a `<label for>`, so a click on the words picks too) and described by what the caller says about the picture (`meta`, `note`). · **The state is never colour alone.** A picked tile has a check mark (a shape), a 3 px primary ring with a white inner ring that shows on a dark and on a light picture (a size) and a bold title; the others have a 1 px line. Keyboard focus is a 3 px primary outline with an offset. Disabled tiles are dimmed and say why (`note`). · **Per image:** `value`, `title`, `thumb` (the SMALL picture for the tile), `full` (the LARGE one the viewer loads when it opens; omitted, the tile has no zoom button and a placeholder), `alt`, `meta` (where it comes from), `note`, `badge` (a short word on the picture), `checked`, `disabled`, `actions` and `data`. Options: `name`, `id`, `label`, `rows` (default 2, 0 = never fold), `status`, `class`, `labels`. `html()` returns the markup, `render()` prints it, `tileHtml()` writes one tile. · **Fold by rows.** Only the first `rows` rows show, then `Show all N` / `Show fewer` (`aria-expanded`). How many tiles that is comes from the columns the grid resolved to (`gridTemplateColumns`) — nothing is laid out first to be measured — and again when the width changes. The picked tile and the one holding the focus never fold away. · **A roving tab stop for the magnifiers.** The zoom button of ONE tile — the one with the focus, else the picked one — is in the tab order; the others are `tabindex="-1"`; the arrow keys move between tiles and the viewer reaches every picture. A caption action ("Remove") stays in the tab order on EVERY tile: the focused tile is always the picked one, and an application will not let the picked image be removed, so rationing the actions left every other image's button out of the keyboard's reach (found in review, with the first draft that rationed both). · **Actions are events.** A caption button (`remove`, …) fires `gk:pickeraction` (`detail: { action, value, item, picker }`, bubbles) and does nothing else: the library never deletes. The application decides and asks "Really?" (`GK.confirm`), then calls `GK.picker.remove(picker, value)`. · **Script:** `GK.picker.init(root)` (also from `GK.initContent`), `.add(picker, item, { select, focus })` (an upload that arrived: appended, picked as a click would — one `change` — and focused), `.remove(picker, value)`, `.refresh(picker)` (after a script changed which radio is checked) and `.tileHtml(item, opts)`, which writes the same markup PHP does; `ci/browser-picker.js` compares the two. Words: `picker.*` in both languages, exported to the browser as `picker_*`, and overridable per picker (`labels`), so an application can say "Show all 30 images". · **Icons.** `zoom_in` and `image` join the inline SVG set, in PHP and in `GK.table.iconSvg` (the parity test holds the two together): a tile has no icon-font ligature that could show as a word. · **Classes (the block "Image picker" in `css/blocks.json`):** `gk-picker` (the container), `gk-picker-status`, `gk-picker-grid`, `gk-picker-item` (one tile), `gk-picker-media` (the 16:9 picture area), `gk-picker-img`, `gk-picker-ph` (the placeholder without a picture), `gk-picker-input` (the radio, drawn as the picture area), `gk-picker-check`, `gk-picker-badge`, `gk-picker-zoom`, `gk-picker-caption`, `gk-picker-title`, `gk-picker-action`, `gk-picker-note` and `gk-picker-more`. One class each, nothing nested deeper than a sibling combinator and no `!important`: an application restyles a tile with one class of its own. · **Touch and motion.** The zoom button is a `--gk-target-min` box with a 30 px chip drawn in it, and the caption action grows from 32 to `--gk-target-min` on `(pointer: coarse)`; the action sits in the caption row, below the picture, so a tap that picks never reaches it. With `prefers-reduced-motion` the ring does not ease. Changed — the lightbox can show more, and pick `GK.lightbox.show(entries, index, from)` opens the viewer on a list the caller built (`src`, `caption`, `meta`, and for a picker `choose()`, `selected()`, `disabled`, `returnTo()`); the gallery's own tiles still come in through the click handler and are the same thing with `src` and `caption`. · A second line, `.gk-lightbox-meta`, under the caption (where the picture comes from), and a row, `.gk-lightbox-actions`, with **Select this image** and a visible **Close** — only when an entry can be picked; a plain gallery shows no row. On the picture that is already picked the button says "Selected" and stays pressed; on one that cannot be picked it is disabled — and the focus moves to "Close" instead of falling onto the page behind. White on the dark overlay in every theme (the theme's primary measured 4.47:1 under white in the default light palette). · Closing gives the focus back to the zoom button of the picture last shown (after paging from 3 to 8 the place a person knows is 8), or to the radio that took the pick, falling back to the opener when the target is not on screen (a folded tile). The one `_gkRestoreFocus` is used, as before; a target other than the opener is scrolled into view (`block: "nearest"`) — after paging from 1 to 29 the ring was on a button below the fold. The dialog is named by the picture it shows (`aria-label`). `GK.lightbox.refresh()` redraws the buttons when something changed behind an open viewer; a picture that arrives meanwhile (`GK.picker.add` with `focus`) does not take the focus out from under the dialog. · New lightbox classes: `gk-lightbox-stage`, `gk-lightbox-foot`, `gk-lightbox-meta`, `gk-lightbox-actions`, `gk-lightbox-choose`, `gk-lightbox-dismiss` and `gk-lightbox-pick`. · The picture lives in a stage (`.gk-lightbox-stage`) that takes the height the foot (caption, meta, buttons) leaves, instead of a fixed `85vh`: on a phone held sideways the caption no longer covers the picture, and a viewer with a row of buttons has room. A long caption wraps instead of running out of the screen. In a picker's viewer (`.gk-lightbox-pick`) a small picture fills the stage — a 640 px upload is shown as large as the screen allows — and its shadow follows the picture (a filter); a plain gallery keeps showing natural size. Clicking the dark area around the picture still closes it. Buttons draw a white 3 px focus ring on the dark overlay. · **What changes for a plain gallery (every application that uses `.gk-gallery-item[data-lightbox]`):** behaviour is the same (open, ← →, Escape, the dark area, the focus back, no extra buttons), the layout is not. The caption is no longer a one-line pill laid over the picture's lower edge but stands under it and wraps; a large picture is bigger (1378×689 where it was 1268×634 at 1440×900) and on a phone held sideways it no longer sits under the caption. Measured against 1.93.4 at 1440×900, 390×844 and 667×375. · On a screen under 480 px high (a phone held sideways, a window at 200 % zoom) caption and buttons share one line and the origin line is dropped, so the picture keeps its room (174 px of 375 became at least 200). · `prefers-reduced-motion`: the viewer's entrance is switched off in its own block. Added — the demo has a Gallery section A "Gallery" entry in the sidebar, with the plain gallery (moved from "Navigation"), the picker with six, thirty, one and no images, a form that shows its value, a log of the events it hears, "Add a new image" (`GK.picker.add`), a remove button that asks first, the keyboard in a table and the script. The examples are `showcase()` listings: the code shown is the code that ran. Changed — the Releases page is fed by a workflow `ci/github-release.yml` (to be switched on the way `github-actions.yml` is — below) creates the GitHub Release for every pushed `v*` tag (title "GridKit <version>", the notes of that version from `ci/release-notes.sh`, a "Live demo" line) and has a button, "Run workflow" with `since` (default 1.54.0), for ONE catch-up Release for the tag of the current `VERSION`: the newest version in full and every version since as the titles of its changes. 58 tags (v1.55.0 … v1.93.4) had no Release object; the page ended at v1.54.0. Idempotent: a tag whose Release exists is left alone, the catch-up replaces the notes of an existing Release instead of adding another; the tag must equal `VERSION`; `--verify-tag` never creates a tag. One concurrency group for every start, the mode decided by the event (the button pressed on a tag is still the catch-up), `since` matched with `[[ =~ ]]` (a second line used to pass `grep -E`), no `--latest` (GitHub picks the highest version; an old hotfix tag must not become "Latest"). `ci/release-notes.sh --since` fell over GitHub's 125 000-character limit (1.54.0 → 1.93.4 is 150 000): past 120 000 bytes it now prints the newest version in full and the titles of the rest. It sits in `ci/`, not in `.github/workflows/`: the token this repository is pushed with has no `workflow` scope, `.gitignore` keeps that folder out of commits (a tracked workflow once blocked every push for three days) and a test now fails if one is tracked. `ci/README.md` has the commands to switch it on. It cannot be run from a checkout, so it is held to what it says (`tests/package.test.php`) and its YAML was parsed. Changed · `README.md`, the landing page and `GRIDKIT_SKILL.md`: seventeen components, twenty-two classes in `src/`; the skill has a section "Image picker — ImagePicker" and the component and class tables a row for it. `css/blocks.json`: block "Image picker" and the new lightbox classes, 1.94.0. Tests · `tests/picker.test.php` (new, 174 assertions): the markup (one radio per image in one group, named by its title, described by its origin, `alt=""`, lazy, inline SVG icons, the zoom button on the picture and the action in the caption row, no zoom without a large version), escaping of every value that comes from the caller (script tag, attribute break, a `data` name cut to letters, an `id` stripped), no inline style or handler, options and words as data attributes, the status line, ids unique across two pickers, `tileHtml` is what `html` is made of, the stylesheet (check mark on `:checked`, 3 px ring, 3 px focus ring, `[hidden]` really hides, finger-sized targets, `pointer: coarse`, 16:9, no `!important`, reduced motion), the script's contract (events, fold by `gridTemplateColumns`, roving tab stop, the viewer's `choose`/`returnTo`), the guide, the demo and the words in both languages. · `ci/browser-picker.js` (new, 83 cases in Chromium, outside the suite like `ci/browser.js`) on `ci/browser-fixture.php --picker`: 1, 3, 12 and 30 images at 850 px, 390 and 360 px (tiles per row, rows shown, "Show all", the picked tile beyond the fold, no sideways scroll); picking with the mouse and the keyboard (arrows skip a disabled tile, a 3 px ring, one `change`); the tab order; the viewer (opens on the large version, ←/→, Tab trap, Escape, focus back to the right zoom button, paging to a folded tile, "Select this image", "Selected" on the picked one, a click on the dark area, a small picture enlarged); `gk:pickeraction` and `GK.picker.remove`; `GK.picker.add` produces the markup PHP writes; two pickers stay apart; a plain gallery is as it was; a touch screen gets 44 px targets; dark contrast; reduced motion; a portrait picture is cropped to 16:9, not squeezed (found while writing it: an in-flow `<img>` gave the box its own height). · Found by an independent review of the first commit and fixed before release (each with a case in `ci/browser-picker.js`, 83 cases now): a caption action out of the keyboard's reach; the focus ring below the fold after paging far; the focus dropped on the page when "Select this image" disables itself under it; an upload that arrives under an open viewer taking the focus (and the viewer's button not noticing the new pick); the JS side of the escaping — `GK.picker.add`, the viewer, the status line, the dialog name — had no test that would fail (hostile text in every field, `$&` and `$$` in a title, a `data` value, an action name); `String.replace` with a title as the replacement (`$&` read as a pattern, in the status line and in the application's question); the id prefix and an icon name written raw by the script where PHP cuts and escapes them; the pick button's contrast; a stale "show all" that unfolded pictures added later; the status line naming the first of several `checked` where the browser keeps the last. · Found by that run and fixed before release: the pointer's 2 px hover ring beat the 3 px picked ring (`:hover` outranked `:checked`: a picked tile looked less picked under the mouse); the portrait tile; a title measured against black in a fixture without a page background. · Gegenproben (`scripts/gegenprobe.php`, each: break it, the test goes red, put it back byte for byte, green): the check mark on `:checked`, the roving tab stop, the focus return, Escape, the fold, the picked tile staying visible, the viewer's pick, the Tab trap, the escaping of the title, the `gk:pickeraction` event, the hover ring that must not thin a picked tile and the focus after a pick. (A guard of the picker's own for `[hidden]` was written first and taken out again: the library-wide rule for every `gk-` class — 1.92 — already covers a folded tile, and a Gegenprobe on the guard stayed green.)

Fixed — active chips keep their colour role in dark mode In dark mode `[data-gk-mode="dark"] .gk-chip.gk-chip-active` (0,3,0) came after every chip colour (`.gk-chip-danger.gk-chip-active`, 0,2,0) and outranked it, so every active chip wore the tonal container of the chip without a colour: wherever filter chips carry colours (on the SSI Panel, receipts, expenses, banking, the chart of accounts and the website monitor), a danger, success, warning and neutral chip looked alike (found in round 29; measured in 1.93.3: one ground per theme for every active chip, danger to neutral). The chip's dark rules now stand with the chip, before its colours, and each colour names both dark spellings (`[data-gk-mode="dark"]` and `.gk-dark`) in its own selector list, at the same 0,3,0 — one rule per colour for both modes, nothing more specific than before. Danger and success write their white as a literal, as the filled buttons do: `--gk-on-primary` is dark in dark mode, and dark text on the danger fill read 2.3:1 there. In dark mode neutral carries light text, so its count takes the darker tint again; warning keeps the lighter one, as in light. Dark, all six themes and without one, both spellings, at rest and under the pointer: danger/red `#dc2626` label 4.83:1, count 6.87:1; success/green `#047857` 5.48 / 7.60; warning/orange `#fbbf24` 8.79 / 9.69; neutral 9.26-10.78 / 10.99-12.42 (was: every one of them on the tonal container, 5.99-8.21 / 7.79-9.97). Primary and blue are the chip without a colour in light and stay it in dark; the chip without a colour, the inactive chip and every light value are unchanged: 6912 computed values in 24 combinations of theme and mode, with and without `themes.css`, at rest, on hover and focused, differ only on the active colour chips in dark mode. The focus ring is the same. Tests · `tests/contrast.test.php`: an active chip with a colour role wears, in both dark spellings and under the pointer, the background and border it wears in light; label and count at least 4.5:1, the count never weaker than the label; no colour, danger, success, warning and neutral each have a ground of their own; primary, blue and the chip without a colour stay on the tonal container. The count test picks its rules by the chips they reach, no longer from a written-out list, which knew only the selectors of its day. · `ci/farben.js`: every colour role and alias, at rest and under the pointer, in all six themes and without one, light and both dark spellings: the ground is the colour of its role and never that of the chip without one, the label reads at 4.5:1, and the count never reads weaker than the label. · `tests/contrast.test.php`: "dark component rules take their TEXT colour from a role" read the stylesheet only from the marker of the dark component section on, and the chip's dark rules now stand before it (a literal written into them stayed green; review of this release). It now reads every rule whose selector list names `[data-gk-mode="dark"]` or `.gk-dark`, wherever it stands, and checks that every dark selector of the file sits in a rule it read. Two literals are allowed for one rule each, bound to selector and value: `#1f2937` on the active warning chip (no role carries dark text on amber in both modes) and the white veil `rgba(255, 255, 255, 0.78)` of the dark sidebar, which had stood outside the section all along.

Fixed — the count in an active chip is readable `.gk-chip-count` lays a tint over its chip. On an active chip that tint was 20 % white under white text, so it took away what the accent had: the count measured 3.19–3.90:1 in light mode and 3.68–4.67:1 in dark, in every theme, on every page with `FilterChips` (SSI Panel, round 28). The tint now moves away from the text: `rgba(0, 0, 0, 0.2)` under light text, and the old white tint only under the dark text of `warning`/`orange` and `neutral` (a dark tint would put warning at 4.43:1). In dark mode every active chip carries light text (the dark chip rule outranks the chip colours), so every count takes the dark tint there. Now 6.37–7.89:1 light and 7.79–9.97:1 dark. Nothing else about a chip moved: label, ground, border and focus ring measure identical at rest, on hover and focused, and the count of an inactive chip is untouched. Changed — the hover of a filled primary, success, warning or danger button is stated once Two rules painted it: `.gk-btn-filled.gk-btn-X:hover` and the default variant `.gk-btn.gk-btn-X:not(.gk-btn-outlined):not(.gk-btn-text):not(.gk-btn-tonal):hover`, which also matches a button carrying both `.gk-btn-filled` and `.gk-btn` and wins on specificity. Both named the same colour, so a change to the filled rule changed nothing on screen (noted in 1.93.1). Background and border now stand in ONE selector list per role, where the filled rule stood; the shadow stays on `.gk-btn-filled` alone, which is also the only selector that reaches a button with `gk-btn-filled` and no `gk-btn`. Primary had the same two rules with the same colour and joined the same way. Nothing looks different: 136080 computed values (every variant and role, with and without `gk-btn`, plain, small, disabled and inside a message, at rest, on hover, focused and pressed, seven theme settings, light and both dark spellings) are identical to 1.93.2. Neutral is left as it is, on purpose: its two hover rules name DIFFERENT colours (`.gk-btn-filled.gk-btn-neutral:hover` darkens the secondary colour, the default variant mixes in 18 % of the text colour), so a neutral button looks different under the pointer depending on whether it carries `gk-btn`. Every `Button::render` button takes the default-variant colour. Which one is right is a design decision; choosing it changes what one of the two spellings looks like, so it waits for a round of its own with a measurement before and after. A comment at the rule says so. Tests · `tests/contrast.test.php`: the count of every active chip colour, at rest and under the pointer, light and both dark spellings, followed through the rules of the stylesheet — at least 4.5:1 and never weaker than its label. And exactly one rule paints the hover fill of each filled primary, success, warning and danger button, with the shadow left on the filled rule. The rules are picked by the buttons they reach — every spelling of a filled button, light and both dark spellings — not by the colour they set: picked by colour, a second hover rule with another colour went uncounted and the suite stayed green (review of this release). The cascade over every rule that reaches the button under the pointer has to end on the hover token, for background and border, shorthand and longhand alike. · `ci/farben.js`: the count of the resting, the active, the hovered and each coloured active chip, in all six themes and without one, light and both dark spellings. · `ci/browser.js`: buttons with `gk-btn-filled` and no `gk-btn` are measured too; the border of a filled button is its fill at rest and on hover; filled primary, success and danger keep their hover shadow; and the fill under the pointer is what the role's hover token computes to, in every spelling, light and dark, so whichever rule wins has to be the one that names the token.

Fixed — a disabled button can be enabled by a script `Button::render(…, ['disabled' => true])` gave the `<button>` both the `disabled` attribute **and** a `disabled` class. The class rule (`opacity: .45; pointer-events: none`) survived `button.disabled = false`, so a button a page had enabled stayed grey and unclickable until a reload (Panel „Meine Webseite": „Veröffentlichen" after a change, 27.09.2026). The class is no longer set; the element is always a `<button disabled>` and `.gk-btn:disabled` styles it. The rule `.gk-btn.disabled` stays for pages that set the class themselves.

Fixed — filled buttons answer the pointer and stay readable on hover · **Primary, dark mode:** the hover changed the button by 1.03:1 — nobody could see it. `--gk-primary-hover` is derived darker (`l - 0.06`, DERIVED STATE COLORS) and a dark-mode rule put `filter: brightness(1.1)` on top, so the two cancelled out. The filter is gone: 1.24:1 in dark, 1.30:1 in light. · **Success, warning, danger:** the hover of a filled button was the light ROLE tone (`--gk-success-hover` …), not a step from the dark FILL — the button got lighter under the pointer and white text dropped to 2.0–3.1:1 (danger in light barely changed at all, 1.03:1). New tokens `--gk-success-fill-hover`, `--gk-warning-fill-hover`, `--gk-danger-fill-hover`, derived one step darker than the fill, with literal fallbacks. The role hovers stay as they are for tonal and outlined buttons. Note: `.gk-btn.gk-btn-success:not(…):hover` also matches `.gk-btn-filled` buttons and wins on specificity; both rules now name the same colour. Found by the SSI Panel reviews of rc965 and round 18. `ci/browser.js` measures every filled button in both modes as painted (background through the button's own filter on a canvas, because a computed background never shows a filter): a visible step of at least 1.1:1 and text of at least 4.5:1 on the hover colour. Tests · `Table::percent('-0')` and `percent(-0.0)` show "0 %" — handled since 1.81, but no case held it: removing the line kept the suite green. ---

Two requests from the people who use GridKit most. Martin asked to see what has changed without reading the whole changelog: marks in the demo, the way Fomantic UI marks what is new, and the news of each version in one place. And Vespera's admin said "Saved." to the eye only: its status line was written `hidden` until the first message and shown in the same step its text arrived, so the live region came into being at the moment it spoke — VoiceOver and NVDA often read nothing. Written visible and empty instead, a `.gk-message` drew an empty box. Both are fixed at the source, once. Added — an announcement that is heard: `.gk-announce`, `GK.announce()` ```html <div class="gk-message gk-message-compact gk-announce" id="saved" role="status" aria-live="polite" aria-atomic="true"></div> ``` ```js GK.announce('saved', 'Saved.', 'success'); // tone: info, success, warning, error GK.announce('saved', ''); // empty again ``` The region is on the page from the start and never hidden, so a screen reader knows it before anything is said in it. Empty, it has no box — not `display: none` or `visibility: hidden`, which would take it out of the accessibility tree again, but the clip of `.gk-sr-only`: no border, no padding and no gap in a flex column. Words bring the box back. `GK.announce()` changes only the words (as text, never HTML) and the tone of a `.gk-message`; the same words twice are no change and nothing is read, so a repeat empties the region and writes the words back 150 ms later. It takes an element, an id or a selector, adds `role="status"`, `aria-live` and `aria-atomic` when the markup forgot them, and takes `hidden` off — the next message is heard, this one may not be. `GK.init()` does the same for every `.gk-announce` on the page before anything is announced. `GK.melde()` is the same function under the name Vespera's pages already call. Added — what is new, and since when: `css/blocks.json` Every `gk-` class of both stylesheets, in the block the demo shows it as, with the release that first shipped it — 679 classes in 55 blocks, read once out of the git history: the first commit whose stylesheet has the class, counted from the last time it appeared, with the version of that commit (the tag before 1.0.0, when VERSION was still renumbered). A block's "since" is its oldest class. "changed" is the last release that changed a block without adding a class to it, kept by hand from 1.92.0 on; a new class marks its block changed by itself. A JSON file beside the stylesheet, not a PHP array or comments in the CSS: PHP, the demo, a test, an agent and a consuming project all read it without running anything; a comment beside a rule would be one of many rules a class spreads over, and a class list inside PHP could not be read by anything else. It ships with the package, because a project with GridKit in `vendor/` is who asks "does my copy have this block?". Added — marks in the demo, and the news at the top Each block's heading in the demo says "since 1.0", and a block that is new or changed in the last two minors carries a mark: "New in 1.92" in the green label, "Changed in 1.92" in the blue one — GridKit's own labels, no new colour (4.5:1 or better in both modes and every theme, measured in `ci/farben.js`). At the top of the demo a box shows the last two minors: the blocks each brought or changed, from the index, and the headings of their changelog entries, read out of this file — the demo writes no second text. A demo in German says "Neu in" and "Geändert in". The admin blocks of 1.92 each have their own heading now, so each carries its own mark, and the hand-written "v1.10" chip beside TableHeader is gone. Fixed — a line break is not empty, one heading says "since" once A review of this release before it shipped found four things, fixed in it. · **A region written with a line break between its tags drew the empty box.** "Empty" is CSS `:empty`, and that matches no child node at all — the line break a PHP or TypeScript template writes before `</div>` is a text node. The box this block exists to avoid came back, 22 px high, and `GK.init()` left it, because it only looked at an empty `textContent`. Init now empties a region that holds nothing but white space; the skill and the spec say to write nothing between the tags, because a page without the script, or before it runs, still shows the box. · **"since 1.91 since 1.91 Changed in 1.92".** A heading that shows two blocks called `since()` twice, and said so twice, to the eye and to a screen reader. `since('row-link', 'sheet')` now takes several blocks and says "since" once, for the oldest, with each mark once ("New in" wins over "Changed in" for the same release). The marks lost their left margin, which indented them when they wrapped onto a line of their own on a phone; a space between the marks makes the heading read "1.91 Changed", not "1.91Changed". · **20 classes were dated 1.27.2 that are older.** They first reached git with the commit that rescued the live 1.27.2 from the server, so the history dated them there. The changelog names where they came from: the global search (`gk-search-*`) in 1.24.0, table groups and the number format (`gk-table-group*`, `gk-num*`, `gk-td-num`) in 1.25.0, `gk-cell-sub` in 1.27.1. Two it does not name (`gk-rowpager-count`, `gk-code`) stay at 1.27.2. · **The suite was red on the commit.** `demo/_whatsnew.php` is a partial, and a leading underscore on a tracked file reads as a probe script left behind; the number below was counted before the file was tracked. It is on the list of partials now. Tests · `tests/blocks.test.php` (new, 12 tests, 1889 assertions): the index against both stylesheets in both directions (a class in neither, a class in two blocks), its versions against VERSION and the changelog, a class new in this version named in this entry, VERSION's heading as the first the demo reads, the marks (own labels, German too) and the news box as the demo renders them, every new block marked in the demo, the announcement's markup, rule and script. Confirmed by breaking what each covers — twelve breaks, twelve reds: a new class and a missing one, a stale one, VERSION 1.94.0, a class dated after VERSION, `display: none` on the empty region, no repeat, the demo region written `hidden`, the new block unmarked, a mark in a colour of its own, a heading left out of the box, the new class missing from this entry. The fixes above, seven more: two `since()` side by side again, a key named twice counted twice, "since" the newest block's instead of the oldest's, "Changed in" beside "New in" for the same release, init leaving white space in a region, the skill without the line-break rule, the partial off the list — each red. · `ci/browser.js`: 9 cases on a new fixture (`browser-fixture.php --announce`), 125 in all. The accessibility tree over the browser's protocol: empty, the region is a status in the tree and adds neither a box nor a second gap to a flex column; init repairs a hidden and a bare region; words bring the box and the tone and the tree reads them; a repeat is emptied and written back; words are text; emptied, box and tone go and the region stays; a region holding only a line break is emptied by init and draws no box (red without the fix). The fault itself is a case too: an empty `.gk-message` without the class draws a box, a hidden one is out of the tree. Five breaks (`display: none`, no clip, no repeat, no init, `innerHTML`) turned the matching cases red. · `ci/farben.js`: the marks and "since" on a card and on the page, every theme, three spellings — weakest: "New" 8.57:1 light, 6.78:1 dark; "Changed" 7.15 / 6.14; "since" 6.92 / 5.62 (`.gk-dark`). The same on the demo page itself, over every mark it renders: 8.57 / 6.78, 7.15 / 6.14, 6.92 / 5.71. · `php tests/run.php`, run on the commit: 5559 assertions, none red. ---