@omnitend/dashboard-for-laravel 0.19.0 → 0.19.1

package/package.json

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

@@ -91,6 +91,19 @@ $input-focus-box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
 // Gray-300) text inputs. Share the input border colour across all controls.
 $form-check-input-border: 1px solid $input-border-color;
 
+// Bigger check/radio boxes (Bootstrap's 1em default reads small next to the
+// theme's inputs and is a fiddly touch target). Drive it through Bootstrap's own
+// `$form-check-input-width` — NOT a raw `.form-check-input { width }` override —
+// so the container's `padding-left` and the input's negative `margin-left` (both
+// derived from `$form-check-padding-start`) track the larger box. Overriding just
+// the CSS width left the padding at `1em + .5em`, which the ~20px box then filled
+// almost entirely, collapsing the box↔label gap to ~1px (cramped/flush). The
+// explicit padding-start keeps a real gap and avoids a rem+em unit mix in
+// Bootstrap's default `$form-check-input-width + .5em`. Switches are unaffected
+// (they use the independent `$form-switch-*` variables).
+$form-check-input-width: 1.25rem;
+$form-check-padding-start: $form-check-input-width + 0.5rem;
+
 // ----------------------------------------------------------------------------
 // Cards
 // ----------------------------------------------------------------------------
@@ -193,13 +206,6 @@ $bootstrap-icons-font-src: url("bootstrap-icons/font/fonts/bootstrap-icons.woff2
   );
 }
 
-// Bigger check/radio boxes — Bootstrap's 1em default reads small next to the
-// theme's inputs and is a fiddly touch target.
-.form-check-input {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
 // 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

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

@@ -68,4 +68,26 @@ defineOptions({
   --bs-btn-active-color: var(--bs-body-color);
   flex: 0 0 auto;
 }
+
+/*
+  The clear affordance renders as Bootstrap's `.btn-close` — a bold, filled ✕
+  that reads as a heavy black mark against a light field (and is noisy when
+  several autocompletes sit in a row, e.g. a table's column filters). Scale it
+  down via `font-size` (btn-close sizes both its box and its background SVG in
+  `em`, so this shrinks it proportionally without clipping) and rest it at a
+  lower opacity so it's a quiet clear affordance that only asserts on
+  hover/focus. Matches the softened trigger above.
+*/
+.d-autocomplete :deep(.b-autocomplete-clear.btn-close) {
+  font-size: 0.8em;
+  opacity: 0.4;
+}
+
+.d-autocomplete :deep(.b-autocomplete-clear.btn-close:hover) {
+  opacity: 0.7;
+}
+
+.d-autocomplete :deep(.b-autocomplete-clear.btn-close:focus) {
+  opacity: 0.9;
+}
 </style>