@omnitend/dashboard-for-laravel 0.19.2 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.19.2",
+  "version": "0.22.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",
@@ -31,8 +31,11 @@
     "dev": "vite build --watch",
     "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
     "typecheck": "vue-tsc --noEmit",
+    "pretest": "vite build",
     "test": "vitest",
+    "pretest:ui": "vite build",
     "test:ui": "vitest --ui",
+    "pretest:headless": "vite build",
     "test:headless": "vitest --run --browser.headless",
     "docs:dev": "astro dev",
     "docs:build": "npm run docs:generate:ai && astro build",
@@ -75,9 +78,10 @@
     "vue-docgen-api": "^4.79.2"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^4.3.8",
-    "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/vue": "^5.1.1",
+    "@astrojs/markdown-remark": "^7.2.0",
+    "@astrojs/mdx": "^7.0.1",
+    "@astrojs/sitemap": "^3.7.3",
+    "@astrojs/vue": "^7.0.1",
     "@iconify-json/lucide": "^1.2.71",
     "@iconify/json": "^2.2.397",
     "@inertiajs/vue3": "^2.2.15",
@@ -86,7 +90,7 @@
     "@vitest/browser": "^4.1.8",
     "@vitest/browser-playwright": "^4.1.8",
     "@vue/test-utils": "^2.4.6",
-    "astro": "^5.15.1",
+    "astro": "7.0.5",
     "bootstrap": "^5.3.8",
     "bootstrap-icons": "^1.13.1",
     "chart.js": "^4.5.1",

package/resources/css/theme.scss

@@ -4,6 +4,10 @@
 // Custom Bootstrap theme for the Laravel Dashboard library
 // Override Bootstrap variables BEFORE importing Bootstrap
 
+// The Sass module for `color.mix()` etc. `@use` must precede all other
+// statements (variable overrides, `@import`), so it stays at the very top.
+@use "sass:color";
+
 // ----------------------------------------------------------------------------
 // Colors
 // ----------------------------------------------------------------------------
@@ -283,11 +287,26 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
 }
 
 .dashboard-navbar {
-  height: $dashboard-navbar-height;
+  // Floor, not a fixed height: below `md` the search (and actions) drop to
+  // their own rows and the bar must grow to contain them (#93). Single-row
+  // content is shorter than this, so desktop stays exactly this height,
+  // aligned with the sidebar header.
+  min-height: $dashboard-navbar-height;
   // A light grey top bar over the white content panel (higher contrast than a
   // grey-everywhere layout). The navbar markup drops its `bg-white` class so
   // this wins without `!important`.
-  background-color: #f8f9fa;
+  background-color: var(--bs-light);
+}
+
+// The avatar dropdown trigger (DXDashboardNavbar sets this via toggle-class,
+// so it lands on the BVN-rendered button — global rule, scoped CSS can't
+// reach it). The themed $btn-padding-y (10px) would make it ~54px tall and
+// blow the navbar's single-row content budget: 64px header minus the bar's
+// 16px padding = 48px. 6px keeps a ~46px tap target (≥ the 44px WCAG
+// guideline) while still fitting the budget.
+.dashboard-navbar__user-menu-toggle {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
 }
 
 // ----------------------------------------------------------------------------
@@ -349,7 +368,7 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
     "info": $info
   ) {
     &.toast-#{$name} {
-      --bs-toast-bg: #{mix($color, $white, 8%)};
+      --bs-toast-bg: #{color.mix($color, $white, 8%)};
     }
   }
 }

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

@@ -36,7 +36,8 @@
       <DXDashboardNavbar
         :page-title="pageTitle"
         :user="user"
-        :logout-url="logoutUrl"
+        :search-align="searchAlign"
+        :actions-on-mobile="actionsOnMobile"
         @toggle-sidebar="toggleSidebar"
       >
         <!-- Dynamically forward all navbar-* slots by stripping the prefix -->
@@ -60,7 +61,10 @@
         </DContainer>
         <DContainer v-else fluid>
           <DRow class="justify-content-center">
