@omnitend/dashboard-for-laravel 0.41.0 → 0.41.2

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-08-27T14:46:45.385Z",
+  "generated": "2026-09-30T05:13:05.340Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.41.0"
+    "version": "0.41.2"
   },
   "components": {
     "base": [
@@ -246,6 +246,13 @@
             "required": false,
             "description": "Leading Bootstrap Icons glyph name, rendered as `<i class=\"bi bi-{icon}\">`.\ne.g. `icon=\"save\"`. Hidden while the loading spinner is visible.\n\nDiverges from bvn: `BButton`'s native `icon` is a `boolean` (icon-button\nstyling mode). We redefine it as a glyph-name `string`, so bvn's boolean\nicon mode is unreachable through `DButton`. See DIVERGENCES.md."
           },
+          {
+            "name": "iconOnly",
+            "type": "boolean",
+            "required": false,
+            "default": "false",
+            "description": "Square icon control at the same height as a normal button of this size.\nUse `icon` or an icon in the default slot, and provide `aria-label`.\nTakes precedence over `block`. While loading, the spinner replaces the\nicon/slot without changing dimensions; `loadingText` is not shown."
+          },
           {
             "name": "block",
             "type": "boolean",
@@ -904,6 +911,16 @@
         "props": [],
         "events": [],
         "slots": [
+          {
+            "name": "default",
+            "description": "",
+            "bindings": []
+          },
+          {
+            "name": "actions",
+            "description": "",
+            "bindings": []
+          },
           {
             "name": "name",
             "description": "",
@@ -2730,6 +2747,47 @@
         "slots": [],
         "methods": []
       },
+      {
+        "name": "DXLoading",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXLoading.vue",
+        "description": "",
+        "props": [
+          {
+            "name": "text",
+            "type": "string",
+            "required": false,
+            "default": "\"Loading…\"",
+            "description": ""
+          },
+          {
+            "name": "delay",
+            "type": "number",
+            "required": false,
+            "default": "300",
+            "description": ""
+          }
+        ],
+        "events": [],
+        "slots": [],
+        "methods": []
+      },
+      {
+        "name": "DXModalActions",
+        "category": "extended",
+        "filePath": "resources/js/components/extended/DXModalActions.vue",
+        "description": "Shared secondary modal actions; distinct from the modal footer controls.",
+        "props": [],
+        "events": [],
+        "slots": [
+          {
+            "name": "default",
+            "description": "",
+            "bindings": []
+          }
+        ],
+        "methods": []
+      },
       {
         "name": "DXNumericField",
         "category": "extended",
@@ -3072,7 +3130,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. 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.",
+        "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 light-red box with a muted red-grey toggle when off, a soft-green box with a muted green-grey 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",
@@ -3110,7 +3168,7 @@
             "name": "size",
             "type": "\"sm\"",
             "required": false,
-            "description": "`\"sm\"` renders a compact box (a few px shorter than the default, which\nmatches the input height) for dense rows that repeat the switch per item (a\nper-line visibility toggle in a modal). Omit for the standard size, which\nlines the switch up with the `.form-control`\nheight so a switch lines up with inputs beside it."
+            "description": "`\"sm\"` renders a compact rounded pill (a few px shorter than the default, which\nmatches the input height) for dense rows that repeat the switch per item (a\nper-line visibility toggle in a modal). Omit for the standard size, which\nlines the switch up with the `.form-control`\nheight so a switch lines up with inputs beside it."
           }
         ],
         "events": [
@@ -3596,7 +3654,7 @@
           },
           {
             "name": "thead-top",
-            "description": "A row rendered ABOVE the column headers — a grouped-column banner (a `<th colspan>` spanning several columns), or a pinned totals row. Renders above DXTable's own filter row. Give it `<tr>`s.",
+            "description": "Rows above the column headers, such as grouped-column banners or pinned totals. Give it `<tr>`s.",
             "bindings": [
               {
                 "title": "binding",
@@ -3616,6 +3674,20 @@
               }
             ]
           },
+          {
+            "name": "thead-sub",
+            "description": "",
+            "bindings": [
+              {
+                "name": "field",
+                "title": "binding"
+              },
+              {
+                "name": "v-bind",
+                "title": "binding"
+              }
+            ]
+          },
           {
             "name": "`head-end(${field.key})`",
             "description": "head-end(<fieldKey>) Additive content at the end of a column's own header — a period total above a numeric column, a small badge — keeping DXTable's sort indicator and field hint. Not a `head()` override.",
@@ -3979,7 +4051,7 @@
         "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. In a row too narrow for the full windowed pager, the number strip collapses to a \"current / last\" status with Previous/Next either side (#162). The decision is CONTAINER-driven, not viewport-driven — see `compactThreshold`.",
+        "description": "Pagination + per-page footer shared by `DXTable` and standalone tables. 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. In a row too narrow for the full windowed pager, the number strip collapses to a \"current / last\" status with Previous/Next either side (#162). The decision is CONTAINER-driven, not viewport-driven — see `compactThreshold`.",
         "props": [
           {
             "name": "pagination",
@@ -4142,8 +4214,8 @@
     ]
   },
   "stats": {
-    "totalComponents": 84,
+    "totalComponents": 86,
     "baseComponents": 60,
-    "extendedComponents": 24
+    "extendedComponents": 26
   }
 }

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-08-27T14:46:45.443Z
+> Last updated: 2026-09-30T05:13:05.394Z
 
 This file provides a complete map of all available documentation for AI agents and developers.
 

package/docs/public/llms.txt

@@ -2,7 +2,7 @@
 
 > Vue 3 dashboard components for Laravel with Bootstrap Vue Next
 >
-> A dual-package library (NPM + Composer) providing 73 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
+> A dual-package library (NPM + Composer) providing 76 Vue 3 components for building Laravel dashboards with Bootstrap Vue Next.
 
 ## Installation
 
@@ -84,7 +84,7 @@ Lightweight type-safe wrappers around Bootstrap Vue Next components providing AP
 - [DToaster](/components/base/dtoaster): Bootstrap Vue Next Toaster wrapper
 - [DTooltip](/components/base/dtooltip): Bootstrap Vue Next Tooltip wrapper
 
-## Extended Components (13 components)
+## Extended Components (16 components)
 
 Custom dashboard components with advanced functionality beyond Bootstrap Vue Next.
 
@@ -96,10 +96,13 @@ Custom dashboard components with advanced functionality beyond Bootstrap Vue Nex
 - [DXField](/components/extended/dxfield): Single-field renderer for any field type with value/span/info/hint slots
 - [DXFieldLabel](/components/extended/dxfieldlabel): Extended dashboard component
 - [DXForm](/components/extended/dxform): Form renderer driven by field definitions, with optional tabs, conditional fields, per-field slots, async options, nested repeaters, and auto error-tab switching
+- [DXLoading](/components/extended/dxloading): Extended dashboard component
+- [DXModalActions](/components/extended/dxmodalactions): Extended dashboard component
 - [DXRepeater](/components/extended/dxrepeater): Repeatable nested sub-form (field array) primitive
 - [DXStatCard](/components/extended/dxstatcard): Extended dashboard component
 - [DXSwitch](/components/extended/dxswitch): Extended dashboard component
 - [DXTable](/components/extended/dxtable): Data table with pagination, filtering, and sorting
+- [DXTablePagination](/components/extended/dxtablepagination): Extended dashboard component
 - [DXUserAvatar](/components/extended/dxuseravatar): Extended dashboard component
 
 ## Composables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.41.0",
+  "version": "0.41.2",
   "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

@@ -100,20 +100,12 @@ $btn-padding-x-lg: 1.5rem; // 24px
 // Forms
 // ----------------------------------------------------------------------------
 
-$input-padding-y: 0.375rem; // compact fields (Bootstrap's default; 0.625rem read oversized)
+// Inputs, selects, input-group labels and buttons share one height at each
+// size. Otherwise adding a button stretches a default input group by 8px.
+$input-padding-y: $btn-padding-y;
 $input-padding-x: 1rem;
-
-// Match the sm/lg INPUT vertical padding to the sm/lg BUTTON padding above
-// (PO18). Bootstrap sizes every child of an `.input-group-sm`/`-lg` — buttons
-// INCLUDED — with the INPUT's sized padding, so leaving these at Bootstrap's
-// defaults (0.25rem / 0.5rem) made a sized input-group sit ~8px / ~4px shorter
-// than a `.btn-sm`/`.btn-lg` beside it. Aligning them makes sized controls share
-// one height by construction. NB: the BASE `$input-padding-y` (0.375rem) stays
-// deliberately more compact than `$btn-padding-y` (0.625rem) — see the comment
-// above ("0.625rem read oversized"); only the SIZED variants are equalised,
-// because those are the ones whose padding Bootstrap leaks onto grouped buttons.
-$input-padding-y-sm: 0.5rem; // == $btn-padding-y-sm (was Bootstrap's 0.25rem)
-$input-padding-y-lg: 0.75rem; // == $btn-padding-y-lg (was Bootstrap's 0.5rem)
+$input-padding-y-sm: $btn-padding-y-sm;
+$input-padding-y-lg: $btn-padding-y-lg;
 $input-border-radius: $border-radius;
 $input-border-color: #d1d5db; // Gray-300
 $input-focus-border-color: $primary;
@@ -288,6 +280,7 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 // and expose it as a var so such components can reference the single source
 // of truth instead of duplicating the formula.
 :root {
+  --d-input-border-color: #{$input-border-color};
   // $input-border-width resolves to a CSS var() (Bootstrap 5.3+), which Sass
   // can't multiply directly — fold the *2 into the calc() itself instead.
   --dx-input-height: calc(
@@ -295,6 +288,16 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   );
 }
 
+// Bootstrap sizes grouped buttons with padding properties, but leaves their
+// padding variables unchanged. Keep computed icon-only dimensions in sync.
+.input-group-sm > .btn {
+  --bs-btn-padding-y: #{$input-padding-y-sm};
+}
+
+.input-group-lg > .btn {
+  --bs-btn-padding-y: #{$input-padding-y-lg};
+}
+
 // Horizontal ("label-left") forms: a compact settings-form rhythm, with the
 // label + control top-aligned so a checkbox/switch sits on the label's first
 // line rather than floating above it (the label column carries a top offset to
@@ -305,12 +308,8 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     align-items: flex-start;
   }
 
-  .col-form-label {
-    padding-top: 0.4rem;
-  }
-
   .form-check {
-    margin-top: 0.4rem;
+    margin-top: calc(#{$input-padding-y} + #{$input-border-width});
   }
 
   .mb-3 {
@@ -689,6 +688,17 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 // independent of the sort indicator's presence. Scoped to `.table > thead` so a
 // consumer who genuinely wants bottom-aligned headers can still opt back in on a
 // specific table.
+// Body cells inherit this alignment; explicit .align-top remains available
+// on a table, row or cell for long-form content that needs top alignment.
+.table {
+  vertical-align: middle;
+}
+
+// Column help uses the table's header colour rather than the form-label ink.
+.table > thead th .dx-field-label__text {
+  color: inherit;
+}
+
 .table > thead {
   vertical-align: middle;
 }
@@ -702,13 +712,9 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 // as the header token above), sized and inset with `padding-left` so text
 // clears it.
 //
-// Direct-child selector (`> th > input.form-control`) is deliberate: DXTable's
-// text/number/date filters render a bare `.form-control` straight inside the
-// `<th>`, whereas the `select` filter's DAutocomplete nests its input inside
-// `.d-autocomplete .input-group .b-autocomplete-input-wrapper` — so it is not a
-// direct child and correctly gets NO glyph (it has its own chevron affordance).
-// `:not([type="date"])` further excludes the date filter (its own picker icon).
-.filter-row > th > input.form-control:not([type="date"]) {
+// Select filters keep their chevron without a second icon or extra text inset.
+// Date inputs keep their own picker affordance.
+.dx-table-filter-cell > input.form-control:not([type="date"]) {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%237c8293' viewBox='0 0 16 16'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: left 0.65rem center;
@@ -749,7 +755,7 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 // theme `@import`s `bootstrap-icons/font/bootstrap-icons` (declaring the
 // `@font-face`), and #77's post-build extraction ships that woff2 with the
 // stylesheet — so this needs no new dependency and no data-URI. Values signed
-// off after one padding iteration in the greendragon interim; the glyph metrics
+// off after one padding iteration in the interim UI; the glyph metrics
 // are tunable via the variables below.
 $dx-dropdown-caret-size: 0.75em; // glyph size relative to the label
 $dx-dropdown-caret-gap: 0.4em; // space between label and chevron
@@ -805,22 +811,16 @@ $dx-switch-on-soft: map.get(map.get($dx-variants, "success"), "soft-bg"); // #cd
   --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
+  --dx-switch-pill: var(--bs-gray-400, #ced4da);
+  --dx-switch-off-pill: #{color.mix(map.get(map.get($dx-variants, "danger"), "soft-text"), $gray-400, 50%)};
+  --dx-switch-on-pill: #{color.mix(map.get(map.get($dx-variants, "success"), "soft-text"), $gray-400, 50%)};
 }
 
-// Optically centre the check/radio/switch box against its label's FIRST line.
-// Bootstrap's `.25em` top margin is mathematically right for a 1em box in a
-// 1.5em line box, but Poppins seats its glyphs low in the line box, so the box
-// reads visibly HIGH beside the text (same optical-metrics issue as the B14
-// dropdown caret). `0.325em` lands the box centre on Poppins' visual centre —
-// judged against a rendered filmstrip (0.25/0.30/0.325/0.35em) with Poppins
-// loaded, not from the maths. A top MARGIN (not flex-centring) is deliberate:
-// it aligns to the first line, so a multi-line label keeps the box on line one
-// rather than floating to the block's vertical centre. DXSwitch is unaffected —
-// it flex-centres and zeroes this margin on its inner input at higher
-// specificity (`.dx-switch :deep(.form-check-input) { margin: 0 }`).
+// Centre checkboxes/radios on the first label line using their actual size.
+// The old em offset assumed a 1em box; these controls are now 1.25rem tall.
+// A margin keeps wrapped labels aligned to line one rather than the whole block.
 .form-check-input {
-  margin-top: 0.325em;
+  margin-top: calc((1lh - #{$form-check-input-width}) / 2);
 }
 
 .form-switch .form-check-input {
@@ -1046,3 +1046,8 @@ $dx-chart-palette-dark: (#60a5fa, #a3e635, #a78bfa, #2dd4bf, #fb923c, #22d3ee, #
     margin-left: 0;
   }
 }
+
+// Keep the compact filter-cell spacing when BTable supplies the subheader row.
+thead tr:has(.dx-table-filter-cell) > td {
+  padding: 0.5rem;
+}

package/resources/js/components/base/DAutocomplete.vue

@@ -203,13 +203,13 @@ const noClearButton = computed(
 */
 .d-autocomplete :deep(.b-autocomplete-trigger) {
   --bs-btn-bg: var(--bs-body-bg);
-  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-border-color: var(--d-input-border-color, var(--bs-border-color));
   --bs-btn-color: var(--bs-secondary-color);
   --bs-btn-hover-bg: var(--bs-tertiary-bg);
-  --bs-btn-hover-border-color: var(--bs-border-color);
+  --bs-btn-hover-border-color: var(--d-input-border-color, var(--bs-border-color));
   --bs-btn-hover-color: var(--bs-body-color);
   --bs-btn-active-bg: var(--bs-secondary-bg);
-  --bs-btn-active-border-color: var(--bs-border-color);
+  --bs-btn-active-border-color: var(--d-input-border-color, var(--bs-border-color));
   --bs-btn-active-color: var(--bs-body-color);
   flex: 0 0 auto;
 }

package/resources/js/components/base/DButton.vue

@@ -2,11 +2,12 @@
 /**
  * DButton - A type-safe wrapper around Bootstrap Vue Next's BButton component
  *
- * Adds three base-level button behaviours on top of `variant`/`size`:
+ * Adds base-level button behaviours on top of `variant`/`size`:
  * - `loading` — disables the button and shows a trailing spinner while an async
  *   action is in flight, with anti-flash timing (no spinner for sub-`spinnerDelay`
  *   actions; a `minSpinnerTime` floor once shown so it never strobes).
  * - `icon` — a leading Bootstrap Icons glyph (e.g. `icon="save"` → `bi bi-save`).
+ * - `iconOnly` — square icon control at the standard height for its size.
  * - `block` — full-width button (the BS5 replacement for the dropped `.btn-block`).
  *
  * @component
@@ -15,6 +16,7 @@
  * <DButton variant="primary" size="lg">Click Me</DButton>
  * <DButton icon="save" variant="primary">Save</DButton>
  * <DButton :loading="isSaving" loading-text="Saving…">Save</DButton>
+ * <DButton icon="trash" icon-only aria-label="Delete" />
  * <DButton block>Continue</DButton>
  * ```
  */
@@ -88,6 +90,15 @@ interface Props {
    */
   icon?: string;
 
+  /**
+   * Square icon control at the same height as a normal button of this size.
+   * Use `icon` or an icon in the default slot, and provide `aria-label`.
+   * Takes precedence over `block`. While loading, the spinner replaces the
+   * icon/slot without changing dimensions; `loadingText` is not shown.
+   * @default false
+   */
+  iconOnly?: boolean;
+
   /**
    * Full-width button (BS5 `w-100` idiom, replacing the dropped `.btn-block`).
    * @default false
@@ -114,6 +125,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   loading: false,
   block: false,
+  iconOnly: false,
   spinnerDelay: 500,
   minSpinnerTime: 100,
 });
@@ -189,7 +201,7 @@ const passthroughSlotNames = computed(() =>
 // `:deep()`-on-a-B-root trap. Only add the flex row when there's an adornment
 // to space out.
 const hasAdornment = computed(
-  () => Boolean(props.icon) || showSpinner.value,
+  () => props.iconOnly || Boolean(props.icon) || showSpinner.value,
 );
 </script>
 
@@ -201,7 +213,7 @@ const hasAdornment = computed(
     :aria-busy="loading || showSpinner || undefined"
     :class="[
       { 'd-inline-flex align-items-center justify-content-center gap-2': hasAdornment },
-      { 'w-100': block },
+      { 'w-100': block && !iconOnly, 'd-button--icon-only': iconOnly },
     ]"
     v-bind="$attrs"
   >
@@ -210,8 +222,8 @@ const hasAdornment = computed(
       :class="['bi', `bi-${icon}`]"
       aria-hidden="true"
     ></i>
-    <template v-if="showSpinner && loadingText">{{ loadingText }}</template>
-    <slot v-else />
+    <template v-if="showSpinner && loadingText && !iconOnly">{{ loadingText }}</template>
+    <slot v-else-if="!iconOnly || !showSpinner" />
     <DSpinner v-if="showSpinner" small />
 
     <!-- Forward any other named slots untouched, with their slot props. -->
@@ -224,3 +236,25 @@ const hasAdornment = computed(
     </template>
   </BButton>
 </template>
+
+<style scoped>
+.d-button--icon-only {
+  --d-button-icon-size: calc(
+    1em * var(--bs-btn-line-height) + 2 * var(--bs-btn-padding-y) +
+      2 * var(--bs-btn-border-width)
+  );
+  width: var(--d-button-icon-size);
+  height: var(--d-button-icon-size);
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.input-group > .d-button--icon-only {
+  padding: 0;
+}
+
+.d-button--icon-only > .bi {
+  font-size: 1.25em;
+  line-height: 1;
+}
+</style>

package/resources/js/components/base/DModal.vue

@@ -1,11 +1,22 @@
 <template>
-  <BModal v-bind="$attrs">
-    <template v-for="(_, name) in $slots" #[name]="slotProps">
+  <BModal size="lg" v-bind="$attrs">
+    <template #default="slotProps">
+      <slot v-bind="slotProps" />
+      <DXModalActions v-if="$slots.actions" class="mt-3">
+        <slot name="actions" v-bind="slotProps" />
+      </DXModalActions>
+    </template>
+    <template v-for="name in forwardedSlots" #[name]="slotProps">
       <slot :name="name" v-bind="slotProps" />
     </template>
   </BModal>
 </template>
 
 <script setup lang="ts">
+import { computed, useSlots } from "vue";
 import { BModal } from "bootstrap-vue-next";
+import DXModalActions from "../extended/DXModalActions.vue";
+
+const slots = useSlots();
+const forwardedSlots = computed(() => Object.keys(slots).filter(name => name !== "default" && name !== "actions"));
 </script>

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

@@ -0,0 +1,47 @@
+<template>
+  <div
+    v-if="isVisible"
+    class="dx-loading text-center text-muted py-5"
+    role="status"
+    aria-live="polite"
+  >
+    <DSpinner variant="primary" aria-hidden="true" />
+    <div class="mt-2">{{ text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import DSpinner from "../base/DSpinner.vue";
+
+const props = withDefaults(
+  defineProps<{
+    text?: string;
+    delay?: number;
+  }>(),
+  {
+    text: "Loading…",
+    delay: 300,
+  },
+);
+
+const isVisible = ref(false);
+let showTimer: ReturnType<typeof setTimeout> | undefined;
+
+onMounted(() => {
+  if (props.delay <= 0) {
+    isVisible.value = true;
+    return;
+  }
+
+  showTimer = setTimeout(() => {
+    isVisible.value = true;
+  }, props.delay);
+});
+
+onBeforeUnmount(() => {
+  if (showTimer !== undefined) {
+    clearTimeout(showTimer);
+  }
+});
+</script>

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

@@ -0,0 +1,13 @@
+<!-- Shared secondary modal actions; distinct from the modal footer controls. -->
+<template>
+  <div class="dx-modal-actions"><slot /></div>
+</template>
+
+<style scoped>
+.dx-modal-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.75rem;
+}
+</style>

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

@@ -5,8 +5,8 @@
   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)
+  green-on / red-off style: a light-red box with a muted red-grey toggle when off, a
+  soft-green box with a muted green-grey 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.
@@ -64,7 +64,7 @@ interface Props {
    */
   onVariant?: "success" | "neutral";
   /**
-   * `"sm"` renders a compact box (a few px shorter than the default, which
+   * `"sm"` renders a compact rounded pill (a few px shorter than the default, which
    * matches the input height) for dense rows that repeat the switch per item (a
    * per-line visibility toggle in a modal). Omit for the standard size, which
    * lines the switch up with the `.form-control`
@@ -147,6 +147,7 @@ defineOptions({
    chrome tightens. */
 .dx-switch--sm :deep(.form-check) {
   font-size: 0.875rem;
+  border-radius: var(--bs-border-radius-pill, 50rem);
   min-height: auto;
   padding: 0.25rem 0.625rem;
 }
@@ -168,11 +169,15 @@ defineOptions({
   cursor: pointer;
 }
 
-/* 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
+/* Filled box (#158): the WHOLE control carries the colour and the pill uses a
+   muted state tint — 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 {
+  --dx-switch-pill: var(--dx-switch-off-pill);
+}
+
 .dx-switch--success :deep(.form-check) {
   background-color: var(--dx-switch-off-bg);
   border-color: var(--dx-switch-off-line);
@@ -189,12 +194,14 @@ defineOptions({
 
 .dx-switch--success.dx-switch--on :deep(.form-check-label) {
   color: var(--dx-switch-on-ink);
-  font-weight: 500;
 }
 
-/* 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
+.dx-switch--success.dx-switch--on {
+  --dx-switch-pill: var(--dx-switch-on-pill);
+}
+
+/* Muted pill with a white sliding thumb: green-grey ON, red-grey OFF.
+   The stronger box colour and position continue to communicate 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),
@@ -217,6 +224,5 @@ defineOptions({
 
 .dx-switch--neutral.dx-switch--on :deep(.form-check-label) {
   color: var(--bs-primary-text-emphasis);
-  font-weight: 500;
 }
 </style>