@omnitend/dashboard-for-laravel 0.41.2 → 0.42.0

package/resources/fonts/maven-pro/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2011 The Maven Pro Project Authors (http://www.vissol.co.uk/mavenpro/), with Reserved Font Name "Maven Pro".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/resources/fonts/poppins/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/resources/js/components/charts/DXBarChart.vue

@@ -1,7 +1,8 @@
 <!--
   @component
   A themed bar chart. Thin wrapper around vue-chartjs (chart.js) with the
-  theme's dedicated chart palette (--dx-chart-1..8) applied and dashboard-friendly defaults (no x gridlines,
+  theme's dedicated chart palette (--dx-chart-1..8 fills, a 1px --dx-chart-edge outline) applied
+  and dashboard-friendly defaults (no x gridlines,
   formatted value ticks, responsive, legend hidden for a single series). Pass
   `labels` + `datasets`; `options` deep-merges over the defaults.
 

package/resources/js/components/charts/DXDoughnutChart.vue

@@ -1,7 +1,8 @@
 <!--
   @component
   A themed doughnut chart. Thin wrapper around vue-chartjs (chart.js) with one
-  chart-palette colour (--dx-chart-1..8) per slice and dashboard-friendly defaults. Pass
+  chart-palette colour (--dx-chart-1..8) per slice, a 1px --dx-chart-edge outline, and
+  dashboard-friendly defaults. Pass
   `labels` + either `data` (a number array) or full `datasets`; `options`
   deep-merges over the defaults.
 

package/resources/js/components/charts/DXLineChart.vue

@@ -1,7 +1,8 @@
 <!--
   @component
   A themed line chart. Thin wrapper around vue-chartjs (chart.js) with the
-  theme's dedicated chart palette applied (--dx-chart-1..8 stroke + translucent fill, smoothed line)
+  theme's dedicated chart palette applied (--dx-chart-line-1..8 stroke and point outline,
+  --dx-chart-1..8 point centre and translucent area fill, smoothed line)
   and dashboard-friendly defaults. Pass `labels` + `datasets`; `options`
   deep-merges over the defaults.
 

package/resources/js/components/charts/chartTheme.ts

@@ -42,24 +42,42 @@ export function registerCharts(): void {
 }
 
 // The dedicated data-viz palette (`$dx-chart-palette` in theme.scss) — eight
-// vivid hues in a fixed, CVD-validated order, published as --dx-chart-1..8.
-// Deliberately NOT the semantic --bs-* colours (#141): the base theme colours
-// are dark AA "emphasis" shades (too muted for series), and status colours
-// shouldn't impersonate "series 2". Fallbacks mirror the shipped theme so
-// charts still render without the CSS (SSR / tests / a consumer who didn't
-// import it). Sync with theme.scss's $dx-chart-palette is enforced by a test
-// that parses the Sass source (charts.test.ts), which is why this is exported.
+// light, vivid fills in a fixed, CVD-validated order, published as
+// --dx-chart-1..8. Deliberately NOT read from the semantic --bs-* colours
+// (#141). Fallbacks mirror the shipped theme so charts still render without
+// the CSS (SSR / tests / a consumer who didn't import it). Sync with
+// theme.scss is enforced by a test that parses the Sass source
+// (charts.test.ts), which is why these lists are exported.
 export const PALETTE_VARS: Array<[string, string]> = [
-    ["--dx-chart-1", "#2563eb"], // blue
-    ["--dx-chart-2", "#65a30d"], // lime
-    ["--dx-chart-3", "#7c3aed"], // violet
-    ["--dx-chart-4", "#0d9488"], // teal
-    ["--dx-chart-5", "#ea580c"], // orange
-    ["--dx-chart-6", "#0891b2"], // cyan
-    ["--dx-chart-7", "#d97706"], // amber
-    ["--dx-chart-8", "#db2777"], // pink
+    ["--dx-chart-1", "#7fd7fd"], // sky
+    ["--dx-chart-2", "#7bf25a"], // lime
+    ["--dx-chart-3", "#e46ab9"], // magenta
+    ["--dx-chart-4", "#d6e86a"], // lime-yellow
+    ["--dx-chart-5", "#b9a3f0"], // lavender
+    ["--dx-chart-6", "#efd574"], // butter
+    ["--dx-chart-7", "#9fb4ff"], // periwinkle
+    ["--dx-chart-8", "#f7a072"], // peach
 ];
 
