@omnitend/dashboard-for-laravel 0.16.3 → 0.16.4

package/docs/public/api-reference.json

@@ -1,8 +1,8 @@
 {
-  "generated": "2026-07-06T19:02:59.128Z",
+  "generated": "2026-07-06T20:01:04.234Z",
   "package": {
     "name": "@omnitend/dashboard-for-laravel",
-    "version": "0.16.2"
+    "version": "0.16.3"
   },
   "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-06T19:02:59.193Z
+> Last updated: 2026-07-06T20:01:04.293Z
 
 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.16.3",
+  "version": "0.16.4",
   "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

@@ -221,17 +221,24 @@ $dashboard-navbar-height: 64px;
 // Toasts
 // ----------------------------------------------------------------------------
 // Bootstrap Vue Next renders toasts with Bootstrap's `.text-bg-{variant}`
-// utility, which fills the whole toast with a saturated colour and white text —
-// loud "candy" blocks that are wrong for a dashboard. Restyle them as a calm,
-// neutral surface with a subtle semantic tint + a coloured left accent rail and
-// progress bar. Colour still signals the toast type, but the bold palette stays
-// where it belongs (actions, badges, selected states).
+// utility by default, which fills the whole toast with a saturated colour and
+// white text — loud "candy" blocks that are wrong for a dashboard. Restyle
+// them as a calm, neutral surface with a subtle semantic tint. Colour still
+// signals the toast type, but the bold palette stays where it belongs
+// (actions, badges, selected states).
+//
+// `useToast()` (resources/js/composables/useToast.ts) intercepts a themed
+// `variant` and swaps it for a `toast-{variant}` class instead of BVN's own
+// `variant` prop, so these rules drive Bootstrap's own `--bs-toast-*`
+// variables — no `!important` needed to fight the `.text-bg-*` utility, which
+// sets its colours `!important` by design. An untouched (non-themed) variant
+// still falls through to BVN's default `.text-bg-*` styling.
 
 .toast {
   overflow: hidden; // clip the bottom progress bar to the rounded corners
   border: 1px solid $border-color;
   border-radius: $border-radius;
-  background-color: $white;
+  --bs-toast-bg: #{$white};
   box-shadow:
     0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
@@ -260,19 +267,16 @@ $dashboard-navbar-height: 64px;
     display: none;
   }
 
-  // Semantic variants: subtle tinted surface. Overrides the saturated
-  // `.text-bg-*` fill (compound selector wins on specificity); the dark title /
-  // muted body from the base rules above stay.
+  // Semantic variants: subtle tinted surface, driven through the CSS variable
+  // the base `.toast` rule (above, and Bootstrap's own) already reads.
   @each $name, $color in (
     "success": $success,
     "danger": $danger,
     "warning": $warning,
     "info": $info
   ) {
-    &.text-bg-#{$name} {
-      // !important overrides Bootstrap's `.text-bg-*` helper, which sets a
-      // saturated background-color !important that BVN applies per variant.
-      background-color: mix($color, $white, 8%) !important;
+    &.toast-#{$name} {
+      --bs-toast-bg: #{mix($color, $white, 8%)};
     }
   }
 }

package/resources/js/composables/useToast.ts

@@ -1 +1,53 @@
-export { useToast } from 'bootstrap-vue-next';
+import { isRef } from "vue";
+import { useToast as useBvnToast } from "bootstrap-vue-next";
+import type {
+    OrchestratorCreateOptions,
+    ToastOrchestratorCreateParam,
+} from "bootstrap-vue-next";
+
+// Bootstrap Vue Next maps a toast's `variant` prop straight to Bootstrap's
+// `.text-bg-{variant}` utility class, which sets background/text colour
+// `!important` (all Bootstrap utilities are `!important` by design) — so
+// restyling it can only ever fight that with `!important` too. The variants
+// this theme restyles (see theme.scss) are instead applied as a `toast-{variant}`
+// class, driving Bootstrap's own `--bs-toast-*` variables cleanly. An
+// unrecognised variant (e.g. "primary", "dark", or none) falls through to
+// BVN's default `.text-bg-*` styling unchanged.
+const THEMED_TOAST_VARIANTS = new Set(["success", "danger", "warning", "info"]);
+
+function themeToastParam(param: Record<string, unknown>): Record<string, unknown> {
+    const variant = param.variant as string | null | undefined;
+    if (!variant || !THEMED_TOAST_VARIANTS.has(variant)) return param;
+
+    const { variant: _variant, toastClass, ...rest } = param;
+    return {
+        ...rest,
+        toastClass: [toastClass, `toast-${variant}`],
+    };
+}
+
+/**
+ * Thin wrapper around Bootstrap Vue Next's `useToast()`. Public API is
+ * identical (`create({ title, body, variant })`, `show(...)`) — a themed
+ * `variant` is translated internally into a `toast-{variant}` class instead
+ * of being passed through to BVN, so it's styled via `--bs-toast-*` variables
+ * (see theme.scss) rather than an `!important`-overridden utility class.
+ */
+// A ref-wrapped param (rare — most callers pass a plain object) is forwarded
+// untouched: reading through it once here would snapshot every field, losing
+// reactivity for the rest of the toast, not just its variant.
+function maybeThemeParam(obj?: ToastOrchestratorCreateParam): ToastOrchestratorCreateParam | undefined {
+    if (!obj || isRef(obj)) return obj;
+    return themeToastParam(obj as Record<string, unknown>) as unknown as ToastOrchestratorCreateParam;
+}
+
+export function useToast(): ReturnType<typeof useBvnToast> {
+    const toast = useBvnToast();
+
+    return {
+        ...toast,
+        create: (obj?: ToastOrchestratorCreateParam, options?: OrchestratorCreateOptions) =>
+            toast.create(maybeThemeParam(obj), options),
+        show: (obj?: ToastOrchestratorCreateParam) => toast.show(maybeThemeParam(obj)),
+    };
+}