@omnitend/dashboard-for-laravel 0.26.0 → 0.28.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-13T10:49:19.086Z",
+  "generated": "2026-07-18T13:55:43.374Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.26.0"
+    "version": "0.28.0"
   },
   "components": {
     "base": [
@@ -1265,7 +1265,7 @@
         "name": "DXBarChart",
         "category": "extended",
         "filePath": "resources/js/components/charts/DXBarChart.vue",
-        "description": "A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the Bootstrap palette applied and dashboard-friendly defaults (no x gridlines, formatted value ticks, responsive, legend hidden for a single series). Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "description": "A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines, formatted value ticks, responsive, legend hidden for a single series). Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
         "props": [
           {
             "name": "labels",
@@ -1751,7 +1751,7 @@
         "name": "DXDoughnutChart",
         "category": "extended",
         "filePath": "resources/js/components/charts/DXDoughnutChart.vue",
-        "description": "A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one Bootstrap palette colour per slice and dashboard-friendly defaults. Pass `labels` + either `data` (a number array) or full `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "description": "A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass `labels` + either `data` (a number array) or full `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
         "props": [
           {
             "name": "labels",
@@ -2324,7 +2324,7 @@
         "name": "DXLineChart",
         "category": "extended",
         "filePath": "resources/js/components/charts/DXLineChart.vue",
-        "description": "A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the Bootstrap palette applied (themed stroke + translucent fill, smoothed line) and dashboard-friendly defaults. Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
+        "description": "A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line) and dashboard-friendly defaults. Pass `labels` + `datasets`; `options` deep-merges over the defaults. Requires the optional peer deps `chart.js` and `vue-chartjs`.",
         "props": [
           {
             "name": "labels",
@@ -3045,7 +3045,123 @@
                 "title": "binding"
               }
             ]
+          }
+        ],
+        "methods": []
+      },
+      {
+        "name": "DXTableEditorModal",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXTableEditorModal.vue",
+        "description": "Internal edit/create modal for `DXTable` (#129). Renders the `DModal` + `DXForm` and maps DXTable's `edit-value`/`edit-span`/`tab-*` slots onto DXForm's `value`/`span`/`tab-*` slots, providing the row context and a `close` handle. Extracted so `DXTable` is a thin façade over the table render, the pagination, the editor logic (`useResourceEditor`) and this modal — rather than owning all four. The edit-modal slots reach here forwarded from DXTable (consumer → DXTable → here → DXForm). This component computes which keyed slots the consumer actually provided from its OWN `$slots`, so the slot-plumbing lives entirely with the modal, not the composable.",
+        "props": [
+          {
+            "name": "show",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether the modal is open (v-model:show)."
+          },
+          {
+            "name": "title",
+            "type": "string",
+            "required": true,
+            "description": "Modal title."
+          },
+          {
+            "name": "size",
+            "type": "union",
+            "required": false,
+            "description": "Modal size."
+          },
+          {
+            "name": "loading",
+            "type": "boolean",
+            "required": true,
+            "description": "True while the full record is loading via showUrl."
+          },
+          {
+            "name": "form",
+            "type": "any",
+            "required": true,
+            "description": "The edit/create form (a useForm instance), or null before first open."
+          },
+          {
+            "name": "formInstanceKey",
+            "type": "number",
+            "required": true,
+            "description": "Bumped per modal open to remount the DXForm subtree (fresh DXField state)."
+          },
+          {
+            "name": "activeTab",
+            "type": "number",
+            "required": true,
+            "description": "Active tab index (v-model:active-tab)."
+          },
+          {
+            "name": "fields",
+            "type": "Array",
+            "required": true,
+            "description": "Field definitions passed to DXForm."
+          },
+          {
+            "name": "tabs",
+            "type": "Array",
+            "required": false,
+            "description": "Tab definitions passed to DXForm."
+          },
+          {
+            "name": "item",
+            "type": "any",
+            "required": true,
+            "description": "The row being edited (null in create mode) — the slot/context row."
+          },
+          {
+            "name": "isCreateMode",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether the modal is in create mode (vs edit)."
+          },
+          {
+            "name": "pendingAction",
+            "type": "union",
+            "required": true,
+            "description": "Which action is in flight, so Save/Delete show their own loading label."
+          },
+          {
+            "name": "deleteUrl",
+            "type": "string",
+            "required": false,
+            "description": "Delete endpoint — gates the Delete button."
+          }
+        ],
+        "events": [
+          {
+            "name": "update:show",
+            "description": "v-model:show — the modal open state changed.",
+            "properties": []
+          },
+          {
+            "name": "update:activeTab",
+            "description": "v-model:active-tab — the active tab changed.",
+            "properties": []
           },
+          {
+            "name": "save",
+            "description": "Save was requested (footer button or DXForm submit).",
+            "properties": []
+          },
+          {
+            "name": "cancel",
+            "description": "Cancel/close was requested.",
+            "properties": []
+          },
+          {
+            "name": "delete",
+            "description": "Delete was requested.",
+            "properties": []
+          }
+        ],
+        "slots": [
           {
             "name": "`edit-value(${key})`",
             "description": "Custom input for field `<key>` in the edit/create modal, forwarded to DXForm. Name it `edit-value(<fieldKey>)`.",
@@ -3211,6 +3327,76 @@
         ],
         "methods": []
       },
+      {
+        "name": "DXTablePagination",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXTablePagination.vue",
+        "description": "Internal pagination + per-page footer for `DXTable`. Renders the pager, the per-page selector, and the \"X to Y out of Z items\" info line (with the \"Filtered from N\" note when a column filter is active). Extracted because `DXTable` used to carry three byte-identical copies of this footer — one per data mode (client-side / inertia / provider) — that differed only in which `PaginationData` object and page-change handler they used, so every footer fix had to be written three times (#123). `DXTable` now derives the active pagination + handler and renders this once. It owns its own `:deep(.pagination …)` styling (rather than leaving it in `DXTable`), because a scoped `:deep()` in `DXTable` would not reach the pager once it lives in a child component — the scope-id doesn't cross the boundary. Anchoring the rules on this component's own `.dx-table-pagination` root (a plain element it owns) gives the scope-id a deterministic host.",
+        "props": [
+          {
+            "name": "pagination",
+            "type": "PaginationData",
+            "required": true,
+            "description": "The active pagination metadata (client-side / inertia / provider)."
+          },
+          {
+            "name": "perPage",
+            "type": "number",
+            "required": true,
+            "description": "The effective page size, shown in the selector."
+          },
+          {
+            "name": "perPageOptions",
+            "type": "Array",
+            "required": true,
+            "description": "Page sizes offered by the selector."
+          },
+          {
+            "name": "showPagination",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether to render the pager (still hidden when there is only one page)."
+          },
+          {
+            "name": "showPerPageSelector",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether to render the per-page selector."
+          },
+          {
+            "name": "singularItemName",
+            "type": "string",
+            "required": true,
+            "description": "Singular item noun for the info line (e.g. \"product\")."
+          },
+          {
+            "name": "pluralItemName",
+            "type": "string",
+            "required": true,
+            "description": "Plural item noun for the info line (e.g. \"products\")."
+          },
+          {
+            "name": "hasActiveFilters",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether a column filter is active — gates the \"Filtered from N\" note."
+          }
+        ],
+        "events": [
+          {
+            "name": "page-change",
+            "description": "The user picked a page. Payload is the new 1-based page number.",
+            "properties": []
+          },
+          {
+            "name": "per-page-change",
+            "description": "The per-page selector changed. Payload is the raw DFormSelect model value\n(the parent's `handlePerPageChange` narrows it — DFormSelect mirrors BVN's\nmodel, which can be a scalar, null, or array).",
+            "properties": []
+          }
+        ],
+        "slots": [],
+        "methods": []
+      },
       {
         "name": "DXTableShell",
         "category": "extended",
@@ -3295,8 +3481,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 73,
+    "totalComponents": 75,
     "baseComponents": 56,
-    "extendedComponents": 17
+    "extendedComponents": 19
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-13T10:49:19.148Z
+> Last updated: 2026-07-18T13:55:43.432Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 
@@ -95,7 +95,7 @@ This file provides a complete map of all available documentation for AI agents a
 - [Forms](/guide/forms): The library includes a type-safe form system with validation, auto-generated forms, and composables.
 - [Getting Started](/guide/getting-started): > **Alpha Notice:** v0.x — expect changes between minor versions.
 - [Installation](/guide/installation): ```bash
-- [Theming](/guide/theming): The library includes a custom Bootstrap 5 theme that can be easily customised using CSS variables an
+- [Theming](/guide/theming): The library ships a custom Bootstrap 5 theme built around a **soft-first
 - [TypeScript](/guide/typescript): The library is written in TypeScript and includes full type definitions for all components, composab
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -38,7 +38,7 @@
     "pretest:headless": "vite build",
     "test:headless": "vitest --run --browser.headless",
     "docs:dev": "astro dev",
-    "docs:build": "npm run docs:generate:ai && astro build",
+    "docs:build": "npm run docs:generate:ai && astro build && node scripts/check-docs-base-links.mjs",
     "docs:preview": "astro preview",
     "docs:generate": "node scripts/generate-component-docs.mjs",
     "docs:generate:ai": "node scripts/generate-llms-txt.mjs && node scripts/generate-api-manifest.mjs && node scripts/generate-docs-map.mjs",

package/resources/css/theme.scss

@@ -7,19 +7,32 @@
 // The Sass module for `color.mix()` etc. `@use` must precede all other
 // statements (variable overrides, `@import`), so it stays at the very top.
 @use "sass:color";
+@use "sass:list";
+@use "sass:map";
 
 // ----------------------------------------------------------------------------
 // Colors
 // ----------------------------------------------------------------------------
 
-$primary: #4f46e5; // Indigo-600 (8.6:1 with white)
-$secondary: #475569; // Slate-600 (7.0:1 with white) - darkened for better contrast
-$success: #10b981; // Emerald-500 (6.7:1 with white)
-$danger: #dc2626; // Red-600 (7.2:1 with white) - darkened for better contrast
-$warning: #f59e0b; // Amber-500 (7.7:1 with white)
-$info: #2563eb; // Blue-600 (7.3:1 with white)
+// Base $theme-colors carry each hue's READABLE-ON-LIGHT identity (its "emphasis"
+// shade) — this is what `.text-*`, `.link-*`, `.border-*` and outline buttons
+// use, so every one must clear AA on white. Bold solid FILLS (primary/danger
+// buttons) and SOFT tints (soft buttons, badges, alerts) are applied as explicit
+// overrides after the Bootstrap import, from the $dx-variants map. See
+// plans/2026-07-18-semantic-colour-system.md.
+$primary: #151e2d; // Omni Tend brand navy (16.73:1 on white)
+$secondary: #475569; // Slate-600 (7.58:1 on white)
+$success: #4d7c0f; // Lime-700 emphasis (4.99:1 on white); soft/vivid tints in $dx-variants
+$danger: #dc2626; // Red-600 (4.83:1 on white)
+$warning: #b45309; // Amber-700 emphasis (5.02:1 on white)
+$info: #2563eb; // Blue-600 (5.17:1 on white)
 $light: #f8fafc; // Slate-50 (uses dark text)
-$dark: #0f172a; // Slate-900 (uses white text)
+$dark: #151e2d; // Brand navy — sidebar/high-contrast surfaces (was Slate-900 #0f172a)
+
+// Links are the info-blue, independent of the near-black brand primary (a navy
+// link would read as bold text, not a link).
+$link-color: #2563eb;
+$link-shade-percentage: 15%;
 
 // ----------------------------------------------------------------------------
 // Contrast Settings
@@ -154,6 +167,21 @@ $badge-padding-y: 0.25rem;
 $badge-padding-x: 0.625rem;
 $badge-font-weight: 500;
 
+// The ONE source of truth for the semantic colour system. Each variant carries
+// its SOLID fill + same-hue text (primary/danger buttons, solid fills), its SOFT
+// tint pair (soft buttons, badges, alerts, status), its EMPHASIS shade (outline
+// buttons, coloured links, .text-*), and whether its button is solid or soft.
+// The overrides after the Bootstrap import loop over this map. All pairs are
+// WCAG AA verified. See plans/2026-07-18-semantic-colour-system.md.
+$dx-variants: (
+  "primary": (solid-bg: #151e2d, solid-text: #e9f0f8, soft-bg: #e9f0f8, soft-text: #151e2d, emphasis: #151e2d, button: "solid"),
+  "secondary": (solid-bg: #475569, solid-text: #e6ebf2, soft-bg: #e6ebf2, soft-text: #29374a, emphasis: #475569, button: "soft"),
+  "success": (solid-bg: #84cc16, solid-text: #203b0e, soft-bg: #cdf9b2, soft-text: #203b0e, emphasis: #4d7c0f, button: "soft"),
+  "danger": (solid-bg: #dc2626, solid-text: #ffffff, soft-bg: #f5dff1, soft-text: #59194a, emphasis: #dc2626, button: "solid"),
+  "warning": (solid-bg: #f59e0b, solid-text: #512d05, soft-bg: #fce5c4, soft-text: #512d05, emphasis: #b45309, button: "soft"),
+  "info": (solid-bg: #2563eb, solid-text: #eef4ff, soft-bg: #deebff, soft-text: #12376c, emphasis: #2563eb, button: "soft"),
+);
+
 // ----------------------------------------------------------------------------
 // Dashboard
 // ----------------------------------------------------------------------------
@@ -420,6 +448,139 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   }
 }
 
+// ----------------------------------------------------------------------------
+// Semantic colour system (soft-first)
+// ----------------------------------------------------------------------------
+// One loop over $dx-variants applies the whole system on top of Bootstrap:
+//
+//   - Buttons: primary/danger are SOLID (fill from the base colour; we only
+//     override the label to the same-hue tint, letting Bootstrap shade hover/
+//     active). secondary/success/warning/info are SOFT (light tint bg + dark
+//     text, fully overridden incl. hover/active).
+//   - Outline buttons: the emphasis shade for border/label, the soft tint on hover.
+//   - Badges: `.badge.text-bg-*` re-tinted soft — needs `!important` because
+//     Bootstrap's `.text-bg-*` helper sets its colours `!important` by design.
+//   - Alerts: the soft tint.
+//   - Links/text: `.link-*` and `.text-*` take the emphasis shade so they read
+//     on white (the base colours already carry emphasis for most variants; this
+//     pins the two — success/warning — whose base differs).
+@each $name, $v in $dx-variants {
+  $solid-bg: map.get($v, "solid-bg");
+  $solid-text: map.get($v, "solid-text");
+  $soft-bg: map.get($v, "soft-bg");
+  $soft-text: map.get($v, "soft-text");
+  $emphasis: map.get($v, "emphasis");
+  $is-solid: map.get($v, "button") == "solid";
+
+  @if $is-solid {
+    // Solid button: keep Bootstrap's fill + hover/active shading (from the base
+    // colour), override only the LABEL to the same-hue tint.
+    .btn-#{$name} {
+      --bs-btn-color: #{$solid-text};
+      --bs-btn-hover-color: #{$solid-text};
+      --bs-btn-active-color: #{$solid-text};
+      --bs-btn-disabled-color: #{$solid-text};
+    }
+  } @else {
+    // Soft button: light tint bg + dark same-hue label; darken the tint slightly
+    // on hover/active for feedback.
+    .btn-#{$name} {
+      --bs-btn-color: #{$soft-text};
+      --bs-btn-bg: #{$soft-bg};
+      --bs-btn-border-color: #{$soft-bg};
+      --bs-btn-hover-color: #{$soft-text};
+      --bs-btn-hover-bg: #{color.scale($soft-bg, $lightness: -6%)};
+      --bs-btn-hover-border-color: #{color.scale($soft-bg, $lightness: -6%)};
+      --bs-btn-active-color: #{$soft-text};
+      --bs-btn-active-bg: #{color.scale($soft-bg, $lightness: -10%)};
+      --bs-btn-active-border-color: #{color.scale($soft-bg, $lightness: -10%)};
+      --bs-btn-disabled-color: #{$soft-text};
+      --bs-btn-disabled-bg: #{$soft-bg};
+      --bs-btn-disabled-border-color: #{$soft-bg};
+    }
+  }
+
+  // Outline button: emphasis border/label, fills to the soft tint on hover so it
+  // stays calm (not a sudden saturated block).
+  .btn-outline-#{$name} {
+    --bs-btn-color: #{$emphasis};
+    --bs-btn-border-color: #{$emphasis};
+    --bs-btn-hover-color: #{$soft-text};
+    --bs-btn-hover-bg: #{$soft-bg};
+    --bs-btn-hover-border-color: #{$emphasis};
+    --bs-btn-active-color: #{$soft-text};
+    --bs-btn-active-bg: #{$soft-bg};
+    --bs-btn-active-border-color: #{$emphasis};
+  }
+
+  // Badge — soft tint. `!important` beats Bootstrap's `.text-bg-*` helper.
+  .badge.text-bg-#{$name} {
+    background-color: #{$soft-bg} !important;
+    color: #{$soft-text} !important;
+  }
+
+  // Alert — soft tint, with the emphasis shade as the accent border.
+  .alert-#{$name} {
+    --bs-alert-bg: #{$soft-bg};
+    --bs-alert-color: #{$soft-text};
+    --bs-alert-border-color: #{color.scale($soft-bg, $lightness: -8%)};
+    --bs-alert-link-color: #{$emphasis};
+  }
+
+  // `.text-#{$name}` and `.link-#{$name}` need no override: each variant's base
+  // colour IS its emphasis shade, so Bootstrap already renders them legible.
+}
+
+// primary is near-black navy, so Bootstrap's darken-on-hover is imperceptible —
+// the main action button would have no visible hover feedback. Lighten instead.
+// (danger's red darkens visibly, so the generic solid path is fine for it.)
+.btn-primary {
+  --bs-btn-hover-bg: #{color.scale($primary, $lightness: 20%)};
+  --bs-btn-hover-border-color: #{color.scale($primary, $lightness: 20%)};
+  --bs-btn-active-bg: #{color.scale($primary, $lightness: 12%)};
+  --bs-btn-active-border-color: #{color.scale($primary, $lightness: 12%)};
+}
+
+// Tertiary "ghost" button: a `link`-variant button restyled to read as a quiet
+// action, not a hyperlink — body colour, no underline, faint hover surface.
+.btn-link {
+  --bs-btn-color: var(--bs-body-color);
+  --bs-btn-hover-color: var(--bs-body-color);
+  --bs-btn-active-color: var(--bs-body-color);
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--bs-light);
+  }
+}
+
+// ----------------------------------------------------------------------------
+// Chart palette (data-viz)
+// ----------------------------------------------------------------------------
+// Dedicated categorical palette for the DX*Chart components — deliberately NOT
+// the semantic UI colours (#141). Two reasons: the base $theme-colors carry
+// dark "emphasis" shades (AA text/link colours, too muted for data series), and
+// status colours (success/danger) shouldn't impersonate "series 2" — a green or
+// red series should mean something.
+//
+// Eight vivid mid-lightness hues in a FIXED order. The order is load-bearing:
+// it was derived by exhaustively permuting the hues (slot 1 pinned to the brand
+// info-blue) to maximise the minimum adjacent-pair colour-vision-deficiency
+// separation — validated at min adjacent ΔE 13.8 (OKLab ×100, protan/deutan
+// simulated), min normal-vision ΔE 20.3, every hue ≥ 3:1 contrast on white.
+// Reordering or swapping a hue needs that validation re-run, not an eyeball.
+//
+// Published as --dx-chart-1..8 so consumers can retheme charts by overriding
+// the variables; chartTheme.ts reads them at runtime (with these hexes as
+// fallbacks for SSR / missing-CSS cases — keep the two lists in sync).
+$dx-chart-palette: (#2563eb, #65a30d, #7c3aed, #0d9488, #ea580c, #0891b2, #d97706, #db2777);
+
+:root {
+  @for $i from 1 through list.length($dx-chart-palette) {
+    --dx-chart-#{$i}: #{list.nth($dx-chart-palette, $i)};
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Autocomplete
 // ----------------------------------------------------------------------------

package/resources/js/components/charts/DXBarChart.vue

@@ -1,7 +1,7 @@
 <!--
   @component
   A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the
-  Bootstrap palette applied and dashboard-friendly defaults (no x gridlines,
+  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,
   formatted value ticks, responsive, legend hidden for a single series). Pass
   `labels` + `datasets`; `options` deep-merges over the defaults.
 

package/resources/js/components/charts/DXDoughnutChart.vue

@@ -1,7 +1,7 @@
 <!--
   @component
   A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one
-  Bootstrap palette colour per slice and dashboard-friendly defaults. Pass
+  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass
   `labels` + either `data` (a number array) or full `datasets`; `options`
   deep-merges over the defaults.
 

package/resources/js/components/charts/DXLineChart.vue

@@ -1,7 +1,7 @@
 <!--
   @component
   A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the
-  Bootstrap palette applied (themed stroke + translucent fill, smoothed line)
+  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)
   and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`
   deep-merges over the defaults.
 

package/resources/js/components/charts/chartTheme.ts

@@ -1,6 +1,6 @@
 /**
- * Shared theming for the DX*Chart wrappers: a categorical palette pulled from
- * the live Bootstrap theme, dashboard-friendly default options (no gridlines /
+ * Shared theming for the DX*Chart wrappers: the dedicated categorical chart
+ * palette (--dx-chart-* from the live theme), dashboard-friendly default options (no gridlines /
  * legend clutter, responsive, formatted ticks), and a one-time Chart.js
  * registration. chart.js / vue-chartjs are OPTIONAL peer deps.
  */
@@ -40,20 +40,23 @@ export function registerCharts(): void {
     registered = true;
 }
 
-// Bootstrap CSS variables to read, in a sensible categorical order. Fallbacks
-// mirror Bootstrap 5 defaults so charts still render without the theme (SSR /
-// tests / a consumer who didn't import the CSS).
-const PALETTE_VARS: Array<[string, string]> = [
-    ["--bs-primary", "#0d6efd"],
-    ["--bs-success", "#198754"],
-    ["--bs-info", "#0dcaf0"],
-    ["--bs-warning", "#ffc107"],
-    ["--bs-danger", "#dc3545"],
-    ["--bs-purple", "#6f42c1"],
-    ["--bs-teal", "#20c997"],
-    ["--bs-orange", "#fd7e14"],
-    ["--bs-pink", "#d63384"],
-    ["--bs-secondary", "#6c757d"],
+// The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight
+// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.
+// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours
+// are dark AA "emphasis" shades (too muted for series), and status colours
+// shouldn't impersonate "series 2". Fallbacks mirror the shipped theme so
+// charts still render without the CSS (SSR / tests / a consumer who didn't
+// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test
+// that parses the Sass source (charts.test.ts), which is why this is exported.
+export const PALETTE_VARS: Array<[string, string]> = [
+    ["--dx-chart-1", "#2563eb"], // blue
+    ["--dx-chart-2", "#65a30d"], // lime
+    ["--dx-chart-3", "#7c3aed"], // violet
+    ["--dx-chart-4", "#0d9488"], // teal
+    ["--dx-chart-5", "#ea580c"], // orange
+    ["--dx-chart-6", "#0891b2"], // cyan
+    ["--dx-chart-7", "#d97706"], // amber
+    ["--dx-chart-8", "#db2777"], // pink
 ];
 
 /** Resolve the themed categorical palette from the document root. */