+// The line/point shade for each slot (`$dx-chart-line-palette`): the fill
+// darkened to 3.5:1 on white, so a line stroke or point outline clears WCAG
+// 1.4.11 non-text contrast where the light fill alone would not. Same order.
+export const LINE_PALETTE_VARS: Array<[string, string]> = [
+    ["--dx-chart-line-1", "#5590aa"],
+    ["--dx-chart-line-2", "#4d9839"],
+    ["--dx-chart-line-3", "#d161a9"],
+    ["--dx-chart-line-4", "#848f41"],
+    ["--dx-chart-line-5", "#907fbb"],
+    ["--dx-chart-line-6", "#99884a"],
+    ["--dx-chart-line-7", "#7686be"],
+    ["--dx-chart-line-8", "#ba7956"],
+];
+
+// The 1px outline on bars and doughnut segments (`$dx-chart-edge`): it carries
+// the non-text contrast for the light fills. Dark mode remaps it to the dark
+// body colour.
+export const EDGE_VAR: [string, string] = ["--dx-chart-edge", "#121419"];
+
 /**
  * The element whose computed style the theme variables are read from.
  *
@@ -86,12 +104,29 @@ function themeScope(scope?: Element | null): Element | null {
  *   backward compatible.
  */
 export function getPalette(scope?: Element | null): string[] {
+    return resolveVars(PALETTE_VARS, scope);
+}
+
+/**
+ * Resolve the themed line/point shades (`--dx-chart-line-1..8`), slot for slot
+ * with getPalette(). Same scope rules as getPalette().
+ */
+export function getLinePalette(scope?: Element | null): string[] {
+    return resolveVars(LINE_PALETTE_VARS, scope);
+}
+
+/** Resolve the bar/segment edge colour (`--dx-chart-edge`). */
+export function getEdgeColor(scope?: Element | null): string {
+    return resolveVars([EDGE_VAR], scope)[0];
+}
+
+function resolveVars(vars: Array<[string, string]>, scope?: Element | null): string[] {
     const host = themeScope(scope);
     if (host === null) {
-        return PALETTE_VARS.map(([, fallback]) => fallback);
+        return vars.map(([, fallback]) => fallback);
     }
     const styles = getComputedStyle(host);
-    return PALETTE_VARS.map(([name, fallback]) => {
+    return vars.map(([name, fallback]) => {
         const value = styles.getPropertyValue(name).trim();
         return value || fallback;
     });
@@ -273,8 +308,11 @@ export function baseOptions(args: BaseOptionArgs): Record<string, any> {
 
 /**
  * Apply the themed palette to any dataset that doesn't set its own colours.
- * Bar: one colour per dataset (or per bar for a single dataset). Line: a themed
- * stroke + translucent fill. Doughnut/pie: one colour per slice.
+ * Each property is filled in only when the caller left it undefined.
+ * Bar: one fill per dataset (or per bar for a single dataset), with a 1px
+ * edge outline. Line: the slot's darker line shade for the stroke and point
+ * outlines, the fill for point centres, and a 35% fill wash under the line.
+ * Doughnut/pie: one fill per slice, with a 1px edge outline.
  *
  * `scope` is the chart's container element; the palette is resolved from its
  * computed style so a nested `data-bs-theme` container themes correctly (#161).
@@ -287,11 +325,14 @@ export function applyPalette(
     scope?: Element | null,
 ): any[] {
     const palette = getPalette(scope);
+    const linePalette = getLinePalette(scope);
+    const edge = getEdgeColor(scope);
     const single = datasets.length === 1;
 
     return datasets.map((dataset, index) => {
         const next = { ...dataset };
         const color = palette[index % palette.length];
+        const lineColor = linePalette[index % linePalette.length];
 
         if (kind === "doughnut") {
             if (next.backgroundColor === undefined) {
@@ -300,14 +341,18 @@ export function applyPalette(
                     (_, i) => palette[i % palette.length],
                 );
             }
+            if (next.borderColor === undefined) next.borderColor = edge;
+            if (next.borderWidth === undefined) next.borderWidth = 1;
             return next;
         }
 
         if (kind === "line") {
-            if (next.borderColor === undefined) next.borderColor = color;
+            if (next.borderColor === undefined) next.borderColor = lineColor;
             if (next.backgroundColor === undefined) {
-                next.backgroundColor = withAlpha(color, 0.15);
+                next.backgroundColor = withAlpha(color, 0.35);
             }
+            if (next.pointBackgroundColor === undefined) next.pointBackgroundColor = color;
+            if (next.pointBorderColor === undefined) next.pointBorderColor = lineColor;
             if (next.tension === undefined) next.tension = 0.3;
             if (next.fill === undefined) next.fill = true;
             if (next.pointRadius === undefined) next.pointRadius = 2;
@@ -321,6 +366,8 @@ export function applyPalette(
                     ? Array.from({ length: labelsCount }, () => color)
                     : color;
         }
+        if (next.borderColor === undefined) next.borderColor = edge;
+        if (next.borderWidth === undefined) next.borderWidth = 1;
         if (next.borderRadius === undefined) next.borderRadius = 4;
         return next;
     });

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

@@ -70,8 +70,10 @@
         </template>
       </DXDashboardNavbar>
 
-      <!-- Page Content -->
-      <main class="dashboard-main p-4">
+      <!-- Page Content. Vertical padding only: the horizontal edge is the
+           shared dashboard gutter, applied to the container inside (see
+           `$dashboard-gutter-x` in theme.scss) so it matches the navbar's. -->
+      <main class="dashboard-main py-4">
         <!-- Fluid: full-width, left-aligned content (for wide tables / admin
              pages). Default: a centred reading-width column. -->
         <DContainer v-if="fluid" fluid :class="contentClass">

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

@@ -213,34 +213,66 @@ const brandInitial = computed(() => {
 const normalizeUrl = (url: string): string =>
   url.toLowerCase().replace(/[?#].*$/, '').replace(/\/$/, '');
 
+// An item's query parameters, lowercased, as [name, value] pairs.
+const queryParams = (url: string): [string, string][] => {
+  const query = url.toLowerCase().split('#')[0].split('?')[1] ?? '';
+  return Array.from(new URLSearchParams(query).entries());
+};
+
+// Identity of a nav item for matching: its path plus its query, so items that
+// differ only by query string (`/tasks?business_unit_id=1`, `...=2`) are told
+// apart.
+const itemKey = (url: string): string =>
+  normalizeUrl(url) + '?' + queryParams(url).map(([name, value]) => `${name}=${value}`).sort().join('&');
+
 /**
- * The single best-matching nav item URL for the current route. Prefers an exact
- * match; otherwise the longest ancestor path, so a detail page like
- * `/rotas/507` activates the `/rotas` item. Root `/` only matches exactly — it
- * is a prefix of every path, so it is never treated as an ancestor.
- * Returns the normalized URL of the winning item, or null if nothing matches.
+ * The single best-matching nav item for the current route, as an `itemKey`.
+ * Paths first: an exact match, otherwise the longest ancestor path, so a detail
+ * page like `/rotas/507` activates the `/rotas` item. Root `/` only matches
+ * exactly — it is a prefix of every path, so it is never treated as an
+ * ancestor. Then, among items on that winning path, queries: an item whose
+ * query names parameters only matches when the current URL carries every one of
+ * them with the same value (extra current parameters such as `page` are fine),
+ * and the item naming the most such parameters wins. An item with no query
+ * matches whatever the current query is. If every item on the path names a
+ * query the current URL doesn't carry, nothing is active.
+ * Returns null if nothing matches.
  */
-const activeUrl = computed<string | null>(() => {
+const activeKey = computed<string | null>(() => {
   const current = normalizeUrl(props.currentUrl);
-  let best: string | null = null;
-  for (const group of props.navigation) {
-    if (group.visible === false) continue;
-    for (const item of group.items) {
-      if (item.visible === false) continue;
-      const candidate = normalizeUrl(item.url);
-      const matches =
-        candidate === current ||
-        (candidate !== '' && current.startsWith(candidate + '/'));
-      if (matches && (best === null || candidate.length > best.length)) {
-        best = candidate;
-      }
+  const currentParams = new URLSearchParams(
+    props.currentUrl.toLowerCase().split('#')[0].split('?')[1] ?? '',
+  );
+  const items = props.navigation
+    .filter((group) => group.visible !== false)
+    .flatMap((group) => group.items.filter((item) => item.visible !== false));
+
+  let bestPath: string | null = null;
+  for (const item of items) {
+    const candidate = normalizeUrl(item.url);
+    const matches =
+      candidate === current ||
+      (candidate !== '' && current.startsWith(candidate + '/'));
+    if (matches && (bestPath === null || candidate.length > bestPath.length)) {
+      bestPath = candidate;
+    }
+  }
+  if (bestPath === null) return null;
+
+  let best: { key: string; score: number } | null = null;
+  for (const item of items) {
+    if (normalizeUrl(item.url) !== bestPath) continue;
+    const params = queryParams(item.url);
+    const carried = params.every(([name, value]) => currentParams.getAll(name).includes(value));
+    if (carried && (best === null || params.length > best.score)) {
+      best = { key: itemKey(item.url), score: params.length };
     }
   }
-  return best;
+  return best?.key ?? null;
 });
 
 const isActive = (url: string): boolean =>
-  activeUrl.value !== null && normalizeUrl(url) === activeUrl.value;
+  activeKey.value !== null && itemKey(url) === activeKey.value;
 
 // Index of the group containing the active route (-1 if none).
 const activeGroupIndex = computed(() =>

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

@@ -69,15 +69,30 @@
 
         <!-- Custom value slot overrides the built-in control (checkbox / switch
              / standard types; not switch-list or repeater). -->
+        <!-- A `plaintext` field is display-only, so its value slot is wrapped
+             in `.dx-form-plaintext`: a badge or a line of text then shares
+             the label's centre line instead of sitting at the top of the row. -->
+        <div
+            v-if="showValueSlot && $slots.value && isPlaintext"
+            class="dx-form-plaintext"
+        >
+            <slot
+                name="value"
+                :field="field"
+                :model="model"
+                :value="fieldValue"
+                :update="setValue"
+            />
+        </div>
         <!--
-          @slot Replaces the built-in control with a custom value editor.
+          @slot Replaces the built-in control with a custom value editor. On a `plaintext` field the content is wrapped in `.dx-form-plaintext` so display-only content lines up with the label.
           @binding {FieldDefinition} field The field definition being rendered.
           @binding {any} model The model passed to field predicates (defaults to the live form data).
           @binding {any} value The current field value.
           @binding {(value: any) => void} update Setter that writes the value back and clears the field's validation error.
         -->
         <slot
-            v-if="showValueSlot && $slots.value"
+            v-else-if="showValueSlot && $slots.value"
             name="value"
             :field="field"
             :model="model"
@@ -154,7 +169,7 @@
                 >
                     <DFormGroup
                         v-bind="switchListRowAttrs"
-                        class="mb-0 align-items-center"
+                        class="mb-0"
                     >
                         <template #label>
                             <DXFieldLabel
@@ -420,7 +435,11 @@ interface Props {
      */
     layout?: "vertical" | "horizontal";
 
-    /** Label column width for horizontal layout (mirrors BFormGroup). */
+    /**
+     * Label column width for horizontal layout (mirrors BFormGroup's
+     * `labelCols`/`labelCols*`). Omitted: the label takes
+     * `--dx-form-label-width` (45%) from `sm` up and stacks below.
+     */
     labelCols?: LabelCols;
 
     /**
@@ -487,23 +506,39 @@ function labelColsAttrs(cols: LabelCols | undefined): Record<string, any> {
     return attrs;
 }
 
-// Default to a 3-column label when horizontal but no width was configured,
-// so `layout: "horizontal"` alone is enough to see the effect. When the
-// field's label is hidden, reserve no label column at all — BFormGroup would
-// otherwise still emit an empty label column (it goes horizontal whenever any
-// labelCols are set, regardless of whether a label exists), leaving the
-// control indented in the input column beside dead space. Dropping the column
-// lets the control span full width, so a switch/checkbox self-label lines up
-// with sibling row labels (#78).
+/**
+ * BFormGroup attrs for a horizontal label column. With no `labelCols` from the
+ * caller (field or form), the label is `--dx-form-label-width` (45%) wide from
+ * `sm` up and stacks below: `labelColsSm: true` makes it a `col-sm` (so
+ * BFormGroup goes horizontal and stacks below `sm` like any breakpoint
+ * `labelCols`), and the `--default-width` modifier is what theme.scss sizes.
+ * The 45% falls between two 12-column steps, which is why it is CSS rather
+ * than a column count. An explicit `labelCols` goes through the grid unchanged.
+ */
+function labelColumnAttrs(cols: LabelCols | undefined): Record<string, any> {
+    // Right-align the label column so the label (and the hint that sits
+    // beneath it in horizontal layout) line up against the control column,
+    // like a classic label-left settings form.
+    const labelClass = "text-sm-end dx-field-label-col";
+    if (cols === undefined) {
+        return {
+            labelColsSm: true,
+            labelClass: `${labelClass} dx-field-label-col--default-width`,
+        };
+    }
+    return { ...labelColsAttrs(cols), labelClass };
+}
+
+// `layout: "horizontal"` alone is enough to see the effect (the default label
+// width above). When the field's label is hidden, reserve no label column at
+// all — BFormGroup would otherwise still emit an empty label column (it goes
+// horizontal whenever any labelCols are set, regardless of whether a label
+// exists), leaving the control indented in the input column beside dead
+// space. Dropping the column lets the control span full width, so a
+// switch/checkbox self-label lines up with sibling row labels (#78).
 const horizontalAttrs = computed<Record<string, any>>(() =>
     isHorizontal.value && !props.hideLabel
-        ? {
-              ...labelColsAttrs(props.labelCols ?? 3),
-              // Right-align the label column so the label (and the hint that
-              // sits beneath it in horizontal layout) line up against the
-              // control column, like a classic label-left settings form.
-              labelClass: "text-sm-end dx-field-label-col",
-          }
+        ? labelColumnAttrs(props.labelCols)
         : {},
 );
 
@@ -667,12 +702,7 @@ const resolvedInfo = computed(() => resolveMaybe(props.field.info));
 // FIELD label but would collapse every option row's label column too —
 // `hideLabel` on a switch-list should drop only the section heading.
 const switchListRowAttrs = computed<Record<string, any>>(() =>
-    isHorizontal.value
-        ? {
-              ...labelColsAttrs(props.labelCols ?? 3),
-              labelClass: "text-sm-end dx-field-label-col",
-          }
-        : {},
+    isHorizontal.value ? labelColumnAttrs(props.labelCols) : {},
 );
 
 // The model is an array of selected option values, exactly like
@@ -864,9 +894,10 @@ onBeforeUnmount(() => {
 
 <style scoped>
 /* Switch-list rows (#160): compact rhythm with a divider between rows. The
-   vertical centring of label vs switch is the `align-items-center` utility on
-   each row's DFormGroup (its horizontal root IS the .row element), so no
-   deep selector into bvn internals is needed here. */
+   vertical centring of label, switch and trailing control is a global
+   `.dx-switch-list-row .row` rule in theme.scss: the `.row` is inside
+   bootstrap-vue-next's BFormGroup wrapper, so a class on the DFormGroup
+   lands on the wrapper, not the row. */
 .dx-switch-list-row {
     padding: 0.25rem 0;
     border-bottom: 1px solid var(--bs-border-color);