# Project notes for Claude

## ⚠️ check_design_system — KNOWN ACCEPTED NOISE (read first, don't re-investigate)

- **"~80–110 custom properties declared under component-style selectors" (e.g. `.btn--primary { --_bg }`) is a PERMANENT, ACCEPTED false-positive — do NOT try to fix it.** The exact count DRIFTS as button states / `.on-active` variants are added AND as more component partials join styles.css (78 → 89 → 91 → 102 as of Jun 2026, when `_collection/_table/_pindock` were added to the entry — all fine). It's the DS's intentional intermediate-token contract; hoisting those props to `:root` reintroduces the dark-mode token-freezing bug. The count being non-zero (and changing) is expected. Full rationale: `notes/decisions.md` → "Design-system compiler" + "CSS architecture". When the validator surfaces ONLY this item, the project is clean — acknowledge and move on, no edits.
- The two `ℹ️` notes (library-data.js size · ~18 token theme-scopes, count drifts too) are also informational — no action.
- Only act on NEW items beyond these (e.g. a real broken import, an orphan `.d.ts`, a card loading raw `.jsx`).

## Pre-flight checklist — READ BEFORE EVERY EDIT (this whole file is injected each turn)

**On ANY user feedback, do this loop FIRST — don't patch from memory:**
1. Re-read the component file you're changing.
2. Re-read the relevant `## H2` in `notes/decisions.md` AND `notes/pitfalls.md` (use the index below to find them).
3. Check this checklist against the change. Only then edit.

**Reuse, don't reinvent — use existing components with their full logic:**
- Chips: `.dc-chip` (doc-type) / `.vchip` / `.achip` / `.cchip` live in `_chips.css`. Reuse their **`--active` modifiers** (validity outline both themes; `.dc-chip--active` dark inset border, guarded) — toggle the class, never re-write the colours. Carry the `.dc-chip__dot/__full/__short` spans (treatment + responsive short-form) and `data-tip` (load `_tooltip.js`). Collapse pattern: icon-only via `.chip-label{display:none}`.
- Buttons: shared `_buttons.css`. Focus ring: the system **bloom** pattern (`box-shadow` in the base transition → 220ms expo-out on `:focus-visible`/`.is-focus`).
- Don't duplicate values that already exist as tokens/modifiers/shared CSS.

**Backport / extract by default — every change is a candidate for the design system:**
- Whenever you build or fix behaviour in a CONSUMER (e.g. `data-preview.html`), STOP and ask: should this live in a shared component (`preview/_*.css` / `_*.js`), a new compound/controller, or a layout template? If the logic is reusable (parsing, motion, a layout pattern, a controller), put the single source of truth in the shared file and have the consumer call it — don't leave a private copy.
- When you touch a shared component, ADD/UPDATE an example in its source preview file (`comp-*.html`) so the new capability is documented + visible in the playground + DS tab.
- Examples of this done right: pager pin/dock → `_pindock.js`; reference parsing + relation-tag/descriptor row → `window.Related` in `_related.js` + `comp-related.html`. Prefer this over per-consumer one-offs.

**Combined Tweaks panel (`playground-tweaks.jsx`) governs app-wide style:**
- It BROADCASTS chip-treatment + button + table CSS into every iframe (`FP_TWEAKS.applyToFrame`). To make a new component obey the global "Type chip" control, ADD its selector to `fpBuildGeneralCSS`'s scope — do NOT build a per-component chip panel.
- A component's OWN local Tweaks panel must be gated under `?fp` (suppressed inside the playground) — see comp-buttons.html. Components that show chips but have no local panel (doc-card, filter-group, related) are the norm.

