buefy 3.0.2 → 3.0.4

package/dist/esm/navbar.js

@@ -1,7 +1,7 @@
 import { defineComponent, createElementBlock, openBlock, mergeProps, createElementVNode, h, resolveComponent, withDirectives, resolveDirective, createBlock, resolveDynamicComponent, withCtx, renderSlot, withKeys, withModifiers, Fragment, createTextVNode, toDisplayString, normalizeClass } from 'vue';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';
 
 var _sfc_main$3 = defineComponent({

package/dist/esm/notification.js

@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, createVNode, renderSlot, Fragment, vShow, mergeProps, createApp, h } from 'vue';
+import { defineComponent, resolveComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, createVNode, renderSlot, Fragment, vShow, mergeProps, createApp, h, inject } from 'vue';
 import { B as BIcon } from './Icon-DPyGDeRK.js';
 import { P as Progress } from './Progress-BPGTVZgr.js';
 import { M as MessageMixin } from './MessageMixin-CQ7LIdvq.js';
@@ -6,7 +6,7 @@ import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { c as config } from './config-CKuo-p6e.js';
 import { removeElement, getComponentFromVNode, copyAppContext } from './helpers.js';
 import { N as NoticeMixin } from './NoticeMixin-ByNlva3T.js';
-import { a as registerComponent, r as registerComponentProgrammatic } from './plugins-B172kuKE.js';
+import { a as registerComponent, r as registerComponentProgrammatic } from './plugins-1tLsuIZF.js';
 
 const Notification$1 = defineComponent({
   name: "BNotification",
@@ -265,11 +265,15 @@ class NotificationProgrammatic {
     return vueInstance.mount(container);
   }
 }
+const notificationInjectionKey = Symbol("Buefy Notification");
+function useNotification() {
+  return inject(notificationInjectionKey);
+}
 const Plugin = {
   install(Vue) {
     registerComponent(Vue, Notification);
-    registerComponentProgrammatic(Vue, "notification", new NotificationProgrammatic(Vue));
+    registerComponentProgrammatic(Vue, "notification", new NotificationProgrammatic(Vue), notificationInjectionKey);
   }
 };
 
-export { Notification as BNotification, NotificationProgrammatic, Plugin as default };
+export { Notification as BNotification, NotificationProgrammatic, Plugin as default, useNotification };

package/dist/esm/numberinput.js

@@ -4,7 +4,7 @@ import { B as BInput } from './Input-C4L520az.js';
 import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
 import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';
 import './helpers.js';
 

package/dist/esm/pagination.js

@@ -1,5 +1,5 @@
 import { B as BPagination, P as PaginationButton } from './Pagination-B-LAJQay.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
 import './config-CKuo-p6e.js';
 import './_plugin-vue_export-helper-OJRSZE6i.js';

package/dist/esm/{plugins-B172kuKE.js → plugins-1tLsuIZF.js}

@@ -5,9 +5,10 @@ const registerComponent = (Vue, component, name) => {
   }
   Vue.component(componentName, component);
 };
-const registerComponentProgrammatic = (Vue, property, component) => {
+const registerComponentProgrammatic = (Vue, property, component, injectionKey) => {
   if (!Vue.config.globalProperties.$buefy) Vue.config.globalProperties.$buefy = {};
   Vue.config.globalProperties.$buefy[property] = component;
+  Vue.provide(injectionKey, component);
 };
 
 export { registerComponent as a, registerComponentProgrammatic as r };

package/dist/esm/progress.js

@@ -1,7 +1,7 @@
 import { a as PROGRESS_INJECTION_KEY, P as Progress } from './Progress-BPGTVZgr.js';
 import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createCommentVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';
 
 const ProgressBar$1 = defineComponent({

package/dist/esm/radio.js

@@ -1,7 +1,7 @@
 import { defineComponent, createElementBlock, openBlock, withKeys, normalizeClass, withModifiers, withDirectives, createElementVNode, vModelRadio, renderSlot } from 'vue';
 import { C as CheckRadioMixin } from './CheckRadioMixin-DSD_rjC8.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 
 const Radio$1 = defineComponent({
   name: "BRadio",

package/dist/esm/rate.js

@@ -2,7 +2,7 @@ import { defineComponent, resolveComponent, createElementBlock, openBlock, norma
 import { c as config } from './config-CKuo-p6e.js';
 import { B as BIcon } from './Icon-DPyGDeRK.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './helpers.js';
 
 const Rate$1 = defineComponent({

package/dist/esm/select.js

@@ -1,5 +1,5 @@
 import { B as BSelect } from './Select-bl4qUzij.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
 import './Icon-DPyGDeRK.js';
 import './config-CKuo-p6e.js';

package/dist/esm/sidebar.js

@@ -2,7 +2,7 @@ import { defineComponent, createElementBlock, openBlock, createCommentVNode, cre
 import { c as config } from './config-CKuo-p6e.js';
 import { removeElement } from './helpers.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 
 const SIDEBAR_POSITIONS = ["fixed", "absolute", "static"];
 const SCROLL_BEHAVIORS = ["clip", "keep"];

package/dist/esm/skeleton.js

@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 
 const SKELETON_POSITIONS = ["", "is-centered", "is-right"];
 const BSkeleton = (props) => {

package/dist/esm/slider.js

@@ -4,7 +4,7 @@ import { c as config } from './config-CKuo-p6e.js';
 import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { bound } from './helpers.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 
 const DISPLAY_FORMATS = ["raw", "percent"];
 

package/dist/esm/snackbar.js

@@ -1,9 +1,9 @@
-import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, createCommentVNode, Fragment, toDisplayString, vShow, createApp, h } from 'vue';
+import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, createCommentVNode, Fragment, toDisplayString, vShow, createApp, h, inject } from 'vue';
 import { c as config } from './config-CKuo-p6e.js';
 import { N as NoticeMixin } from './NoticeMixin-ByNlva3T.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { getComponentFromVNode, copyAppContext } from './helpers.js';
-import { r as registerComponentProgrammatic } from './plugins-B172kuKE.js';
+import { r as registerComponentProgrammatic } from './plugins-1tLsuIZF.js';
 
 const Snackbar$1 = defineComponent({
   name: "BSnackbar",
@@ -209,10 +209,14 @@ class SnackbarProgrammatic {
     return vueInstance.mount(container);
   }
 }
+const snackbarInjectionKey = Symbol("Buefy Snackbar");
+function useSnackbar() {
+  return inject(snackbarInjectionKey);
+}
 const Plugin = {
   install(Vue) {
-    registerComponentProgrammatic(Vue, "snackbar", new SnackbarProgrammatic(Vue));
+    registerComponentProgrammatic(Vue, "snackbar", new SnackbarProgrammatic(Vue), snackbarInjectionKey);
   }
 };
 
-export { Snackbar as BSnackbar, SnackbarProgrammatic, Plugin as default };
+export { Snackbar as BSnackbar, SnackbarProgrammatic, Plugin as default, useSnackbar };

package/dist/esm/steps.js

@@ -3,7 +3,7 @@ import { B as BIcon } from './Icon-DPyGDeRK.js';
 import { T as TabbedMixin, a as TabbedChildMixin } from './TabbedChildMixin-C4i6WP9j.js';
 import { c as config } from './config-CKuo-p6e.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './helpers.js';
 import './SlotComponent-BwNpVnfH.js';
 import './InjectedChildMixin-D2K-FwuO.js';

package/dist/esm/switch.js

@@ -1,7 +1,7 @@
 import { c as config } from './config-CKuo-p6e.js';
 import { defineComponent, createElementBlock, openBlock, withKeys, normalizeClass, withModifiers, withDirectives, createElementVNode, createCommentVNode, vModelCheckbox, renderSlot } from 'vue';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 
 const Switch$1 = defineComponent({
   name: "BSwitch",

package/dist/esm/table.js

@@ -9,7 +9,7 @@ import { B as BLoading } from './Loading-tuQoo6TU.js';
 import { B as BSlotComponent } from './SlotComponent-BwNpVnfH.js';
 import { B as BSelect } from './Select-bl4qUzij.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';
 import './CheckRadioMixin-DSD_rjC8.js';
 import './FormElementMixin-Dd_wkBN5.js';

package/dist/esm/tabs.js

@@ -4,7 +4,7 @@ import { c as config } from './config-CKuo-p6e.js';
 import { T as TabbedMixin, a as TabbedChildMixin } from './TabbedChildMixin-C4i6WP9j.js';
 import { B as BSlotComponent } from './SlotComponent-BwNpVnfH.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './helpers.js';
 import './InjectedChildMixin-D2K-FwuO.js';
 

package/dist/esm/tag.js

@@ -1,7 +1,7 @@
 import { B as BTag } from './Tag-jS5Bcj6N.js';
 import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot } from 'vue';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './Icon-DPyGDeRK.js';
 import './config-CKuo-p6e.js';
 import './helpers.js';

package/dist/esm/taginput.js

@@ -6,7 +6,7 @@ import { c as config } from './config-CKuo-p6e.js';
 import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
 import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './Icon-DPyGDeRK.js';
 import './Input-C4L520az.js';
 

package/dist/esm/timepicker.js

@@ -1,5 +1,5 @@
 import { T as Timepicker } from './Timepicker-DnkqnOBT.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
 import './TimepickerMixin-Bikh6_Fg.js';
 import './CompatFallthroughMixin-C8LPuwDr.js';

package/dist/esm/toast.js

@@ -1,9 +1,9 @@
-import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h } from 'vue';
+import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h, inject } from 'vue';
 import { c as config } from './config-CKuo-p6e.js';
 import { N as NoticeMixin } from './NoticeMixin-ByNlva3T.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { getComponentFromVNode, copyAppContext } from './helpers.js';
-import { r as registerComponentProgrammatic } from './plugins-B172kuKE.js';
+import { r as registerComponentProgrammatic } from './plugins-1tLsuIZF.js';
 
 const Toast$1 = defineComponent({
   name: "BToast",
@@ -147,10 +147,14 @@ class ToastProgrammatic {
     return vueInstance.mount(container);
   }
 }
+const toastInjectionKey = Symbol("Buefy Toast");
+function useToast() {
+  return inject(toastInjectionKey);
+}
 const Plugin = {
   install(Vue) {
-    registerComponentProgrammatic(Vue, "toast", new ToastProgrammatic(Vue));
+    registerComponentProgrammatic(Vue, "toast", new ToastProgrammatic(Vue), toastInjectionKey);
   }
 };
 
-export { Toast as BToast, ToastProgrammatic, Plugin as default };
+export { Toast as BToast, ToastProgrammatic, Plugin as default, useToast };

package/dist/esm/tooltip.js

@@ -1,5 +1,5 @@
 import { T as Tooltip } from './Tooltip-CtDSXAqa.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
 import './config-CKuo-p6e.js';
 import './helpers.js';

package/dist/esm/upload.js

@@ -3,7 +3,7 @@ import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.j
 import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
 import { F as File } from './ssr-C7yEpGLm.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
-import { a as registerComponent } from './plugins-B172kuKE.js';
+import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';
 
 const Upload$1 = defineComponent({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",
@@ -53,7 +53,6 @@
     "build:scss-buefy": "sass --load-path=../../node_modules --load-path=node_modules src/scss/versions/buefy-bulma-bundle.scss dist/css/buefy.css && node ./build/banner.js < dist/css/buefy.css > dist/css/buefy.banner.css && mv dist/css/buefy.banner.css dist/css/buefy.css && cleancss -o dist/css/buefy.min.css dist/css/buefy.css",
     "build:scss-buefy-standalone": "sass --load-path=../../node_modules --load-path=node_modules src/scss/buefy.scss dist/css/versions/buefy-standalone.css && node ./build/banner.js < dist/css/versions/buefy-standalone.css > dist/css/buefy.banner.css && mv dist/css/buefy.banner.css dist/css/versions/buefy-standalone.css && cleancss -o dist/css/versions/buefy-standalone.min.css dist/css/versions/buefy-standalone.css",
     "build:scss-no-reset": "sass --load-path=../../node_modules --load-path=node_modules src/scss/versions/buefy-no-reset.scss dist/css/versions/buefy-no-reset.css && node ./build/banner.js < dist/css/versions/buefy-no-reset.css > dist/css/buefy.banner.css && mv dist/css/buefy.banner.css dist/css/versions/buefy-no-reset.css && cleancss -o dist/css/versions/buefy-no-reset.min.css dist/css/versions/buefy-no-reset.css",
-
     "vetur": "node -r esm build/vetur.js"
   },
   "dependencies": {

package/src/components/dialog/Dialog.vue

@@ -3,13 +3,13 @@
         <div
             v-if="isActive"
             class="dialog modal is-active"
-            :class="dialogClass"
+            :class="[dialogClass, customClass]"
             v-trap-focus="trapFocus"
             :role="ariaRole"
             :aria-modal="ariaModal"
         >
             <div class="modal-background" @click="cancel('outside')" />
-            <div class="modal-card animation-content">
+            <div class="modal-card animation-content" :class="customContentClass">
                 <header class="modal-card-head" v-if="title">
                     <p class="modal-card-title">
                         {{ title }}
@@ -115,6 +115,14 @@ const Dialog = defineComponent({
     },
     extends: Modal,
     props: {
+        customClass: {
+            type: String,
+            default: ''
+        },
+        customContentClass: {
+            type: String,
+            default: ''
+        },
         title: String,
         message: [String, Array],
         icon: String,

package/src/components/dialog/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 
 import Dialog from './Dialog.vue'
 import type { DialogProps } from './Dialog.vue'
@@ -154,10 +154,16 @@ class DialogProgrammatic {
     }
 }
 
+const dialogInjectionKey = Symbol('Buefy Dialog') as InjectionKey<DialogProgrammatic>
+
+export function useDialog() {
+    return inject(dialogInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Dialog)
-        registerComponentProgrammatic(Vue, 'dialog', new DialogProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'dialog', new DialogProgrammatic(Vue), dialogInjectionKey)
     }
 }
 

package/src/components/loading/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 
 import Loading from './Loading.vue'
 import type { LoadingProps } from './Loading.vue'
@@ -76,10 +76,16 @@ class LoadingProgrammatic {
     }
 }
 
+const loadingInjectionKey = Symbol('Buefy Loading') as InjectionKey<LoadingProgrammatic>
+
+export function useLoading() {
+    return inject(loadingInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Loading)
-        registerComponentProgrammatic(Vue, 'loading', new LoadingProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'loading', new LoadingProgrammatic(Vue), loadingInjectionKey)
     }
 }
 

package/src/components/modal/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, InjectionKey } from 'vue'
 
 import Modal from './Modal.vue'
 import type { ModalProps } from './Modal.vue'
@@ -92,10 +92,16 @@ class ModalProgrammatic {
     }
 }
 
+const modalInjectionKey = Symbol('Buefy Modal') as InjectionKey<ModalProgrammatic>
+
+export function useModal() {
+    return inject(modalInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Modal)
-        registerComponentProgrammatic(Vue, 'modal', new ModalProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'modal', new ModalProgrammatic(Vue), modalInjectionKey)
     }
 }
 

package/src/components/notification/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance, VNode } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, VNode, InjectionKey } from 'vue'
 
 import Notification from './Notification.vue'
 import type { NotificationProps } from './Notification.vue'
@@ -106,10 +106,16 @@ class NotificationProgrammatic {
     }
 }
 
+const notificationInjectionKey = Symbol('Buefy Notification') as InjectionKey<NotificationProgrammatic>
+
+export function useNotification() {
+    return inject(notificationInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
         registerComponent(Vue, Notification)
-        registerComponentProgrammatic(Vue, 'notification', new NotificationProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'notification', new NotificationProgrammatic(Vue), notificationInjectionKey)
     }
 }
 

package/src/components/snackbar/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance, VNode } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, VNode, InjectionKey } from 'vue'
 
 import Snackbar from './Snackbar.vue'
 import type { SnackbarProps } from './Snackbar.vue'
@@ -104,9 +104,15 @@ class SnackbarProgrammatic {
     }
 }
 
+const snackbarInjectionKey = Symbol('Buefy Snackbar') as InjectionKey<SnackbarProgrammatic>
+
+export function useSnackbar() {
+    return inject(snackbarInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
-        registerComponentProgrammatic(Vue, 'snackbar', new SnackbarProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'snackbar', new SnackbarProgrammatic(Vue), snackbarInjectionKey)
     }
 }
 

package/src/components/toast/index.ts

@@ -1,5 +1,5 @@
-import { createApp, h as createElement } from 'vue'
-import type { App, ComponentPublicInstance, VNode } from 'vue'
+import { createApp, h as createElement, inject } from 'vue'
+import type { App, ComponentPublicInstance, VNode, InjectionKey } from 'vue'
 
 import Toast from './Toast.vue'
 import type { ToastProps } from './Toast.vue'
@@ -106,9 +106,15 @@ class ToastProgrammatic {
     }
 }
 
