@keenmate/pure-css 1.0.5 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to `@keenmate/pure-css` are documented here. Format based on
 [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [1.1.0] — 2026-09-26 [PUBLISHED]
+
+### Changed
+
+- **Sidebar link / submenu-toggle hover is now instant (removed `transition: all`).**
+  `.pc-sidebar__link`, the submenu toggle, and the sidebar search trigger animated
+  their hover with `transition: all $transition-fast`, which swept in `color` /
+  `background-color` — so the hover tint *faded in* and felt sluggish. Their hover
+  only changes colours (no motion), so the transition was pure colour animation,
+  against the "colours snap; transitions are motion-only" rule. Removed it; hover
+  colours now snap. The genuine motion transitions are kept — the submenu chevron
+  rotation (`transform`) and the icon-collapse label fade (`opacity` / `width`).
+
+### Added
+
+- **Icon hover affordance (foundation) — `_icon-hover.scss`.** Inside an enabled
+  interactive control on `:hover`, icons react with no JS and no SVG computation,
+  driven by convention + marker classes a wrapper stamps:
+  - masked `.pa-icon` glyphs that declared `--pa-icon-src-hover` swap to the
+    filled source (automatic; no-op for outline-only sets like Lucide);
+  - Font Awesome `<i>` marked `.pc-icon-hover-fill` flips regular → solid via the
+    `font-weight` axis (needs the `far` face, i.e. FA Pro);
+  - outline icons marked `.pc-icon-hover-highlight` recolour to
+    `--pc-icon-hover-color` (default: `--pc-accent`) — the hover cue for sets with
+    no solid form.
+
+  Applied to the shell contexts the foundation owns (`.pc-sidebar__link:hover` and
+  the submenu `.pc-sidebar__toggle:hover`, so submenu parents match plain/child
+  items) and a generic opt-in wrapper `.pc-icon-hover` for any enabled control. The behaviour
+  is exposed as the `pc-icon-hover-effects` mixin so component layers (pure-admin
+  core on `.pa-btn` / `.pa-tabs__item`, etc.) can apply the same effects to their
+  own selectors without redefining them. Additive; no change to existing output.
+  (Two-asset outline↔solid toggle for Heroicons / Fluent is a follow-up, wired
+  when a wrapper renders both layers.) See `pure-admin/docs/icon-hover-fill-design.md`.
+
+## [1.0.6] — 2026-09-20 [PUBLISHED]
+
+### Added
+
+- **`--base-icon-check-size` — a runtime mask-size knob for the selection glyph,
+  so the glyph and its scale re-theme in lockstep.** The check mark
+  (`--base-icon-check`) and the indeterminate dash (`--base-icon-indeterminate`)
+  share one mask box, but the size that box was painted at was hard-coded
+  downstream per consumer. This adds a single `$base-icon-check-size` (`68%`
+  default, emitted as `--base-icon-check-size`) that both pure-admin and the
+  Keenmate web components read, so overriding the check glyph **and** its scale
+  re-sizes the mark everywhere at once — e.g. swap in an edge-to-edge glyph like a
+  star and shrink it from this one knob. `68%` leaves breathing room inside the
+  box; it also sizes the indeterminate mark since that shares the mask box.
+  Authored in `variables/_base.scss` and emitted from `output-base-css-variables`,
+  so both `base.css` and the `pure-css.css` bundle carry it. Mirrors the canonical
+  `@keenmate/base-css-variables` contract (parity guard green).
+
 ## [1.0.5] — 2026-09-18 [PUBLISHED]
 
 ### Fixed

package/README.md

@@ -12,14 +12,14 @@ 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.5
+## What's New in 1.1.0
 
-- **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.
+- **Icons — hover affordance for interactive controls, no JS (`_icon-hover.scss`)** — icons inside an enabled control now react on `:hover` through pure CSS, driven by convention plus marker classes a wrapper stamps: masked `.pa-icon` glyphs that declared `--pa-icon-src-hover` swap to their filled source (automatic; a no-op for outline-only sets like Lucide), Font Awesome `<i>` marked `.pc-icon-hover-fill` flips regular → solid on the `font-weight` axis (needs the FA Pro `far` face), and outline icons marked `.pc-icon-hover-highlight` recolour to `--pc-icon-hover-color` (default `--pc-accent`) for sets with no solid form. The foundation applies it to the shell context it owns (`.pc-sidebar__link:hover`) and ships a generic opt-in wrapper `.pc-icon-hover` for any enabled control. Crucially the behaviour is exposed as the `pc-icon-hover-effects` SCSS mixin, so component layers (pure-admin core on `.pa-btn` / `.pa-tabs__item`, etc.) apply the exact same effects to their own selectors from one shared definition rather than redefining them. Additive — no change to existing output.
+- **Sidebar — hover colours snap instead of fading** — `.pc-sidebar__link`, the submenu toggle, and the sidebar search trigger animated their hover with `transition: all $transition-fast`, which swept `color` / `background-color` so the hover tint faded in and felt sluggish. Their hover changes colours only (no motion), so per the "colours snap; transitions are motion-only" rule the transition was pure colour animation and has been removed — hover colours now snap. The genuine motion transitions are untouched: the submenu chevron rotation (`transform`) and the icon-collapse label fade (`opacity` / `width`).
 
-## What's New in 1.0.4
+## What's New in 1.0.6
 
-- **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`.
+- **Icons — `--base-icon-check-size` turns the selection glyph's scale into a theme knob** — the check mark (`--base-icon-check`) and the indeterminate dash (`--base-icon-indeterminate`) share one mask box, but the size that box was painted at used to be hard-coded downstream. This adds a single `--base-icon-check-size` token (`68%` default, authored as `$base-icon-check-size` in `variables/_base.scss` and emitted from `output-base-css-variables`) that both pure-admin and every Keenmate web component read, so overriding the check glyph **and** its scale now re-sizes the mark in lockstep across the whole stack — drop in an edge-to-edge glyph such as a star and shrink it from this one knob. `68%` leaves breathing room inside the box, and because indeterminate shares the mask box it re-sizes too. Both `base.css` and the `pure-css.css` bundle emit it, and it mirrors the canonical `@keenmate/base-css-variables` contract (parity guard green).
 
 ## Why
 

package/dist/css/base.css

@@ -140,6 +140,7 @@
   --base-icon-filter: 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%3Cpolygon points=%2222 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3%22/%3E%3C/svg%3E");
   --base-icon-refresh: 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=%22M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3Cpath d=%22M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16%22/%3E%3Cpath d=%22M3 21v-5h5%22/%3E%3C/svg%3E");
   --base-icon-check: 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=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E");
+  --base-icon-check-size: 68%;
   --base-icon-indeterminate: 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=%22M5 12h14%22/%3E%3C/svg%3E");
   --base-icon-copy: 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%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E");
   --base-icon-ellipsis: 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=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E");

package/dist/css/pure-css.css

@@ -2413,9 +2413,6 @@ body.pc-layout--sticky .pc-layout__sidebar {
   font-weight: 500;
   border-inline-end: 3px solid transparent;
 }
-body.loaded .pc-sidebar__link {
-  transition: all 0.1s ease-out;
-}
 .pc-sidebar__link:hover {
   color: var(--pc-sidebar-text, var(--base-text-color-1));
   background-color: var(--pc-accent-light);
@@ -2445,9 +2442,6 @@ body.loaded .pc-sidebar__link {
 .pc-sidebar__search[hidden] {
   display: none;
 }
-body.loaded .pc-sidebar__search {
-  transition: all 0.1s ease-out;
-}
 .pc-sidebar__search:hover {
   border-color: #0ea5e9;
   color: var(--base-input-color);
@@ -2513,9 +2507,6 @@ body.loaded .pc-sidebar__search {
   font-weight: 500;
   cursor: pointer;
 }
-body.loaded .pc-sidebar__toggle {
-  transition: all 0.1s ease-out;
-}
 .pc-sidebar__toggle:hover {
   color: var(--pc-sidebar-text, var(--base-text-color-1));
   background-color: var(--pc-accent-light);
@@ -3133,6 +3124,31 @@ body.pc-layout--sticky .pc-layout__inner {
   border-top: 1px solid var(--pc-border-color);
 }
 
+.pc-sidebar__link:not([aria-disabled=true]):not(.is-disabled):hover .pa-icon,
+.pc-sidebar__toggle:not([aria-disabled=true]):not(.is-disabled):hover .pa-icon {
+  -webkit-mask-image: var(--pa-icon-src-hover, var(--pa-icon-src));
+  mask-image: var(--pa-icon-src-hover, var(--pa-icon-src));
+}
+.pc-sidebar__link:not([aria-disabled=true]):not(.is-disabled):hover .pc-icon-hover-fill,
+.pc-sidebar__toggle:not([aria-disabled=true]):not(.is-disabled):hover .pc-icon-hover-fill {
+  font-weight: 900;
+}
+.pc-sidebar__link:not([aria-disabled=true]):not(.is-disabled):hover .pc-icon-hover-highlight,
+.pc-sidebar__toggle:not([aria-disabled=true]):not(.is-disabled):hover .pc-icon-hover-highlight {
+  color: var(--pc-icon-hover-color, var(--pc-accent));
+}
+
+.pc-icon-hover:not([disabled]):not([aria-disabled=true]):not(.is-disabled):hover .pa-icon {
+  -webkit-mask-image: var(--pa-icon-src-hover, var(--pa-icon-src));
+  mask-image: var(--pa-icon-src-hover, var(--pa-icon-src));
+}
+.pc-icon-hover:not([disabled]):not([aria-disabled=true]):not(.is-disabled):hover .pc-icon-hover-fill {
+  font-weight: 900;
+}
+.pc-icon-hover:not([disabled]):not([aria-disabled=true]):not(.is-disabled):hover .pc-icon-hover-highlight {
+  color: var(--pc-icon-hover-color, var(--pc-accent));
+}
+
 .font-family-system {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
@@ -6086,6 +6102,7 @@ body.pc-layout--sticky .pc-layout__inner {
   --base-icon-filter: 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%3Cpolygon points=%2222 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3%22/%3E%3C/svg%3E");
   --base-icon-refresh: 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=%22M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8%22/%3E%3Cpath d=%22M21 3v5h-5%22/%3E%3Cpath d=%22M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16%22/%3E%3Cpath d=%22M3 21v-5h5%22/%3E%3C/svg%3E");
   --base-icon-check: 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=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E");
+  --base-icon-check-size: 68%;
   --base-icon-indeterminate: 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=%22M5 12h14%22/%3E%3C/svg%3E");
   --base-icon-copy: 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%3Crect width=%2214%22 height=%2214%22 x=%228%22 y=%228%22 rx=%222%22 ry=%222%22/%3E%3Cpath d=%22M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2%22/%3E%3C/svg%3E");
   --base-icon-ellipsis: 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=%221%22/%3E%3Ccircle cx=%2219%22 cy=%2212%22 r=%221%22/%3E%3Ccircle cx=%225%22 cy=%2212%22 r=%221%22/%3E%3C/svg%3E");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-css",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "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": {

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

@@ -228,6 +228,10 @@
   // Shared by web-multiselect / web-treeview / checkboxes. indeterminate shares the
   // minus shape with collapse but is its OWN knob (selection ≠ disclosure).
   --base-icon-check: #{$base-icon-check};
+  // mask-size for the selection glyph inside its box — one knob every consumer
+  // reads, so overriding the glyph AND its scale re-sizes the mark in lockstep.
+  // Also sizes indeterminate (it shares the mask box).
+  --base-icon-check-size: #{$base-icon-check-size};
   --base-icon-indeterminate: #{$base-icon-indeterminate};
 
   // === Action / affordance icons ===

package/src/scss/_icon-hover.scss

@@ -0,0 +1,64 @@
+// ── Icon hover affordance (foundation) ────────────────────────────────────────
+// See pure-admin/docs/icon-hover-fill-design.md.
+//
+// Inside an ENABLED interactive control on :hover, icons react — no JS, no SVG
+// computation, driven by convention + marker classes the wrapper stamps:
+//
+//   • Masked `.pa-icon` glyphs that declared a filled source on
+//     `--pa-icon-src-hover` swap their mask to it. NO-OP for outline-only glyphs
+//     (e.g. Lucide ships no solid), and no marker needed — it's automatic.
+//   • Font Awesome `<i>` marked `.pc-icon-hover-fill` flips regular → solid via the
+//     font-weight axis (same codepoint). Needs the `far` regular face present
+//     (largely FA Pro), else there's nothing lighter to flip from.
+//   • Outline icons marked `.pc-icon-hover-highlight` recolour to
+//     `--pc-icon-hover-color` (default: the accent). This is the answer for sets
+//     with no solid form (Lucide): a real hover cue without a fill.
+//
+// The behaviour lives here (foundation) so every consumer — pure-admin core,
+// keen, svelte, the web components — shares ONE definition. Wrappers only stamp
+// the marker classes. `pc-icon-hover-effects` is a mixin so component layers can
+// apply the same effects to their own enabled-control selectors (e.g. core on
+// `.pa-btn` / `.pa-tabs__item`) without redefining them.
+//
+// Deliberately NOT here yet: the two-asset outline↔solid toggle for Heroicons /
+// Fluent (render both layers, swap visibility) — that needs a wrapper markup
+// contract, so it's wired when a wrapper renders both layers.
+
+@mixin pc-icon-hover-effects {
+  // Masked icons: swap to the filled mask source if one was declared. Set the
+  // longhand directly (not --pa-icon-src) so the var(--pa-icon-src) fallback
+  // stays non-cyclic — reassigning --pa-icon-src to reference itself would
+  // compute to invalid and wipe the mask to a solid box.
+  .pa-icon {
+    -webkit-mask-image: var(--pa-icon-src-hover, var(--pa-icon-src));
+            mask-image: var(--pa-icon-src-hover, var(--pa-icon-src));
+  }
+
+  // Font Awesome regular → solid (weight axis). No transition — a font-weight
+  // swap is instant, matching the mask swap.
+  .pc-icon-hover-fill {
+    font-weight: 900;
+  }
+
+  // Outline-only sets (Lucide): recolour the stroke instead of filling. Works
+  // because Lucide SVGs are stroke="currentColor".
+  .pc-icon-hover-highlight {
+    color: var(--pc-icon-hover-color, var(--pc-accent));
+  }
+}
+
+// Shell contexts owned by the foundation: sidebar nav links AND submenu toggles,
+// so a submenu parent's icon reacts identically to a plain/child link (not just
+// to the toggle's own hover colour).
+.pc-sidebar__link:not([aria-disabled='true']):not(.is-disabled):hover,
+.pc-sidebar__toggle:not([aria-disabled='true']):not(.is-disabled):hover {
+  @include pc-icon-hover-effects;
+}
+
+// Generic opt-in: put `.pc-icon-hover` on any enabled control/element to get the
+// behaviour without depending on a component class (a bare link, a custom
+// button, a list row, …). Disabled opt-outs are excluded so only actionable
+// controls react.
+.pc-icon-hover:not([disabled]):not([aria-disabled='true']):not(.is-disabled):hover {
+  @include pc-icon-hover-effects;
+}

package/src/scss/_sidebar.scss

@@ -159,10 +159,6 @@ body.pc-layout--sticky .pc-layout__sidebar {
     font-weight: $font-weight-medium;
     border-inline-end: $border-width-thick solid transparent; // RTL: flips to border-left
 
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
     &:hover {
       color: var(--pc-sidebar-text, var(--base-text-color-1));
       background-color: var(--pc-accent-light);
@@ -212,10 +208,6 @@ body.pc-layout--sticky .pc-layout__sidebar {
       display: none;
     }
 
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
     &:hover {
       // $accent-color (foundation) — was $input-focus-border-color, an exact
       // alias; inlined so the shell no longer depends on the component layer
@@ -335,10 +327,6 @@ body.pc-layout--sticky .pc-layout__sidebar {
     font-weight: $font-weight-medium;
     cursor: pointer;
 
-    body.loaded & {
-      transition: all $transition-fast $easing-snappy;
-    }
-
     &:hover {
       color: var(--pc-sidebar-text, var(--base-text-color-1));
       background-color: var(--pc-accent-light);

package/src/scss/pure-css.scss

@@ -35,6 +35,7 @@
 @use 'layout-container';
 @use 'layout-responsive';
 @use 'fit-flyout';
+@use 'icon-hover';
 
 @use 'utilities';
 

package/src/scss/variables/_base.scss

@@ -374,6 +374,11 @@ $base-icon-refresh: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/20
 // Selection: check = ✓ (Lucide check), indeterminate = − (Lucide minus). indeterminate
 // shares the minus shape with `collapse` but is its own knob (selection ≠ disclosure).
 $base-icon-check: 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=%22M20 6 9 17l-5-5%22/%3E%3C/svg%3E") !default;
+// mask-size for the selection glyph inside its box. One knob both pure-admin and
+// the web components read, so overriding the glyph AND its scale re-sizes the mark
+// everywhere at once. 68% leaves breathing room; an edge-to-edge glyph (e.g. a
+// star) can be shrunk from here. Also sizes indeterminate (shares the mask box).
+$base-icon-check-size: 68% !default;
 $base-icon-indeterminate: 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=%22M5 12h14%22/%3E%3C/svg%3E") !default;
 // copy = two overlapping sheets (Lucide copy); ellipsis = three dots (Lucide
 // ellipsis, the "more / overflow" affordance — the vertical variant is the same