@omnitend/dashboard-for-laravel 0.30.0 → 0.31.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-20T07:09:59.465Z",
+  "generated": "2026-07-20T09:28:21.390Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.30.0"
+    "version": "0.31.0"
   },
   "components": {
     "base": [
@@ -2636,7 +2636,7 @@
         "name": "DXSwitch",
         "category": "extended",
         "filePath": "resources/js/components/extended/DXSwitch.vue",
-        "description": "DXSwitch — a \"filled box\" toggle switch. An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized like a `.form-control` with the label on the left and the toggle on the right, colour-coding its state (a neutral box when off, a filled primary box when on). Used standalone or, internally, by `DXField`'s `switch` field type so a form switch and a lone switch share one look. Usage: ```vue <DXSwitch v-model=\"isCurrent\" label=\"Product is current\" /> ``` For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for `DXSwitch` directly when you want the styled toggle outside a form. Pass a `label` prop for simple text, or the default slot for richer label content.",
+        "description": "DXSwitch — a \"filled box\" toggle switch. An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized like a `.form-control` with the label on the left and the toggle on the right, colour-coding its state. By default (`onVariant=\"success\"`) it reads the house green-on / red-off style — a neutral box + red toggle when off, a soft-green box + green toggle when on. `onVariant=\"neutral\"` (brand primary on / grey off) is for semantically-mixed switches that shouldn't imply good/bad (#158). Used standalone or, internally, by `DXField`'s `switch` field type so a form switch and a lone switch share one look. Usage: ```vue <DXSwitch v-model=\"isCurrent\" label=\"Product is current\" /> ``` For a form field, prefer a `DXField`/`DXForm` `type: 'switch'`; reach for `DXSwitch` directly when you want the styled toggle outside a form. Pass a `label` prop for simple text, or the default slot for richer label content.",
         "props": [
           {
             "name": "modelValue",
@@ -2662,6 +2662,13 @@
             "type": "string",
             "required": false,
             "description": "Text shown when off — overrides `label` in the off state (e.g. \"Product is not current\")."
+          },
+          {
+            "name": "onVariant",
+            "type": "union",
+            "required": false,
+            "default": "\"success\"",
+            "description": "On-state colour. `\"success\"` (default) reads the house green-on / red-off\nstyle — an active/enabled/good switch (\"Product is current\", \"Stock is\ntracked\", \"Visible\"). `\"neutral\"` is for semantically-mixed switches\n(\"contains alcohol\", an allergen toggle, \"hidden on web shop\") that\nshouldn't imply good/bad — it uses the brand primary on / grey off (#158)."
           }
         ],
         "events": [

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-20T07:09:59.531Z
+> Last updated: 2026-07-20T09:28:21.457Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/css/theme.scss

@@ -16,9 +16,9 @@
 
 // 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
+// use, so every one must clear AA on white. The one bold solid FILL (the primary
+// button) and SOFT tints (soft buttons incl. danger, 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)
@@ -168,16 +168,22 @@ $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
+// its SOLID fill + same-hue text (the primary button, 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.
+//
+// Only PRIMARY is a bold solid button — one loud action (the brand). Everything
+// else, INCLUDING danger, is soft: a soft red "Delete" reads as danger without
+// a heavy fill, and one solid button per screen keeps the hierarchy clear. (Was
+// primary+danger solid; danger's soft was also an off-hue plum — it is now a
+// same-hue light red, matching the danger emphasis and the switch OFF.)
 $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"),
+  "danger": (solid-bg: #dc2626, solid-text: #ffffff, soft-bg: #f8d4d4, soft-text: #7a1a1a, emphasis: #dc2626, button: "soft"),
   "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"),
 );
@@ -456,10 +462,10 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 // ----------------------------------------------------------------------------
 // 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
+//   - Buttons: only PRIMARY is 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).
+//     active). secondary/success/danger/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.
@@ -516,8 +522,15 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     --bs-btn-active-border-color: #{$emphasis};
   }
 
-  // Badge — soft tint. `!important` beats Bootstrap's `.text-bg-*` helper.
-  .badge.text-bg-#{$name} {
+  // `.text-bg-*` — soft tint, everywhere (not just `.badge`). Soft-first is the
+  // default across the board: a `.badge`, an `.input-group-text`, a chip or a
+  // small status bar built with `.text-bg-success` all get the same soft green
+  // as the badge, so a stock indicator can match a "current" badge without
+  // hardcoding the hue. `!important` beats Bootstrap's `.text-bg-*` helper
+  // (which sets its colours `!important` by design). `.toast` is excluded: it
+  // has its own soft handling (a fainter 50%-white mix via `--bs-toast-bg` for
+  // its large surface) and themed toasts don't carry `.text-bg-*` anyway.
+  .text-bg-#{$name}:not(.toast) {
     background-color: #{$soft-bg} !important;
     color: #{$soft-text} !important;
   }