**Animation rules (every animation):**
- Honour **reduced motion**: the global policy in `colors_and_type.css` collapses all CSS transitions/animations automatically — so prefer CSS transitions / WAA. For rAF/clock-driven JS motion, gate on `?rm` flag **and** `matchMedia('(prefers-reduced-motion: reduce)')`.
- Honour the **playground speed scale**: it sets `playbackRate` on every `document.getAnimations()` entry — so CSS transitions + `element.animate()` are scaled automatically. A hand-rolled `setTimeout`/rAF timeline is NOT scaled (drive it off a no-op WAA "clock" instead).
- In-flow collapse/expand: animate the FULL horizontal box (width + padding + border + margin), not just width — a flex item's `width:0` leaves padding/border (~residual snap). Prefer margin-based spacing over flex `gap` for animatable items.
- **Restart-safe**: any re-triggerable animation (replay button, hover re-fire, speed change) must handle being restarted BEFORE it finished — trivial to hit at slow playground speeds. Cancel in-flight animations on (re)start (`el.getAnimations({subtree:true}).forEach(a=>a.cancel())`) and guard every deferred `onfinish`/clock callback with a bumped run-token so stale runs become no-ops. Pattern reference: `_status.js playTimeline`.

**Focus / a11y gotchas:**
- Focus ring is `box-shadow` → any ancestor `overflow:hidden` CLIPS it. Flip to `overflow:visible` once a reveal animation finishes; focus the target only AFTER (focusing mid-clip renders a clipped ring).
- Visually-collapsed-but-present interactive content must be `inert` (or `tabindex=-1`) so it's not tabbable and shows no tooltip.
- All-tabbable + arrows-move-focus model (not roving tabindex); bail on modifier keys; mirror forced `[data-state~="…"]`/`.is-focus` for the playground.

**Babel / script syntax gate — run after EVERY edit that touches a `<script type="text/babel">` block, a `.jsx` file, or any inline script in a Babel-using page:**
- Open `preview/test-babel-parse.html` (show_html), wait ~3–5 s, then `get_webview_logs` — it must log `[babel-parse] BABEL PARSE: ALL PASS`. The harness fetches every Babel-using page, Babel-parses each `text/babel` block + referenced `.jsx`, and `new Function`-compiles plain inline scripts — execution-free, so it's safe and fast.
- **`done` alone does NOT catch this class of error** — it samples the console BEFORE the async Babel transform throws (a duplicate-`const` SyntaxError shipped right past it). And the page can LOOK perfect with all its JS dead (resting state = final state) while Replay/Inspector are silently broken.
- Keep the harness `PAGES` list in sync whenever a page gains/loses `babel.min.js` (it tells you this in its own header too).

**Verification gotchas (offscreen preview iframe):**
- `requestAnimationFrame` + WAA `currentTime` are FROZEN; `ResizeObserver` does NOT fire; `MutationObserver` is async (await a tick). DOM-removal-on-anim-finish needs a `setTimeout` fallback.
- Screenshots (html-to-image DOM re-render) can show SPURIOUS `text-overflow` ellipsis on max-content-sized `white-space: nowrap` boxes — the clone re-measures text a hair wider. Trust live-DOM `offsetWidth` vs `scrollWidth` (equal ⇒ no real ellipsis), not the capture. Hit on `.rel-desc` in comp-related.html. Also: NESTED IFRAMES (the playground's section frames) paint BLANK in these captures — judge a playground frame by its measured height / a probe written into the parent DOM, or screenshot the comp-*.html file directly.
- `getComputedStyle` returns the **start** value of anything under a CSS `transition` (frozen at t=0) and does NOT reflect interpolated WAA/`@property`/keyframe values. To read a state's END colours, inject `* { transition: none !important }` first. Verify frame-independent paths (synchronous writes, final state); a prior `save_screenshot` step can leave `data-state="hover"` stamped on a node.
- **FRAME-STEPPING — how to actually SEE/measure a mid-animation frame despite the frozen clock (the technique that unblocked the pill⇄table curtain work):** the clock won't advance, but you CAN set `currentTime` yourself. After triggering the animation (and awaiting the host's debounce/microtask), do `document.getAnimations().forEach(a => { try { a.pause(); a.currentTime = T; } catch(e){} })` for a chosen `T` ms, then `eval_js` the geometry (`getBoundingClientRect`, `DOMMatrixReadOnly(getComputedStyle(el).transform).m41/m42`, `offsetHeight`, inline `style.position/left`) AND/OR `save_screenshot` to view that exact frame. WAA transforms/opacity reflect the set `currentTime` (CSS-`transition` props still read their start — see above). Step several `T`s to trace the motion. This is the ONLY reliable way to verify animation choreography here — never claim motion is correct from a single static capture.
- **RESET the playback governor before EVERY animation check** — its speed + paused state PERSIST in localStorage (`fp-standalone-*`), so a state the USER (or a prior check) left behind silently skews what you see (e.g. an animation showing `playState:'paused'` is just the governor, not a bug). Run `window.FP_PLAYBACK && (FP_PLAYBACK.setPaused(false), FP_PLAYBACK.setSpeed('1'))` first so you're reading a clean 1×, un-paused baseline. (In the playground use the toolbar speed/pause; standalone files expose `window.FP_PLAYBACK`.)

