buefy 3.0.3 → 3.0.5

package/dist/esm/table.js

@@ -1,13 +1,13 @@
-import { defineComponent, resolveComponent, createElementBlock, openBlock, createElementVNode, createBlock, withCtx, Fragment, renderList, createTextVNode, createCommentVNode, toDisplayString, withDirectives, vShow, createVNode, normalizeClass, renderSlot, h, toHandlerKey, camelize, toRaw, mergeProps, normalizeStyle, withKeys, withModifiers, Transition } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, createElementVNode, createBlock, withCtx, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode, withDirectives, vShow, createVNode, normalizeClass, renderSlot, h, toHandlerKey, camelize, toRaw, mergeProps, normalizeStyle, withKeys, withModifiers, Transition } from 'vue';
 import { getValueByPath, toCssWidth, removeElement, translateTouchAsDragEvent, isFragment, escapeRegExpChars, removeDiacriticsFromString, indexOf, multiColumnSort, isNil, createAbsoluteElement } from './helpers.js';
-import { B as BPagination, d as debounce } from './Pagination-B-LAJQay.js';
+import { B as BPagination, d as debounce } from './Pagination-BWFVCGiz.js';
 import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
-import { B as BCheckbox } from './Checkbox-KUMz0sfA.js';
-import { B as BIcon } from './Icon-DPyGDeRK.js';
-import { B as BInput } from './Input-C4L520az.js';
-import { B as BLoading } from './Loading-tuQoo6TU.js';
+import { B as BCheckbox } from './Checkbox-u861Rije.js';
+import { B as BIcon } from './Icon-iqPKMem5.js';
+import { B as BInput } from './Input-JL4LWKyL.js';
+import { B as BLoading } from './Loading-BSqhV1Gi.js';
 import { B as BSlotComponent } from './SlotComponent-BwNpVnfH.js';
-import { B as BSelect } from './Select-bl4qUzij.js';
+import { B as BSelect } from './Select-dYTVc9W4.js';
 import { _ as _export_sfc } from './_plugin-vue_export-helper-OJRSZE6i.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import './config-CKuo-p6e.js';

package/dist/esm/tabs.js

@@ -1,7 +1,7 @@
-import { defineComponent, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, withDirectives, createBlock, createCommentVNode, toDisplayString, vShow } from 'vue';
-import { B as BIcon } from './Icon-DPyGDeRK.js';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, Fragment, renderList, withDirectives, createBlock, createCommentVNode, toDisplayString, vShow } from 'vue';
+import { B as BIcon } from './Icon-iqPKMem5.js';
 import { c as config } from './config-CKuo-p6e.js';
-import { T as TabbedMixin, a as TabbedChildMixin } from './TabbedChildMixin-C4i6WP9j.js';
+import { T as TabbedMixin, a as TabbedChildMixin } from './TabbedChildMixin-BsuDQmWE.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-1tLsuIZF.js';

package/dist/esm/tag.js

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

package/dist/esm/taginput.js

@@ -1,14 +1,14 @@
-import { defineComponent, resolveComponent, createElementBlock, openBlock, mergeProps, createElementVNode, createCommentVNode, normalizeClass, renderSlot, createBlock, Fragment, renderList, withCtx, createTextVNode, toDisplayString, createSlots } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, renderSlot, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createSlots, createCommentVNode } from 'vue';
 import { getValueByPath } from './helpers.js';
-import { B as BTag } from './Tag-jS5Bcj6N.js';
-import { B as BAutocomplete } from './Autocomplete-CZ8DmXsB.js';
+import { B as BTag } from './Tag-BFgiw0Ac.js';
+import { B as BAutocomplete } from './Autocomplete-HsHD-6pc.js';
 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-1tLsuIZF.js';
