@omnitend/dashboard-for-laravel 0.29.0 → 0.31.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-19T09:16:53.630Z",
+  "generated": "2026-07-20T09:28:21.390Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.28.0"
+    "version": "0.31.0"
   },
   "components": {
     "base": [
@@ -102,8 +102,27 @@
         "name": "DAutocomplete",
         "category": "base",
         "filePath": "resources/js/components/base/DAutocomplete.vue",
-        "description": "Type-safe wrapper around Bootstrap Vue Next BAutocomplete component. Text input with a filtered dropdown of suggestions (typeahead/combobox). Pass `options` and bind `v-model`; supports `multiple` and a custom `filterFunction`.",
-        "props": [],
+        "description": "Type-safe wrapper around Bootstrap Vue Next BAutocomplete component. Text input with a filtered dropdown of suggestions (typeahead/combobox). Pass `options` and bind `v-model`; supports `multiple` and a custom `filterFunction`. `null-option` adds an opt-in, pinned \"no selection\" row (see below) so a searchable single-select can always reach \"none\" in-list (#138).",
+        "props": [
+          {
+            "name": "options",
+            "type": "AutocompleteOptions",
+            "required": false,
+            "description": "Options passed straight through to BAutocomplete (see its `options` prop)."
+          },
+          {
+            "name": "filterFunction",
+            "type": "FilterFunction",
+            "required": false,
+            "description": "A custom filter. Composed with `null-option` rather than replaced: when a\nnull option is present it stays pinned and this runs on the rest."
+          },
+          {
+            "name": "nullOption",
+            "type": "union",
+            "required": false,
+            "description": "Prepend a pinned, never-filtered, selectable \"no selection\" row whose value\nis `null` (#138). `true` → default label \"None\"; a string → that label.\nSelecting it sets the model to `null` (bvn reads that as no selection, so\nthe ✕ hides and the placeholder shows). Off by default — unchanged\nbehaviour. DXTable does NOT use this; it builds its own \"All\" option."
+          }
+        ],
         "events": [],
         "slots": [
           {
@@ -2114,7 +2133,14 @@
             "type": "boolean",
             "required": false,
             "default": "false",
-            "description": "Wrap the form in a card for a visual boundary (mirrors DXTable's\n`card` prop). Tabbed forms render the tab nav as a BS5\ncard-header-tabs instead of double-wrapping. Off by default since\nDXForm is commonly embedded in a page card or modal already."
+            "description": "Wrap the form in a card for a visual boundary (mirrors DXTable's\n`card` prop). Off by default since DXForm is commonly embedded in a\npage card or modal already. Tabbed forms are wrapped by default\nregardless — see `cardTabs`; setting `card` also forces the tabbed\ncard on even when `cardTabs` is disabled."
+          },
+          {
+            "name": "cardTabs",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Wrap a TABBED form's content in a card panel so the active tab reads\nas a finished panel connected to the tab strip (the standard\nBootstrap card-with-tabs pattern) rather than floating on the bare\npage background (#159). On by default. Set `false` for bare tabs\n(e.g. inside a modal that already provides a boundary). Ignored for\nflat (non-tabbed) forms — use `card` for those."
           },
           {
             "name": "layout",
@@ -2610,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",
@@ -2636,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": [
@@ -2779,6 +2812,13 @@
             "default": "true",
             "description": "Show per-page selector"
           },
+          {
+            "name": "showCount",
+            "type": "boolean",
+            "required": false,
+            "default": "true",
+            "description": "Show the footer's item-count caption (\"N items.\" / \"X to Y out of Z\nitems.\"). Defaults to `true`. Set `false` to suppress just the caption,\nindependent of the pager — a page ported from a plain `<b-table>` that\nhides the pager with `:show-pagination=\"false\"` would otherwise gain a\ncaption it never had (#127)."
+          },
           {
             "name": "perPageOptions",
             "type": "Array",
@@ -2797,7 +2837,7 @@
             "name": "perPage",
             "type": "number",
             "required": false,
-            "description": "Items per page (for provider mode, v-model support)"
+            "description": "Items per page. With a `v-model:per-page` it is controlled state; a bare\n`:per-page=\"20\"` is the INITIAL page size (see the initial-value vs\ncontrolled note above). When passed explicitly it takes PRECEDENCE over any\nper-page preference persisted in localStorage — `:per-page=\"20\"` always\nstarts at 20, never a size the user once picked on another table (#124).\nOmit it to let a stored preference (URL-keyed tables only) or the default\napply."
           },
           {
             "name": "striped",
@@ -2953,6 +2993,13 @@
             "type": "boolean",
             "required": false,
             "description": "Enable client-side filtering, sorting, and pagination on items array"
+          },
+          {
+            "name": "fixedLayout",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Apply `table-layout: fixed` to the underlying table. Off by default, so\nexisting tables keep their content-sized columns. When on, column widths\nstop depending on cell content, so they no longer reshuffle when a filter\nnarrows the rows — the table stays put as you filter (#156). Combine with\nper-field `width`/`minWidth` to control the proportions; columns with no\ndeclared width share the remaining space equally."
           }
         ],
         "events": [
@@ -3392,6 +3439,12 @@
             "required": true,
             "description": "Whether to render the per-page selector."
           },
+          {
+            "name": "showCount",
+            "type": "boolean",
+            "required": true,
+            "description": "Whether to render the item-count caption (the \"X out of Z items\" line)."
+          },
           {
             "name": "singularItemName",
             "type": "string",

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-19T09:16:53.689Z
+> 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.29.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/base/DAutocomplete.vue

@@ -4,10 +4,38 @@
  * Text input with a filtered dropdown of suggestions (typeahead/combobox).
  * Pass `options` and bind `v-model`; supports `multiple` and a custom
  * `filterFunction`.
+ *
+ * `null-option` adds an opt-in, pinned "no selection" row (see below) so a
+ * searchable single-select can always reach "none" in-list (#138).
  */
 <script setup lang="ts">
 import { computed, useAttrs } from "vue";
 import { BAutocomplete } from "bootstrap-vue-next";
+import type { SelectOption } from "bootstrap-vue-next";
+
+// bvn's own `options` prop type — kept identical so this stays a pass-through.
+type AutocompleteOptions = readonly (object | string | number | boolean)[];
+type FilterFunction = (options: SelectOption[], search: string) => SelectOption[];
+
+interface Props {
+  /** Options passed straight through to BAutocomplete (see its `options` prop). */
+  options?: AutocompleteOptions;
+  /**
+   * A custom filter. Composed with `null-option` rather than replaced: when a
+   * null option is present it stays pinned and this runs on the rest.
+   */
+  filterFunction?: FilterFunction;
+  /**
+   * Prepend a pinned, never-filtered, selectable "no selection" row whose value
+   * is `null` (#138). `true` → default label "None"; a string → that label.
+   * Selecting it sets the model to `null` (bvn reads that as no selection, so
+   * the ✕ hides and the placeholder shows). Off by default — unchanged
+   * behaviour. DXTable does NOT use this; it builds its own "All" option.
+   */
+  nullOption?: boolean | string;
+}
+
+const props = defineProps<Props>();
 
 defineOptions({
   inheritAttrs: false,
@@ -15,6 +43,68 @@ defineOptions({
 
 const attrs = useAttrs();
 
+const attr = (name: string, hyphenated: string) =>
+  (attrs as Record<string, unknown>)[name] ?? (attrs as Record<string, unknown>)[hyphenated];
+
+const DEFAULT_NULL_OPTION_LABEL = "None";
+
+/*
+ * The null option is a raw option that bvn will normalise through the SAME
+ * `value-field`/`text-field` the consumer configured (default `value`/`text`).
+ * Build it with those effective field names so it normalises to
+ * `{ value: null, text: label }` — otherwise a consumer using e.g.
+ * `value-field="id" text-field="label"` would normalise our `{ value, text }`
+ * to `{ value: undefined, text: undefined }`, and the row would be filtered out
+ * and select as `undefined` instead of `null` (#138 review).
+ */
+const nullOption = computed<Record<string, unknown> | null>(() => {
+  const raw = props.nullOption;
+  if (raw === false || raw === undefined) return null;
+  const text = typeof raw === "string" ? raw : DEFAULT_NULL_OPTION_LABEL;
+  const valueField = (attr("valueField", "value-field") as string | undefined) ?? "value";
+  const textField = (attr("textField", "text-field") as string | undefined) ?? "text";
+  return { [valueField]: null, [textField]: text };
+});
+
+const consumerOptions = computed<AutocompleteOptions>(() =>
+  Array.isArray(props.options) ? props.options : [],
+);
+
+const computedOptions = computed<AutocompleteOptions>(() => {
+  const pinned = nullOption.value;
+  if (!pinned) return props.options ?? [];
+  return [pinned, ...consumerOptions.value];
+});
+
+const isNullOption = (option: SelectOption) => option?.value === null;
+
+/*
+ * When a null option is present it must stay pinned (top of the list, immune to
+ * the search term); the consumer's `filterFunction` — or bvn's default
+ * substring-on-text match — applies only to the rest, so the two compose rather
+ * than clobber. With no null option we forward the consumer's filter unchanged
+ * (possibly undefined, letting bvn use its own default).
+ */
+const effectiveFilterFunction = computed<FilterFunction | undefined>(() => {
+  const pinned = nullOption.value;
+  const consumerFilter = props.filterFunction;
+  if (!pinned) return consumerFilter;
+
+  return (options, search) => {
+    const rest = options.filter((option) => !isNullOption(option));
+    const filteredRest = consumerFilter
+      ? consumerFilter(rest, search)
+      : search
+        ? rest.filter((option) =>
+            String(option.text ?? "")
+              .toLowerCase()
+              .includes(search.toLowerCase()),
+          )
+        : rest;
+    return [...options.filter(isNullOption), ...filteredRest];
+  };
+});
+
 /*
  * Diverges from bvn: the clear (✕) is hidden when there is nothing to clear.
  *
@@ -28,9 +118,6 @@ const attrs = useAttrs();
  * A consumer's explicit `no-clear-button` still wins; this only ever hides the
  * button, never forces it on.
  */
-const attr = (name: string, hyphenated: string) =>
-  (attrs as Record<string, unknown>)[name] ?? (attrs as Record<string, unknown>)[hyphenated];
-
 const hasValue = computed(() => {
   const value = attr("modelValue", "model-value");
   if (Array.isArray(value)) return value.length > 0;
@@ -52,7 +139,12 @@ const noClearButton = computed(
     (#53). A plain element root makes it deterministic.
   -->
   <div class="d-autocomplete">
-    <BAutocomplete v-bind="$attrs" :no-clear-button="noClearButton">
+    <BAutocomplete
+      v-bind="$attrs"
+      :options="computedOptions"
+      :filter-function="effectiveFilterFunction"
+      :no-clear-button="noClearButton"
+    >
       <!-- Dynamically pass through all named slots with their props -->
       <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
         <slot :name="name" v-bind="slotProps" />

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/DXForm.vue

@@ -36,8 +36,8 @@
              `.card-body` wrapper — DTabs already provides `.card-header`/
              `.card-body` internally via its own `card` prop, so wrapping
              that in another `.card-body` would double up. -->
-        <component :is="card ? DCard : 'div'" v-if="hasTabs" v-bind="card ? { noBody: true } : {}">
-            <DTabs v-model:index="activeTab" :card="card">
+        <component :is="tabsInCard ? DCard : 'div'" v-if="hasTabs" v-bind="tabsInCard ? { noBody: true } : {}">
+            <DTabs v-model:index="activeTab" :card="tabsInCard">
                 <DTab
                     v-for="(tab, index) in visibleTabs"
                     :key="tab.key"
@@ -213,12 +213,23 @@ interface Props {
 
     /**
      * Wrap the form in a card for a visual boundary (mirrors DXTable's
-     * `card` prop). Tabbed forms render the tab nav as a BS5
-     * card-header-tabs instead of double-wrapping. Off by default since
-     * DXForm is commonly embedded in a page card or modal already.
+     * `card` prop). Off by default since DXForm is commonly embedded in a
+     * page card or modal already. Tabbed forms are wrapped by default
+     * regardless — see `cardTabs`; setting `card` also forces the tabbed
+     * card on even when `cardTabs` is disabled.
      */
     card?: boolean;
 
+    /**
+     * Wrap a TABBED form's content in a card panel so the active tab reads
+     * as a finished panel connected to the tab strip (the standard
+     * Bootstrap card-with-tabs pattern) rather than floating on the bare
+     * page background (#159). On by default. Set `false` for bare tabs
+     * (e.g. inside a modal that already provides a boundary). Ignored for
+     * flat (non-tabbed) forms — use `card` for those.
+     */
+    cardTabs?: boolean;
+
     /**
      * Form-wide field layout: "vertical" (default, label above input) or
      * "horizontal" (label left, input right). Overridable per-field via
@@ -241,6 +252,7 @@ const props = withDefaults(defineProps<Props>(), {
     showSubmit: true,
     autoErrorTab: true,
     card: false,
+    cardTabs: true,
     layout: "vertical",
 });
 
@@ -318,6 +330,14 @@ const hasTabs = computed(
     () => !!props.tabs && props.tabs.length > 0,
 );
 
+// Tabbed forms render inside a card panel by default (#159) so the tab
+// content reads as a finished panel rather than floating on the page.
+// `cardTabs` is the tabbed-only toggle (on by default); `card` (which also
+// wraps flat forms) still forces it on. Flat forms are unaffected.
+const tabsInCard = computed(
+    () => hasTabs.value && (props.card || props.cardTabs),
+);
+
 function visibleFieldsFor(tab: FormTab): FieldDefinition[] {
     return tab.fieldKeys
         .map((key) => fieldByKey.value[key])