**Quality bar:** match the existing visual vocabulary; verify in BOTH themes; keep copy English for chrome (doc CODES/proper nouns stay); after building call `done` then `fork_verifier_agent`; document durable learnings in `notes/` immediately (newest-at-top) and keep the index below in sync.

## Required reading

Before doing non-trivial work in this project, read both:

- `notes/pitfalls.md` — known errors, gotchas, things that have bitten us before. Avoid repeating them.
- `notes/decisions.md` — project rules, conventions, and design decisions. Treat as binding.

These are project memory. They exist so the same lesson isn't relearned every session.

## Auto-documentation discipline

When you discover something worth remembering, **write it down immediately** — don't leave it in chat where it falls out of context. Update the moment you learn, not at end-of-turn.

**Append to `notes/pitfalls.md` when you:**
- Hit and fix a non-obvious bug.
- Find that a "natural" approach silently breaks something.
- Spend more than a few minutes debugging something that may recur.
- Notice the same mistake happening across sessions.

**Append to `notes/decisions.md` when you:**
- Settle a question about how things should be done in this project.
- Pick a convention (naming, file layout, component structure, copy tone, type scale, etc.).
- The user gives a directive meant to apply beyond the current turn.
- A "house style" rule emerges.

## Format rules for both files

- **Compressed and bulleted.** No prose paragraphs. One idea per bullet.
- **Lead with the rule, then the reason.** `Never X — because Y.`
- **Concrete file paths and identifiers** where applicable.
- **Newest entries at the top** of each H2 section so recent learnings surface first.
- **No duplication.** If a new entry overlaps an existing one, merge them.
- **Group under H2 headings** by topic (e.g. `## Babel / JSX`, `## CSS`, `## Tweaks panel`).
- **Keep entries short.** If something genuinely needs a long explanation, put the deep dive in its own file under `notes/` and leave a one-line pointer bullet here.

## When in doubt

- If a decision feels durable, it belongs in `notes/decisions.md`.
- If a mistake feels like it could recur, it belongs in `notes/pitfalls.md`.
- Err on the side of writing it down. Cheap to add, expensive to relearn.

## Notes index — what's in each file

Surface of H2 sections currently in each notes file. **Keep this index in sync whenever you add or remove an H2 in either file** — it's the only thing you see by default each turn, so if a topic isn't listed here you won't know to go read it.

### `notes/architecture.md`

- Compound architecture (organisms / compounds / panels): 4-tier vocabulary, the 4-part compound contract, Structure SoT (Option B = render-fn in `_x.js`), the `_x.config.js` motion/config manifest, config cascade, Governor-vs-Inspector tooling split. **Read before building/refactoring any compound.**
- Collection-motion — the paged-collection animation contract: 3 actors (content compound / pagination emits `pagination:change` / the NEW `_collection.js` orchestrator), two motion vocabularies (composable per-item entrance VECTOR for reveal+refresh vs a TECHNIQUE enum for paginate), technique⊥timing orthogonality, the `motion.phases` config shape, build order. Refresh = restagger (no FLIP); slide-through deferred. **Read before touching table/card/cover motion or pagination animation.**
- Full CSS architecture target: cascade `@layer` order, per-component token contracts, the unified `data-state` state model, one-file-per-component, shared-vs-harness split, migration status. **Read before any component refactor.**

