@omnitend/dashboard-for-laravel 0.30.0 → 0.32.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-20T07:09:59.465Z",
+  "generated": "2026-07-20T09:56:11.731Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.30.0"
+    "version": "0.32.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:56:11.791Z
 
 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.32.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/components/extended/DXTablePagination.vue

@@ -19,16 +19,40 @@
 <template>
     <div class="dx-table-pagination mt-3">
         <!-- Top row: Pagination and Per-page selector -->
-        <div class="d-flex justify-content-between align-items-center mb-2">
-            <!-- Pagination controls (only when multiple pages) -->
-            <DPagination
+        <div class="dx-pager-row d-flex justify-content-between align-items-center gap-2 mb-2">
+            <!-- Windowed pager (#155): «Previous / leading / … / window / … /
+                 trailing / Next». Client-computed from current + last page, so it
+                 works in every DXTable mode. Only shown when >1 page. -->
+            <nav
                 v-if="showPagination && pagination.total > pagination.per_page"
-                :model-value="pagination.current_page"
-                :total-rows="pagination.total"
-                :per-page="pagination.per_page"
-                size="sm"
-                @update:model-value="emit('page-change', $event as number)"
-            />
+                class="dx-pager d-flex flex-wrap align-items-center gap-1"
+                aria-label="Pagination"
+            >
+                <DButton
+                    variant="outline-secondary"
+                    size="sm"
+                    :disabled="!canPrev"
+                    @click="goToPage(currentPage - 1)"
+                >&laquo; Previous</DButton>
+
+                <template v-for="(item, index) in pageItems" :key="item.type === 'page' ? `p${item.page}` : `e${index}`">
+                    <DButton
+                        v-if="item.type === 'page'"
+                        size="sm"
+                        :variant="item.active ? 'primary' : 'outline-secondary'"
+                        :aria-current="item.active ? 'page' : undefined"
+                        @click="goToPage(item.page)"
+                    >{{ item.page }}</DButton>
+                    <span v-else class="dx-pager-ellipsis" aria-hidden="true">&hellip;</span>
+                </template>
+
+                <DButton
+                    variant="outline-secondary"
+                    size="sm"
+                    :disabled="!canNext"
+                    @click="goToPage(currentPage + 1)"
+                >Next &raquo;</DButton>
+            </nav>
             <div v-else></div>
 
             <!-- Per-page selector -->
@@ -67,7 +91,8 @@
 </template>
 
 <script setup lang="ts">
-import DPagination from "../base/DPagination.vue";
+import { computed } from "vue";
+import DButton from "../base/DButton.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import type { PaginationData } from "./DXTable.vue";
 
@@ -92,7 +117,7 @@ interface Props {
     hasActiveFilters: boolean;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
     /** The user picked a page. Payload is the new 1-based page number. */
@@ -104,26 +129,95 @@ const emit = defineEmits<{
      */
     'per-page-change': [value: number | string | null | (number | string)[]];
 }>();
+
+// Windowed pager (#155). Always show the first/last BOUNDARY pages and a window
+// of AROUND pages each side of the current page; fill gaps with an ellipsis,
+// except a single-page gap which shows the page itself (an ellipsis hiding one
+// page is silly). Client-computed from current + last page so it works in every
+// DXTable mode (provider / client-side / inertia) — not just where a server
+// `links` array exists. Reproduces custard's `1 2 … 8 9 10 [11] 12 13 14 … 44 45`.
+const BOUNDARY = 2;
+const AROUND = 3;
+
+type PageItem = { type: "page"; page: number; active: boolean } | { type: "ellipsis" };
+
+const currentPage = computed(() => props.pagination.current_page);
+const lastPage = computed(() =>
+  Math.max(1, Math.ceil(props.pagination.total / props.pagination.per_page)),
+);
+
+const pageItems = computed<PageItem[]>(() => {
+  const last = lastPage.value;
+  const current = currentPage.value;
+
+  const shown = new Set<number>();
+  // Leading + trailing boundary pages (1,2 … last-1,last).
+  for (let page = 1; page <= Math.min(BOUNDARY, last); page += 1) shown.add(page);
+  for (let page = Math.max(1, last - BOUNDARY + 1); page <= last; page += 1) shown.add(page);
+  // A window around the current page. When it clamps at an edge, push the other
+  // edge out by the shortfall so the row stays a full width near the start/end
+  // (a fuller run of numbers, like the house pager) instead of going sparse.
+  let windowLow = current - AROUND;
+  let windowHigh = current + AROUND;
+  const shortfall = 2 * AROUND + 1 - (Math.min(last, windowHigh) - Math.max(1, windowLow) + 1);
+  if (shortfall > 0 && windowLow < 1) windowHigh += shortfall;
+  else if (shortfall > 0 && windowHigh > last) windowLow -= shortfall;
+  for (let page = Math.max(1, windowLow); page <= Math.min(last, windowHigh); page += 1) {
+    shown.add(page);
+  }
+
+  const sorted = [...shown].sort((a, b) => a - b);
+  const items: PageItem[] = [];
+  let previous = 0;
+  for (const page of sorted) {
+    if (page - previous === 2) {
+      // Exactly one page missing — show it rather than an ellipsis.
+      items.push({ type: "page", page: previous + 1, active: previous + 1 === current });
+    } else if (page - previous > 2) {
+      items.push({ type: "ellipsis" });
+    }
+    items.push({ type: "page", page, active: page === current });
+    previous = page;
+  }
+  return items;
+});
+
+const canPrev = computed(() => currentPage.value > 1);
+const canNext = computed(() => currentPage.value < lastPage.value);
+
+const goToPage = (page: number) => {
+  if (page < 1 || page > lastPage.value || page === currentPage.value) return;
+  emit("page-change", page);
+};
 </script>
 
 <style scoped>
-/* Pagination button sizing to match form controls. Anchored on this component's
-   own `.dx-table-pagination` root so the scope-id has a plain-element host — a
-   `:deep()` rule that targeted the pager from DXTable would not reach it once
-   the pager lives here (the scope-id doesn't cross the component boundary). */
-.dx-table-pagination :deep(.pagination) {
-    margin-bottom: 0;
+/* Windowed pager (#155). The buttons are DButtons; give the numbered ones a
+   consistent min-width so they read as an even row of keys (like the house
+   custard pager), and let the whole row wrap on narrow widths rather than
+   overflow. `:deep(.btn)` is anchored on the plain `.dx-pager` host, so the
+   scope-id has a deterministic element to attach to. */
+.dx-pager :deep(.btn) {
+    min-width: 2.5rem;
+}
+
+/* Previous / Next carry text, so they shouldn't be forced square. */
+.dx-pager :deep(.btn):first-child,
+.dx-pager :deep(.btn):last-child {
+    min-width: auto;
 }
 
-.dx-table-pagination :deep(.pagination-sm .page-link) {
-    min-width: 2.25rem;
-    height: auto;
+.dx-pager-ellipsis {
+    display: inline-flex;
+    align-items: flex-end;
+    padding: 0 0.15rem;
+    color: var(--bs-secondary-color);
+    user-select: none;
 }
 
-/* Make disabled pagination buttons more subtle */
-.dx-table-pagination :deep(.pagination .page-item.disabled .page-link) {
-    background-color: transparent;
-    border-color: transparent;
-    opacity: 0.3;
+/* On narrow screens the row can get long; allow it to scroll horizontally as a
+   fallback so it never blows out the table width. */
+.dx-pager-row {
+    flex-wrap: wrap;
 }
 </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;