@omnitend/dashboard-for-laravel 0.37.0 → 0.38.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-23T11:32:06.998Z",
+  "generated": "2026-07-23T18:28:14.921Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.37.0"
+    "version": "0.38.0"
   },
   "components": {
     "base": [
@@ -3092,6 +3092,12 @@
             "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)."
+          },
+          {
+            "name": "size",
+            "type": "\"sm\"",
+            "required": false,
+            "description": "`\"sm\"` renders a compact box (~31px vs the default ~35px input height) for\ndense rows that repeat the switch per item (a per-line visibility toggle in\na modal). Omit for the standard size, which matches the `.form-control`\nheight so a switch lines up with inputs beside it."
           }
         ],
         "events": [

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-23T11:32:07.049Z
+> Last updated: 2026-07-23T18:28:14.969Z
 
 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.37.0",
+  "version": "0.38.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

@@ -804,6 +804,21 @@ $dx-switch-on-soft: map.get(map.get($dx-variants, "success"), "soft-bg"); // #cd
   --dx-switch-pill: var(--bs-gray-400, #ced4da); // neutral pill in both states
 }
 
+// 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 }`).
+.form-check-input {
+  margin-top: 0.325em;
+}
+
 .form-switch .form-check-input {
   // OFF: light-red track, red thumb (left).
   background-color: var(--dx-switch-off-bg);

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

@@ -21,7 +21,7 @@
   `label` prop for simple text, or the default slot for richer label content.
 -->
 <template>
-  <div class="dx-switch" :class="[`dx-switch--${onVariant}`, { 'dx-switch--on': isOn }]">
+  <div class="dx-switch" :class="[`dx-switch--${onVariant}`, { 'dx-switch--on': isOn, 'dx-switch--sm': size === 'sm' }]">
     <!-- For the neutral variant, tag the inner `.form-switch` with
          `switch-neutral` so the global theme restores grey-off / primary-on for
          the toggle itself (the box styling below handles the wrapper). -->
@@ -63,6 +63,13 @@ interface Props {
    * shouldn't imply good/bad — it uses the brand primary on / grey off (#158).
    */
   onVariant?: "success" | "neutral";
+  /**
+   * `"sm"` renders a compact box (~31px vs the default ~35px 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 matches the `.form-control`
+   * height so a switch lines up with inputs beside it.
+   */
+  size?: "sm";
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -131,6 +138,17 @@ defineOptions({
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+/* Compact size (#… size="sm"): a shorter box for dense rows that repeat the
+   switch per item. `min-height: auto` drops the input-height floor so the box
+   shrinks to its padded content (~31px vs ~35px); the smaller font pulls the
+   label in to match. The fixed-rem toggle itself is unchanged — only the box
+   chrome tightens. */
+.dx-switch--sm :deep(.form-check) {
+  font-size: 0.875rem;
+  min-height: auto;
+  padding: 0.25rem 0.625rem;
+}
+
 /* Label on the left, toggle on the right (DOM order is input then label). */
 .dx-switch :deep(.form-check-label) {
   order: 1;