### `notes/pitfalls.md`

- Region navigation (F6) — nested regions: indexOfFocus must resolve the INNERMOST region (`el.closest`), never a first-match containment scan (pagination-inside-results F6 loop)
- Animated number (_num.js) — capture outgoing values via `Num.read(el)`, never raw `textContent` (mid-flight scaffolding concatenates new+ghost → the giant-garbled-number bug); never measure content via the HOST rect (blockified flex hosts stretch → the slide-in-from-outside bug); `color-mix(…currentColor)` keyframes are discrete — resolve to rgb() in JS; replay-under-paused/slow governor freezing displaced frames was the governor catching young anims late (now parked at 0)
- Prototype rebuild (ui_kits/cos-library v2) — `_select.js` data-value→trigger-label trap (use data-sort) · never load `_switch.js` beside the React theme switch · queued screenshot steps firing after a later reload (phantom state during verification) · run_script shrink-guard workaround (temp + move) · React+vanilla islands (ref+innerHTML for controller-mutated attrs)
- Dark mode / tokens — incl. the post-paint theme-stamp flash (modal `data-fp-loading` + `_inspector.js setThemeInstant`), `.bar` class collision, combined-tweaks dark chip-bg override, literal-vs-token swatch inks
- JS block comments — token wildcards (`--st-*/` ends the comment → SyntaxError; page can look fine with all JS dead)
- Reference parsing (_related.js) — nested parens need the depth tokenizer (never flat regex); `\bEd/i` regex traps; suffix-(A) = AP edition; 3-way comma ambiguity; corpus "unresolved" = real register gaps
- Metadata modal nav (data-preview.html) master-detail stack — phantom `fill:both` height anim (still applies but absent from getAnimations → cancel by stored reference + cancel-on-finish); close-on-Back false-positive (200ms hide-timer; read `.is-open` not `.hidden`), `.dpm__back` full-box collapse + equal-specificity opacity tie, browse `state.list` not `active()`, history idx re-resolve by `id`
- Pinned/dock pager + modal slide (data-preview.html) — viewport-fixed pager can't live inside `.results` (container-type containment); freeze pager BEFORE the row reflow; dock-readiness keys off the reserved dock-slot rect; modal slide ghost needs scroll-offset pin + padding on the content layer + inert
- Inspector controls (_inspector-controls.jsx) — WidthLimiter: centring a flex item with margin:auto cancels stretch; on a `container-type:inline-size` target that collapses it to a hairline → pair max-width with `width:100%` (the "Table width" disappears-to-a-line bug)
- Collection-motion compound (_collection.js) — border-collapse:collapse breaks per-row border animation (use separate + spacing 0); two-set page techniques (slide-through/flip) own swap timing & need renderFn (not pre-render); innerHTML renderFn destroys the ghost; freshRun must clear transit scaffolding; auto-reveal gated on visibilityState; flip = two-half rotateX with midpoint swap + setTimeout backstop
- Inspector / configurable content / standalone chrome (_inspector.js) — force-state chrome-exclusion (or you lock yourself out) · clear() reads engine markers not state-queries (baked demos survive) · hasForceable gate · `[hidden]` loses to class `display`, same-window event vs `window.parent` postMessage for panel detection, throttled-timer unmount verification
- Compound slice / Status.render (timeline) — frozen-clock blank, motion tokens on `.timeline` not `:root`, `_status.css` before `ui-kit.css`, React→vanilla renderer via innerHTML+initStatus
- Shared filter components (_filter-group.js / _filter-pills.js) + dataset preview
- Animated collapse in an auto-height container (frozen-clock verification)
- Component extraction (shared _x.css / _x.js)
- Hyphenation
- Playground chrome (playground.html popovers / nav / modal)
- CSS layers / token contracts
- Prototype preview app (ui_kits/cos-library)
- Reduced motion — incl. standalone `?rm` now PROMOTES the page's @media reduced-motion CSS (_playback.js); keep that step in any new standalone chrome
- Focus / state playground — forcing hover/pressed/disabled
- Segmented control / sliding thumb
- Tooltip / data-tip rollout
- Babel / JSX inside `<script type="text/babel">`
- Tweaks panel (tweaks-panel.jsx)
- CSS grid — auto-fill / responsive demo sliders
- Container queries
- Dark mode / tokens
- CSS specificity
- Iconography / glyph alignment
- Type rendering — Czechia Sans