-            <DCol cols="12" xl="10" :class="contentClass">
+            <!-- A genuine max-width cap (not the proportional col-xl-10), so the
+                 reading column doesn't stretch to ~2000px on a wide display. The
+                 centred row handles the horizontal centring. -->
+            <DCol cols="12" :style="{ maxWidth: contentMaxWidth }" :class="contentClass">
               <slot />
             </DCol>
           </DRow>
@@ -77,7 +81,7 @@ import DXDashboardNavbar from './DXDashboardNavbar.vue';
 import DContainer from '../base/DContainer.vue';
 import DRow from '../base/DRow.vue';
 import DCol from '../base/DCol.vue';
-import type { Navigation } from '../../types/navigation';
+import type { Navigation, NavbarActionsOnMobile, NavbarSearchAlign } from '../../types/navigation';
 
 const slots = useSlots();
 
@@ -96,19 +100,35 @@ interface Props {
 
   /**
    * Render the page content full-width and left-aligned instead of the default
-   * centred, reading-width (`col-xl-10`) column. Use for data-heavy admin pages
-   * (wide tables).
+   * centred, reading-width column. Use for data-heavy admin pages (wide tables).
    */
   fluid?: boolean;
 
+  /**
+   * Max width of the centred content column (any CSS length). A genuine cap, so
+   * forms and text-heavy pages don't stretch to ~2000px on a wide display.
+   * Ignored when `fluid`. Set a large value (or use `fluid`) for full width.
+   */
+  contentMaxWidth?: string;
+
   /** Extra class(es) applied to the content container/column. */
   contentClass?: string;
 
   /** User object for navbar dropdown */
   user?: { name: string; email: string } | null;
 
-  /** Logout URL for navbar dropdown */
-  logoutUrl?: string;
+  /**
+   * Horizontal alignment of the navbar search slot content (`"start"` = flush
+   * left, `"center"` = centred), forwarded to DXDashboardNavbar.
+   */
+  searchAlign?: NavbarSearchAlign;
+
+  /**
+   * What the navbar actions slot does below `md`: `"wrap"` to its own
+   * full-width row, `"hide"` to remove it (relocate actions into the page on
+   * phones). Forwarded to DXDashboardNavbar.
+   */
+  actionsOnMobile?: NavbarActionsOnMobile;
 
   /**
    * Turn sidebar group headers into accordion toggles that collapse/expand
@@ -138,11 +158,13 @@ const props = withDefaults(defineProps<Props>(), {
   title: 'Dashboard',
   pageTitle: '',
   user: null,
-  logoutUrl: '/logout',
   collapsibleGroups: false,
   autoCollapseInactiveGroups: true,
   storageKey: 'dashboard-sidebar-hidden',
   dashboardId: '',
+  contentMaxWidth: '1140px',
+  searchAlign: 'start',
+  actionsOnMobile: 'wrap',
 });
 
 const collapsed = ref(false);
@@ -235,7 +257,7 @@ const toggleSidebar = () => {
 <style scoped>
 .dashboard-layout {
   min-height: 100vh;
-  background-color: #f8f9fa;
+  background-color: var(--bs-light);
 }
 
 .dashboard-content {
@@ -249,6 +271,6 @@ const toggleSidebar = () => {
   max-width: 100%;
   /* A white content panel under the light grey top bar / layout, so forms and
      content sit on white (higher contrast than a grey-everywhere dashboard). */
-  background-color: #fff;
+  background-color: var(--bs-white);
 }
 </style>

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

@@ -1,8 +1,9 @@
 <!--
   @component
-  Top navigation bar for the dashboard shell: menu toggle, page title, centred
-  search, page-level actions, and the user menu. Usually rendered by
-  `DXDashboard`, which forwards these slots with a `navbar-` prefix.
+  Top navigation bar for the dashboard shell: menu toggle, page title, search
+  (aligned per `searchAlign`, left by default), page-level actions, and the
+  user menu. Usually rendered by `DXDashboard`, which forwards these slots
+  with a `navbar-` prefix.
 -->
 <template>
   <header class="dashboard-navbar border-bottom">
@@ -39,25 +40,35 @@
 
         <div
           v-if="$slots.search"
-          class="dashboard-navbar__search d-flex justify-content-center"
+          class="dashboard-navbar__search d-flex"
+          :class="searchAlignClass"
         >
