# Changelog

## 1.4.0

- **Brought docs back in sync with the components they document.** `panel.md` now documents `panel__row`/`panel__row--highlight` and the `panel__icon--sm`/`--lg` sizes added in 1.3.0; `level.md` documents `level--sm` and `level__label`; `title.md` documents `title--inverse`; `foundations/typography.md` documents the `.text-ink`/`.text-muted`/`.text-inverse`/`.uppercase` utility classes. All 13 non-background component docs now list their per-variant HTML snippet files in the Location section, matching the pattern `background.md` already used. `customization/creating-new-components.md` now states the single-source-of-truth rule explicitly (demo pages may only add layout CSS, never new visual styling) so it's documented, not just enforced by habit.
- Fixed stale counts left over from earlier rounds: `docs/README.md` and `docs/getting-started/project-structure.md` still said "5 showcases" (Menu, Level Select, Gameplay, Pause, Game Over) and "74 generic interface icons" — both now correctly show all 14 showcases and 37 UI icons.
- Regenerated `docs/docs-content.js` from the current `.md` files so the in-app doc viewer (which reads from this file under `file://`, see 1.1.0) reflects all of the above instead of the stale content it was inlined with originally.
- **Fixed inconsistent links in the landing page's 4 feature cards.** Components and Showcases both linked to the same `demo/index.html` root; Icons and Backgrounds instead linked out to `docs/viewer.html`. All 4 now link into the interactive demo consistently — Components → `demo/index.html#components`, Icons → `demo/assets/assets.html` (the live icon gallery), Backgrounds → `demo/components/background/background.html` (the live background component demo), Showcases → `demo/index.html#showcases`. Added matching `id` anchors to `demo/index.html`'s three sections.

## 1.3.1

- Fixed the Loading showcase's title having the same red-on-red contrast problem as the Menu showcase did: `title--primary` text color matches `background--1`'s middle sky band exactly. Added the `title--inverse` variant. Also replaced the "Loading assets…" paragraph's inline style with the `font-bold` / `uppercase` / `text-inverse` / `text-xs` utility classes, consistent with the single-source-of-truth rule from 1.3.0.

## 1.3.0

