@omnitend/dashboard-for-laravel 0.14.0 → 0.15.0

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-05T07:26:54.625Z",
+  "generated": "2026-07-05T08:20:04.640Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.13.1"
+    "version": "0.14.0"
   },
   "components": {
     "base": [

package/docs/public/docs-map.md

@@ -1,7 +1,7 @@
 # Documentation Map
 
 > Auto-generated hierarchical overview of all documentation
-> Last updated: 2026-07-05T07:26:54.686Z
+> Last updated: 2026-07-05T08:20:04.705Z
 
 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.14.0",
+  "version": "0.15.0",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

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

@@ -21,3 +21,38 @@ defineOptions({
     </template>
   </BAutocomplete>
 </template>
+
+<style scoped>
+/*
+  BAutocomplete renders `.input-group > .b-autocomplete-input-wrapper +
+  .b-autocomplete-trigger`. The input wrapper takes the full width, so under
+  Bootstrap's default `flex-wrap: wrap` the trigger chevron wraps onto its own
+  line below the input. Keep the group on a single row and let the input wrapper
+  flex, so the trigger sits inline as an append. (#53)
+*/
+:deep(.input-group) {
+  flex-wrap: nowrap;
+}
+
+:deep(.b-autocomplete-input-wrapper) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/*
+  The trigger renders as a heavy `btn btn-secondary` (dark), which reads as a
+  detached dark block. Soften it to a subtle bordered chevron that matches the
+  input and reads as a combobox affordance. Uses theme variables (no hardcoded
+  colours) and a more specific selector than `.btn-secondary` (no `!important`).
+*/
+:deep(.b-autocomplete-trigger) {
+  background-color: var(--bs-body-bg);
+  border-color: var(--bs-border-color);
+  color: var(--bs-secondary-color);
+}
+
+:deep(.b-autocomplete-trigger:hover) {
+  background-color: var(--bs-tertiary-bg);
+  color: var(--bs-body-color);
+}
+</style>

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

@@ -590,15 +590,51 @@ onBeforeUnmount(() => {
     border-radius: var(--bs-border-radius);
 }
 
-/* Switch field: contextual styling that responds to the on/off state.
-   Off is muted; on turns the control and label a filled success green. */
+/* Switch field: a full-width "filled box" toggle, the same height as a select
+   or text input, that 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. */
+.dx-switch :deep(.form-check) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    width: 100%;
+    min-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);
+    color: var(--bs-success-text-emphasis);
     font-weight: 500;
 }