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

Add AI agent guide, AGENTS.md and useWhen to component catalog

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.

Add static demo section sync check ...

scripts/check-demo-sections.mjs verifies without a server that
demo/index.html and demo/vue.html include the identical section
sequence, that every included partial exists in both variants, and
that no partial is orphaned. Wired into release:check as
test:demo-sections.

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.

Generate CLAUDE.md component catalog from a single source ...

- docs/catalog.json is now the source of truth for the Component Catalog
- scripts/generate-catalog.mjs renders the table into CLAUDE.md (between
  GENERATED markers) and validates every listed prop/slot against the
  actual declarations in src/vue/components/*.js
- fixed stale catalog rows found by the validator: GnUsageMeter, GnSteps,
  GnAvatar, GnStatusCard, GnMetricCard
- test:catalog (--check) wired into release:check

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)

Add demo-sync gate and GitLab CI ...

- compare-heights.js wired into release:check as test:demo-sync
- .gitlab-ci.yml: build + release:check on the Playwright docker image
- install pinned playwright chromium locally

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>

Disable BrowserSync ghostMode and fix login-card sizing ...

- gulpfile.js: add ghostMode: false to stop scroll sync across tabs
- _cards.scss: .card.login-card max-width 460px → max-width: 100%; width: 460px

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

Style login card: 460px max-width, max-content submit, centered form-group ...

- .card.login-card max-width 360px -> 460px
- .login-card-submit width 100% -> max-content
- Fix .form-group indentation inside .login-card
- Demo login button: btn-secondary with-icon ph-sign-in

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

Fix demo navigation to rely only on URL hash ...

Removed scroll-based active-section detection. Navigation now uses
`hashchange` event and `window.location.hash` exclusively, preventing
cross-tab state leakage.

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

Add GnLoginCard component for standardized login forms ...

- Create GnLoginCard Vue adapter component with username/password
  fields, optional remember-me checkbox, submit button, and
  forgot-password / sign-up links.
- Add `.login-card` styles in _cards.scss with centered header,
  full-width submit button, and spaced link row.
- Register GnLoginCard in plugin and index exports.
- Add login-card demo block to demo/partials/cards.html.
- Update CLAUDE.md, README, and Vue docs with component entry.

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

Fix copy-button contrast on code-example-header ...

.code-example-header has a $color-primary (light) background, so the
default $color-text-light icon was invisible. Force `.btn-icon` inside
the header to $color-black with matching hover border.

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