@keenmate/pure-css 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 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.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

@@ -12,16 +12,17 @@ It's the shared layer the whole Keenmate stack agrees on:
 top of it, and every Keenmate web/Svelte component reads its colours from the same `--base-*`
 variables.
 
+## 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`.
+
 ## 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

package/dist/css/base.css

@@ -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

@@ -44,6 +44,7 @@ ul, ol {
   margin: 0 0 1.6rem 0;
   padding: 0;
   padding-inline-start: 3.2rem;
+  list-style-type: var(--pc-list-bullet-type, var(--base-list-bullet-type, disc));
 }
 ul li, ol li {
   margin-bottom: 0.4rem;
@@ -6062,6 +6063,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 +6090,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

@@ -33,6 +33,7 @@ ul, ol {
   margin: 0 0 1.6rem 0;
   padding: 0;
   padding-inline-start: 3.2rem;
+  list-style-type: var(--pc-list-bullet-type, var(--base-list-bullet-type, disc));
 }
 ul li, ol li {
   margin-bottom: 0.4rem;

package/package.json

@@ -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.4",
+  "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

@@ -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

@@ -1,134 +1,146 @@
-// @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
+  // Runtime-overridable marker. Set --pc-list-bullet-type (disc | circle |
+  // square | none | decimal | …) 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 lists that still show a marker.
+  list-style-type: var(--pc-list-bullet-type, var(--base-list-bullet-type, disc));
+
+  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;
+}

package/src/scss/variables/_base.scss

@@ -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;