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.

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.

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>

Redesign toast UX: compact layout, progress bar, title-only mode ...

- Replace heavy colored header strip with inline icon+title header
- Add thin bottom progress bar showing remaining lifetime
- Support title-only compact single-line toasts (no text = no body padding)
- Increase tinted background opacity from 0.06 to 0.18 for visibility
- Fix vanilla toast defaults: all variants now use lifetime=4000, alone=true
- Add demo buttons for title-only variants in both vanilla and Vue demos
- Remove hover effect from toast close button
- Adjust close button position (top: 5px) and progress bar margin (1px)

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

v0.3.0 — GnUserCard, NavigationShell footer slot, Vue demo partials ...

Features:
- Add GnUserCard Vue component with compact and full variants
- Add GnNavigationShell #footer slot for custom footer content
- Add profile footer demo in navigation-shell section
- Split demo/vue.html into 27 partials under demo/partials/vue/
- Fix toast open animation (nextTick + requestAnimationFrame pattern)

Style:
- Add .user-card and .user-card-compact to _cards.scss
- Add .profile-identity to _navigation-shell.scss

Docs:
- Add demo synchronization rules to CLAUDE.md

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

Fix Vue demo visual issues and expand component showcase ...

- _forms.scss: rename .checkbox to .switch, create proper .checkbox
  for checkbox (square) vs switch (slider) differentiation
- GnSwitch.js: create dedicated switch component using .switch class
- _forms.scss: add .radio-group with flex-wrap gap for radio layouts
- GnRadioGroup.js: add radio-group class to container
- _cards.scss: fix .card-horizontal .card-media sizing with
  max-height, aspect-ratio, and align-self: start
- demo/vue.html: fix steps data (label → title)
- demo/vue.html: fix definition list data (definition → description)
- demo/vue.html: add Accordion, InputGroup demos
- demo/vue.html: add NavigationShell import (component registered)

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

Fix Vue demo: dark theme, label color, expanded component showcase ...

- demo/vue.html: replace broken CSS custom properties with real kit colors
  (body background #16161E, text #C0CAF5)
- demo/vue.html: update Vue CDN to 3.5.13
- demo/vue.html: expand demo to show 30+ components including
  Drawer, ConfirmDialog, Navigation, Progress, Timeline, Data Display,
  Identity, Chips, Toolbar, Overlays, EmptyState, Skeleton, Toasts
- _forms.scss: add color: $color-text-light to .label so labels are
  readable on dark backgrounds
- Add toast interaction demo buttons

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