npm - @keenmate/pure-css - Versions diffs - 1.0.3 → 1.0.5 - Mend

@keenmate/pure-css 1.0.3 → 1.0.5

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 (9) hide show

package/CHANGELOG.md +42 -0
package/README.md +216 -217
package/dist/css/base.css +4 -0
package/dist/css/pure-css.css +8 -0
package/dist/css/reboot.css +4 -0
package/package.json +83 -83
package/src/scss/_base-css-variables.scss +6 -0
package/src/scss/reboot.scss +154 -134
package/src/scss/variables/_base.scss +10 -0

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,48 @@
 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.5] — 2026-09-18 [PUBLISHED]
+### Fixed
+- **Ordered lists (`<ol>`) regressed to `disc` bullets instead of numbers.** In
+  1.0.4 the `--pc-list-bullet-type` knob was applied to the shared `ul, ol`
+  reboot rule with a `disc` default, so every `<ol>` (bare, or `.pa-list-ordered`
+  and any consumer's ordered list) rendered filled bullets instead of `decimal`
+  numbers. The marker knob is an **unordered** concern, so it now lives on a
+  `ul`-only rule; `<ol>` keeps the browser-default `decimal` (ordered-marker
+  variants like roman/alpha stay a per-component override). The shared
+  margin/padding rule on `ul, ol` is unchanged.
+## [1.0.4] — 2026-09-18 [PUBLISHED]
+### Added
+- **`--pc-list-bullet-type` — runtime list-marker knob on the `ul, ol` reboot,
+  backed by the `--base-list-bullet-type` contract.** Switch a list's marker
+  (`disc` / `circle` / `square` / `none` / `decimal` / …) without a recompile: set
+  `--pc-list-bullet-type` at `:root`, on an ancestor, or per-instance
+  (`style="--pc-list-bullet-type: square"`). Applies to every list since it sits on
+  the base `ul, ol` reboot. It resolves as
+  `var(--pc-list-bullet-type, var(--base-list-bullet-type, disc))` — the per-instance
+  `--pc-` knob wins when set, else the themeable `--base-list-bullet-type` default
+  (newly added to `@keenmate/base-css-variables`, mirrored as `$base-list-bullet-type`
+  and emitted from `output-base-css-variables` in both `base.css` and the bundle),
+  else the inline browser-default `disc`. The `--pc-` knob itself is **not** emitted by
+  `output-*` mixins — set it only where a per-instance marker is wanted. Lists that
+  reset the marker (`list-style: none` on nav/sidebar menus, `.unstyled`, downstream
+  `--unstyled` / `--bordered` / … modifiers) still win on source order.
+- **Three action / navigation icon tokens: `--base-icon-download`,
+  `--base-icon-link`, `--base-icon-external-link`.** Mask-friendly Lucide glyphs
+  (`download` = tray + down arrow for save-to-disk / export; `link` = chain for
+  hyperlink / attach-URL; `external-link` = diagonal arrow-out-of-box for links
+  that open in a new tab / leave the app), added to `variables/_base.scss` and
+  emitted from `output-base-css-variables` (both `base.css` and the `pure-css.css`
+  bundle carry them). Consumed by pure-admin's `--pa-icon-download` /
+  `--pa-icon-link` / `--pa-icon-external-link` (which fell back to inline glyphs
+  until these landed). Mirrors the canonical `@keenmate/base-css-variables`
+  contract (parity guard green).
 ## [1.0.3] — 2026-09-16 [PUBLISHED]
 ### Added

package/README.md CHANGED Viewed

@@ -1,217 +1,216 @@
-# @keenmate/pure-css
-Keenmate's CSS **foundation** — descended from [Yahoo's Pure CSS](https://purecss.io/) and extended into a
-more robust, themeable layer for real apps. One small, dependency-free package gives you the
-**`--base-*` theming contract** (one block of custom properties re-themes everything at once), a
-modern **flexbox grid** (`.pc-row` / `.pc-col`, container-query responsive — replacing Pure's float
-grid), a set of **utility classes**, and an optional **app shell + JS runtime** (in the
-`pure-css.css` bundle).
-It's the shared layer the whole Keenmate stack agrees on:
-[`@keenmate/pure-admin-core`](https://github.com/Keenmate/pure-admin) builds its component library on
-top of it, and every Keenmate web/Svelte component reads its colours from the same `--base-*`
-variables.
-## What's New in 1.0.3
-- **Icons — seven more glyphs join the `--base-*` contract: config/notification/profile plus the full status family** — three affordance marks and a shared severity family, so every consumer paints them from one theme knob. `--base-icon-settings` (a cog), `--base-icon-bell` (a notification bell) and `--base-icon-user` (a person) cover the preferences / notifications / profile trio, while `--base-icon-info` (circle-i), `--base-icon-success` (circle-check), `--base-icon-warning` (triangle-alert) and `--base-icon-danger` (circle-x) form one severity family so every alert, toast and badge shows the same mark. All are mask-friendly Lucide glyphs authored in `variables/_base.scss` and emitted from `output-base-css-variables`, so both the standalone `base.css` and the `pure-css.css` bundle carry them; they mirror the canonical `@keenmate/base-css-variables` contract (parity guard green) and back pure-admin's `--pa-icon-settings` / `-bell` / `-user` / `-info` / `-success` / `-warning` / `-danger`. Consume via `mask: var(--base-icon-info); background: currentColor`.
-- **Sidebar search — the magnifier is now a themeable masked glyph, not a 🔍 emoji** — `.pc-sidebar__search-icon` previously rendered a literal 🔍 text emoji, which varied by platform and font and couldn't be re-skinned. It's now painted in `currentColor` via `mask: var(--base-icon-search)` — the same technique as `.pc-sidebar__chevron` — so it renders identically everywhere and re-skins from the shared `--base-icon-search` knob, matching the navbar search and pure-admin's `.pa-icon--search`. `font-size: 0` collapses any legacy 🔍 still in markup so it never double-renders, letting consumers drop the emoji from `<button class="pc-sidebar__search-icon">`; the literal Lucide glyph stays the standalone fallback when `base.css` is absent.
-## What's New in 1.0.2
-- **Icons — `copy`, `ellipsis`, `save` and `refresh` glyphs join the shared `--base-*` contract** — four more mask-friendly Lucide glyphs so every consumer paints the same actions from one theme knob. `--base-icon-copy` (two overlapping sheets) is copy-to-clipboard, `--base-icon-ellipsis` (three dots) is the "more / overflow" mark — its vertical `⋮` variant is the *same glyph rotated 90°* (the rotate-one-glyph discipline already used for `chevron`), so there's no separate token to maintain — `--base-icon-save` (a floppy disk) is persist / commit, and `--base-icon-refresh` (two curved arrows, Lucide `refresh-cw`) is reload / re-fetch, sitting alongside `search` and `filter` in the utility-icon row (consumers typically spin it with a CSS animation while a fetch is in flight). The action trio completes the affordance set pure-admin migrated off Font Awesome: its `--pa-icon-copy` / `-ellipsis` / `-save` already routed through these `--base-icon-*` names with inline fallbacks, so they become fully theme-overridable with zero pure-admin change. All are authored in `variables/_base.scss` and emitted from `output-base-css-variables`, so both the standalone `base.css` and the `pure-css.css` bundle carry them; consume via `mask: var(--base-icon-copy); background: currentColor`.
-## Why
-pure-css is a **standalone foundation** you drop onto any surface — a docs site, a marketing page, a
-widget host, or a full application. One small, dependency-free package gives you theming, layout and
-utilities without buying into a component framework.
-Its heart is a single **`--base-*` theming contract**: override one block of custom properties and
-everything re-themes at once — the grid, the utilities, the optional app shell, and any component
-that reads the same variables. Light and dark are built in via `light-dark()`, there's no build step
-to consume it (just link the prebuilt CSS), and it pulls in no runtime dependencies.
-```
-@keenmate/pure-css  (this package)
-  ├─ --base-* theming contract
-  ├─ .pc-row / .pc-col grid
-  ├─ utility classes
-  └─ optional app shell + JS runtime
-        ▲  consumed directly, as built CSS, by…
-        ├── docs sites · portals · marketing pages · widget & component hosts
-        └── @keenmate/pure-admin-core — adds a full component library on top (just one consumer)
-```
-## Installation
-```bash
-npm install @keenmate/pure-css
-```
-## Quick Start
-**Prebuilt CSS (simplest):**
-```html
-<link rel="stylesheet" href="node_modules/@keenmate/pure-css/dist/css/pure-css.css">
-```
-or cherry-pick:
-```html
-<link rel="stylesheet" href="…/pure-css/dist/css/base.css">   <!-- variables only -->
-<link rel="stylesheet" href="…/pure-css/dist/css/grid.css">   <!-- + grid          -->
-```
-**SCSS (customize before compiling):**
-```scss
-// Override the source of truth; everything re-derives.
-$base-accent-color: #4f46e5;
-$base-page-bg: #0b1020;
-@use '@keenmate/pure-css/scss/pure-css';
-```
-## What's in it
-| Artifact | Contents | When to link |
-| --- | --- | --- |
-| `dist/css/pure-css.css` | everything below, in one file | the common case |
-| `dist/css/base.css` | only `:root { --base-*; --pc-*; }` | you just need the theming contract (e.g. to theme embedded web components) or a base for a theme override |
-| `dist/css/component-reset.css` | a `:host` reset (box-sizing + inherited typography pinned to `--base-*`) — the Shadow-DOM counterpart to reboot | building a web component: adopt it into the shadow root (e.g. `import '@keenmate/pure-css/component-reset?inline'`) so the host page can't bleed styles in; pair with `base` |
-| `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
-(`--pc-*`) and web/svelte components all derive from it via fallback chains
-(`--ms-accent-color: var(--base-accent-color, #3b82f6)`). Categories: accent, text, background,
-border, input, dropdown, tooltip, contextual (success/danger/warning/info), interactive states,
-typography, border-radius, spacing/shadow/motion/z-index scales, and icons. The full list is
-`src/scss/variables/_base.scss`.
-#### Icons
-`--base-icon-*` are mask-friendly SVG glyphs (Lucide defaults) for the shared UI affordances, so the
-pure-css shell, pure-admin components, and the web/svelte components render the **same** marks and a
-theme re-skins them in one place. Each is consumed via `mask: var(--base-icon-x); background:
-currentColor`, so the glyph inherits text colour — override a token with any mask-friendly `url()` to
-swap the icon set.
-| Token | Glyph | Use |
-| --- | --- | --- |
-| `--base-icon-chevron` | stroked angle `›` | expanders / nav — **rotate-one-glyph** disclosure (points right, rotate 90° when open) |
-| `--base-icon-caret-down` / `--base-icon-caret-up` | solid triangles `▾` / `▴` | static dropdown / `<select>` affordance (down) and sort-direction / upward-dropdown counterpart (up) — a caret never rotates |
-| `--base-icon-close` | `✕` | dismiss a transient **surface** (dialog, panel, popover, toast) |
-| `--base-icon-clear` | `✕` | clear a **field** — distinct purpose, same glyph; **follows** `--base-icon-close`, override alone to diverge |
-| `--base-icon-remove` | `✕` | take an **item** out of a collection (chip / tag / row) — non-destructive; follows `--base-icon-close` |
-| `--base-icon-expand` / `--base-icon-collapse` | `+` / `−` | **swap-two-glyphs** disclosure (tree nodes, accordions): show `+` when collapsed, `−` when open |
-| `--base-icon-add` / `--base-icon-edit` / `--base-icon-delete` | `+` / pencil / trash | **CRUD action** verbs — create / modify / **destroy** (delete is a trash can, *not* an ✕, so it reads as destructive) |
-| `--base-icon-search` | magnifying glass | search inputs, command palette — find **by text** |
-| `--base-icon-filter` | funnel | refine / **narrow a list** by criteria (filter toggles, faceted search) — distinct from `search` |
-| `--base-icon-refresh` | two curved arrows | reload / re-fetch a view or dataset |
-| `--base-icon-check` / `--base-icon-indeterminate` | `✓` / `−` | **selection** pair (checkboxes, multiselect, tree nodes): `check` = selected, `indeterminate` = a tri-state parent whose children are a mix |
-| `--base-icon-copy` | two overlapping sheets | copy-to-clipboard |
-| `--base-icon-ellipsis` | three dots `⋯` | "more / overflow" affordance — **rotate-one-glyph** for the vertical `⋮` variant (rotate 90°) |
-| `--base-icon-save` | floppy disk | persist / commit |
-Three intentional distinctions:
-- **Disclosure models:** **chevron rotates one glyph** (sidebar, multiselect), while **expand/collapse swaps
-  two glyphs** (trees, accordions) — a component never rotates a `+` into a `−`.
-- **✕ vs trash:** `close` / `clear` / `remove` are three *dismiss* purposes that share the ✕ glyph (and
-  cascade off `--base-icon-close`), while `delete` is a separate *destructive* action drawn as a trash can.
-  `add` shares the `+` shape with `expand` but is an independent knob (create ≠ disclosure).
-- **Selection ≠ disclosure:** `indeterminate` shares the `−` shape with `collapse` but is its own knob —
-  a partially-selected checkbox is not a collapsed node.
-## Theming
-A **theme** is nothing but a set of `--base-*` values. The lightest possible theme is a stylesheet
-that redeclares them, loaded *after* `base.css`:
-```css
-:root {
-  --base-accent-color: #4f46e5;
-  --base-page-bg: #f6f8fb;
-  --base-text-color-1: #1a2233;
-}
-```
-Because pure-admin-core, the components and any consumer all read the same variables, that one block
-re-themes all of them at once. This is the same model as
-[`@keenmate/pure-admin-themes`](https://github.com/Keenmate/pure-admin-themes), so the same CLI and
-publishing infrastructure applies.
-### Mode & variant class placement
-Light/dark and colour-variant switching is done by toggling a class — `.pc-mode-light` /
-`.pc-mode-dark` and `.pa-color-*`. **Apply these to the `:root` element (`<html>`), not `<body>`.**
-The mode/variant blocks override input tokens (`--pc-*` / `--base-*`). Many themed tokens are
-*derived* from those inputs and emitted once at `:root` — e.g. core emits
-`--pa-btn-info-bg: var(--pc-info)`. CSS resolves a custom property's `var()` **at the element that
-declares it**, so a derived token declared on `:root` bakes in `:root`'s input value. If the mode
-class sits on a *descendant* (`<body>`), the override comes too late and the derived token stays
-frozen at the default-mode value — the classic symptom is a role button or surface that doesn't
-change colour when you switch modes. Putting the class on `:root` (the same element that declares
-the tokens) makes the overrides win and the derived tokens re-resolve.
-pure-css re-emits its own base text-tier tokens at `:root, .pc-mode-light, .pc-mode-dark` to tolerate
-either placement, but that does not extend to the pure-admin component layer, hence the `:root` rule.
-To avoid a colour "flash" on switch, disable transitions for one frame during the swap (add a
-`transition: none !important` class to `:root`, change the mode/variant class, force a reflow, then
-remove it).
-## Build
-```bash
-make install   # sass
-make build     # src/scss -> dist/css (bundle + base + grid + utilities)
-make sizes     # show artifact sizes
-```
-`dist/` is committed so consumers can vendor the built CSS without a Sass toolchain.
-## Provenance
-The SCSS is the foundation extracted from `pure-admin-core`'s `src/scss` — the `variables/` modules,
-`_base-css-variables.scss`, `utilities.scss`, `_fonts.scss`, and the native grid (`_pa-grid.scss`,
-formerly core's `core-components/_grid.scss`). **pure-admin-core now consumes this package** as its
-single source for the foundation (thin `@import`/`@forward` shims), so the two no longer drift —
-core's compiled `--base-*` values and grid output match pure-css exactly.
-One intentional difference: `utilities.scss` here `@use`s `_fonts.scss` so the generic
-`.font-family-*` classes ship with the other utilities, whereas core keeps `_fonts.scss` standalone.
-`_rtl-helpers.scss` and the component layer stay in core.
-## License
-MIT © Keenmate. The grid is derived from [Pure](https://purecss.io/) (Yahoo!, BSD).
+# @keenmate/pure-css
+Keenmate's CSS **foundation** — descended from [Yahoo's Pure CSS](https://purecss.io/) and extended into a
+more robust, themeable layer for real apps. One small, dependency-free package gives you the
+**`--base-*` theming contract** (one block of custom properties re-themes everything at once), a
+modern **flexbox grid** (`.pc-row` / `.pc-col`, container-query responsive — replacing Pure's float
+grid), a set of **utility classes**, and an optional **app shell + JS runtime** (in the
+`pure-css.css` bundle).
+It's the shared layer the whole Keenmate stack agrees on:
+[`@keenmate/pure-admin-core`](https://github.com/Keenmate/pure-admin) builds its component library on
+top of it, and every Keenmate web/Svelte component reads its colours from the same `--base-*`
+variables.
+## What's New in 1.0.5
+- **Reboot — ordered lists (`<ol>`) render numbers again** — a 1.0.4 regression applied the new `--pc-list-bullet-type` knob to the shared `ul, ol` rule with a `disc` default, so every ordered list showed filled bullets instead of `decimal` numbers. The marker knob is an unordered concern, so it now sits on a `ul`-only rule; `<ol>` keeps the browser-default `decimal` (roman/alpha ordered variants stay a per-component override). The shared list margin/padding is unchanged, and `--pc-list-bullet-type` / `--base-list-bullet-type` continue to drive `ul` markers exactly as before.
+## What's New in 1.0.4
+- **Reboot — `--pc-list-bullet-type` turns the list marker into a runtime knob, backed by the `--base-*` contract** — every `ul` / `ol` styled by `reboot.scss` now reads its `list-style-type` from `var(--pc-list-bullet-type, var(--base-list-bullet-type, disc))`, so you can switch a list's marker (`disc` / `circle` / `square` / `none` / `decimal` / …) without a recompile: set `--pc-list-bullet-type` at `:root`, on an ancestor, or per-instance via `style="--pc-list-bullet-type: square"`. The per-instance `--pc-` knob wins when set, else the themeable `--base-list-bullet-type` default (new in `@keenmate/base-css-variables`, emitted at `:root` by `base.css` and the bundle), else the inline browser-default `disc`. The `--pc-` knob itself is deliberately **not** emitted by the `output-*` variable mixins — you opt in only where a per-instance marker is wanted. Lists that intentionally drop the marker (`list-style: none` on nav/sidebar menus, `.unstyled`, pure-admin's `--unstyled` / `--bordered` / … list modifiers) still win on source order, so this only affects lists that already show a marker.
+- **Icons — `download`, `link` and `external-link` glyphs join the `--base-*` contract** — three more mask-friendly Lucide glyphs so every consumer paints the same actions from one theme knob. `--base-icon-download` (a tray + down arrow) is save-to-disk / export, `--base-icon-link` (a chain) is the hyperlink / attach-URL mark, and `--base-icon-external-link` (a diagonal arrow-out-of-box) is its companion for links that open in a new tab / leave the app. All are authored in `variables/_base.scss` and emitted from `output-base-css-variables`, so both the standalone `base.css` and the `pure-css.css` bundle carry them; they mirror the canonical `@keenmate/base-css-variables` contract (parity guard green) and back pure-admin's `--pa-icon-download` / `-link` / `-external-link`, which routed through these names with inline fallbacks until now. Consume via `mask: var(--base-icon-link); background: currentColor`.
+## Why
+pure-css is a **standalone foundation** you drop onto any surface — a docs site, a marketing page, a
+widget host, or a full application. One small, dependency-free package gives you theming, layout and
+utilities without buying into a component framework.
+Its heart is a single **`--base-*` theming contract**: override one block of custom properties and
+everything re-themes at once — the grid, the utilities, the optional app shell, and any component
+that reads the same variables. Light and dark are built in via `light-dark()`, there's no build step
+to consume it (just link the prebuilt CSS), and it pulls in no runtime dependencies.
+```
+@keenmate/pure-css  (this package)
+  ├─ --base-* theming contract
+  ├─ .pc-row / .pc-col grid
+  ├─ utility classes
+  └─ optional app shell + JS runtime
+        ▲  consumed directly, as built CSS, by…
+        ├── docs sites · portals · marketing pages · widget & component hosts
+        └── @keenmate/pure-admin-core — adds a full component library on top (just one consumer)
+```
+## Installation
+```bash
+npm install @keenmate/pure-css
+```
+## Quick Start
+**Prebuilt CSS (simplest):**
+```html
+<link rel="stylesheet" href="node_modules/@keenmate/pure-css/dist/css/pure-css.css">
+```
+or cherry-pick:
+```html
+<link rel="stylesheet" href="…/pure-css/dist/css/base.css">   <!-- variables only -->
+<link rel="stylesheet" href="…/pure-css/dist/css/grid.css">   <!-- + grid          -->
+```
+**SCSS (customize before compiling):**
+```scss
+// Override the source of truth; everything re-derives.
+$base-accent-color: #4f46e5;
+$base-page-bg: #0b1020;
+@use '@keenmate/pure-css/scss/pure-css';
+```
+## What's in it
+| Artifact | Contents | When to link |
+| --- | --- | --- |
+| `dist/css/pure-css.css` | everything below, in one file | the common case |
+| `dist/css/base.css` | only `:root { --base-*; --pc-*; }` | you just need the theming contract (e.g. to theme embedded web components) or a base for a theme override |
+| `dist/css/component-reset.css` | a `:host` reset (box-sizing + inherited typography pinned to `--base-*`) — the Shadow-DOM counterpart to reboot | building a web component: adopt it into the shadow root (e.g. `import '@keenmate/pure-css/component-reset?inline'`) so the host page can't bleed styles in; pair with `base` |
+| `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
+(`--pc-*`) and web/svelte components all derive from it via fallback chains
+(`--ms-accent-color: var(--base-accent-color, #3b82f6)`). Categories: accent, text, background,
+border, input, dropdown, tooltip, contextual (success/danger/warning/info), interactive states,
+typography, border-radius, spacing/shadow/motion/z-index scales, and icons. The full list is
+`src/scss/variables/_base.scss`.
+#### Icons
+`--base-icon-*` are mask-friendly SVG glyphs (Lucide defaults) for the shared UI affordances, so the
+pure-css shell, pure-admin components, and the web/svelte components render the **same** marks and a
+theme re-skins them in one place. Each is consumed via `mask: var(--base-icon-x); background:
+currentColor`, so the glyph inherits text colour — override a token with any mask-friendly `url()` to
+swap the icon set.
+| Token | Glyph | Use |
+| --- | --- | --- |
+| `--base-icon-chevron` | stroked angle `›` | expanders / nav — **rotate-one-glyph** disclosure (points right, rotate 90° when open) |
+| `--base-icon-caret-down` / `--base-icon-caret-up` | solid triangles `▾` / `▴` | static dropdown / `<select>` affordance (down) and sort-direction / upward-dropdown counterpart (up) — a caret never rotates |
+| `--base-icon-close` | `✕` | dismiss a transient **surface** (dialog, panel, popover, toast) |
+| `--base-icon-clear` | `✕` | clear a **field** — distinct purpose, same glyph; **follows** `--base-icon-close`, override alone to diverge |
+| `--base-icon-remove` | `✕` | take an **item** out of a collection (chip / tag / row) — non-destructive; follows `--base-icon-close` |
+| `--base-icon-expand` / `--base-icon-collapse` | `+` / `−` | **swap-two-glyphs** disclosure (tree nodes, accordions): show `+` when collapsed, `−` when open |
+| `--base-icon-add` / `--base-icon-edit` / `--base-icon-delete` | `+` / pencil / trash | **CRUD action** verbs — create / modify / **destroy** (delete is a trash can, *not* an ✕, so it reads as destructive) |
+| `--base-icon-search` | magnifying glass | search inputs, command palette — find **by text** |
+| `--base-icon-filter` | funnel | refine / **narrow a list** by criteria (filter toggles, faceted search) — distinct from `search` |
+| `--base-icon-refresh` | two curved arrows | reload / re-fetch a view or dataset |
+| `--base-icon-check` / `--base-icon-indeterminate` | `✓` / `−` | **selection** pair (checkboxes, multiselect, tree nodes): `check` = selected, `indeterminate` = a tri-state parent whose children are a mix |
+| `--base-icon-copy` | two overlapping sheets | copy-to-clipboard |
+| `--base-icon-ellipsis` | three dots `⋯` | "more / overflow" affordance — **rotate-one-glyph** for the vertical `⋮` variant (rotate 90°) |
+| `--base-icon-save` | floppy disk | persist / commit |
+Three intentional distinctions:
+- **Disclosure models:** **chevron rotates one glyph** (sidebar, multiselect), while **expand/collapse swaps
+  two glyphs** (trees, accordions) — a component never rotates a `+` into a `−`.
+- **✕ vs trash:** `close` / `clear` / `remove` are three *dismiss* purposes that share the ✕ glyph (and
+  cascade off `--base-icon-close`), while `delete` is a separate *destructive* action drawn as a trash can.
+  `add` shares the `+` shape with `expand` but is an independent knob (create ≠ disclosure).
+- **Selection ≠ disclosure:** `indeterminate` shares the `−` shape with `collapse` but is its own knob —
+  a partially-selected checkbox is not a collapsed node.
+## Theming
+A **theme** is nothing but a set of `--base-*` values. The lightest possible theme is a stylesheet
+that redeclares them, loaded *after* `base.css`:
+```css
+:root {
+  --base-accent-color: #4f46e5;
+  --base-page-bg: #f6f8fb;
+  --base-text-color-1: #1a2233;
+}
+```
+Because pure-admin-core, the components and any consumer all read the same variables, that one block
+re-themes all of them at once. This is the same model as
+[`@keenmate/pure-admin-themes`](https://github.com/Keenmate/pure-admin-themes), so the same CLI and
+publishing infrastructure applies.
+### Mode & variant class placement
+Light/dark and colour-variant switching is done by toggling a class — `.pc-mode-light` /
+`.pc-mode-dark` and `.pa-color-*`. **Apply these to the `:root` element (`<html>`), not `<body>`.**
+The mode/variant blocks override input tokens (`--pc-*` / `--base-*`). Many themed tokens are
+*derived* from those inputs and emitted once at `:root` — e.g. core emits
+`--pa-btn-info-bg: var(--pc-info)`. CSS resolves a custom property's `var()` **at the element that
+declares it**, so a derived token declared on `:root` bakes in `:root`'s input value. If the mode
+class sits on a *descendant* (`<body>`), the override comes too late and the derived token stays
+frozen at the default-mode value — the classic symptom is a role button or surface that doesn't
+change colour when you switch modes. Putting the class on `:root` (the same element that declares
+the tokens) makes the overrides win and the derived tokens re-resolve.
+pure-css re-emits its own base text-tier tokens at `:root, .pc-mode-light, .pc-mode-dark` to tolerate
+either placement, but that does not extend to the pure-admin component layer, hence the `:root` rule.
+To avoid a colour "flash" on switch, disable transitions for one frame during the swap (add a
+`transition: none !important` class to `:root`, change the mode/variant class, force a reflow, then
+remove it).
+## Build
+```bash
+make install   # sass
+make build     # src/scss -> dist/css (bundle + base + grid + utilities)
+make sizes     # show artifact sizes
+```
+`dist/` is committed so consumers can vendor the built CSS without a Sass toolchain.
+## Provenance
+The SCSS is the foundation extracted from `pure-admin-core`'s `src/scss` — the `variables/` modules,
+`_base-css-variables.scss`, `utilities.scss`, `_fonts.scss`, and the native grid (`_pa-grid.scss`,
+formerly core's `core-components/_grid.scss`). **pure-admin-core now consumes this package** as its
+single source for the foundation (thin `@import`/`@forward` shims), so the two no longer drift —
+core's compiled `--base-*` values and grid output match pure-css exactly.
+One intentional difference: `utilities.scss` here `@use`s `_fonts.scss` so the generic
+`.font-family-*` classes ship with the other utilities, whereas core keeps `_fonts.scss` standalone.
+`_rtl-helpers.scss` and the component layer stay in core.
+## License
+MIT © Keenmate. The grid is derived from [Pure](https://purecss.io/) (Yahoo!, BSD).

package/dist/css/base.css CHANGED Viewed

@@ -120,6 +120,7 @@
   --base-line-height-tight: 1.25;
   --base-line-height-normal: 1.5;
   --base-line-height-relaxed: 1.75;
+  --base-list-bullet-type: disc;
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
@@ -146,6 +147,9 @@
   --base-icon-settings: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E");
   --base-icon-bell: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E");
   --base-icon-user: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E");
+  --base-icon-download: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 15V3%22/%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3C/svg%3E");
+  --base-icon-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E");
+  --base-icon-external-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3C/svg%3E");
   --base-icon-info: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E");
   --base-icon-success: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16 9-5.5 5.5L8 12%22/%3E%3C/svg%3E");
   --base-icon-warning: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E");

package/dist/css/pure-css.css CHANGED Viewed

@@ -49,6 +49,10 @@ ul li, ol li {
   margin-bottom: 0.4rem;
 }
+ul {
+  list-style-type: var(--pc-list-bullet-type, var(--base-list-bullet-type, disc));
+}
 ul.unstyled, ol.unstyled {
   list-style: none;
   padding-inline-start: 0;
@@ -6062,6 +6066,7 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-line-height-tight: 1.25;
   --base-line-height-normal: 1.5;
   --base-line-height-relaxed: 1.75;
+  --base-list-bullet-type: disc;
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
@@ -6088,6 +6093,9 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-icon-settings: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E");
   --base-icon-bell: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E");
   --base-icon-user: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E");
+  --base-icon-download: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 15V3%22/%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3C/svg%3E");
+  --base-icon-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E");
+  --base-icon-external-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3C/svg%3E");
   --base-icon-info: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E");
   --base-icon-success: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22m16 9-5.5 5.5L8 12%22/%3E%3C/svg%3E");
   --base-icon-warning: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3%22/%3E%3Cpath d=%22M12 9v4%22/%3E%3Cpath d=%22M12 17h.01%22/%3E%3C/svg%3E");

package/dist/css/reboot.css CHANGED Viewed

@@ -38,6 +38,10 @@ ul li, ol li {
   margin-bottom: 0.4rem;
 }
+ul {
+  list-style-type: var(--pc-list-bullet-type, var(--base-list-bullet-type, disc));
+}
 ul.unstyled, ol.unstyled {
   list-style: none;
   padding-inline-start: 0;

package/package.json CHANGED Viewed

@@ -1,83 +1,83 @@
-{
-  "name": "@keenmate/pure-css",
-  "version": "1.0.3",
-  "description": "The Keenmate CSS foundation — --base-* theming contract, PureCSS grid and utility classes. Extracted from pure-admin-core so docs sites, standalone pages and every web/svelte component share one theming layer.",
-  "style": "dist/css/pure-css.css",
-  "exports": {
-    ".": "./dist/css/pure-css.css",
-    "./css": "./dist/css/pure-css.css",
-    "./css/*": "./dist/css/*",
-    "./base": "./dist/css/base.css",
-    "./reboot": "./dist/css/reboot.css",
-    "./component-reset": "./dist/css/component-reset.css",
-    "./scrollbars": "./dist/css/scrollbars.css",
-    "./grid": "./dist/css/grid.css",
-    "./utilities": "./dist/css/utilities.css",
-    "./scss": "./src/scss/pure-css.scss",
-    "./scss/*": "./src/scss/*",
-    "./js": "./src/js/pure-css.js",
-    "./js/*": "./src/js/*"
-  },
-  "files": [
-    "dist/",
-    "src/scss/",
-    "src/js/",
-    "README.md",
-    "CHANGELOG.md",
-    "LICENSE"
-  ],
-  "scripts": {
-    "build:bundle": "sass src/scss/pure-css.scss dist/css/pure-css.css --no-source-map --silence-deprecation=import",
-    "build:base": "sass src/scss/base.scss dist/css/base.css --no-source-map --silence-deprecation=import",
-    "build:reboot": "sass src/scss/reboot.scss dist/css/reboot.css --no-source-map --silence-deprecation=import",
-    "build:component-reset": "sass src/scss/component-reset.scss dist/css/component-reset.css --no-source-map --silence-deprecation=import",
-    "build:scrollbars": "sass src/scss/scrollbars.scss dist/css/scrollbars.css --no-source-map --silence-deprecation=import",
-    "build:grid": "sass src/scss/grid.scss dist/css/grid.css --no-source-map --silence-deprecation=import",
-    "build:utilities": "sass src/scss/utilities.scss dist/css/utilities.css --no-source-map --silence-deprecation=import",
-    "build": "npm run build:bundle && npm run build:base && npm run build:reboot && npm run build:component-reset && npm run build:scrollbars && npm run build:grid && npm run build:utilities",
-    "watch": "sass --watch src/scss/pure-css.scss:dist/css/pure-css.css --silence-deprecation=import",
-    "dev": "vite --port 12500",
-    "test": "npm run test:e2e",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:headed": "playwright test --headed",
-    "test:e2e:install": "playwright install chromium",
-    "prepublishOnly": "npm run build"
-  },
-  "keywords": [
-    "css",
-    "scss",
-    "purecss",
-    "grid",
-    "utilities",
-    "css-variables",
-    "theming",
-    "keenmate",
-    "pure-admin"
-  ],
-  "author": "Keenmate",
-  "license": "MIT",
-  "peerDependencies": {
-    "sass": "^1.0.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.60.0",
-    "sass": "^1.70.0",
-    "vite": "^5.4.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Keenmate/pure-css.git"
-  },
-  "bugs": {
-    "url": "https://github.com/Keenmate/pure-css/issues"
-  },
-  "homepage": "https://github.com/Keenmate/pure-css#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "allowScripts": {
-    "esbuild@0.21.5": true,
-    "@parcel/watcher@2.6.0": true
-  }
-}
+{
+  "name": "@keenmate/pure-css",
+  "version": "1.0.5",
+  "description": "The Keenmate CSS foundation — --base-* theming contract, PureCSS grid and utility classes. Extracted from pure-admin-core so docs sites, standalone pages and every web/svelte component share one theming layer.",
+  "style": "dist/css/pure-css.css",
+  "exports": {
+    ".": "./dist/css/pure-css.css",
+    "./css": "./dist/css/pure-css.css",
+    "./css/*": "./dist/css/*",
+    "./base": "./dist/css/base.css",
+    "./reboot": "./dist/css/reboot.css",
+    "./component-reset": "./dist/css/component-reset.css",
+    "./scrollbars": "./dist/css/scrollbars.css",
+    "./grid": "./dist/css/grid.css",
+    "./utilities": "./dist/css/utilities.css",
+    "./scss": "./src/scss/pure-css.scss",
+    "./scss/*": "./src/scss/*",
+    "./js": "./src/js/pure-css.js",
+    "./js/*": "./src/js/*"
+  },
+  "files": [
+    "dist/",
+    "src/scss/",
+    "src/js/",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build:bundle": "sass src/scss/pure-css.scss dist/css/pure-css.css --no-source-map --silence-deprecation=import",
+    "build:base": "sass src/scss/base.scss dist/css/base.css --no-source-map --silence-deprecation=import",
+    "build:reboot": "sass src/scss/reboot.scss dist/css/reboot.css --no-source-map --silence-deprecation=import",
+    "build:component-reset": "sass src/scss/component-reset.scss dist/css/component-reset.css --no-source-map --silence-deprecation=import",
+    "build:scrollbars": "sass src/scss/scrollbars.scss dist/css/scrollbars.css --no-source-map --silence-deprecation=import",
+    "build:grid": "sass src/scss/grid.scss dist/css/grid.css --no-source-map --silence-deprecation=import",
+    "build:utilities": "sass src/scss/utilities.scss dist/css/utilities.css --no-source-map --silence-deprecation=import",
+    "build": "npm run build:bundle && npm run build:base && npm run build:reboot && npm run build:component-reset && npm run build:scrollbars && npm run build:grid && npm run build:utilities",
+    "watch": "sass --watch src/scss/pure-css.scss:dist/css/pure-css.css --silence-deprecation=import",
+    "dev": "vite --port 12500",
+    "test": "npm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:install": "playwright install chromium",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "css",
+    "scss",
+    "purecss",
+    "grid",
+    "utilities",
+    "css-variables",
+    "theming",
+    "keenmate",
+    "pure-admin"
+  ],
+  "author": "Keenmate",
+  "license": "MIT",
+  "peerDependencies": {
+    "sass": "^1.0.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.60.0",
+    "sass": "^1.70.0",
+    "vite": "^5.4.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Keenmate/pure-css.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Keenmate/pure-css/issues"
+  },
+  "homepage": "https://github.com/Keenmate/pure-css#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "allowScripts": {
+    "esbuild@0.21.5": true,
+    "@parcel/watcher@2.6.0": true
+  }
+}

package/src/scss/_base-css-variables.scss CHANGED Viewed

@@ -175,6 +175,7 @@
   --base-line-height-tight: #{$base-line-height-tight};
   --base-line-height-normal: #{$base-line-height-normal};
   --base-line-height-relaxed: #{$base-line-height-relaxed};
+  --base-list-bullet-type: #{$base-list-bullet-type};
   // === Border Radius ===
   --base-border-radius-sm: #{$base-border-radius-sm};
@@ -243,6 +244,11 @@
   --base-icon-bell: #{$base-icon-bell};
   // user = person. Consumed by pure-admin's --pa-icon-user.
   --base-icon-user: #{$base-icon-user};
+  // download = tray + down arrow; link = chain; external-link = arrow-out-of-box.
+  // Consumed by pure-admin's --pa-icon-download / -link / -external-link.
+  --base-icon-download: #{$base-icon-download};
+  --base-icon-link: #{$base-icon-link};
+  --base-icon-external-link: #{$base-icon-external-link};
   // === Status / severity icons — shared toast/alert/callout/notification set ===
   // info = circle-i, success = circle-check, warning = triangle-alert,

package/src/scss/reboot.scss CHANGED Viewed

@@ -1,134 +1,154 @@
-// @keenmate/pure-css — reset & base element styling ("reboot")
-// ============================================================================
-// The foundation's reset layer. Establishes the 10px rem base that EVERY
-// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
-// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
-// base styling for standard HTML elements (headings, paragraphs, links, lists,
-// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
-//
-// This lives in pure-css — not in a consuming app — because the 10px base is
-// part of the foundation's sizing contract: without it, a standalone consumer
-// inherits the browser's 16px root and every rem renders 1.6x too large. Link
-// it (or the full `pure-css.css` bundle) and the scale just works.
-//
-// App-specific base rules (the admin dashboard's decorative body background,
-// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
-// foundation shouldn't impose them on every consumer.
-// ============================================================================
-@use 'variables/index' as *;
-// 10px rem base for intuitive sizing (1rem = 10px)
-// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
-html {
-  font-size: 10px;
-}
-// Reset and base styles
-* {
-  box-sizing: border-box;
-}
-// Standard HTML element spacing (using framework variables)
-// Headings
-h1, h2, h3, h4, h5, h6 {
-  margin: $heading-margin-top 0 $heading-margin-bottom 0;
-  padding: 0;
-}
-// Paragraphs
-p {
-  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
-  padding: 0;
-}
-// Links — global default. Wrapped in :where() so specificity is 0,
-// letting component scopes (alerts, navbar, sidebar) override with even a
-// single class without fighting the pseudo-class specificity raise that
-// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
-:where(a) {
-  color: var(--pc-link-color);
-  text-decoration: underline;
-}
-:where(a:hover) {
-  color: var(--pc-link-color-hover);
-}
-:where(a:visited) {
-  color: var(--pc-link-color-visited);
-}
-// Lists - styled lists (default browser styling)
-ul, ol {
-  margin: $list-margin-top 0 $list-margin-bottom 0;
-  padding: 0;
-  padding-inline-start: $list-padding-left; // RTL: flips to right
-  li {
-    margin-bottom: $list-item-margin-bottom;
-  }
-}
-// Lists - unstyled (for navigation, etc.)
-ul.unstyled, ol.unstyled {
-  list-style: none;
-  padding-inline-start: 0; // RTL: flips to right
-  li {
-    margin-bottom: 0;
-  }
-}
-// Definition lists
-dl {
-  margin: $list-margin-top 0 $list-margin-bottom 0;
-  padding: 0;
-}
-dd {
-  margin: 0;
-  padding: 0;
-}
-// Blockquote
-blockquote {
-  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
-  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
-}
-// Pre/Code blocks
-pre {
-  overflow-x: auto;
-}
-// Horizontal rule
-hr {
-  margin: $hr-margin-top 0 $hr-margin-bottom 0;
-}
-// Figure
-figure {
-  margin: $figure-margin-top 0 $figure-margin-bottom 0;
-  padding: 0;
-}
-body {
-  margin: 0;
-  padding: 0;
-  font-family: var(--base-font-family);
-  font-size: 1.6rem; // 16px default text (with 10px rem base)
-  color: var(--pc-text-color-1);
-  background-color: var(--pc-page-bg);
-  line-height: $line-height-base;
-}
-// Ensure form elements and labels inherit theme font and size instead of browser defaults
-button,
-input,
-select,
-textarea,
-label {
-  font-family: inherit;
-  font-size: inherit;
-}
+// @keenmate/pure-css — reset & base element styling ("reboot")
+// ============================================================================
+// The foundation's reset layer. Establishes the 10px rem base that EVERY
+// pure-css rem value assumes (see variables/_typography.scss — `$font-size-base:
+// 1.6rem` is 16px only when the root is 10px), a border-box reset, and neutral
+// base styling for standard HTML elements (headings, paragraphs, links, lists,
+// blockquotes, rules, the body font/colour). Analogous to Bootstrap's Reboot.
+//
+// This lives in pure-css — not in a consuming app — because the 10px base is
+// part of the foundation's sizing contract: without it, a standalone consumer
+// inherits the browser's 16px root and every rem renders 1.6x too large. Link
+// it (or the full `pure-css.css` bundle) and the scale just works.
+//
+// App-specific base rules (the admin dashboard's decorative body background,
+// sidebar overflow handling) intentionally stay in pure-admin-core; a generic
+// foundation shouldn't impose them on every consumer.
+// ============================================================================
+@use 'variables/index' as *;
+// 10px rem base for intuitive sizing (1rem = 10px)
+// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
+html {
+  font-size: 10px;
+}
+// Reset and base styles
+* {
+  box-sizing: border-box;
+}
+// Standard HTML element spacing (using framework variables)
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin: $heading-margin-top 0 $heading-margin-bottom 0;
+  padding: 0;
+}
+// Paragraphs
+p {
+  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
+  padding: 0;
+}
+// Links — global default. Wrapped in :where() so specificity is 0,
+// letting component scopes (alerts, navbar, sidebar) override with even a
+// single class without fighting the pseudo-class specificity raise that
+// `a:hover` / `a:visited` would otherwise add (0,1,1 vs a class's 0,1,0).
+:where(a) {
+  color: var(--pc-link-color);
+  text-decoration: underline;
+}
+:where(a:hover) {
+  color: var(--pc-link-color-hover);
+}
+:where(a:visited) {
+  color: var(--pc-link-color-visited);
+}
+// Lists - styled lists (default browser styling)
+ul, ol {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+  padding-inline-start: $list-padding-left; // RTL: flips to right
+  li {
+    margin-bottom: $list-item-margin-bottom;
+  }
+}
+// Runtime-overridable UNORDERED marker — ul only, so <ol> keeps its numbers
+// (a shared `ul, ol` rule with a `disc` default turned ordered lists into
+// bullets). Set --pc-list-bullet-type (disc | circle | square | none | …) at
+// :root, on an ancestor, or per-instance (style="--pc-list-bullet-type: square")
+// to switch the marker without a recompile. It layers over the base contract:
+// --pc-list-bullet-type wins when set, else the themeable --base-list-bullet-type
+// default (emitted by output-base-css-variables), else the inline browser-default
+// disc. The --pc- knob itself is not emitted by the variable mixins — set it only
+// where a per-instance marker is wanted. Components that reset the marker
+// (list-style: none on nav/sidebar menus, .unstyled, pure-admin's
+// --unstyled/--bordered/… list modifiers) win on source order, so this only
+// affects unordered lists that still show a marker. By design this applies at
+// EVERY nesting depth (a single, controllable marker), so nested <ul>s all use
+// the same marker rather than the browser's disc→circle→square depth cascade —
+// intentional, not a bug: the knob trades depth-varying markers for one uniform,
+// themeable bullet.
+ul {
+  list-style-type: var(--pc-list-bullet-type, var(--base-list-bullet-type, disc));
+}
+// Lists - unstyled (for navigation, etc.)
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-inline-start: 0; // RTL: flips to right
+  li {
+    margin-bottom: 0;
+  }
+}
+// Definition lists
+dl {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+}
+dd {
+  margin: 0;
+  padding: 0;
+}
+// Blockquote
+blockquote {
+  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
+  padding-inline-start: $blockquote-padding-left; // RTL: flips to right
+}
+// Pre/Code blocks
+pre {
+  overflow-x: auto;
+}
+// Horizontal rule
+hr {
+  margin: $hr-margin-top 0 $hr-margin-bottom 0;
+}
+// Figure
+figure {
+  margin: $figure-margin-top 0 $figure-margin-bottom 0;
+  padding: 0;
+}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--base-font-family);
+  font-size: 1.6rem; // 16px default text (with 10px rem base)
+  color: var(--pc-text-color-1);
+  background-color: var(--pc-page-bg);
+  line-height: $line-height-base;
+}
+// Ensure form elements and labels inherit theme font and size instead of browser defaults
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}

package/src/scss/variables/_base.scss CHANGED Viewed

@@ -283,6 +283,10 @@ $base-line-height-tight: 1.25 !default;
 $base-line-height-normal: 1.5 !default;
 $base-line-height-relaxed: 1.75 !default;
+// List marker — default bullet/number for ul, ol (disc | circle | square | none
+// | decimal | …). Consumed on the base list reboot with an inline `disc` fallback.
+$base-list-bullet-type: disc !default;
 // =============================================================================
 // BORDER RADIUS
 // Border radius sizes (unitless multipliers for x10px base)
@@ -383,6 +387,12 @@ $base-icon-settings: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2
 $base-icon-bell: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10.268 21a2 2 0 0 0 3.464 0%22/%3E%3Cpath d=%22M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326%22/%3E%3C/svg%3E") !default;
 // user = person (Lucide user): profile trigger button / avatar placeholder.
 $base-icon-user: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2%22/%3E%3Ccircle cx=%2212%22 cy=%227%22 r=%224%22/%3E%3C/svg%3E") !default;
+// download = tray + down arrow (Lucide download): save-to-disk / export. link =
+// chain (Lucide link): hyperlink / attach-URL; external-link = diagonal
+// arrow-out-of-box (Lucide external-link): opens in a new tab / leaves the app.
+$base-icon-download: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 15V3%22/%3E%3Cpath d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/%3E%3Cpath d=%22m7 10 5 5 5-5%22/%3E%3C/svg%3E") !default;
+$base-icon-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/%3E%3Cpath d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/%3E%3C/svg%3E") !default;
+$base-icon-external-link: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 3h6v6%22/%3E%3Cpath d=%22M10 14 21 3%22/%3E%3Cpath d=%22M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6%22/%3E%3C/svg%3E") !default;
 // Status / severity icons (shared toast/alert/callout/notification set): info =
 // circle-i, success = circle-check, warning = triangle-alert, danger = circle-x.
 $base-icon-info: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 16v-4%22/%3E%3Cpath d=%22M12 8h.01%22/%3E%3C/svg%3E") !default;