-          <!-- @slot Search input or component. Centred in the bar on wider screens; drops to its own full-width row below the `md` breakpoint. -->
+          <!-- @slot Search input or component. Aligned per `searchAlign` within its region (inline in the bar from `md` up; its own full-width row below). -->
           <slot name="search" />
         </div>
 
-        <div class="dashboard-navbar__end d-flex align-items-center gap-3">
-          <!-- Page-level primary actions, right-aligned next to the user menu -->
-          <div
-            v-if="$slots.actions"
-            class="dashboard-navbar__actions d-flex align-items-center gap-2"
-          >
-            <!--
-              @slot Page-level primary actions (e.g. a Create button), right-aligned next to the user menu.
-              @binding {string} pageTitle The current page title, for context.
-            -->
-            <slot name="actions" :pageTitle="pageTitle" />
-          </div>
+        <!-- Page-level primary actions: right-aligned next to the user menu
+             from `md` up; their own wrappable full-width row below (#93),
+             or hidden below `md` when `actionsOnMobile` is "hide". -->
+        <div
+          v-if="$slots.actions"
+          class="dashboard-navbar__actions align-items-center gap-2"
+          :class="actionsDisplayClass"
+        >
+          <!--
+            @slot Page-level primary actions (e.g. a Create button). Right-aligned next to the user menu from `md` up; below, wraps to its own full-width row or is hidden entirely per `actionsOnMobile`.
+            @binding {string} pageTitle The current page title, for context.
+          -->
+          <slot name="actions" :pageTitle="pageTitle" />
+        </div>
 
+        <!-- Only render the user-menu cluster when it has content: an empty
+             flex item would still cost a bar gap, pushing actions off the
+             right edge in guest (user-less) layouts. -->
+        <div
+          v-if="$slots['user-menu'] || user"
+          class="dashboard-navbar__end d-flex align-items-center gap-3"
+        >
           <!--
             @slot Replaces the entire user menu (the default avatar dropdown).
             @binding {object} user The signed-in user.
@@ -68,6 +79,7 @@
               variant="link"
               class="text-dark"
               menu-class="dropdown-menu-end"
+              toggle-class="dashboard-navbar__user-menu-toggle"
               no-caret
             >
               <template #button-content>
@@ -96,11 +108,13 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import DContainer from "../base/DContainer.vue";
 import DButton from "../base/DButton.vue";
 import DDropdown from "../base/DDropdown.vue";
+import type { NavbarActionsOnMobile, NavbarSearchAlign } from "../../types/navigation";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     /** The signed-in user shown in the avatar dropdown. `null` hides the menu. */
     user?: {
@@ -110,13 +124,53 @@ withDefaults(
     } | null;
     /** Page title shown at the left of the navbar (hidden below the `md` breakpoint). */
     pageTitle?: string;
+    /**
+     * Horizontal alignment of the search slot content within its region
+     * (`"start"` = flush left, `"center"` = centred). Applies at every size:
+     * the region sits inline after the title from `md` up, and is its own
+     * full-width row below.
+     */
+    searchAlign?: NavbarSearchAlign;
+    /**
+     * What the actions slot does below the `md` breakpoint: `"wrap"` moves it
+     * to its own full-width row (the bar grows), `"hide"` removes it entirely
+     * (for apps that relocate page actions into the page on phones).
+     */
+    actionsOnMobile?: NavbarActionsOnMobile;
   }>(),
   {
     user: null,
     pageTitle: "",
+    searchAlign: "start",
+    actionsOnMobile: "wrap",
   },
 );
 
