Add Ember color theme ...

Muted warm scheme: faded warm neutrals and paper text, soft
orange as the single expressive accent, status colors pulled
toward the warm range (sage success, brick error, amber
warning, warm-gray info). Third option in the demo switcher.

Enlarge topbar brand mark to 48px

Restyle tabs as a contained segment switcher ...

The tab list becomes a framed panel with inner padding, and
tabs are rounded chips inside it: subtle hover highlight,
filled primary active state, hairline separators removed.
Matches the demo theme switch style.

Soften Verdant palette ...

Desaturate the neutrals, text tones and accents so the green
reads calmer: barely-tinted darks and text, softer mint
secondary, muted lime accent, desaturated teal info.

Add Verdant color theme with demo switcher ...

Palette variables become !default so themes can configure them.
kit-verdant.scss / demo-verdant.scss compile the green-shifted
palette (green-tinted neutrals, mint secondary, lime accent,
teal info) into kit-verdant.css / demo-verdant.css. Both demos
get a fixed theme switch in the corner that swaps the theme
stylesheets and persists the choice. The default Tokyo Night
theme is unchanged.

Rework toasts for readability ...

Replace translucent state-tinted backgrounds with an opaque
panel: state color now lives on the border, icon, title and
progress bar only. Body text is lighter and one size larger,
padding is more generous, and the panel gains the same
elevation shadow as dropdowns and popovers.

Round inverted contrast headings

Round list-nav items individually ...

Each list-action takes the small radius so hover highlights
are rounded on every row, not just the clipped ends of the
stack. The container clip is no longer needed.

Round palette color swatches

Round icon buttons

Round timeline markers and nav list stack ...

Timeline markers take the small radius; list-nav clips its
flush item stack with the panel radius, which also rounds the
navigation drawer menu.

Round nav drawer title chip

Round navigation shell controls and preview frame ...

The topbar current-page chip and drawer close button take the
small radius; the shell preview frame takes the panel radius.
Flush shell chrome (topbar, sidebar, footer) stays square.

Round tables and remaining bordered panels ...

Tables switch to border-collapse: separate with corner cells
rounded so cell backgrounds clip cleanly. Accordion, disclosure,
description list, activity log, page header, usage meter,
progress tracks and stages, quote, kbd, steps and drawer preview
now use the shared radius tokens. Vertical steps stay flush.

Extend light border radius to remaining components ...

Badges, alerts, toolbar, pagination, empty state, skeleton,
advanced select popup, step markers, code blocks, timeline
cards and definition lists now use the shared radius tokens.
Tables stay square (border-collapse suppresses radius), the
drawer stays flush to the screen edge.

Add light border radius across components ...

- New tokens: $border-radius-sm (3px controls), $border-radius-md
  (6px panels), $border-radius-pill (switch track)
- Apply via hard_panel and per-component: buttons, inputs, tabs,
  range thumb, checkbox, switch, chips, avatars, dropdown/popover/
  tooltip panels, modal, toast, file upload, input group, code examples
- Drawer stays sharp (flush to screen edge)

Quieten card, modal, drawer and toast accents ...

- Mute frames: base card, modal panel, drawer and default toast
  borders go from full-brightness to border-color-muted
- Replace inverted title bars (card, modal, drawer) with plain
  uppercase typography
- state_panel: state color now reads on the border and title text
  instead of a solid title bar

Remove hover scan animation from page header

Reduce control and typography density across the kit

Constrain docs page container to the content column width

Let docs-intro span the full container width

Expose design tokens as --gn-* CSS custom properties in kit.css

Collapse code examples in demo pages ...

Each .code-example block is now collapsed by default: the header keeps
its title and copy button and gains a chevron toggle (built at runtime
by code-examples.js, works identically in vanilla and Vue demos since
they share the demo bundle). Expanded state is one next-frame class
flip with aria-expanded/aria-controls on the button.

Demo page height drops 50555px -> 32603px (~35% shorter); demo-sync
stays at 0 differences.

Split _forms.scss by component ...

- _forms.scss (254): form-group, inputs, selects, form-grid, fieldset
- _file-upload.scss (280): file upload panel + its responsive rules
- _range.scss (46): range slider
- _choice-controls.scss (220): radio, radio-group, switch, checkbox
kit.scss imports them in the original cascade order; screenshots and
demo-sync (27 sections, 0 diffs) confirm no visual change.

Extract useOverlayTransition composable ...

Encode the CLAUDE.md overlay transition contract (hidden state class on
first render, visible class on nextTick + rAF, unmount after the closing
transition) as a composable; GnModal and GnDrawer now share it.
Composable is unit-tested; demo sync stays at 0 differences.

Add Vue adapter behavior contract tests ...

- vitest + jsdom + @vue/test-utils; 38 tests over utils, GnModal,
  GnToastProvider, GnFileUpload, GnCombobox covering the CLAUDE.md
  behavior contracts (focus trap, a-hide/a-show transition order,
  single-toast replacement, object URL cleanup, combobox ARIA/keyboard)
- wire test:unit into release:check
- fix GnModal never opening when mounted with open=true (watcher had
  no immediate flag; demo only ever toggles open after mount)

Fix v0.4.0 review findings and demo asset paths ...

- Restore visible hover feedback on radio/checkbox (background $color-grey)
- Drop dead checked/hover border-color rules; guard checked with :not(:disabled)
- Tokenize radio border as $border-width-choice and add $range-thumb-size
  so the choice-size bump no longer widens range slider thumbs
- Add cursor: pointer to switch wrapper
- Revert escaped doc snippets to absolute URLs (relative sweep was
  teaching fake ./routes in documentation samples)
- Add compare-heights.js demo sync check with CHROME_PATH fallback;
  ignore screenshots/

v0.4.0 — GnRepeater, redesigned checkbox/radio ...

- Add GnRepeater Vue component for dynamic field groups
- Redesign checkbox and radio styles to match kit aesthetic:
  hard-panel background, accent borders, checkmark/dot indicators,
  hover → primary border, checked → subtle tint + colored mark
- Bump version to 0.4.0

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Add GnRepeater component for dynamic field groups ...

- New Vue adapter: GnRepeater with v-model, scoped #item slot,
  minItems/maxItems guards, and built-in Add/Remove UI
- SCSS: .repeater, .repeater-header, .repeater-item,
  .repeater-item-body, .repeater-item-actions
- Demo: vanilla repeater with inline JS + GnRepeater in Vue forms
- Build verified: compare-heights reports 0 differences

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Add GnTagInput component for multi-value string input ...

Features:
- New GnTagInput Vue component with inline chip display
- Enter / paste (with separator split) to add tags
- Backspace in empty field removes last tag
- Unique check and maxItems limit
- Removable chips with x button

Style:
- Add _tag-input.scss with .tag-input, .tag-input-wrap, .tag-input-field
- Chips reuse existing .chip-secondary styling

Demo:
- Add interactive tag input example to Forms section (vanilla + Vue)
- Add code example blocks for HTML and Vue usage

Docs:
- Add GnTagInput to CLAUDE.md component catalog

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>