- **Enforced single-source-of-truth architecture: `src/components` is now the only place visual styling is defined.** Audited every demo/component and demo/showcase page for CSS that invented new visual language instead of reusing the kit's real components. Found and fixed 6 showcases (Leaderboard, Profile, Achievements, Daily Reward, Settings, Menu) that had defined their own one-off chip/row/avatar styling in a local `<style>` block. Demo pages now only contain layout CSS (flex/grid arrangement, gap, width, position) — every color, border, shadow, and radius comes from a `src/components/*.css` file.
- Promoted the patterns those showcases had been reinventing into real, reusable additions to `src/components`: `panel__row` (+ `panel__row--highlight`) for list-style rows inside a panel (used by both Leaderboard and Settings), `panel__icon--sm` / `panel__icon--lg` size variants, `level--sm` + `level__label` for compact state tiles outside the level-select grid (Daily Reward's 7-day strip now reuses `level--completed` / `level--current` / `level--locked` instead of a custom "reward day" chip), and a `title--inverse` variant for titles placed over dark or busy scenery. Also added `.text-ink`, `.text-muted`, `.text-inverse`, and `.uppercase` utility classes to `typography.css` so showcases can compose text styling without writing new color/transform rules.
- **Added copy-paste-ready HTML snippet files for every component variant.** Following the pattern already set by `src/components/background/background-1.html` (etc.), each of the other 13 components now has one standalone `.html` file per variant — e.g. `src/components/button/button--primary.html`, `button--outline.html`, `button--ghost.html`, and so on for badge, card, currency, hud, level, panel, popup, progress, ribbon, tabs, title, and toggle (71 snippet files total). Each file is just the component's markup — no page chrome — ready to drop into a demo page or a consuming project.

## 1.2.1

- **Fixed the background scrolling away with the content on Shop and Achievements.** Both showcases put `overflow-y: auto` directly on `.screen`, the same element the (`position: absolute; inset: 0`) background lived in — so scrolling the page also scrolled the background's positioning reference, dragging it out of view. Scrollable content now lives in a dedicated `.screen__scroll` wrapper (new in `demo.css`), sibling to the background instead of a container for it, so only the foreground scrolls and the background stays pinned behind it at all scroll positions.
- **Added an explicit z-index safety net so the background can never paint over foreground content in any showcase.** `.showcase-frame .screen > .background` is now pinned to `z-index: 0`, and `.screen__content` / `.screen__top` / `.screen__bottom` / `.screen__pause` / `.screen__scroll` default to `z-index: 1` in `demo.css`, so correct stacking no longer depends on each showcase page remembering to set its own z-index locally.

## 1.2.0

- **Fixed a layout bug where several showcase screens rendered only their background, with no components visible.** The `.background--1/2/3` component is `position: relative` by default, which put it in normal document flow — inside a 100vh `overflow: hidden` screen, its full-height flow box pushed any merely-`position: relative` sibling (the actual screen content) out of the visible, clipped area. Every showcase's background wrapper now gets an inline `position:absolute; inset:0` override so it always sits behind the content instead of displacing it. Affected screens: Settings, Daily Reward, Profile, Leaderboard, Loading (previously showed nothing but sky/grid).
- **Every showcase is now presented inside a bordered preview frame** (`.showcase-frame`, new in `demo.css`), matching how component demo pages already show their examples — a title, a one-line description of the components used, then the composition itself boxed at a fixed size. Previously each showcase was a full, page-hijacking composition with its own scroll-lock and no way to tell what components built it; now all 14 read like a page from inside the game, framed rather than taking over the browser tab.
- Added `transform: translateZ(0)` to `.showcase-frame` so it becomes the containing block for `position: fixed` descendants — needed because the Popup component is `position: fixed; inset: 0` by design, and without this fix a popup-based showcase (Pause, Game Over, Victory, Confirmation Modal) would break out of its frame and cover the whole browser viewport instead of staying inside the preview box.
- Simplified every demo page's nav from four links (Components / Assets / Showcases / Docs) down to two (Demo / Docs). `demo/index.html` is now the single hub, listing all three in order: Assets, Components, Showcases.
- Removed the redundant "back" buttons from showcase screens (Menu, Daily Reward, Profile, Leaderboard) now that the shared demo header provides navigation back to the hub.

## 1.1.0

- **Fixed the docs viewer showing "Could not load this document. (Load failed)" for every page.** It previously used `fetch()` to pull each `.md` file, which browsers block when a page is opened directly via `file://` (no server) — the common way this kit is actually opened. All 43 docs are now inlined into `docs/docs-content.js` and read directly from memory, so the viewer works whether the kit is double-clicked open or served over HTTP.
- Removed the "Assets" card from `demo/index.html` — the nav link was enough, the card was redundant.
- Grew the game icon set from 19 to 31: added `currency/diamond`, `currency/coin-stack`, `gameplay/skull`, `gameplay/hourglass`, `gameplay/powerup`, `item/heart-empty`, `item/scroll`, `player/crown`, `reward/star`, `reward/chest-open`, `world/flag-checkered`, `world/portal`. `heart`/`heart-empty` and `chest`/`chest-open` are deliberate state pairs for lives and reward-claim UI.
- Added 9 new showcase screens, built entirely from existing components, bringing the total from 5 to 14: Settings, Shop, Daily Reward, Profile, Achievements, Leaderboard, Victory, Loading, and Confirmation Modal.
- Added a "Showcases" index grid to `demo/index.html` (all 14 screens) and cross-linked the Menu showcase to Settings, Shop, Daily Reward, Profile, Achievements, and Leaderboard.
- Updated icon/showcase counts across the landing page, Assets gallery, and docs to match (37 UI icons + 31 game icons = 68; 14 showcases).

## 1.0.2

- Added a new Assets page (`demo/assets/assets.html`) showing all 37 UI icons and 19 game icons grouped by category, and added an "Assets" link to the nav on every demo page.
- Added a full Colors section (all 6 semantic variants) to the Toggle and Progress demos — the CSS already supported them, the demo just wasn't showing them.
- Wrapped the Tabs demo's Colors/Sizes/panel/disabled examples in the same bordered `.demo-row` frame used by every other component demo, for visual consistency.
- Split the Level demo into separate sections per state (Default, Completed, Current, Locked) instead of mixing all four states into one row.

## 1.0.1

- Fixed `--danger` being identical to `--primary` (`#E54B4B` for both). `--danger` is now `#C1121C`, a darker and more saturated red so destructive/alert states are visually distinct from the main brand action color.
- Added missing `hud--warning` and `hud--danger` variants to `src/components/hud/hud.css` so HUD has the full 6-color semantic set used by the other components.
- Expanded demo pages for Card, Panel, Tabs, Ribbon, HUD, Level, and Title to show every color variant and size — previously each demo only rendered one or two examples even though the CSS supported the full set.
- Reworked the Popup demo (`demo/components/popup/popup.html`) to render `.popup__container` directly in normal page flow instead of the fixed-position `.popup` + `.popup__overlay` wrapper, so all 5 color variants and 4 sizes can be compared side by side without a full-screen modal overlay. The overlay behavior itself is unchanged and still used correctly in the Pause and Game Over showcases.
- Fixed a broken icon path in the Menu and Level Select showcases (`ui/arrow/arrow-left.svg` → `ui/arrow/arrow-left.svg`).

## 1.0.0

First release.

- Original flat-design arcade theme built from scratch — no colors, shadows,
  or shapes borrowed from Candy UI Kit or any other kit in the family. Only
  the folder structure, BEM naming convention, and generic UI icon set are
  shared.
- 5-color brand palette (`#E54B4B`, `#FFA987`, `#F7EBE8`, `#444140`, `#1E1E24`)
  expanded into a full semantic token set in `src/styles/variables.css`.
- Poppins (display/body) + Noto Sans Mono (HUD/score numerals) typography,
  both verified SIL OFL 1.1 and bundled locally.
- 14 components rebuilt in a flat design language: hard offset shadows, small
  boxy radii, bold ink borders, and a "flush press" active state.
- 3 original full-scene backgrounds: Sunset Grid, Neon Marquee, Game Over —
  built entirely from layered CSS (perspective grid floor, striped sun,
  marquee bulbs, hazard stripes), no raster images.
- 19 original flat 2-tone SVG game icons across currency, item, reward,
  world, player, and gameplay categories.
- 74 generic UI icons reused from the shared interface icon set (navigation,
  actions, status, arrows).
- Demo pages for all 14 components and 5 full-screen showcases (Menu, Level
  Select, Gameplay, Pause, Game Over).
- Landing page and a markdown-driven docs viewer covering foundations,
  components, icons, showcases, and customization guidance.