npm - @keenmate/pure-admin-core - Versions diffs - 2.4.0 → 2.5.0 - Mend

@keenmate/pure-admin-core 2.4.0 → 2.5.0

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

package/README.md +11 -6
package/dist/css/main.css +47 -130
package/package.json +1 -1
package/snippets/AUDIT.md +94 -0
package/snippets/alerts.html +264 -89
package/snippets/badges.html +193 -61
package/snippets/buttons.html +178 -0
package/snippets/callouts.html +210 -129
package/snippets/cards.html +383 -200
package/snippets/checkbox-lists.html +199 -65
package/snippets/code.html +55 -11
package/snippets/command-palette.html +401 -111
package/snippets/comparison.html +144 -93
package/snippets/customization.html +311 -104
package/snippets/data-display.html +584 -0
package/snippets/detail-panel.html +470 -138
package/snippets/filter-card.html +246 -0
package/snippets/forms.html +408 -308
package/snippets/grid.html +253 -141
package/snippets/layout.html +379 -480
package/snippets/lists.html +144 -47
package/snippets/loaders.html +64 -39
package/snippets/manifest.json +330 -280
package/snippets/modal-dialogs.html +137 -64
package/snippets/modals.html +221 -151
package/snippets/notifications.html +285 -0
package/snippets/popconfirm.html +213 -19
package/snippets/profile.html +290 -330
package/snippets/statistics.html +247 -0
package/snippets/tables.html +359 -150
package/snippets/tabs.html +129 -45
package/snippets/timeline.html +123 -56
package/snippets/toasts.html +179 -31
package/snippets/tooltips.html +199 -81
package/snippets/typography.html +183 -58
package/snippets/utilities.html +511 -415
package/snippets/virtual-scroll.html +201 -75
package/snippets/web-daterangepicker.html +369 -189
package/snippets/web-multiselect.html +360 -124
package/src/scss/core-components/_alerts.scss +51 -12
package/src/scss/core-components/_pagers.scss +1 -1
package/src/scss/core-components/_popconfirm.scss +35 -13
package/src/scss/core-components/_tables.scss +2 -134
package/src/scss/variables/_components.scss +17 -2

package/README.md CHANGED Viewed