+// Explicit map (not string interpolation) so an out-of-union value at runtime
+// falls back to a valid class instead of a silent Bootstrap no-op, and the
+// full class names stay greppable.
+const SEARCH_ALIGN_CLASSES: Record<NavbarSearchAlign, string> = {
+  start: "justify-content-start",
+  center: "justify-content-center",
+};
+
+const searchAlignClass = computed(
+  () => SEARCH_ALIGN_CLASSES[props.searchAlign] ?? SEARCH_ALIGN_CLASSES.start,
+);
+
+// "hide" swaps d-flex for d-none/d-md-flex on the WRAPPER — hiding only the
+// slot content would leave a zero-height full-width row still costing a flex
+// row-gap on phones. Explicit map + fallback, same rationale as
+// SEARCH_ALIGN_CLASSES above.
+const ACTIONS_DISPLAY_CLASSES: Record<NavbarActionsOnMobile, string> = {
+  wrap: "d-flex",
+  hide: "d-none d-md-flex",
+};
+
+const actionsDisplayClass = computed(
+  () => ACTIONS_DISPLAY_CLASSES[props.actionsOnMobile] ?? ACTIONS_DISPLAY_CLASSES.wrap,
+);
+
 defineEmits<{
   /** Emitted when the hamburger menu button is clicked. */
   toggleSidebar: [];
@@ -140,32 +194,56 @@ const getUserInitial = (user: { name: string } | null) => {
   padding: 0.5rem 0;
 }
 
-/* Push the user-menu / actions cluster to the right. */
+/* Push the user-menu cluster to the right. (The actions region carries its
+   own auto margin from `md` up — see the sibling rule below.) */
 .dashboard-navbar__end {
   margin-left: auto;
 }
 
 /*
- * Mobile-first: the search sits on its own full-width row below the toggle /
- * title / user-menu row (order after both, flex-basis 100% forces the wrap).
- * From `md` up it moves inline between the title and the user menu and grows to
- * fill the middle, centring its content.
+ * Mobile-first: the actions and the search each sit on their own full-width
+ * row below the toggle / title / user-menu row (flex-basis 100% forces the
+ * wrap; the bar and the sticky header grow to contain them — #93). The
+ * actions row itself wraps so a wide button group stacks instead of
+ * overflowing the viewport.
+ * From `md` up everything moves inline: search between the title and the
+ * actions (grows to fill the middle; `searchAlign` controls where its content
+ * sits), actions right-aligned next to the user menu. The actions' order 2
+ * holds at every size — only search and end change order across the
+ * breakpoint.
  */
+.dashboard-navbar__actions {
+  order: 2;
+  flex: 0 0 100%;
+  flex-wrap: wrap;
+}
+
 .dashboard-navbar__search {
   order: 3;
   flex: 0 0 100%;
-  width: 100%;
 }
 
 @media (min-width: 768px) {
   .dashboard-navbar__search {
     order: 1;
     flex: 1 1 auto;
-    width: auto;
+  }
+
+  .dashboard-navbar__actions {
+    flex: 0 1 auto;
+    flex-wrap: nowrap;
+    margin-left: auto;
   }
 
   .dashboard-navbar__end {
-    order: 2;
+    order: 3;
+  }
+
+  /* When the actions region is present it carries the push-right auto margin;
+     zero the user-menu cluster's so the two sit adjacent instead of having
+     the free space split between them. */
+  .dashboard-navbar__actions ~ .dashboard-navbar__end {
+    margin-left: 0;
   }
 }
 

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

@@ -1,6 +1,6 @@
 <!--
   @component
-  Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `hint` and `repeater-row` slots for per-field customisation.
+  Renders a single `FieldDefinition` of any type (text, select, autocomplete, checkbox, switch, repeater, currency, percentage, file/image, component, etc.) with its label, validation error, hint and help. Used by `DXForm` and `DXTable`'s edit modal; exposes `value`, `span`, `info`, `info-popover`, `hint` and `repeater-row` slots for per-field customisation.
 -->
 <template>
     <!-- Full-width span field: delegate entirely to the #span slot -->
@@ -128,7 +128,7 @@
          duplicated popover trigger. -->
     <DFormGroup
         v-else-if="field.type === 'switch' && isHorizontal"
-        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+        :class="field.class || 'mb-3'"
         v-bind="horizontalAttrs"
     >
         <!-- The row label (left column) names the control. The switch's own
@@ -156,10 +156,9 @@
             :value="fieldValue"
             :update="setValue"
         />
-        <DFormCheckbox
+        <DXSwitch
             v-else
             v-model="switchModel"
-            switch
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
@@ -167,7 +166,7 @@
                 :label="switchText"
                 :class="switchHasContextualText ? undefined : 'visually-hidden'"
             />
-        </DFormCheckbox>
+        </DXSwitch>
 
         <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
             {{ form.getError(errorKey) }}
@@ -179,10 +178,10 @@
         <DFormText v-if="field.help">{{ field.help }}</DFormText>
     </DFormGroup>
 
-    <!-- Switch (vertical, default): toggle with contextual on/off text and an on-state style -->
+    <!-- Switch (vertical, default): toggle with contextual on/off text (DXSwitch owns the filled-box on-state style) -->
     <div
         v-else-if="field.type === 'switch'"
-        :class="[field.class || 'mb-3', 'dx-switch', { 'dx-switch--on': switchIsOn }]"
+        :class="field.class || 'mb-3'"
     >
         <!--
           @slot Replaces the built-in control with a custom value editor.
@@ -199,15 +198,14 @@
             :value="fieldValue"
             :update="setValue"
         />
-        <DFormCheckbox
+        <DXSwitch
             v-else
             v-model="switchModel"
-            switch
             :disabled="isDisabled || isReadonly"
             v-bind="field.inputProps"
         >
             <DXFieldLabel :label="switchText" :info="resolvedInfo" />
-        </DFormCheckbox>
+        </DXSwitch>
 
         <DFormInvalidFeedback v-if="form.hasError(errorKey)" force-show>
             {{ form.getError(errorKey) }}
@@ -442,7 +440,7 @@
         <!-- Text-based inputs (text/email/password/number/url/tel/date/time/datetime) -->
         <DFormInput
             v-else
-            v-model="fieldValue"
+            v-model="textFieldModel"
             :type="inputType"
             :required="field.required"
             :placeholder="field.placeholder"
@@ -490,16 +488,20 @@ import {
     defineAsyncComponent,
     onBeforeUnmount,
     onMounted,
+    provide,
     ref,
     useId,
+    useSlots,
     watch,
 } from "vue";
+import { dxFieldInfoPopoverKey } from "./dxFieldContext";
 import DFormGroup from "../base/DFormGroup.vue";
 import DFormInput from "../base/DFormInput.vue";
 import DFormTextarea from "../base/DFormTextarea.vue";
 import DFormSelect from "../base/DFormSelect.vue";
 import DFormRadioGroup from "../base/DFormRadioGroup.vue";
 import DFormCheckbox from "../base/DFormCheckbox.vue";
+import DXSwitch from "./DXSwitch.vue";
 import DFormInvalidFeedback from "../base/DFormInvalidFeedback.vue";
 import DFormText from "../base/DFormText.vue";
 import DInputGroup from "../base/DInputGroup.vue";
@@ -559,6 +561,24 @@ const props = defineProps<Props>();
 
 const effectiveModel = computed(() => props.model ?? props.form.data);
 
+// Forward the `info-popover` slot to whichever DXFieldLabel this field renders,
+// once — so the label sites stay plain `<DXFieldLabel :label :info />` and can't
+// drift out of sync (each rendering its own copy of the forward). DXFieldLabel
+// injects this; standalone use ignores it.
+const slots = useSlots();
+provide(
+    dxFieldInfoPopoverKey,
+    computed(() =>
+        slots["info-popover"]
+            ? () =>
+                  slots["info-popover"]!({
+                      field: props.field,
+                      model: props.model,
+                  })
+            : null,
+    ),
+);
+
 // ————————————————— horizontal layout (#66)
 
 // A `span` field always bypasses the label/content column split — it's
@@ -662,6 +682,41 @@ const fieldValue = computed({
     set: (value: any) => setValue(value),
 });
 
+// Native <input type=date/datetime-local/time> only accept a strict format
+// (YYYY-MM-DD, YYYY-MM-DDTHH:MM, HH:MM) and render EMPTY for anything else —
+// including Laravel's ISO-8601 (`…Z`) and `Y-m-d H:i:s` serialisations, so a
+// field seeded with `created_at` shows a blank placeholder. Reshape the
+// *displayed* value to the input's format for those types; the setter writes
+// the input's native value straight back. This is a pure string reshape, not a
+// timezone conversion — the stored wall-clock is shown as-is, so a UTC `…Z`
+// value displays its UTC time (convert before seeding if you need local).
+const DATE_FAMILY_TYPES = new Set<FieldType>(["date", "datetime", "time"]);
+
+function normaliseDateForInput(value: unknown, type: FieldType): string {
+    if (value === null || value === undefined || value === "") return "";
+    const iso = String(value).replace(" ", "T"); // `Y-m-d H:i:s` → ISO-ish
+    if (type === "date") {
+        return iso.match(/^(\d{4}-\d{2}-\d{2})/)?.[1] ?? "";
+    }
+    if (type === "time") {
+        // Anchor to the start or the time part of an ISO value, so a malformed
+        // string can't yield a stray HH:MM from the middle.
+        return iso.match(/(?:^|T)(\d{2}:\d{2})/)?.[1] ?? "";
+    }
+    // datetime → datetime-local
+    return iso.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})/)?.[1] ?? "";
+}
+
+// Model for the text-based input branch. Reshapes date-family values for the
+// native picker; every other type passes straight through.
+const textFieldModel = computed({
+    get: () =>
+        DATE_FAMILY_TYPES.has(props.field.type)
+            ? normaliseDateForInput(fieldValue.value, props.field.type)
+            : fieldValue.value,
+    set: (value: any) => setValue(value),
+});
+
 // For `percentage` fields with `asFraction`, the model holds a 0–1 fraction but
 // the input shows/edits a 0–100 percentage. Scale on read/write, rounding away
 // binary-float artefacts (0.2 * 100 = 20.000000000000004). Currency and plain