@@ -534,9 +547,23 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   // colour IS its emphasis shade, so Bootstrap already renders them legible.
 }
 
+// Publish each variant's soft/emphasis shades as CSS variables so components
+// (e.g. DXSwitch's on-box) and consumers can reference the exact soft-first
+// tints on any element — Bootstrap's own `--bs-*-bg-subtle` are a different,
+// greyer family derived from the dark emphasis base, so they don't match the
+// soft badge/alert green. These are the same values the $dx-variants loop paints.
+:root {
+  @each $name, $v in $dx-variants {
+    --dx-#{$name}-soft-bg: #{map.get($v, "soft-bg")};
+    --dx-#{$name}-soft-text: #{map.get($v, "soft-text")};
+    --dx-#{$name}-solid-bg: #{map.get($v, "solid-bg")};
+    --dx-#{$name}-emphasis: #{map.get($v, "emphasis")};
+  }
+}
+
 // 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.)
+// the main (and now only) solid button would have no visible hover feedback.
+// Lighten instead. (Other variants are soft; their hover is handled in the loop.)
 .btn-primary {
   --bs-btn-hover-bg: #{color.scale($primary, $lightness: 20%)};
   --bs-btn-hover-border-color: #{color.scale($primary, $lightness: 20%)};
@@ -557,6 +584,93 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   }
 }
 
