@keenmate/pure-css 1.0.0-rc04 → 1.0.0-rc06

package/CHANGELOG.md

@@ -3,6 +3,139 @@
 All notable changes to `@keenmate/pure-css` are documented here. Format based on
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.0.0-rc06] — 2026-08-30
+
+### Fixed
+
+- **The app shell now renders standalone — component `--pc-*` tokens fall back to
+  `--base-*`.** rc05 relocated the shell into the foundation, but its CSS
+  hard-referenced component tokens (`--pc-navbar-bg`, `--pc-sidebar-*`,
+  `--pc-footer-*`, `--pc-card-bg`, `--pc-input-bg`) that pure-css does **not**
+  emit — those are pure-admin's `output-pc-component-variables` contract. So a
+  consumer linking `base.css` / `pure-css.css` alone (keen-docs hit this) got an
+  unstyled navbar/sidebar. Every such reference now carries a `--base-*` fallback
+  traced from the token's own derivation: `var(--pc-navbar-bg, var(--base-main-bg))`,
+  `var(--pc-sidebar-bg, var(--base-page-bg))`, navbar/sidebar text →
+  `--base-text-color-1/2`, borders → `--base-border-color`, submenu surfaces →
+  `--base-subtle-bg`, input → `--base-input-bg`. This makes `--pc-*` an *optional*
+  override layer over a guaranteed `--base-*` floor — link only the base vars and
+  the shell just works; set `--pc-navbar-bg` to tune the bar independently of the
+  page. 40 references across the eight shell partials.
+- **Dangling token references in `_fit-flyout.scss`.** The fit-flyout trigger
+  referenced `--pc-accent-color` (defined nowhere — the token is `--pc-accent`)
+  with no fallback, so its focus outline was inert; and `--pc-hover-bg` (also
+  undefined) with only an rgba literal. Repointed to
+  `var(--pc-accent, var(--base-accent-color))` and
+  `var(--pc-hover-bg, var(--base-hover-bg, rgba(…)))`.
+
+### Changed
+
+- **Unified the `--pc-border-radius*` scale with the `--base-border-radius-*`
+  contract the components already use.** pure-css shipped two disconnected radius
+  systems: `--base-border-radius-sm/md/lg` (the unitless rem-multipliers
+  `0.4/0.6/0.8` every web/svelte component reads — e.g. web-multiselect's
+  `calc(var(--base-border-radius-md) * --ms-rem)`), and its OWN
+  `--pc-border-radius-sm/base/lg` as hardcoded `2px/4px/8px` literals disconnected
+  from the base layer. On one themed page a `<keen-web-multiselect>` and a pure-css
+  `.rounded` element rounded differently, and a runtime `--base-border-radius-*`
+  override re-rounded the components but not pure-css's own elements. The three
+  `--pc-border-radius*` tokens now derive from the base contract —
+  `calc(var(--base-border-radius-{sm,md,lg}, <default>) * 1rem)` (unsuffixed
+  `--pc-border-radius` = the `-md` mid step) — mirroring how `--pc-border-color`
+  already tracked `--base-border-color`. **Rendered radii change** to match the
+  ecosystem: `-sm` 2px → 4px, mid 4px → 6px, `-lg` 8px (unchanged). Overriding
+  `--base-border-radius-*` now re-rounds pure-css and the components together.
+
+## [1.0.0-rc05] — 2026-08-27 [PUBLISHED]
+
+### Added
+
+- **The app shell moves into the foundation — navbar, sidebar, and layout
+  container.** pure-css was variables + grid + utilities; rc05 also relocates the
+  structural app-shell layer out of pure-admin-core, so a standalone page (docs
+  site, portal) gets the same navbar/sidebar/layout chrome as a full pure-admin
+  app without pulling in the component library. Seven new partials, all `@use`d
+  into the `pure-css.css` **bundle only** (base.css / grid.css / utilities.css
+  untouched; no new standalone artifact):
+  - `_navbar.scss` + `_navbar-elements.scss` — the fixed navbar (`.pc-navbar`
+    with `__inner`/`__start`/`__center`/`__end` regions) and its elements (burger
+    menu, brand wordmark `.pc-app-header`, nav menu `.pc-navmenu`, page title
+    `.pc-page-header`, profile button, theme switcher).
+  - `_sidebar.scss` + `_sidebar-states.scss` — the sidebar nav with nested
+    submenus (`.pc-sidebar`, `.pc-layout__sidebar`, drag-to-resize
+    `.pc-sidebar-resize`) and its hidden / icon-collapse / expanded states.
+  - `_layout-container.scss` — the layout wrapper (`.pc-layout` with
+    `__inner`/`__main`/`__content`/`__footer` and the `.pc-footer__*` regions),
+    including sticky/scroll content modes. Emitting `.pc-layout__main` here also
+    gives the grid's container-query responsive columns (`.pc-col-md-*`) their
+    documented automatic containment context in the same bundle (the
+    `_pa-grid.scss` note is corrected from the pre-rc04 `.pa-layout__main` to
+    `.pc-layout__main`).
+  - `_layout-responsive.scss` — the mobile/tablet media queries for the shell.
+  - `_resize-handle.scss` — a mixin-only partial (emits nothing on its own)
+    providing the shared grab-knob look `@use`d by the sidebar resize handle and
+    splitter gutters.
+  - `_fit-flyout.scss` — the Fit engine's floating-menu sink
+    (`.pc-fit-flyout__*`): a `•••` trigger + a `<body>`-parented panel that
+    `fit.js` fills on demand when slots relocate out of the row.
+
+  pure-admin-core keeps same-named partials that now just `@forward` these, so the
+  shell is single-sourced in the foundation and the two can't drift.
+
+- **The shell's behaviour ships too — a dependency-free JS runtime (`src/js/`).**
+  The shell is no longer styling-only: the foundation now carries the vanilla-JS
+  runtime that drives it, so pure-css is no longer a CSS-only package. Shipped
+  **as source** (no build step) via a new `./js` export (and `./js/*` for
+  individual engines); `files` gains `src/js/`.
+  - `pure-css.js` installs the `window.pureCss` namespace — a tiny event bus,
+    live viewport / OS-colour-scheme / capability-first device sources, overlay
+    primitives (scroll-lock, keyboard-inset), an open-menu registry, a shared
+    `config` baseline (single-sourced from SCSS via `--pc-*` vars), and
+    `components.initAll(scope)`. Load-order-safe and stands alone when pure-admin
+    is absent; `pure-admin.js` adopts the same buses by reference on top.
+  - `fit.js` — the Fit engine (`data-pc-fit` = hide / steps / relocate). It
+    **absorbs the former `navbar-collapse.js`** (progressive nav folding via
+    `data-pc-fit-nav`, sinking items to the sidebar or a generated "More" menu),
+    so that separate file no longer exists.
+  - `navbar-dropdown.js` (tap-toggle nav dropdowns/submenus),
+    `sidebar-resize.js` (drag-to-resize the sidebar), and
+    `container-breakpoint.js` (container-query breakpoint driver).
+
+  Shell CSS is authored no-JS-safe, so styling degrades gracefully rather than
+  breaking when the runtime isn't loaded.
+
+### Fixed
+
+- **Migrated the dead `data-pa-nav-collapse` hook to `data-pc-fit-nav`.** The
+  relocated nav-collapse CSS keyed on the pre-rc04 `pa-`-branded
+  `[data-pa-nav-collapse]` attribute driven by the old `navbar-collapse.js`;
+  since that engine is now merged into `fit.js` (which reads `data-pc-fit-nav`),
+  the selectors in `_navbar-elements.scss` / `_layout-responsive.scss` were stale
+  and matched nothing. Repointed at `[data-pc-fit-nav]` and corrected the
+  companion comments (`navbar-collapse.js` → `fit.js`). Also de-branded the fit
+  hide-class `.pa-fit-hidden` → `.pc-fit-hidden`.
+
+### Internal
+
+- **GitHub Actions release workflow (`.github/workflows/release.yml`).** On a `v*.*.*`
+  tag push, builds the CSS (`npm ci` + `npm run build`) and publishes a GitHub Release
+  with a `pure-css-<version>.zip` (bundling `dist/`, `src/scss/`, `README.md`,
+  `CHANGELOG.md`, `LICENSE` — the same set as the package `files`, so the zip is a
+  toolchain-free drop-in for consumers who don't use npm) plus a `.sha256` checksum.
+  Auto-generated release notes; tags containing `-` (rc) publish as a pre-release.
+  Mirrors pure-admin-core's release workflow, adapted for this single-package repo.
+- **Exhaustive, data-driven utilities e2e coverage.** Rewrote `e2e/utilities.spec.ts`
+  from a handful of spot-checks into a hard value assertion for 655 of the 664 shipped
+  utility classes (the 9 `auto` sizing classes — `m-auto` + per-side, `w-auto`, `h-auto` —
+  are layout-resolved and covered behaviourally instead). Each family measures every one
+  of its classes' computed styles in a single in-browser pass, then diffs in Node so a
+  failure lists exactly which classes are off; the expectations independently encode the
+  10px-rem contract and the documented scales rather than reading them back from the CSS,
+  so a failure means the compiled output disagrees with the contract or the contract
+  regressed. Renamed the fixture `test/utilities.html` → `test/utilities-scale.html` with
+  definite-size `#w-parent` / `#h-parent` containers so percentage widths/heights resolve
+  to known px. Test-only — no change to shipped CSS.
+
 ## [1.0.0-rc04] — 2026-08-26 [PUBLISHED]
 
 ### Changed (BREAKING)

package/README.md

@@ -4,46 +4,17 @@ The KeenMate CSS **foundation** — the `--base-*` theming contract, the flexbox
 utility classes — extracted from [`@keenmate/pure-admin-core`](https://github.com/KeenMate/pure-admin)
 so it can be consumed on its own.
 
-## What's New in 1.0.0-rc04
-
-- **pure-css is now strictly a base — it emits only the base token contract
-  (BREAKING).** `base.css` / `pure-css.css` ship the ~46 base `--pc-*` tokens the
-  foundation actually uses or exposes as universal primitives; the ~165 component
-  tokens (buttons, cards, tables, alerts, panels, …) are pure-admin's contract,
-  emitted by the new `output-pc-component-variables` mixin. If you author themes
-  or call the emit mixins, add `@include output-pc-component-variables;` after
-  `output-pc-css-variables`. Consumers of compiled CSS are unaffected.
-- **The foundation namespace is fully de-branded from `pa` to `pc` (BREAKING).**
-  pure-css was carved out of pure-admin, so it still carried pure-admin's `pa`
-  brand in its public surface. That's gone:
-  - **Grid + mode classes:** `.pa-row` / `.pa-col*` / `.pa-offset*` / `.pa-cq` /
-    `.pa-hide*` / `.pa-show*` → `.pc-*`; `.pa-mode-light` / `.pa-mode-dark` →
-    `.pc-mode-*`.
-  - **Every emitted CSS variable:** the whole `--pa-*` runtime surface (~210
-    custom properties) → `--pc-*` (`--pa-accent` → `--pc-accent`, `--pa-card-bg`
-    → `--pc-card-bg`, `--pa-color-1..9` → `--pc-color-1..9`, …). `--base-*`
-    (web-component bridge) and `--page-loader-*` are unchanged.
-  - **The emit mixins:** `output-pa-css-variables` → `output-pc-css-variables`,
-    `output-pa-alert-variables-light/dark` → `output-pc-alert-variables-*`.
-  Consumers migrate markup, `var()` reads, inline `style="--pa-…"`, and theme
-  `:root` blocks in lockstep — a boundary-aware find/replace of the string
-  `--pa-` → `--pc-` (safe: it can't touch `--base-*`, `--page-loader-*`, or the
-  `.pa-color-{name}` variant **class**).
-- **Sizing utilities consolidated into the foundation.** The universal
-  viewport-height utilities (`h-full` / `h-screen` / `min-h-full` /
-  `min-h-screen` / `max-h-full` / `max-h-screen`) and the Tailwind-style flex
-  shorthands (`flex-1` / `flex-auto` / `flex-initial` / `flex-none` /
-  `flex-grow` / `flex-shrink`) now ship from pure-css, so a standalone page gets
-  the complete set without borrowing anything from pure-admin. pure-admin's
-  duplicate rem-height `h-Nx` / `min-h-Nx` / `max-h-Nx` classes are retired in
-  favour of the foundation's `hr-` / `wr-` naming (`r` = rem).
-- **Complete form-spacing contract as runtime `--pc-*` variables** and the
-  `$form-scale` → `$form-gap` rename (see CHANGELOG).
-
-## What's New in 1.0.0-rc03
-
-- **Theming contract — top-bar region tokens renamed from `header` to `navbar` (BREAKING).** The foundation's top-region tokens named the bar as a *component block* (`header`) rather than the layout region it actually is, which read as misleading once pure-admin's navbar component dropped its legacy `pa-header__*` block naming. Every top-bar token is renamed on both sides of the cascade: the `$header-*` SCSS source variables (`$header-height` → `$navbar-height`, `$header-bg` → `$navbar-bg`, `$header-border-color`, `$header-text`, `$header-text-secondary`, `$header-profile-name-color`, and `$z-index-header` → `$z-index-navbar`) and the emitted `--pa-header-*` custom properties (`--pa-navbar-bg`, `--pa-navbar-border-color`, `--pa-navbar-text`, `--pa-navbar-text-secondary`, `--pa-navbar-profile-name-color`). Consumers reading the old names must update — `$footer-height` still mirrors the bar height (now `$navbar-height`), and the component-header tokens (`$card-header-*`, `$table-header-*`) are deliberately untouched since those *are* component blocks.
-- **Removed the dead `$header-brand-padding-left` variable.** It was superseded by the navbar's flex `gap`; no live rule consumed it — only a stale comment still referenced it — so it's gone from the source of truth.
+## What's New in 1.0.0-rc06
+
+- **The app shell renders standalone — no `--pc-*` component setup required** — rc05 moved the shell into the foundation, but its CSS referenced component tokens (`--pc-navbar-bg`, `--pc-sidebar-*`, `--pc-card-bg`, …) that pure-css doesn't emit, so linking `base.css` / `pure-css.css` alone gave an unstyled navbar/sidebar (keen-docs hit this). Every such reference now falls back to a `--base-*` var that pure-css *does* emit — `var(--pc-navbar-bg, var(--base-main-bg))` and friends, 40 in all, each traced from the token's real derivation. That's a clean two-tier contract: link the base vars and the shell just works out of the box; set the `--pc-*` token only when you want to fine-tune a piece independently. Also fixed two dangling refs in the fit flyout (`--pc-accent-color` → `--pc-accent`, plus a `--base-hover-bg` tier for `--pc-hover-bg`).
+- **One border-radius scale across the whole ecosystem** — pure-css shipped two disconnected radius systems: the `--base-border-radius-sm/md/lg` multipliers every web/svelte component reads (e.g. web-multiselect), and its own `--pc-border-radius*` as hardcoded 2/4/8px literals that ignored the base layer — so a `<keen-web-multiselect>` and a pure-css `.rounded` element rounded differently on the same theme, and a runtime `--base-border-radius-*` override moved the components but not pure-css's own elements. The `--pc-border-radius*` tokens now derive from `--base-border-radius-*` (`calc(var(--base-border-radius-md, 0.6) * 1rem)`), so radii match the components and one override re-rounds everything together. Rendered corners change slightly: small 2px→4px, medium 4px→6px, large unchanged.
+
+## What's New in 1.0.0-rc05
+
+- **App shell — the navbar, sidebar, and layout container join the foundation** — pure-css has been variables + grid + utilities since the extraction; rc05 relocates the structural *app-shell* layer out of `@keenmate/pure-admin-core`, so a standalone page gets the same navbar/sidebar/layout chrome as a full admin app without pulling in the 40+ component library. Eight new partials (`_navbar.scss`, `_navbar-elements.scss`, `_sidebar.scss`, `_sidebar-states.scss`, `_layout-container.scss`, `_layout-responsive.scss`, `_resize-handle.scss`, `_fit-flyout.scss`) `@use` into the `pure-css.css` bundle — `base.css`, `grid.css` and `utilities.css` are untouched and there's no new CSS artifact. The emitted surface is `pc-`-branded like the rest of the foundation: the fixed navbar (`.pc-navbar` + `__start`/`__center`/`__end`, burger, brand `.pc-app-header`, `.pc-navmenu`, profile button, theme switcher), the nested sidebar with hidden/icon-collapse/expanded states and a drag-to-resize handle (`.pc-sidebar`, `.pc-layout__sidebar`, `.pc-sidebar-resize`), and the layout wrapper (`.pc-layout` + `__main`/`__content`/`__footer`) with mobile/tablet media queries. pure-admin-core now `@forward`s same-named partials instead of owning copies, so the shell is single-sourced here and can't drift.
+- **The shell now brings its own behaviour — pure-css is no longer CSS-only** — the shell's JavaScript ships with the foundation as a small, dependency-free runtime under `src/js/`, exposed as source (no build step) via a new `./js` export. `pure-css.js` installs `window.pureCss` — an event bus, live viewport / OS-colour-scheme / capability-first device sources, overlay primitives (scroll-lock, keyboard-inset), an open-menu registry, a shared `config` baseline single-sourced from the SCSS via `--pc-*` vars, and `components.initAll(scope)` — and the shell engines hang off it: `fit.js` (the `data-pc-fit` fit engine, which also absorbed the former `navbar-collapse.js` progressive nav-folding via `data-pc-fit-nav`, so that file no longer exists), `navbar-dropdown.js`, `sidebar-resize.js`, and `container-breakpoint.js`. The runtime is load-order-safe and stands alone when pure-admin is absent; the shell CSS is authored no-JS-safe, so styling degrades gracefully rather than breaking when the runtime isn't loaded.
+- **The grid's automatic responsive context now ships in the same bundle** — `_pa-grid.scss`'s container-query responsive columns (`.pc-col-md-*`, …) need a containment-context ancestor, documented as `.pc-layout__main`. That selector previously lived only in pure-admin-core, so the note was aspirational for a standalone pure-css page; with `_layout-container.scss` relocated into the bundle, `.pc-layout__main` is emitted here and the responsive variants get their context out of the box (the stale comment still read `.pa-layout__main` from before the rc04 de-brand — corrected to `.pc-layout__main`).
+- **Toolchain-free zip distribution via GitHub Releases** — a new `.github/workflows/release.yml` builds the CSS on every `v*.*.*` tag push and publishes a GitHub Release carrying `pure-css-<version>.zip` (the same file set as the npm package — `dist/`, `src/scss/`, `README.md`, `CHANGELOG.md`, `LICENSE`) plus a `.sha256` checksum, so consumers who don't use npm can vendor the built foundation as a drop-in. rc tags (those containing `-`) publish as GitHub pre-releases. Mirrors pure-admin-core's release workflow, adapted for this single-package repo.
 
 ## Why
 
@@ -102,6 +73,28 @@ $base-page-bg: #0b1020;
 | `dist/css/grid.css` | `.pc-row` / `.pc-col-*` (percentage + fraction columns, container-query responsive) | layout only |
 | `dist/css/utilities.css` | spacing / flex / display / width-height utilities (`.m-4`, `.d-flex`, `.w-50`, …) | utilities only |
 
+The `pure-css.css` bundle also includes the **app shell** (navbar, sidebar,
+layout container) — `base.css` / `grid.css` / `utilities.css` do not.
+
+### The app-shell runtime (`./js`)
+
+The shell's behaviour (nav fit/collapse, dropdowns, drag-to-resize, container
+breakpoints) ships as dependency-free source JS via the `./js` export — no
+bundler required, drop it in with a `<script>` and call `initAll`:
+
+```html
+<link rel="stylesheet" href="node_modules/@keenmate/pure-css/dist/css/pure-css.css">
+<script src="node_modules/@keenmate/pure-css/src/js/pure-css.js"></script>
+<script src="node_modules/@keenmate/pure-css/src/js/fit.js"></script>
+<script src="node_modules/@keenmate/pure-css/src/js/navbar-dropdown.js"></script>
+<script src="node_modules/@keenmate/pure-css/src/js/sidebar-resize.js"></script>
+<script>window.pureCss.components.initAll(document);</script>
+```
+
+`window.pureCss` also exposes an event bus and live `viewport` / `colorScheme` /
+`device` sources. The runtime is optional — shell CSS is authored no-JS-safe, so
+the styling stands on its own and the JS only adds the interactive behaviour.
+
 ### The `--base-*` contract
 
 `--base-*` is the **single source of truth for theming**. Framework colors, component variables

package/dist/css/base.css

@@ -142,7 +142,7 @@
   --pc-color-7-text: #ffffff;
   --pc-color-8-text: #ffffff;
   --pc-color-9-text: #ffffff;
-  --pc-border-radius-sm: 2px;
-  --pc-border-radius: 4px;
-  --pc-border-radius-lg: 8px;
+  --pc-border-radius-sm: calc(var(--base-border-radius-sm, 0.4) * 1rem);
+  --pc-border-radius: calc(var(--base-border-radius-md, 0.6) * 1rem);
+  --pc-border-radius-lg: calc(var(--base-border-radius-lg, 0.8) * 1rem);
 }