### `notes/decisions.md`

- Standalone offline exports (super_inline_html) — `_standalone-src-*.html` source-copy convention: drop @dsCard, preload `_force-state.js` before `_inspector.js`, strip `?v=` busters, `data-presets="react"` on src'd babel tags, previewed builds share `fp-standalone-*` localStorage (helper-hidden ≠ bug)
- Prototype quality pass (Jun 2026) — header on the latest compounds: shared `_nav-ink.js` (tabs ink) + `_switch.js` `tsw:change`/`__tsw.set` binding seam (header switch = vanilla island), non-sticky header, shared-empty-state adoption (`.empty--bare`, `.empty[hidden]`), browser-history model (`#/katalog[/<page>][?q=]`, `Pagination.goTo`, module-scope `persist`), search UX (Enter→scroll, `#q2` toolbar mirror via new `.search--sm`, `#qfp` query-pill row), F6 regions (header/footer, `data-region-entry`/`-typeto` in both controllers), CTA-panel states (favourites copy w/ knihovna link, request-driven granted/pending panels, `#/zadosti/<id>` scroll+flash), My Library sort/filters + `addedOn` mock dates, **RequestCard compound** (`_request-card.*`, playground §47, `.seg__ct` counts), deployment kit (DEPLOY.md, root index.html hub, Claude-Design auto-sense fallback labels). **Read this H2 before touching the prototype.**
- Babel parse harness (preview/test-babel-parse.html) — execution-free syntax gate over every text/babel block + .jsx + plain inline script; mandatory after JSX edits (see pre-flight checklist); maintain its PAGES list
- Animated number (_num.js/_num.css/_num.config.js) — utility-count transitions: `window.Num` set/transition/read APIs (persistent vs innerHTML-rebuilding hosts; capture via read, never textContent)), technique enum (roll default · digits falls back · count ladder) ⊥ timing presets, dir = value delta except pager = page direction, width glide vs reserve, `:root` token defaults (inverse of --qt-*), changed-only + subtle facet tokens; consumers: pagination label · list toolbar · catalog.js · data-preview · comp-num.html (playground §33, later sections renumbered +1). REWORKED Jun 2026: MOTION (roll/slide/roll-inc/slide-inc/digits/digits-slide/count/count-1/none) ⊥ EFFECT (none/fade/blur/heat colour-flash w/ Δ-scaled intensity + cooldown; space-separated combos) ⊥ timing ⊥ LIMIT ("zero anim": data-num-limit + cmp =/<=/>= · shake/elastic · color/weight · hold); width no longer a mode (content-wrapper clip+glide, anchor-aware shiftX). SETTLED DEFAULTS Jun 2026: global digits+fade+deliberate; quick tiles "heat fade" 800/100 w/ --qt-accent, limit none; filter groups slide+fade+limit 0; toolbar/pager limit 0 (stamped in the shared controllers)
- Non-selectable controls (user-select) — system-wide rule: every CONTROL suppresses text selection; content surfaces (table/metabox rows, cards) never do
- Links — underline never under the icon: inline anchors safe via the `.bi` inline-flex reset; flex anchors underline a label span (gov.cz strip); never an unlayered `a .bi` display rule
- Empty state (comp-empty-state.html) — CTA copy "Zobrazit vše" / "Odstranit aktivní filtry" (never "Vyčistit")
- Prototype rebuild on the shared compounds (ui_kits/cos-library v2, Jun 2026) — React = shell/scaffold only, vanilla catalog.js/library.js controllers; NEW shared renderers `_chips.js` (window.Chips + Table.cells delegation) · `_doc-card.css/.js` (DocCard.render + meta fitter) · `_cover.js` (Cover.render/renderLib) · `_lib-card.js`; shared Tweaks generators `_tweaks-css.js` (FP_TWEAKS_CSS) consumed by BOTH combined panels; `Related.collectRefs/rowsHTML` promoted; CosFav favourites store (public docs → library); 3-view catalogue Collection model + curtain on `.res-slide`; two synced dark-mode owners (header switch + Inspector); region-nav stays local; ui-kit.css = app chrome only; v1 archived in backups/cos-library-v1
- Playground as DS index (playground.html) — foundations + grouped nav + Tools: tier ordering (typography→colors→spacing→brand→components→compounds→Tools), `data-fp-group` nav headings, Tools modal contract (T1–T3), static-file whitelisting, late-keeper re-filter, `A` show-all key, helper-class collision rule · PLUS: OS-aware keycaps in prose (`FP_OS` in _tooltip.js, bare `kbd` style in _card.css), doc-codes tweaks promoted to the Combined panels (static type-codes on `.dc-chip`, "Mono font" General control re-valuing `--font-mono` in BOTH combined panels), `.hexcode` chip for token hexes, space-shadows = token tiles
- Quick-tile compound slice + collection:entrance event — quantized count-up (1/2/5 ladder, `--qt-*` tokens per tile), countStyles (blur/hot) ⊥ timing presets, grid entrance via the shared Collection compound + the new `collection:entrance` sync event, `autoReveal:false` manual init, comp page Inspector layout
- Metadata modal master-detail nav stack — dialog browses a NAV STACK (`{kind,parentId,idx,id}`, list derived on demand): level 0 = filtered `state.list` in shown order, related-click pushes a `related` level (sibling = resolvable related set), Back pops (← button/Backspace/browser Back via `history.back()`); context-aware position label; full-stack-snapshot history (push on hop, replace on prev/next, `go(-depth)` unwind); collapsing `.dpm__back` button. Retires flat `modalIdx`/`dpmState`/`curDepth`.
- Collection-motion compound + table-as-compound — animation orchestrator is a NEW standalone `Collection` compound (`_collection.js`/`.config.js`), pagination EMITS `pagination:change`, two motion vocabularies (per-item entrance VECTOR vs paginate TECHNIQUE enum), refresh=restagger (no FLIP), slide-through deferred; table promoted to a compound with `Table.render` SoT + `_table.config.js`. **Pairs with architecture.md "Collection-motion".**
- Inspector / Tweaks split + standalone chrome — shared `_force-state.js` engine (`FP_FORCE_STATE`, force Default/Hover/Pressed/Focus/Disabled, chrome-excluding; playground + cluster share it; cluster "State" button + D/H/P/F/X · positional 1-5/Numpad · Numpad-. cycle keys, gated on hasForceable; tip FOLLOWS moving trigger via rAF); `_inspector.js` (floating cluster + `[data-fp-configurable]` visibility contract, sole dark-mode owner, supersedes `_theme-toggle.js`) / `_playback.js` (`FP_PLAYBACK`) / `_inspector-controls.jsx` (`AnimationControl` + `WidthLimiter`); Inspector = `TweaksPanel hostProtocol=false`, key `I`; playground Combined-Tweaks header button + modal Inspector button + clickable modal num pill
- Compound components (organisms / panels) — architecture contract: 4 tiers, the 4-part compound contract, Structure SoT (Option B), `_x.config.js` manifest, config cascade, Governor vs Inspector
- Status-timeline compound slice — reference implementation: motion tokens on `.timeline`, `Status.render` structure SoT, all 3 consumers call it, legacy `.timeline__*` retired, local schema-driven Inspector, `FP_COMPOUNDS.status` manifest
- Filter-pills compound slice — 2nd compound on the contract: `--afp-*` motion tokens on the active row, `_filter-pills.js` `motionOf()` per-call (old consts now `FB_*` fallbacks), duration-derived backstop, `__fp.restore` for Replay, local motion-only Inspector (`knobs:[]`), `FP_COMPOUNDS['filter-pills']` manifest
- Pagination compound slice + label model — 3rd compound: `--pag-*` motion tokens, `window.Pagination`{init,render,motion,configure} API, align/placement class knobs, responsive cascade (`__eyebrow`→`__labelForm`), local Inspector. **Label model**: template string (`{token}` + `*emphasis*`) + named presets (mini/page/full/range) + collapse cascade; `{from}/{to}` from data-page-size; graceful preset degradation
- Pagination layout model (redesigned) — 3-way `layout` (responsive/standard/compact), `align` +justify (auto-margin, buttons cluster + wrap internally), `labelPlacement` before/after, `labelOverflow` wrap/hide, align-aware `checkStacked` (RO observes ALL navs), minimal compact variant (buttons-only, opposite-button sweep), `.where__num` inline-flex→inline-block spacing fix
- Dataset preview (ui_kits/cos-library/data-preview.html) — Označení code-only, shared filter-pills consumer, modal titlebar/ID box/related, floating pager, content + doc-context animations
- Animation playback controls (playground.html) — pause/play button, Space/Pause toggle, timeline scrubbing keys, unified motion governor, resume-on-speed-change, park-young-caught-anims-at-0 (both tick loops)
- Design-system compiler — root entry + token hygiene (styles.css + @kind)
- Favourite toggle (_favourite) + "new" chip (_chips)
- Cover card extraction → _cover.css shared
- Library cover card (comp-lib-cover.html + _lib-cover.css)
- Library card (comp-lib-card.html) — rebuilt on the catalogue card
- Metabox (comp-metabox.html + _metabox.css)
- Quick tile (comp-quick-tile.html + _quick-tile.css)
- Shared component files (preview/_*.css + _*.js)
- Component playground (preview/playground.html) — v3 chrome + keyboard
- Combined Tweaks panel (playground-tweaks.jsx)
- Field responsive icon-hiding (inputs / textarea / select / search)
- Tweaks panel shell (tweaks-panel.jsx) — additions
- CSS architecture (layers + tokens + state)- Prototype preview app (ui_kits/cos-library)
- Buttons (_buttons.css)
- Search field (_field.css) — shared component
- Cover card (comp-cover-card.html)
- Tweaks panel — collapsible sections
- Library dataset (library-data.js)
- Request status (comp-status.html)
- Reduced motion (global policy — colors_and_type.css)
- Region navigation — F6 + skip links (comp-region-nav.html)
- Brand header (brand-header.html)
- Breadcrumbs (comp-breadcrumbs.html)
- Keyboard navigation (comp-pagination.html)
- Compact symmetric width (comp-pagination.html)
- Responsive driver (comp-pagination.html)
- Pagination logic (comp-pagination.html)
- Compact pagination (comp-pagination.html)
- Checkbox &amp; radio (comp-checkbox-radio.html)
- Doc-type chips — treatments (_chips.css)
- Preview helper styling (_help.css)
- Filter group (comp-filter-group.html)
- Filter pills
- Related documents (comp-related.html) — incl. the reference parser contract (`parseRefsDetailed` in _related.js), type-aware `findByRef` in data-preview, tests in preview/test-related-parse.html
- Focus / state playground
- Source-of-truth files
- Brand & visual identity
- Typography
- Color
- Iconography
- Dark mode architecture
- Copy & content — incl. the DS-wide LANGUAGE RULE: English only for DS chrome (playground/Inspector/comp-page captions/demo buttons); Czech reserved for example content, prototype product copy, mock data
- Tooltip
- Refactor playbook — putting a component onto the system
- Segmented control
- Switch
- Combobox / Select
- Accessibility