+// ----------------------------------------------------------------------------
+// Switches — green when ON, red when OFF, by default (#158)
+// ----------------------------------------------------------------------------
+// House style (James): an active switch — "Product is current", "Stock is
+// tracked", "Visible" — should read success GREEN when on and RED when off,
+// OUT OF THE BOX, not only when a consumer opts in. Bootstrap's default is a
+// primary (navy) track when on / grey when off. We flip the default here.
+//
+// Semantically-MIXED switches ("contains alcohol", an allergen toggle, "hidden
+// on web shop") shouldn't imply good/bad — those opt OUT with `.switch-neutral`
+// on the `.form-switch`, which restores Bootstrap's grey-off / primary-on.
+//
+// Applies to any bare `.form-switch` (DFormCheckbox `switch`); DXSwitch is the
+// "filled box" form where the whole control (not the toggle) carries the colour
+// and the pill stays a neutral affordance — it reads the same tokens below.
+$dx-switch-on: map.get(map.get($dx-variants, "success"), "solid-bg"); // vivid lime
+$dx-switch-off: map.get(map.get($dx-variants, "danger"), "solid-bg"); // vivid red
+$dx-switch-thumb-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+// A red thumb reads better than white on the light-red OFF track.
+$dx-switch-thumb-red: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dc2626'/%3e%3c/svg%3e");
+
+// Switch fill tokens. The ON fill is the SAME soft green as the success
+// badge/button (its `soft-bg`), so a switch and a success badge read as one
+// green — not a separate, punchier lime. OFF is a LIGHT red (a light tint of the
+// danger solid, NOT the plum `danger` soft — a switch off wants to read "red /
+// stop", which the plum status tint doesn't). Derived from the base tokens so
+// one edit moves them. Used by the DXSwitch filled box; the OFF track reuses them.
+$dx-switch-on-soft: map.get(map.get($dx-variants, "success"), "soft-bg"); // #cdf9b2
+:root {
+  --dx-switch-on-bg: #{$dx-switch-on-soft};
+  --dx-switch-on-well: #{color.mix($dx-switch-on-soft, #fff, 55%)};
+  --dx-switch-on-line: #{color.mix($dx-switch-on-soft, $dx-switch-on, 55%)};
+  --dx-switch-on-ink: #{map.get(map.get($dx-variants, "success"), "soft-text")};
+  --dx-switch-off-bg: #{color.mix($dx-switch-off, #fff, 20%)};
+  --dx-switch-off-well: #{color.mix($dx-switch-off, #fff, 10%)};
+  --dx-switch-off-line: #{color.mix($dx-switch-off, #fff, 45%)};
+  --dx-switch-off-ink: #{color.mix($dx-switch-off, #000, 30%)};
+  --dx-switch-pill: var(--bs-gray-400, #ced4da); // neutral pill in both states
+}
+
+.form-switch .form-check-input {
+  // OFF: light-red track, red thumb (left).
+  background-color: var(--dx-switch-off-bg);
+  border-color: var(--dx-switch-off-line);
+  --bs-form-switch-bg: #{$dx-switch-thumb-red};
+
+  &:checked {
+    // ON: vivid green track, white thumb (right — Bootstrap positions it).
+    background-color: #{$dx-switch-on};
+    border-color: #{$dx-switch-on};
+    --bs-form-switch-bg: #{$dx-switch-thumb-white};
+  }
+
+  // Neutral grey focus ring (the track carries the state colour, so the brand
+  // navy ring would clash); keep the state thumb rather than Bootstrap's navy.
+  &:focus {
+    --bs-form-switch-bg: #{$dx-switch-thumb-red};
+    border-color: var(--dx-switch-off-line);
+    box-shadow: 0 0 0 0.25rem rgba($dark, 0.15);
+  }
+
+  &:checked:focus {
+    border-color: #{$dx-switch-on};
+    --bs-form-switch-bg: #{$dx-switch-thumb-white};
+  }
+}
+
+// Neutral opt-out for mixed-semantics switches: restore Bootstrap's grey-off /
+// primary-on (no good/bad valence).
+.form-switch.switch-neutral .form-check-input {
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+  // Bootstrap's default faint-grey OFF thumb.
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+
+  &:checked {
+    background-color: var(--bs-primary);
+    border-color: var(--bs-primary);
+    --bs-form-switch-bg: #{$dx-switch-thumb-white};
+  }
+
+  &:focus {
+    border-color: var(--bs-primary);
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+  }
+}
+
 // ----------------------------------------------------------------------------
 // Chart palette (data-viz)
 // ----------------------------------------------------------------------------

package/resources/js/components/extended/DXField.vue

@@ -159,6 +159,7 @@
         <DXSwitch
             v-else
             v-model="switchModel"
+            :on-variant="field.switchVariant"
             :disabled="isDisabled || isReadonly || isPlaintext"
             v-bind="controlPropsWithGuards"
         >
@@ -201,6 +202,7 @@
         <DXSwitch
             v-else
             v-model="switchModel"
+            :on-variant="field.switchVariant"
             :disabled="isDisabled || isReadonly || isPlaintext"
             v-bind="controlPropsWithGuards"
         >

package/resources/js/components/extended/DXSwitch.vue

@@ -4,9 +4,12 @@
 
   An opinionated switch built on `DFormCheckbox` (`switch`): a bordered box sized
   like a `.form-control` with the label on the left and the toggle on the right,
-  colour-coding its state (a neutral box when off, a filled primary box when on).
-  Used standalone or, internally, by `DXField`'s `switch` field type so a form
-  switch and a lone switch share one look.
+  colour-coding its state. By default (`onVariant="success"`) it reads the house
+  green-on / red-off style — a neutral box + red toggle when off, a soft-green
+  box + green toggle when on. `onVariant="neutral"` (brand primary on / grey off)
+  is for semantically-mixed switches that shouldn't imply good/bad (#158). Used
+  standalone or, internally, by `DXField`'s `switch` field type so a form switch
+  and a lone switch share one look.
 
   Usage:
   ```vue
@@ -18,8 +21,16 @@
   `label` prop for simple text, or the default slot for richer label content.
 -->
 <template>
-  <div class="dx-switch" :class="{ 'dx-switch--on': isOn }">
-    <DFormCheckbox v-model="model" switch v-bind="$attrs">
+  <div class="dx-switch" :class="[`dx-switch--${onVariant}`, { 'dx-switch--on': isOn }]">
+    <!-- For the neutral variant, tag the inner `.form-switch` with
+         `switch-neutral` so the global theme restores grey-off / primary-on for
+         the toggle itself (the box styling below handles the wrapper). -->
+    <DFormCheckbox
+      v-model="model"
+      switch
+      :class="onVariant === 'neutral' ? 'switch-neutral' : undefined"
+      v-bind="$attrs"
+    >
       <!--
         @slot Label content shown beside the toggle. Falls back to the contextual
         text / `label` prop. Scoped with the current on-state so a caller can vary
@@ -44,10 +55,19 @@ interface Props {
   textWhenTrue?: string;
   /** Text shown when off — overrides `label` in the off state (e.g. "Product is not current"). */
   textWhenFalse?: string;
+  /**
+   * On-state colour. `"success"` (default) reads the house green-on / red-off
+   * style — an active/enabled/good switch ("Product is current", "Stock is
+   * tracked", "Visible"). `"neutral"` is for semantically-mixed switches
+   * ("contains alcohol", an allergen toggle, "hidden on web shop") that
+   * shouldn't imply good/bad — it uses the brand primary on / grey off (#158).
+   */
+  onVariant?: "success" | "neutral";
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
+  onVariant: "success",
 });
 
 const emit = defineEmits<{
@@ -128,26 +148,55 @@ defineOptions({
   cursor: pointer;
 }
 
-/* On-state: filled primary. Green is reserved for success semantics, so a
-   generic "on" toggle uses the brand action colour, matching the base switch,
-   checkboxes and radios. */
-.dx-switch--on :deep(.form-check) {
-  background-color: var(--bs-primary-bg-subtle);
-  border-color: var(--bs-primary);
+/* Filled box (#158): the WHOLE control carries the colour and the pill stays a
+   neutral grey affordance — the box IS the state, so it reads strongest at a
+   glance (the house style). `success` (default) is green ON / light-red OFF;
+   `neutral` keeps a brand primary panel for mixed-semantics switches. Pair with
+   `textWhenTrue`/`textWhenFalse` so the LABEL also names each state. */
+.dx-switch--success :deep(.form-check) {
+  background-color: var(--dx-switch-off-bg);
+  border-color: var(--dx-switch-off-line);
 }
 
-.dx-switch--on :deep(.form-check-label) {
-  color: var(--bs-primary-text-emphasis);
+.dx-switch--success :deep(.form-check-label) {
+  color: var(--dx-switch-off-ink);
+}
+
+.dx-switch--success.dx-switch--on :deep(.form-check) {
+  background-color: var(--dx-switch-on-bg);
+  border-color: var(--dx-switch-on-line);
+}
+
+.dx-switch--success.dx-switch--on :deep(.form-check-label) {
+  color: var(--dx-switch-on-ink);
   font-weight: 500;
 }
 
-.dx-switch--on :deep(.form-check-input:checked) {
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
+/* Neutral grey pill in BOTH states (white thumb, sliding) — overrides the global
+   green-on/red-off toggle colours within the box, so only the box carries the
+   state. Explicit `:checked`/`:focus` selectors so they out-specify the global
+   `.form-switch .form-check-input:checked` rule. */
+.dx-switch--success :deep(.form-check-input),
+.dx-switch--success :deep(.form-check-input:checked),
+.dx-switch--success :deep(.form-check-input:focus) {
+  background-color: var(--dx-switch-pill);
+  border-color: var(--dx-switch-pill);
+  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
 }
 
-.dx-switch--on :deep(.form-check-input:focus) {
+.dx-switch--success :deep(.form-check-input:focus) {
+  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
+}
+
+/* neutral variant (mixed-semantics): brand primary panel when on; the toggle is
+   handled by `.switch-neutral` on the inner form-switch (primary-on / grey-off). */
+.dx-switch--neutral.dx-switch--on :deep(.form-check) {
+  background-color: var(--bs-primary-bg-subtle);
   border-color: var(--bs-primary);
-  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
+.dx-switch--neutral.dx-switch--on :deep(.form-check-label) {
+  color: var(--bs-primary-text-emphasis);
+  font-weight: 500;
 }
 </style>

package/resources/js/types/index.ts

@@ -196,6 +196,15 @@ export interface FieldDefinition {
      */
     textWhenFalse?: MaybeFn<string>;
 
+    /**
+     * For `switch` fields: the on-state colour. `"success"` (default) is the
+     * house green-on / red-off style for an active/enabled/good switch;
+     * `"neutral"` (brand primary on / grey off) is for semantically-mixed
+     * switches that shouldn't imply good/bad ("contains alcohol", an allergen
+     * toggle, "hidden on web shop"). See DXSwitch `onVariant` (#158).
+     */
+    switchVariant?: "success" | "neutral";
+
     /** CSS class for the form group */
     class?: string;