npm - @keenmate/pure-css - Versions diffs - 1.0.0-rc04 → 1.0.0-rc05 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/CHANGELOG.md +90 -0
package/README.md +29 -5
package/dist/css/pure-css.css +1222 -0
package/package.json +5 -2
package/src/js/container-breakpoint.js +308 -0
package/src/js/fit.js +890 -0
package/src/js/navbar-dropdown.js +164 -0
package/src/js/pure-css.js +305 -0
package/src/js/sidebar-resize.js +210 -0
package/src/scss/_fit-flyout.scss +76 -0
package/src/scss/_layout-container.scss +168 -0
package/src/scss/_layout-responsive.scss +181 -0
package/src/scss/_navbar-elements.scss +419 -0
package/src/scss/_navbar.scss +120 -0
package/src/scss/_pa-grid.scss +1 -1
package/src/scss/_resize-handle.scss +76 -0
package/src/scss/_sidebar-states.scss +243 -0
package/src/scss/_sidebar.scss +420 -0
package/src/scss/pure-css.scss +13 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,96 @@
 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-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 CHANGED Viewed

@@ -4,6 +4,13 @@ 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-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.
 ## What's New in 1.0.0-rc04
 - **pure-css is now strictly a base — it emits only the base token contract
@@ -40,11 +47,6 @@ so it can be consumed on its own.
 - **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.
 ## Why
 Any surface that isn't a full admin app — a docs site, a marketing page, a standalone widget host —
@@ -102,6 +104,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