+const toastInjectionKey = Symbol('Buefy Toast') as InjectionKey<ToastProgrammatic>
+
+export function useToast() {
+    return inject(toastInjectionKey)!
+}
+
 const Plugin = {
     install(Vue: App) {
-        registerComponentProgrammatic(Vue, 'toast', new ToastProgrammatic(Vue))
+        registerComponentProgrammatic(Vue, 'toast', new ToastProgrammatic(Vue), toastInjectionKey)
     }
 }
 

package/src/index.ts

@@ -8,7 +8,7 @@ import config, { setOptions, setVueInstance } from './utils/config'
 import type { BuefyConfig, BuefyConfigOptions } from './utils/config'
 import { registerComponentProgrammatic } from './utils/plugins'
 
-import ConfigComponent from './utils/ConfigComponent'
+import ConfigComponent, { configInjectionKey } from './utils/ConfigComponent'
 
 const Buefy = {
     install(Vue: App, options: BuefyConfigOptions = {}) {
@@ -18,7 +18,7 @@ const Buefy = {
         // Components
         allComponents.forEach((component) => Vue.use(component))
         // Config component
-        registerComponentProgrammatic(Vue, 'config', ConfigComponent)
+        registerComponentProgrammatic(Vue, 'config', ConfigComponent, configInjectionKey)
 
         Vue.config.globalProperties.$buefy.globalNoticeInterval = undefined
     }
@@ -29,13 +29,13 @@ export default Buefy
 // export all components as vue plugin
 export * from './components'
 // export programmatic component
-export { DialogProgrammatic } from './components/dialog'
-export { LoadingProgrammatic } from './components/loading'
-export { ModalProgrammatic } from './components/modal'
-export { NotificationProgrammatic } from './components/notification'
-export { SnackbarProgrammatic } from './components/snackbar'
-export { ToastProgrammatic } from './components/toast'
-export { default as ConfigProgrammatic } from './utils/ConfigComponent'
+export { DialogProgrammatic, useDialog } from './components/dialog'
+export { LoadingProgrammatic, useLoading } from './components/loading'
+export { ModalProgrammatic, useModal } from './components/modal'
+export { NotificationProgrammatic, useNotification } from './components/notification'
+export { SnackbarProgrammatic, useSnackbar } from './components/snackbar'
+export { ToastProgrammatic, useToast } from './components/toast'
+export { default as ConfigProgrammatic, useConfigComponent } from './utils/ConfigComponent'
 export { default as Color } from './utils/color'
 // export helpers
 export * from './utils/helpers'

package/src/scss/buefy.scss

@@ -1,5 +1,4 @@
 @forward "utils/_all";
-
 @forward "components/_autocomplete";
 @forward "components/_carousel";
 @forward "components/_checkbox";

package/src/scss/components/_checkbox.scss

@@ -69,15 +69,15 @@ $checkbox-colors: shared.$form-colors !default;
     align-items: center;
     
     &:not(.button) {
-      margin-right: 0.5em;
+      margin-inline-end: 0.5em;
       & + .checkbox:last-child {
-        margin-right: 0;
+        margin-inline-end: 0;
       }
     }
 
     input[type=checkbox] {
       position: absolute;
-      left: 0;
+      inset-inline-start: 0;
       opacity: 0;
       outline: none;
       z-index: -1;
@@ -116,7 +116,7 @@ $checkbox-colors: shared.$form-colors !default;
       }
     }
     .control-label {
-      padding-left: cv.getVar('control-padding-horizontal');
+      padding-inline-start: cv.getVar('control-padding-horizontal');
     }
     &.button {
       display: flex;

package/src/scss/components/_datepicker.scss

@@ -156,7 +156,7 @@ $datepicker-item-selected-background-color: cv.getVar("primary") !default;
                         border-top-right-radius: 0;
                     }
                     &.is-within-selected {
-                        background-color: cv.getRgbaVar("datepicker-item-selected-background-color", 0.5);
+                        background-color: rgb(from $datepicker-item-selected-background-color r g b / 0.5);
                         border-radius: 0;
                     }
                     &.is-last-selected {

package/src/scss/components/_dropdown.scss

@@ -2,16 +2,17 @@
 @use "bulma/sass/utilities/extends" as extends;
 @use "bulma/sass/utilities/css-variables" as cv;
 @use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/derived-variables.scss" as dv;
 @use "bulma/sass/utilities/mixins" as mixins;
+@use "bulma/sass/components/dropdown" as dropdown;
 
-$dropdown-mobile-breakpoint: cv.getVar('desktop') !default;
-$dropdown-background-color: rgba(cv.getVar('scheme-invert'), 0.86) !default;
+$dropdown-mobile-breakpoint: calc(iv.$desktop - 1px) !default;
+$dropdown-background-color: rgba(dv.$scheme-invert, 0.86) !default;
 $dropdown-disabled-opacity: 0.5 !default;
 
 .#{iv.$class-prefix}dropdown {
     @include cv.register-vars(
     (
-        "dropdown-mobile-breakpoint": #{$dropdown-mobile-breakpoint},
         "dropdown-background-color": #{$dropdown-background-color},
         "dropdown-disabled-opacity": #{$dropdown-disabled-opacity}
     )
@@ -25,10 +26,10 @@ $dropdown-disabled-opacity: 0.5 !default;
     .background {
         @extend %overlay;
         position: fixed;
-        background-color: cv.getVar('dropdown-background-color');
+        background-color: #{cv.getVar('dropdown-background-color')};
         z-index: 10;
         cursor: pointer;
-        @media screen and (min-width: cv.getVar('dropdown-mobile-breakpoint')) {
+        @media screen and (min-width: $dropdown-mobile-breakpoint) {
             display: none;
         }
     }
@@ -132,7 +133,7 @@ $dropdown-disabled-opacity: 0.5 !default;
             left: auto;
         }
     }
-    @media screen and (max-width: calc(#{cv.getVar('dropdown-mobile-breakpoint')} - 1px)) {
+    @media screen and (max-width: $dropdown-mobile-breakpoint) {
         /* prevents modal on hover unless it is on touch devices */
         &.is-mobile-modal:not(.is-hoverable),
         &.is-mobile-modal.is-touch-enabled {