-import './Icon-DPyGDeRK.js';
-import './Input-C4L520az.js';
+import './Icon-iqPKMem5.js';
+import './Input-JL4LWKyL.js';
 
 var _sfc_main = defineComponent({
   name: "BTaginput",

package/dist/esm/timepicker.js

@@ -1,4 +1,4 @@
-import { T as Timepicker } from './Timepicker-DnkqnOBT.js';
+import { T as Timepicker } from './Timepicker-CYqyLHE9.js';
 import { a as registerComponent } from './plugins-1tLsuIZF.js';
 import 'vue';
 import './TimepickerMixin-Bikh6_Fg.js';
@@ -6,14 +6,14 @@ import './CompatFallthroughMixin-C8LPuwDr.js';
 import './config-CKuo-p6e.js';
 import './FormElementMixin-Dd_wkBN5.js';
 import './helpers.js';
-import './Dropdown-CGTYVyoL.js';
+import './Dropdown-BLadix4L.js';
 import './trapFocus-KHP_kCNE.js';
 import './_plugin-vue_export-helper-OJRSZE6i.js';
-import './DropdownItem-Cn3nM0A3.js';
-import './Input-C4L520az.js';
-import './Icon-DPyGDeRK.js';
-import './Field-B7bX_uUg.js';
-import './Select-bl4qUzij.js';
+import './DropdownItem-Crhb4RQp.js';
+import './Input-JL4LWKyL.js';
+import './Icon-iqPKMem5.js';
+import './Field-DZCOQuRO.js';
+import './Select-dYTVc9W4.js';
 
 const Plugin = {
   install(Vue) {

package/dist/esm/toast.js

@@ -1,4 +1,4 @@
-import { defineComponent, createBlock, openBlock, Transition, withCtx, withDirectives, createElementVNode, normalizeClass, renderSlot, createElementBlock, Fragment, createCommentVNode, vShow, createApp, h, inject } from 'vue';
+import { defineComponent, openBlock, createBlock, 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';

package/dist/esm/tooltip.js

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

package/dist/esm/upload.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, mergeProps, renderSlot, createElementVNode, withModifiers, normalizeClass } from 'vue';
+import { defineComponent, openBlock, createElementBlock, mergeProps, renderSlot, withModifiers, normalizeClass, createElementVNode } from 'vue';
 import { C as CompatFallthroughMixin } from './CompatFallthroughMixin-C8LPuwDr.js';
 import { F as FormElementMixin } from './FormElementMixin-Dd_wkBN5.js';
 import { F as File } from './ssr-C7yEpGLm.js';

package/dist/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.52.8"
+      "packageVersion": "7.58.2"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buefy",
-  "version": "3.0.3",
+  "version": "3.0.5",
   "description": "Lightweight UI components for Vue.js (v3) based on Bulma",
   "keywords": [
     "vuejs",
@@ -68,7 +68,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@types/jsdom": "^21.1.7",
     "@vue/test-utils": "^2.4.6",
@@ -80,4 +80,4 @@
     "rollup-plugin-esbuild": "^6.1.0",
     "vitest": "^3.0.6"
   }
-}
+}

package/src/components/carousel/CarouselList.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="carousel-list"
+        class="carousel carousel-list"
         :class="{'has-shadow': scrollIndex > 0}"
         @mousedown.prevent="dragStart"
         @touchstart="dragStart"

package/src/components/carousel/__snapshots__/CarouselList.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BCarouselList > render correctly 1`] = `
-"<div class="carousel-list">
+"<div class="carousel carousel-list">
   <div class="carousel-slides" style="transform: translateX(0px);">
     <div class="carousel-slide is-active" style="width: 0px;">
       <b-image-stub src="https://picsum.photos/id/0/1230/500" lazy="true" responsive="true" srcsetformatter="[Function]" rounded="false" captionfirst="false" title="Slide 1" image="https://picsum.photos/id/0/1230/500"></b-image-stub>

package/src/components/checkbox/Checkbox.spec.ts

@@ -1,3 +1,5 @@
+import { existsSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
 import { shallowMount } from '@vue/test-utils'
 import type { VueWrapper } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -20,7 +22,9 @@ describe('BCheckbox', () => {
     })
 
     it('has an input checkbox', () => {
-        expect(wrapper.find('label input[type=checkbox]').exists()).toBeTruthy()
+        expect(
+            wrapper.find('label input[type=checkbox]').exists()
+        ).toBeTruthy()
     })
 
     it('emit input event with value when value change', async () => {
@@ -35,6 +39,36 @@ describe('BCheckbox', () => {
         (wrapper.vm.$refs.input as HTMLElement).focus = vi.fn()
         wrapper.vm.focus()
         await wrapper.vm.$nextTick()
-        expect((wrapper.vm.$refs.input as HTMLElement).focus).toHaveBeenCalled()
+        expect(
+            (wrapper.vm.$refs.input as HTMLElement).focus
+        ).toHaveBeenCalled()
+    })
+
+    it('generates svg checkmark images from concrete colors in checkbox styles', () => {
+        const scssPathCandidates = [
+            join(process.cwd(), 'src/scss/components/_checkbox.scss'),
+            join(process.cwd(), 'buefy/src/scss/components/_checkbox.scss')
+        ]
+        const scssPath = scssPathCandidates.find((candidate) =>
+            existsSync(candidate)
+        )
+
+        expect(scssPath).toBeTruthy()
+        if (!scssPath) {
+            throw new Error(
+                'Unable to locate _checkbox.scss for regression assertion'
+            )
+        }
+        const source = readFileSync(scssPath, 'utf8')
+
+        // Regression: CSS variables inside data-uri SVG are not resolved by browsers.
+        expect(source).toContain('fn.checkmark($checkbox-checkmark-color)')
+        expect(source).toContain('fn.indeterminate($checkbox-checkmark-color)')
+        expect(source).not.toContain(
+            'fn.checkmark(cv.getVar("checkbox-checkmark-color"))'
+        )
+        expect(source).not.toContain(
+            'fn.indeterminate(cv.getVar("checkbox-checkmark-color"))'
+        )
     })
 })

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/dropdown/Dropdown.spec.ts

@@ -226,4 +226,19 @@ describe('BDropdown', () => {
         expect(document.removeEventListener).toBeCalledWith('click', expect.any(Function))
         expect(document.removeEventListener).toBeCalledWith('keyup', expect.any(Function))
     })
+
+    it('removes is-clipped-touch on unmount while dropdown is open', async () => {
+        // Simulate dropdown open in mobile-modal mode (mobileModal defaults to
+        // true) so the isActive watcher calls handleScroll(), which adds
+        // is-clipped-touch to the html element.  Then destroy the component
+        // (e.g. route navigation) without closing it first.  The class must be
+        // removed so that scrolling is not permanently locked.
+        await wrapper.setData({ isActive: true })
+        // The isActive watcher triggers handleScroll() which adds the class.
+        expect(document.documentElement.classList.contains('is-clipped-touch')).toBe(true)
+
+        wrapper.unmount()
+
+        expect(document.documentElement.classList.contains('is-clipped-touch')).toBe(false)
+    })
 })

package/src/components/dropdown/Dropdown.vue

@@ -480,6 +480,11 @@ export default defineComponent({
         if (typeof window !== 'undefined') {
             document.removeEventListener('click', this.clickedOutside)
             document.removeEventListener('keyup', this.keyPress)
+            // Clean up scroll lock in case the component is destroyed while the
+            // dropdown is open (e.g., route navigation in a SPA). Without this,
+            // is-clipped-touch persists on the html element and permanently
+            // prevents scrolling on desktop browsers at mobile viewport widths.
+            document.documentElement.classList.remove('is-clipped-touch')
         }
         if (this.appendToBody) {
             removeElement(this.$data._bodyEl!)

package/src/scss/components/_checkbox.scss

@@ -31,25 +31,24 @@ $checkbox-colors: shared.$form-colors !default;
     "checkbox-border-width": #{$checkbox-border-width},
     "checkbox-checkmark-color": #{$checkbox-checkmark-color},
     "checkbox-size": #{$checkbox-size},
-    "checkbox-checkmark-image": #{url(fn.checkmark(cv.getVar("checkbox-checkmark-color")))},
-    "checkbox-indeterminate-image":  #{url(fn.indeterminate(cv.getVar("checkbox-checkmark-color")))} 
-
+    "checkbox-checkmark-image": #{url(fn.checkmark($checkbox-checkmark-color))},
+    "checkbox-indeterminate-image":  #{url(fn.indeterminate($checkbox-checkmark-color))} 
     )
   );
 
   &.checkbox input[type=checkbox] + .check {
 
     @each $name, $pair in $checkbox-colors {
-      $color: list.nth($pair, 1);
+      $color-invert: cv.getVar($name, "", "-invert");
 
       &.#{iv.$class-prefix}is-#{$name} {
         @include cv.register-vars(
           (
             "checkbox-active-background-color": #{cv.getVar($name)},
             "checkbox-border-color": #{cv.getVar($name)},
-            "checkbox-checkmark-color": #{cv.getVar($name, "", "-invert")},
-            "checkbox-checkmark-image": #{url(fn.checkmark(cv.getVar($name, "", "-invert")))},
-            "checkbox-indeterminate-image":  #{url(fn.indeterminate(cv.getVar($name, "", "-invert")))} 
+            "checkbox-checkmark-color": #{$color-invert},
+            "checkbox-checkmark-image": #{url(fn.checkmark($color-invert))},
+            "checkbox-indeterminate-image":  #{url(fn.indeterminate($color-invert))} 
           )
         );
       }
@@ -69,15 +68,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 +115,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

@@ -4,6 +4,7 @@
 @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: calc(iv.$desktop - 1px) !default;
 $dropdown-background-color: rgba(dv.$scheme-invert, 0.86) !default;

package/src/scss/components/_form.scss

@@ -18,7 +18,7 @@ $floating-in-height: 3.25em !default;
         .field {
             flex-shrink: 0;
             &:not(:last-child) {
-                margin-right: 0.75rem;
+                margin-inline-end: 0.75rem;
             }
             &.is-expanded {
                 flex-grow: 1;
@@ -32,16 +32,16 @@ $floating-in-height: 3.25em !default;
             .button,
             .input,
             .select select {
-                border-bottom-left-radius: cv.getVar('input-radius');
-                border-top-left-radius: cv.getVar('input-radius');
+                border-start-start-radius: cv.getVar('input-radius');
+                border-end-start-radius: cv.getVar('input-radius');
             }
         }
         &:last-child .control {
             .button,
             .input,
             .select select {
-                border-bottom-right-radius: cv.getVar('input-radius');
-                border-top-right-radius: cv.getVar('input-radius');
+                border-start-end-radius: cv.getVar('input-radius');
+                border-end-end-radius: cv.getVar('input-radius');
             }
         }
         .control {
@@ -60,8 +60,8 @@ $floating-in-height: 3.25em !default;
                     .button,
                     .input,
                     .select select {
-                        border-bottom-left-radius: 0;
-                        border-top-left-radius: 0;
+                        border-start-start-radius: 0;
+                        border-end-start-radius: 0;
                     }
                 }
             }
@@ -70,15 +70,15 @@ $floating-in-height: 3.25em !default;
                     .button,
                     .input,
                     .select select {
-                        border-bottom-right-radius: 0;
-                        border-top-right-radius: 0;
+                        border-start-end-radius: 0;
+                        border-end-end-radius: 0;
                     }
                 }
             }
         }
         &.b-numberinput {
             .control {
-                margin-right: unset;
+                margin-inline-end: unset;
             }
         }
     }