@@ -913,70 +968,4 @@ onBeforeUnmount(() => {
     border-radius: var(--bs-border-radius);
 }
 
-/* Switch field: a compact "filled box" toggle, sized to its content — like the
-   plain `checkbox` field type, it doesn't stretch to fill the form row — but
-   matching standard input height so it lines up with sibling text/select
-   fields. Colour-codes its state: a neutral box when off, a filled success
-   green when on. The label sits on the left and the toggle on the right.
-   Renders the underlying `.form-check` (from the switch checkbox) as the box.
-   `justify-content: space-between` on a full-width box used to leave a wide
-   unclickable gap between the label and the toggle (only the tiny toggle
-   itself was a real click target); shrinking the box to fit its content
-   removes that dead zone entirely. Uses block-level `flex` (not `inline-flex`)
-   so the box stays shrink-to-fit yet still takes its own line: an inline-level
-   box let a following `<small class="form-text">` hint flow inline beside it
-   instead of dropping below the control like every other field type (#79). */
-.dx-switch :deep(.form-check) {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    width: fit-content;
-    max-width: 100%; /* wrap/ellipsize rather than overflow a narrow field */
-    min-height: var(--dx-input-height, calc(1.5em + 0.75rem + 2px)); /* match .form-control height */
-    margin: 0;
-    /* Override Bootstrap `.form-switch`'s 2.5em left padding for the floated input. */
-    padding: 0.375rem 0.75rem;
-    border: 1px solid var(--bs-border-color);
-    border-radius: var(--bs-border-radius);
-    background-color: var(--bs-body-bg);
-    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
-}
-
-/* Label on the left, toggle on the right (DOM order is input then label). */
-.dx-switch :deep(.form-check-label) {
-    order: 1;
-    margin: 0;
-    color: var(--bs-secondary-color);
-    cursor: pointer;
-    transition: color 0.15s ease-in-out;
-}
-
-.dx-switch :deep(.form-check-input) {
-    order: 2;
-    flex-shrink: 0;
-    /* Override `.form-switch`'s negative left margin now that we're flex-laid-out. */
-    margin: 0;
-    cursor: pointer;
-}
-
-/* On-state: filled success green. */
-.dx-switch--on :deep(.form-check) {
-    background-color: var(--bs-success-bg-subtle);
-    border-color: var(--bs-success);
-}
-
-.dx-switch--on :deep(.form-check-label) {
-    color: var(--bs-success-text-emphasis);
-    font-weight: 500;
-}
-
-.dx-switch--on :deep(.form-check-input:checked) {
-    background-color: var(--bs-success);
-    border-color: var(--bs-success);
-}
-
-.dx-switch--on :deep(.form-check-input:focus) {
-    border-color: var(--bs-success);
-    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
-}
 </style>