@@ -2,15 +2,20 @@
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
-## What's New in 2.3.6
+## What's New in 2.5.0
-- **Responsive font sizing** — `pa-font-responsive` class on `<html>` for automatic mobile scaling (10px desktop, 12px mobile). Granular `pa-font-base-*` / `pa-font-mobile-*` classes for full control. No JS, no FOUC.
-- **Getting Started page** — New demo page covering installation, theme management via CLI, responsive sizing, RTL, and BEM reference
+- **Form Demo showcase page** (`/showcases/form-demo`) — Vanilla-JS CRUD form mirroring the LiveView form demo from `keen-pure-admin`: inline validation slots, edit/update flow, optimistic delete with toast-undo, and a `simulateServerSave()` failure path so error states are exercisable without any tooling.
+- **Alert system overhaul** — `pa-alert__heading` is now the single heading element (compact default + new `--lg` modifier for punchy presentation), default alignment flipped to `align-items: center` so icons sit nicely with single-line content (new `pa-alert--multiline` opt-out for icon + multi-line stacks), real size scale on `--sm` / `--lg` (both padding *and* font now step in 0.25rem / 0.2rem increments), and `__actions` renders with a toast-style separator. Multi-element layouts (heading + list + actions) stack reliably now via `flex-basis: 100%` on structural children.
+- **Snippets audit + gap pass** — Every snippet under `snippets/` cross-checked against its SCSS source (27 audit commits, tracked in `snippets/AUDIT.md`). Wrong attribute names, dead classes, and structural omissions corrected across the board. Four new gap-pass snippets: `filter-card`, `statistics`, `notifications`, `data-display`.
+- **Popconfirm position classes renamed (Breaking)** — `pa-popconfirm--right` / `--left` → `pa-popconfirm--end` / `--start`. SCSS uses logical properties so the popconfirm and its arrow mirror in `dir="rtl"`. No backwards-compatibility aliases — update markup directly.
+- **`pa-alert__heading` size now opt-in (Breaking)** — Was hardcoded `font-size-lg`; defaults to the alert's body font-size now. Add `pa-alert__heading--lg` on existing alerts to keep the previous bigger treatment.
-## What's New in 2.3.5
+## What's New in 2.4.0
-- **Navbar alignment fix** — `__end` section pushed to right edge via `margin-inline-start: auto`, works without `__center` spacer
-- **Scroll-lock fix** — Panel/modal open no longer hides scrollbar (`overflow-y: scroll` instead of `hidden`)
+- **`download-themes` bin removed** — Theme management now lives in the [`pureadmin` CLI](https://www.npmjs.com/package/@keenmate/pureadmin) (`npx pureadmin themes add/update/list`). README's Theme Setup section rewritten to match.
+- **Theme-aware charts** — Demo dashboard chart rewritten to source colors and fonts from Pure Admin CSS custom properties (`--pa-accent`, `--pa-text-color-*`, `--base-font-family`). Establishes the canonical pattern for SVG charts tracking the active theme.
+- **KPI square stats theme correctly** — `pa-stat--square` color variants now route through `--pa-accent` / `--pa-success-bg` / etc. instead of raw SCSS vars that resolved to Bootstrap defaults in every theme.
+- **Profile panel readable on colored headers** — Name, email, role badge, and tab icons now use `--pa-header-profile-name-color` (guaranteed to contrast with header bg) instead of body text vars, with opacity/color-mix for hierarchy.
 ## Installation

package/dist/css/main.css CHANGED Viewed

@@ -8762,14 +8762,14 @@ a.pa-card p {
    ======================================== */
 .pa-alert {
   position: relative;
-  padding: 1.2rem 1rem;
+  padding: 1.2rem 1.25rem;
   margin-bottom: 1.6rem;
   border: 1px solid transparent;
   border-radius: var(--pa-border-radius);
   font-size: 1.4rem;
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
+  align-items: center;
 }
 .pa-card__body .pa-alert:first-child {
   margin-top: 0;
@@ -8937,16 +8937,19 @@ a.pa-card p {
   background-color: transparent;
 }
 .pa-alert--sm {
-  padding: 1.2rem 1rem;
-  font-size: 1.4rem;
+  padding: 0.8rem 1.6rem;
+  font-size: 1.2rem;
 }
 .pa-alert--lg {
-  padding: 1.2rem 1rem;
+  padding: 1.6rem 2.4rem;
   font-size: 1.6rem;
 }
 .pa-alert--dismissible {
   padding-inline-end: 4.8rem;
 }
+.pa-alert--multiline {
+  align-items: flex-start;
+}
 .pa-alert__icon {
   flex-shrink: 0;
   font-size: 1.6rem;
@@ -8954,28 +8957,39 @@ a.pa-card p {
 }
 .pa-alert__content {
   flex: 1;
+  min-width: 0;
+}
+.pa-alert__heading, .pa-alert__list, .pa-alert__actions,
+.pa-alert > p,
+.pa-alert > hr {
+  flex-basis: 100%;
 }
 .pa-alert__heading {
-  margin: 0 0 0.8rem 0;
+  margin: 0;
   color: inherit;
-  font-size: 1.8rem;
   font-weight: 600;
 }
+.pa-alert__heading--lg {
+  font-size: 1.8rem;
+}
 .pa-alert__list {
-  margin: 0.8rem 0;
+  margin: 0;
   padding-inline-start: 2.4rem;
 }
 .pa-alert__actions {
-  margin-top: 1.2rem;
+  margin-top: 0;
+  padding-top: 1.6rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
   display: flex;
   gap: 0.8rem;
+  flex-wrap: wrap;
 }
 .pa-alert__close {
   position: absolute;
   top: 0;
   inset-inline-end: 0;
   z-index: 2px;
-  padding: 1.2rem 1rem;
+  padding: 1.2rem 1.25rem;
   background: none;
   border: none;
   font-size: 2rem;
@@ -11469,115 +11483,6 @@ web-multiselect {
   white-space: nowrap;
 }
-.pa-pager {
-  display: flex;
-  margin: 1.6rem 0;
-}
-.pa-card__body .pa-pager:first-child {
-  margin-top: 0;
-}
-.pa-card__body .pa-pager:last-child {
-  margin-bottom: 0;
-}
-.pa-pager {
-  justify-content: center;
-}
-.pa-pager--start {
-  justify-content: flex-start;
-}
-.pa-pager--center {
-  justify-content: center;
-}
-.pa-pager--end {
-  justify-content: flex-end;
-}
-.pa-pager__container {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  white-space: nowrap;
-}
-.pa-pager__controls {
-  display: flex;
-  gap: 0.4rem;
-}
-.pa-pager__info {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-}
-.pa-pager__input {
-  width: 6.4rem !important;
-  text-align: center;
-}
-.pa-pager__text {
-  color: var(--pa-text-color-2);
-  font-size: 1.4rem;
-}
-.pa-load-more {
-  display: flex;
-  margin: 1.6rem 0;
-}
-.pa-card__body .pa-load-more:first-child {
-  margin-top: 0;
-}
-.pa-card__body .pa-load-more:last-child {
-  margin-bottom: 0;
-}
-.pa-load-more {
-  justify-content: center;
-}
-.pa-load-more--start {
-  justify-content: flex-start;
-}
-.pa-load-more--center {
-  justify-content: center;
-}
-.pa-load-more--end {
-  justify-content: flex-end;
-}
-.pa-load-more__button {
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  padding: 0.8rem 1.2rem;
-  background-color: transparent;
-  border: 1px solid var(--pa-border-color);
-  border-radius: var(--pa-border-radius);
-  color: var(--pa-text-color-1);
-  font-size: 1.4rem;
-  cursor: pointer;
-  transition: all 0.1s ease-out;
-}
-.pa-load-more__button:hover {
-  border-color: var(--pa-accent);
-  color: var(--pa-accent);
-  background-color: var(--pa-accent-light);
-}
-.pa-load-more__button--loading {
-  pointer-events: none;
-  opacity: 0.7;
-}
-.pa-load-more__button--loading .pa-load-more__spinner {
-  animation: pa-spin 1s linear infinite;
-}
-.pa-load-more__spinner {
-  width: 1.6rem;
-  height: 1.6rem;
-  border: 2px solid var(--pa-border-color);
-  border-top: 2px solid var(--pa-accent);
-  border-radius: 50%;
-}
-.pa-load-more__text {
-  color: inherit;
-}
-.pa-load-more__count {
-  color: var(--pa-text-color-2);
-  font-size: 1.2rem;
-  margin-inline-start: 0.4rem;
-}
 .pa-virtual-table {
   border: 1px solid var(--pa-border-color);
   border-radius: var(--pa-border-radius);
@@ -12194,7 +12099,7 @@ code {
   width: 1.6rem;
   height: 1.6rem;
   border: 2px solid var(--pa-border-color);
-  border-top: 2px solid #007bff;
+  border-top: 2px solid var(--pa-accent);
   border-radius: 50%;
 }
 .pa-load-more__text {
@@ -14809,44 +14714,56 @@ code {
 }
 .pa-popconfirm--bottom .pa-popconfirm__arrow {
   top: -0.64rem;
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%) rotate(45deg);
   border-right: none;
   border-bottom: none;
 }
+[dir=rtl] .pa-popconfirm--bottom .pa-popconfirm__arrow {
+  transform: translateX(50%) rotate(45deg);
+}
 .pa-popconfirm--top {
   margin-bottom: 0.8rem;
 }
 .pa-popconfirm--top .pa-popconfirm__arrow {
   bottom: -0.64rem;
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%) rotate(45deg);
   border-left: none;
   border-top: none;
 }
+[dir=rtl] .pa-popconfirm--top .pa-popconfirm__arrow {
+  transform: translateX(50%) rotate(45deg);
+}
-.pa-popconfirm--right {
-  margin-left: 0.8rem;
+.pa-popconfirm--end {
+  margin-inline-start: 0.8rem;
 }
-.pa-popconfirm--right .pa-popconfirm__arrow {
-  left: -0.64rem;
+.pa-popconfirm--end .pa-popconfirm__arrow {
+  inset-inline-start: -0.64rem;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
   border-top: none;
   border-right: none;
 }
+[dir=rtl] .pa-popconfirm--end .pa-popconfirm__arrow {
+  transform: translateY(-50%) rotate(45deg) scaleX(-1);
+}
-.pa-popconfirm--left {
-  margin-right: 0.8rem;
+.pa-popconfirm--start {
+  margin-inline-end: 0.8rem;
 }
-.pa-popconfirm--left .pa-popconfirm__arrow {
-  right: -0.64rem;
+.pa-popconfirm--start .pa-popconfirm__arrow {
+  inset-inline-end: -0.64rem;
   top: 50%;
   transform: translateY(-50%) rotate(45deg);
   border-bottom: none;
   border-left: none;
 }
+[dir=rtl] .pa-popconfirm--start .pa-popconfirm__arrow {
+  transform: translateY(-50%) rotate(45deg) scaleX(-1);
+}
 .pa-popconfirm--compact {
   min-width: 19.2rem;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/AUDIT.md ADDED Viewed

@@ -0,0 +1,94 @@
+# Snippets Audit Log
+Tracks which snippets have been cross-checked against their SCSS source and when. Paired with `manifest.json` (which records file hashes for downstream framework wrappers), this file answers *has anyone verified this is still accurate*.
+**Process.** An audit reads the corresponding SCSS surface, compares it against the snippet (base class, modifiers, BEM elements, child styling, sizes, variants), triangulates with usage in `demo/views/*.mustache`, and fixes drift in-place. One snippet per commit.
+**Legend.**
+- ✅ audited — snippet reviewed and brought in line with SCSS as of the listed commit
+- ⏳ pending — not yet touched in this pass
+- 🆕 missing — component exists in SCSS but has no snippet
+## Audited
+| Snippet | Audited | SCSS verified against | Commit |
+|---|---|---|---|
+| `callouts.html` | 2026-04-24 | `core-components/_callouts.scss` | [6ea28e8](../../../commit/6ea28e8) |
+| `code.html` | 2026-04-24 | `core-components/_code.scss`, `variables/_colors.scss` | [cd2e51b](../../../commit/cd2e51b) |
+| `loaders.html` | 2026-04-24 | `core-components/_loaders.scss`, `core-components/_buttons.scss` (loading state), `variables/_components.scss` | [6a4682d](../../../commit/6a4682d) |
+| `toasts.html` | 2026-04-24 | `core-components/_toasts.scss` | [4056fa9](../../../commit/4056fa9) |
+| `popconfirm.html` | 2026-04-24 | `core-components/_popconfirm.scss` | [d8e7f7c](../../../commit/d8e7f7c) |
+| `typography.html` | 2026-04-24 | `core-components/_base.scss`, `core-components/_utilities.scss` (.pa-text), `utilities.scss` (.text-*), `_fonts.scss`, `variables/_typography.scss` | [12f1281](../../../commit/12f1281) |
+| `alerts.html` | 2026-04-25 | `core-components/_alerts.scss`, `variables/_components.scss` (alert padding + font-size scales) | [512ef3c](../../../commit/512ef3c), revised [dd7a096](../../../commit/dd7a096) (toast-style `__actions` separator), [f824000](../../../commit/f824000) (flex-wrap layout fix: structural children get `flex-basis: 100%`), [514d67d](../../../commit/514d67d) (heading unification: `__heading` defaults to body size, `--lg` opt-in for punchy), [f25700d](../../../commit/f25700d) (introduced `$alert-padding-{sm,lg}-{v,h}` and `$alert-font-size-{sm,lg}` so `--sm` / `--lg` actually differ from default), [d2b27ea](../../../commit/d2b27ea) (default `$alert-padding-{v,h}` decoupled from `$card-footer-padding-{v,h}`: 0.75rem / 1.25rem, so default sits inside the V 0.5 → 0.75 → 1 / H 1 → 1.25 → 1.5 scale instead of outside it), and _(this commit)_ (default `align-items: center` so icon + single-line content centres; new `pa-alert--multiline` modifier opts back to `flex-start` for icon + multi-line `__content`) |
+| `badges.html` | 2026-04-24 | `core-components/badges/_badge-base.scss`, `_composite-badge.scss`, `_composite-badge-variants.scss`, `_badge-group.scss`, `_labels.scss` | [517f6bf](../../../commit/517f6bf) |
+| `buttons.html` | 2026-04-24 | `core-components/_buttons.scss` | [43a9a42](../../../commit/43a9a42) |
+| `tables.html` | 2026-04-24 | `core-components/_tables.scss` (covers `.pa-table`, `.pa-table-container`, `.pa-table-card`), `core-components/_pagers.scss` (covers `.pa-pager`, `.pa-load-more`) | [e34ca85](../../../commit/e34ca85) |
+| `lists.html` | 2026-04-24 | `core-components/_lists.scss` | [894b0dd](../../../commit/894b0dd) |
+| `tooltips.html` | 2026-04-24 | `core-components/_tooltips.scss` | [b2d196b](../../../commit/b2d196b) |
+| `grid.html` | 2026-04-24 | `core-components/_grid.scss`, `utilities.scss` (.pa-cq), `variables/_spacing.scss` ($grid-breakpoints) | [0bd9f16](../../../commit/0bd9f16) |
+| `utilities.html` | 2026-04-24 | `utilities.scss` (main utilities), `core-components/_utilities.scss` (components-adjacent helpers), `variables/_spacing.scss` (spacing scale) | [20df758](../../../commit/20df758) |
+| `cards.html` | 2026-04-24 | `core-components/_cards.scss` | [4a67018](../../../commit/4a67018) |
+| `forms.html` | 2026-04-24 | `core-components/forms/` (all 7 files: _form-layout, _form-inputs, _form-states, _input-groups, _input-wrapper, _checkboxes-radios, _query-editor) | [272f141](../../../commit/272f141) |
+| `layout.html` | 2026-04-24 | `core-components/layout/` (all 6 files: _layout-container, _navbar, _navbar-elements, _sidebar, _sidebar-states, _layout-responsive), `variables/_layout.scss` (container widths) | [9762492](../../../commit/9762492) |
+| `profile.html` | 2026-04-24 | `core-components/_profile.scss` | [2b70e27](../../../commit/2b70e27) |
+| `tabs.html` | 2026-04-24 | `core-components/_tabs.scss` | [35f5f16](../../../commit/35f5f16) |
+| `timeline.html` | 2026-04-24 | `core-components/_timeline.scss` | [eaa5ad9](../../../commit/eaa5ad9) |
+| `checkbox-lists.html` | 2026-04-24 | `core-components/_checkbox-lists.scss`, `core-components/forms/_checkboxes-radios.scss` (pa-checkbox component reference) | [e2bb951](../../../commit/e2bb951) |
+| `command-palette.html` | 2026-04-24 | `core-components/_command-palette.scss` (covers `.pa-command-palette`, `.pa-navbar-search`, `.pa-shortcut-help`) | [a9b4fe3](../../../commit/a9b4fe3) |
+| `comparison.html` | 2026-04-24 | `core-components/_comparison.scss` | [e4f1cd6](../../../commit/e4f1cd6) |
+| `modals.html` | 2026-04-24 | `core-components/_modals.scss`, `variables/_components.scss` ($modal-*-width + $modal-body-scrollable-max-height) | [795856e](../../../commit/795856e) |
+| `modal-dialogs.html` | 2026-04-24 | `src/js/modal-dialogs.js` (PureAdmin.confirm / alert / prompt / custom API); DOM produced matches `_modals.scss` | [e5eba00](../../../commit/e5eba00) |
+| `detail-panel.html` | 2026-04-24 | `core-components/_detail-panel.scss`, `variables/_components.scss` (panel width + z-index) | [c1dc6ff](../../../commit/c1dc6ff) |
+| `customization.html` | 2026-04-25 | `_base-css-variables.scss`, `_variables.scss`, theme-system pattern (mirrors `pure-admin-themes` repo) | [0a8950e](../../../commit/0a8950e) |
+| `virtual-scroll.html` | 2026-04-25 | `core-components/_tables.scss` (`.pa-virtual-table` shell, lines 477-552), `core-components/_timeline.scss` (`.pa-timeline__loader`), `src/js/virtual-scroll.js` (VirtualScroll class API) | [85db533](../../../commit/85db533) |
+| `web-daterangepicker.html` | 2026-04-25 | `../../web-daterangepicker/src/web-component.ts` (observedAttributes), `../../web-daterangepicker/src/types.ts` (DatePickerOptions, DateInfo, disabledDatesHandling), `../../web-daterangepicker/API.md`, `core-components/_web-components-theme.scss` (--base-* bridge) | [7cbad56](../../../commit/7cbad56) |
+| `web-multiselect.html` | 2026-04-25 | `../../web-multiselect/src/web-component.ts` (observedAttributes), `../../web-multiselect/src/types.ts` (BadgesDisplayMode, BadgesPosition, SearchMode, ValueFormat etc.), `../../web-multiselect/src/css/_variables.css` (--ms-* surface), `core-components/_web-components-theme.scss` | [95cf062](../../../commit/95cf062) |
+| `filter-card.html` | 2026-04-25 | `core-components/_filter-card.scss` (whole file — only BEM elements + 2 state modifiers, no base block) | [b65ec2b](../../../commit/b65ec2b) |
+| `statistics.html` | 2026-04-25 | `core-components/_statistics.scss` (whole file — `.pa-stat`, `--hero`, `--hero-compact`, `--square` + 6 colour variants, `.pa-kpi-grid`) | [5de0ce8](../../../commit/5de0ce8) |
+| `notifications.html` | 2026-04-25 | `core-components/_notifications.scss` (whole file — bell + dropdown panel, item states, page-view modifier, hover-revealed actions) | [0d7bb15](../../../commit/0d7bb15) |
+| `data-display.html` | 2026-04-25 | `core-components/_data-display.scss` (whole file — 7 components: `.pa-field` + `.pa-fields` (15+ layout modifiers), `.pa-field-group`, `.pa-desc-table`, `.pa-prop-card`, `.pa-banded`, `.pa-accent-grid`, `.pa-dot-leaders`; shared copy-pattern modifiers across all) | [39cc6bd](../../../commit/39cc6bd) |
+## Pending
+_None — both audit and gap passes complete._
+Run `npm run generate-hashes -w @keenmate/pure-admin-core` to refresh `snippets/manifest.json` whenever any of the snippet files change.
+## Gaps — SCSS without a snippet
+These components exist in `src/scss/core-components/` but downstream consumers have no snippet to crib from. Decide per-entry whether to add a snippet or mark as demo-internal.
+| Component | SCSS file | Notes |
+|---|---|---|
+| pagers | `_pagers.scss` | Covered inside `tables.html` audit (same family; pager/load-more only meaningful alongside tables). |
+| ~~notifications~~ | ~~`_notifications.scss`~~ | ~~Public — snippet worth adding~~ → done in `notifications.html` |
+| ~~statistics~~ | ~~`_statistics.scss`~~ | ~~Public — snippet worth adding~~ → done in `statistics.html` |
+| file-selector | `_file-selector.scss` | **Deferred** — component is not yet finished. Revisit once the API stabilizes; snippet would chase a moving target. |
+| ~~filter-card~~ | ~~`_filter-card.scss`~~ | ~~Public — snippet worth adding~~ → done in `filter-card.html` |
+| logic-tree | `_logic-tree.scss` | **Deferred** — component is not yet finished. Revisit once the API stabilizes. |
+| ~~data-display~~ | ~~`_data-display.scss`~~ | ~~Public — snippet worth adding~~ → done in `data-display.html` |
+| smart-filters (aka query-editor) | `core-components/forms/_query-editor.scss` | **Deferred** — component is not yet finished. SCSS file is named `_query-editor.scss` but the demo calls it "Smart Filters" (`demo/views/smart-filters.mustache` + `demo/js/search-autocomplete*.js`, `virtual-textbox.js`). Briefly cross-referenced from forms.html; revisit once the API stabilizes. |
+| data-viz | `_data-viz.scss` | D3-driven — snippet would be thin; defer |
+| scrollbars | `_scrollbars.scss` | Global utility styling; no snippet needed |
+| settings-panel | `_settings-panel.scss` | Demo-internal; no snippet needed |
+| web-components-theme | `_web-components-theme.scss` | CSS custom properties bridge; no snippet needed |
+| base | `_base.scss` | Reset/base styles; covered by `typography.html` |
+## Known issues flagged during audits (not in scope to fix here)
+- **`demo/views/code.mustache`** reference block lists several accent colors that don't match `variables/_colors.scss`: JSON → "Green" (actual amber), bash → "Gray" (actual green), SQL → "Purple" (actual teal), keyword → "purple, bold" (actual blue + medium), function → "blue" (actual purple), property → "cyan" (actual pink-red). Fix in a later demo pass.
+- **`.pa-spinner` ghost size modifiers.** `_loaders.scss` only defines `--xs`; the demo page (`demo/views/loaders.mustache`) and the previous snippet both showed `--sm`, `--md`, `--lg`, `--xl`, `--2xl` with fabricated size labels (1rem → 4rem). All render at the default 16px because the modifiers don't exist. Snippet fixed in loaders commit; demo page still broken — either remove the ghost sizes from the demo, or add them to SCSS. Decision to be made in a future framework pass.
+- ~~**Popconfirm is physical-only; toasts are logical.**~~ Fixed in the popconfirm logical-rename commit: `--left`/`--right` → `--start`/`--end`, SCSS switched to `inset-inline-*` + `margin-inline-*`, arrow gets `scaleX(-1)` under `[dir="rtl"]`. See Unreleased section of CHANGELOG.
+- **Composite badge missing `--btn-danger` variant.** All other button-section colour overrides exist (`--btn-primary`, `--btn-secondary`, `--btn-success`, `--btn-warning`, `--btn-info`, `--btn-light`, `--btn-dark`) but not `--btn-danger`. The base `.pa-composite-badge__button` defaults to danger colours, so adding `--btn-danger` would be a no-op in practice, but the gap is inconsistent with `--label-danger` (which does exist) and makes "what overrides are available" harder to predict. Snippet flags the omission; actual fix is a single block in `_composite-badge-variants.scss`.
+- ~~**Pager/load-more definitions are duplicated** between `_tables.scss` (lines 475-608) and `_pagers.scss`.~~ Fixed: duplicate block removed from `_tables.scss`, and the `var(--pa-accent)` upgrade on the load-more spinner ported into `_pagers.scss` (it was using the raw SCSS `$accent-color` before). See Unreleased CHANGELOG entry.
+- **Timeline `--alternating` uses physical `left`/`right` throughout.** `_timeline.scss` mixes its RTL handling: `--simple` and `--feed` use logical properties (`inset-inline-*`, `margin-inline-*`, `padding-inline-*`, `border-inline-*`) and mirror correctly in RTL. But `--alternating` and its modifiers (`--start`, `--end`, `--keep-layout`, `--single-column`) use physical `left`/`right` positions for the centre line, dots, connector arms, dates, icons, and content offsets. Result: in RTL, the alternating timeline doesn't mirror — items stay on the same physical sides, the dates don't flip to the inline-start of each item, and `--start`/`--end` are locked to physical left/right. Fix would need `inset-inline-start/end` + `border-inline-*` substitutions throughout the alternating block, plus probably a `[dir="rtl"] &` flip for the nth-child offset origin. Framework scope; snippet documents the current physical behaviour accurately.
+## Rehash
+At the end of the audit (or whenever snippets settle), run:
+```bash
+npm run generate-hashes -w @keenmate/pure-admin-core
+```
+to refresh `snippets/manifest.json` so downstream framework wrappers see the new hashes.