@@ -91,7 +91,7 @@ $floating-in-height: 3.25em !default;
 
         .label {
             position: absolute;
-            left: 1em;
+            inset-inline-start: 1em;
             font-size: calc(#{cv.getVar('size-normal')} * 0.75);
             background-color: transparent;
             z-index: 5;
@@ -112,7 +112,7 @@ $floating-in-height: 3.25em !default;
         }
         .taginput .counter {
             float: none;
-            text-align: right;
+            text-align: end;
         }
 
         &.has-addons {
@@ -121,8 +121,8 @@ $floating-in-height: 3.25em !default;
                     .button,
                     .input,
                     .select select {
-                        border-bottom-left-radius: cv.getVar('input-radius');
-                        border-top-left-radius: cv.getVar('input-radius');
+                        border-start-start-radius: cv.getVar('input-radius');
+                        border-end-start-radius: cv.getVar('input-radius');
                     }
                 }
             }
@@ -132,15 +132,15 @@ $floating-in-height: 3.25em !default;
     &.is-floating-label {
         .label {
             top: -0.775em;
-            padding-left: 0.125em;
-            padding-right: 0.125em;
+            padding-inline-start: 0.125em;
+            padding-inline-end: 0.125em;
             &:before {
                 content: '';
                 display: block;
                 position: absolute;
                 top: 0.775em;
-                left: 0;
-                right: 0;
+                inset-inline-start: 0;
+                inset-inline-end: 0;
                 height: 0.375em;
                 background-color: cv.getVar('input-background-color');
                 z-index: -1;
@@ -237,41 +237,41 @@ $floating-in-height: 3.25em !default;
     &.is-floating-label, &.is-floating-in-label {
         &.has-numberinput {
             .label {
-                margin-left: calc(#{cv.getVar('size-normal')} * 3);
+                margin-inline-start: calc(#{cv.getVar('size-normal')} * 3);
             }
             &.has-numberinput-is-small {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-small')} * 3);
+                    margin-inline-start: calc(#{cv.getVar('size-small')} * 3);
                 }
             }
             &.has-numberinput-is-medium {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-medium')} * 3);
+                    margin-inline-start: calc(#{cv.getVar('size-medium')} * 3);
                 }
             }
             &.has-numberinput-is-large {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-large')} * 3);
+                    margin-inline-start: calc(#{cv.getVar('size-large')} * 3);
                 }
             }
         }
         &.has-numberinput-compact {
             .label {
-                margin-left: calc(#{cv.getVar('size-normal')} * 2.25);
+                margin-inline-start: calc(#{cv.getVar('size-normal')} * 2.25);
             }
             &.has-numberinput-is-small {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-small')} * 2.25);
+                    margin-inline-start: calc(#{cv.getVar('size-small')} * 2.25);
                 }
             }
             &.has-numberinput-is-medium {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-medium')} * 2.25);
+                    margin-inline-start: calc(#{cv.getVar('size-medium')} * 2.25);
                 }
             }
             &.has-numberinput-is-large {
                 .label {
-                    margin-left: calc(#{cv.getVar('size-large')} * 2.25);
+                    margin-inline-start: calc(#{cv.getVar('size-large')} * 2.25);
                 }
             }
         }
@@ -280,13 +280,13 @@ $floating-in-height: 3.25em !default;
         &.is-floating-in-label {
             .label {
                 position: relative;
-                left: calc(3.25em + 2em);
+                inset-inline-start: calc(3.25em + 2em);
             }
         }
         &.is-floating-label {
             .label {
                 position: relative;
-                left: calc(3.25em + 2em);
+                inset-inline-start: calc(3.25em + 2em);
             }
         }
     }
@@ -294,8 +294,8 @@ $floating-in-height: 3.25em !default;
 
 .#{iv.$class-prefix}control {
     .help.counter {
-        float: right;
-        margin-left: 0.5em;
+        float: inline-end;
+        margin-inline-start: 0.5em;
     }
     .icon {
         &.is-clickable {
@@ -306,6 +306,6 @@ $floating-in-height: 3.25em !default;
     // fix Bulma 0.8.2
     &.is-loading::after {
         top: calc(50% - (1em * 0.5));
-        right: calc((2.5em * 0.5) - .5em);
+        inset-inline-end: calc((2.5em * 0.5) - .5em);
     }
 }

package/src/scss/components/_radio.scss

@@ -42,18 +42,18 @@ $radio-shadow: cv.getVar('shadow') !default;
         display: inline-flex;
         align-items: center;
         &:not(.button) {
-            margin-right: 0.5em;
+            margin-inline-end: 0.5em;
             & + .radio:last-child {
-                margin-right: 0;
+                margin-inline-end: 0;
             }
         }
         // reset Bulma
         & + .radio {
-            margin-left: 0;
+            margin-inline-start: 0;
         }
         input[type=radio] {
             position: absolute;
-            left: 0;
+            inset-inline-start: 0;
             opacity: 0;
             outline: none;
             z-index: -1;
@@ -71,10 +71,10 @@ $radio-shadow: cv.getVar('shadow') !default;
                     content: "";
                     display: flex;
                     position: absolute;
-                    left: 50%;
-                    margin-left: calc(#{cv.getVar('radio-size')} * -0.5);
-                    bottom: 50%;
-                    margin-bottom: calc(#{ cv.getVar('radio-size')} * -0.5);
+                    inset-inline-start: 50%;
+                    margin-inline-start: calc(#{cv.getVar('radio-size')} * -0.5);
+                    inset-block-end: 50%;
+                    margin-block-end: calc(#{ cv.getVar('radio-size')} * -0.5);
                     width:  cv.getVar('radio-size');
                     height:  cv.getVar('radio-size');
                     transition: transform  cv.getVar('speed-slow')  cv.getVar('easing');
@@ -102,7 +102,7 @@ $radio-shadow: cv.getVar('shadow') !default;
             }
         }
         .control-label {
-            padding-left:  cv.getVar('control-padding-horizontal');
+            padding-inline-start:  cv.getVar('control-padding-horizontal');
         }
         &.button {
             display: flex;