@robuust-digital/vue-components 2.2.1 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 2.3.0 (31-10-2025)
+
+### Changed
+
+* Refactor `Checkbox` and `Radio` input structure and styles
+* Improved accessibility for `Checkbox` and `Radio` components
+* Improve `Checkbox` and `Radio` input layout styles
+* Update `Checkbox` and `Radio` prop documentation
+
+### Deprecated
+
+* `Checkbox` and `Radio` `<slot name="input">` slot
+
 ## 2.2.1 (15-10-2025)
 
 ### Changed

package/dist/_shared/{ButtonBase.vue_vue_type_script_setup_true_lang-DeflHqux.js → ButtonBase.vue_vue_type_script_setup_true_lang-BLm8QzEC.js}

@@ -1,9 +1,9 @@
-import { defineComponent as b, watchEffect as p, createBlock as l, openBlock as e, resolveDynamicComponent as s, mergeProps as c, withCtx as d, createElementBlock as f, renderSlot as o, createCommentVNode as a, createTextVNode as t, toDisplayString as r, unref as y } from "vue";
-import { S as m } from "./icon-spinner-CP0VP_YM.js";
-const v = {
+import { defineComponent as b, watchEffect as r, createBlock as a, openBlock as l, resolveDynamicComponent as c, mergeProps as d, withCtx as f, createElementBlock as y, renderSlot as t, createCommentVNode as i, createTextVNode as u, toDisplayString as s, unref as m } from "vue";
+import { S as v } from "./icon-spinner-CP0VP_YM.js";
+const g = {
   key: 0,
   class: "rvc-button-label"
-}, O = /* @__PURE__ */ b({
+}, k = /* @__PURE__ */ b({
   __name: "ButtonBase",
   props: {
     as: { default: "button" },
@@ -16,39 +16,39 @@ const v = {
     spinning: { type: Boolean, default: !1 },
     color: { default: "primary" }
   },
-  setup(u) {
-    const i = u;
-    return p(() => {
-      i.iconOnly && !i.icon && console.warn("[ButtonBase] Using iconOnly prop without providing an icon may result in an empty button.");
-    }), (n, g) => (e(), l(s(n.as), c(n.bindAs ? { as: n.bindAs } : {}, {
+  setup(n) {
+    const o = n;
+    return r(() => {
+      o.iconOnly && !o.icon && console.warn("[ButtonBase] Using iconOnly prop without providing an icon may result in an empty button.");
+    }), (e, B) => (l(), a(c(n.as), d(n.bindAs ? { as: n.bindAs } : {}, {
       class: ["rvc-button", `rvc-button-${n.color}`, `rvc-button-${n.size}`, { "rvc-button-reverse": n.iconLeft }, { "rvc-button-icon-only": n.iconOnly }],
       "aria-label": n.iconOnly ? n.label : null,
       "aria-busy": n.spinning
     }), {
-      default: d(() => [
-        n.iconOnly && n.label ? (e(), f("span", v, [
-          o(n.$slots, "default", { label: n.label }, () => [
-            t(r(n.label), 1)
+      default: f(() => [
+        n.iconOnly && n.label ? (l(), y("span", g, [
+          t(e.$slots, "default", { label: n.label }, () => [
+            u(s(n.label), 1)
           ])
-        ])) : n.label ? o(n.$slots, "default", {
+        ])) : n.label ? t(e.$slots, "default", {
           key: 1,
           label: n.label
         }, () => [
-          t(r(n.label), 1)
-        ]) : a("", !0),
-        o(n.$slots, "icon", { icon: n.icon }, () => [
-          n.icon && !n.spinning ? (e(), l(s(n.icon), {
+          u(s(n.label), 1)
+        ]) : i("", !0),
+        t(e.$slots, "icon", { icon: n.icon }, () => [
+          n.icon && !n.spinning ? (l(), a(c(n.icon), {
             key: 0,
             class: "rvc-button-icon",
             "aria-hidden": !n.iconOnly
-          }, null, 8, ["aria-hidden"])) : a("", !0)
+          }, null, 8, ["aria-hidden"])) : i("", !0)
         ]),
-        o(n.$slots, "spinner", { spinning: n.spinning }, () => [
-          n.spinning ? (e(), l(y(m), {
+        t(e.$slots, "spinner", { spinning: n.spinning }, () => [
+          n.spinning ? (l(), a(m(v), {
             key: 0,
             class: "rvc-button-icon rvc-button-icon-loading",
             "aria-hidden": "true"
-          })) : a("", !0)
+          })) : i("", !0)
         ])
       ]),
       _: 3
@@ -56,5 +56,5 @@ const v = {
   }
 });
 export {
-  O as _
+  k as _
 };

package/dist/_shared/{ChevronDownIcon-DaaXfD3C.js → ChevronDownIcon-CcE_K1lg.js}

@@ -1,5 +1,5 @@
-import { defineComponent as r, createBlock as o, openBlock as a, resolveDynamicComponent as t, normalizeClass as n, withCtx as s, renderSlot as d, createTextVNode as c, toDisplayString as i, createElementBlock as u, createElementVNode as p } from "vue";
-const v = /* @__PURE__ */ r({
+import { defineComponent as t, createBlock as r, openBlock as l, resolveDynamicComponent as o, normalizeClass as n, withCtx as c, renderSlot as d, createTextVNode as s, toDisplayString as i, createElementBlock as u, createElementVNode as f } from "vue";
+const b = /* @__PURE__ */ t({
   __name: "Badge",
   props: {
     as: { default: "span" },
@@ -7,28 +7,28 @@ const v = /* @__PURE__ */ r({
     size: { default: "base" },
     color: { default: "default" }
   },
-  setup(l) {
-    return (e, f) => (a(), o(t(e.as), {
+  setup(e) {
+    return (a, m) => (l(), r(o(e.as), {
       class: n(["rvc-badge", `rvc-badge-${e.color}`, `rvc-badge-${e.size}`])
     }, {
-      default: s(() => [
-        d(e.$slots, "default", { label: e.label }, () => [
-          c(i(e.label), 1)
+      default: c(() => [
+        d(a.$slots, "default", { label: e.label }, () => [
+          s(i(e.label), 1)
         ])
       ]),
       _: 3
     }, 8, ["class"]));
   }
 });
-function b(l, e) {
-  return a(), u("svg", {
+function g(e, a) {
+  return l(), u("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor",
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    p("path", {
+    f("path", {
       "fill-rule": "evenodd",
       d: "M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z",
       "clip-rule": "evenodd"
@@ -36,6 +36,6 @@ function b(l, e) {
   ]);
 }
 export {
-  v as _,
-  b as r
+  b as _,
+  g as r
 };

package/dist/_shared/Combobox.vue_vue_type_script_setup_true_lang-CxRv55TC.js

@@ -0,0 +1,256 @@
+import { createElementBlock as c, openBlock as n, createElementVNode as i, defineComponent as j, ref as h, computed as D, createBlock as x, unref as r, mergeProps as F, withCtx as g, createCommentVNode as p, renderSlot as m, createVNode as b, resolveDynamicComponent as O, withModifiers as P, Fragment as q, renderList as z, createTextVNode as U, toDisplayString as w, normalizeClass as G } from "vue";
+import { useDebounceFn as H } from "@vueuse/core";
+import { Combobox as J, ComboboxInput as Q, ComboboxButton as W, ComboboxOptions as X, ComboboxOption as Y } from "@headlessui/vue";
+import { r as _, _ as ee } from "./ChevronDownIcon-CcE_K1lg.js";
+import { S as te } from "./icon-spinner-CP0VP_YM.js";
+function le(e, V) {
+  return n(), c("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    i("path", {
+      "fill-rule": "evenodd",
+      d: "M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function oe(e, V) {
+  return n(), c("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    i("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+  ]);
+}
+const ae = { class: "rvc-combobox-container" }, ne = { class: "rvc-combobox-wrapper" }, ie = { class: "rvc-combobox-field" }, ue = {
+  key: 0,
+  class: "rvc-combobox-chips"
+}, se = ["onClick"], re = {
+  key: 0,
+  class: "rvc-combobox-content"
+}, ce = {
+  key: 1,
+  class: "rvc-combobox-content"
+}, de = { class: "rvc-combobox-option-text" }, he = /* @__PURE__ */ j({
+  inheritAttrs: !1,
+  __name: "Combobox",
+  props: {
+    id: {},
+    rootClass: { default: "" },
+    modelValue: { default: null },
+    endpoint: { default: void 0 },
+    requestParams: { default: () => ({}) },
+    manualInput: { type: Boolean, default: !1 },
+    responseData: { type: Function, default: (e) => e },
+    displayValue: { type: Function, default: (e) => e?.name || null },
+    optionText: { type: Function, default: (e) => e?.name || null },
+    disabled: { type: Boolean, default: !1 },
+    minLength: { default: 2 },
+    itemKey: { default: "id" },
+    clearable: { type: Boolean, default: !1 },
+    rootAttrs: { default: () => ({}) },
+    multiple: { type: Boolean, default: !1 },
+    onSearch: { type: Function, default: () => Promise.resolve({ data: [] }) },
+    searchOnly: { type: Boolean, default: !1 },
+    icon: { type: [Function, Object, null], default: null },
+    prefixIcon: { type: [Function, Object, null], default: null },
+    size: { default: "base" },
+    debounce: { default: 150 },
+    minLoadingTime: { default: 0 },
+    onCancel: { type: Function, default: void 0 }
+  },
+  emits: ["update:modelValue", "update:requestParams", "combobox:noResults", "combobox:error"],
+  setup(e, { emit: V }) {
+    const a = e, d = V, u = h([]), v = h(!1), f = h(null), L = h(!0), k = h(null), s = D({
+      get: () => a.multiple ? a.modelValue || [] : a.modelValue,
+      set: (t) => d("update:modelValue", t)
+    }), T = D({
+      get: () => a.requestParams,
+      set: (t) => d("update:requestParams", t)
+    }), N = (t) => a.displayValue(t) || "", M = (t) => new Promise((o) => {
+      setTimeout(o, t);
+    }), A = (t, o) => {
+      u.value = [], d("combobox:error", t), d("combobox:noResults", o);
+    }, B = async (t) => {
+      if (!a.onSearch) return;
+      if (a.searchOnly && !t) {
+        u.value = [];
+        return;
+      }
+      if (t && t.length < a.minLength) {
+        u.value = [];
+        return;
+      }
+      k.value && a.onCancel && a.onCancel(k.value), v.value = !0;
+      const o = Date.now();
+      try {
+        const { data: l, error: y, cancel: Z } = await a.onSearch(t, T.value, a.endpoint);
+        k.value = Z || null;
+        const $ = a.responseData(l), K = Date.now() - o;
+        !$.length && y && A(y, t), K < a.minLoadingTime && await M(a.minLoadingTime - K), $?.length ? u.value = $ : (u.value = [], d("combobox:noResults", t));
+      } catch (l) {
+        l?.cancelled || A(l, t);
+      } finally {
+        v.value = !1;
+      }
+    }, R = H(B, a.debounce), I = (t) => {
+      L.value ? (L.value = !1, B(t)) : R(t);
+    }, E = (t) => {
+      t.target.value?.length === 0 && (u.value = [], d("update:modelValue", null)), a.manualInput && d("update:modelValue", T.value.query);
+    }, C = (t) => a.multiple ? s.value.some((o) => o[a.itemKey] === t) : s.value?.[a.itemKey] === t, S = (t) => {
+      s.value = s.value.filter((o) => o[a.itemKey] !== t[a.itemKey]);
+    };
+    return (t, o) => (n(), x(r(J), F({
+      modelValue: s.value,
+      "onUpdate:modelValue": o[4] || (o[4] = (l) => s.value = l),
+      as: "div"
+    }, e.rootAttrs, {
+      multiple: e.multiple,
+      class: [
+        "rvc-combobox",
+        `rvc-combobox-${e.size}`,
+        e.rootClass
+      ]
+    }), {
+      default: g(() => [
+        i("div", ae, [
+          i("div", ne, [
+            i("div", ie, [
+              e.prefixIcon ? m(t.$slots, "prefixIcon", {
+                key: 0,
+                icon: e.prefixIcon
+              }, () => [
+                (n(), x(O(e.prefixIcon), { "aria-hidden": "true" }))
+              ]) : p("", !0),
+              b(r(Q), F(t.$attrs, {
+                id: e.id,
+                "display-value": N,
+                disabled: e.disabled,
+                autocomplete: "off",
+                onChange: o[0] || (o[0] = (l) => I(l.target.value)),
+                onSearch: E,
+                onInput: o[1] || (o[1] = (l) => f.value = l.target.value)
+              }), null, 16, ["id", "disabled"]),
+              b(r(W), {
+                disabled: e.disabled,
+                class: "rvc-combobox-button",
+                onClick: o[2] || (o[2] = (l) => I(f.value || null))
+              }, {
+                default: g(() => [
+                  v.value ? m(t.$slots, "spinner", {
+                    key: 0,
+                    spinning: v.value
+                  }, () => [
+                    b(r(te), { class: "rvc-combobox-spinner" })
+                  ]) : (!e.searchOnly || u.value?.length) && !v.value ? m(t.$slots, "icon", {
+                    key: 1,
+                    icon: e.icon
+                  }, () => [
+                    (n(), x(O(e.icon ?? r(_)), { "aria-hidden": "true" }))
+                  ]) : p("", !0)
+                ]),
+                _: 3
+              }, 8, ["disabled"])
+            ]),
+            e.clearable && (Array.isArray(e.modelValue) ? e.modelValue?.length : e.modelValue?.id) ? (n(), c("button", {
+              key: 0,
+              type: "button",
+              "aria-label": "Clear selection",
+              class: "rvc-combobox-clear",
+              onClick: o[3] || (o[3] = P((l) => d("update:modelValue", e.multiple ? [] : null), ["prevent"]))
+            }, [
+              m(t.$slots, "clear", {}, () => [
+                b(r(oe))
+              ])
+            ])) : p("", !0)
+          ]),
+          e.multiple && Array.isArray(s.value) && s.value?.length ? (n(), c("ul", ue, [
+            (n(!0), c(q, null, z(s.value, (l) => (n(), c("li", {
+              key: `${e.id}-selected-option-${l[e.itemKey]}`
+            }, [
+              m(t.$slots, "chip", {
+                optionText: e.optionText(l),
+                option: l,
+                removeOption: S
+              }, () => [
+                b(ee, {
+                  color: "gray",
+                  class: "rvc-combobox-chip",
+                  size: e.size
+                }, {
+                  default: g(() => [
+                    U(w(e.optionText(l)) + " ", 1),
+                    i("button", {
+                      type: "button",
+                      "aria-label": "Remove option",
+                      onClick: P((y) => S(l), ["prevent"])
+                    }, [
+                      b(r(le))
+                    ], 8, se)
+                  ]),
+                  _: 2
+                }, 1032, ["size"])
+              ])
+            ]))), 128))
+          ])) : p("", !0),
+          (!e.searchOnly || f.value?.length) && (!v.value || u.value.length) ? (n(), x(r(X), {
+            key: 1,
+            class: "rvc-combobox-options"
+          }, {
+            default: g(() => [
+              f.value && f.value.length < e.minLength ? (n(), c("div", re, [
+                i("div", null, [
+                  i("em", null, "Minimal " + w(e.minLength) + " characters.", 1)
+                ])
+              ])) : !v.value && !u.value.length ? (n(), c("div", ce, [...o[5] || (o[5] = [
+                i("div", null, " No results found. ", -1)
+              ])])) : (n(!0), c(q, { key: 2 }, z(u.value, (l) => (n(), x(r(Y), {
+                key: `option-${l[e.itemKey]}`,
+                value: l,
+                as: "template"
+              }, {
+                default: g(({ active: y }) => [
+                  i("li", {
+                    class: G([
+                      "rvc-combobox-option",
+                      { "rvc-combobox-option-hover": y },
+                      { "rvc-combobox-option-active": C(l[e.itemKey]) }
+                    ])
+                  }, [
+                    m(t.$slots, "option", {
+                      option: l,
+                      isActive: C
+                    }, () => [
+                      m(t.$slots, "optionPrefix", {
+                        option: l[e.itemKey],
+                        isActive: C
+                      }),
+                      i("span", de, w(e.optionText(l)), 1),
+                      m(t.$slots, "optionSuffix", {
+                        option: l[e.itemKey],
+                        isActive: C
+                      })
+                    ])
+                  ], 2)
+                ]),
+                _: 2
+              }, 1032, ["value"]))), 128))
+            ]),
+            _: 3
+          })) : p("", !0)
+        ])
+      ]),
+      _: 3
+    }, 16, ["modelValue", "multiple", "class"]));
+  }
+});
+export {
+  he as _
+};

package/dist/_shared/{Drawer.vue_vue_type_script_setup_true_lang-CD5914Fk.js → Drawer.vue_vue_type_script_setup_true_lang-XMND_Yzl.js}

@@ -1,8 +1,8 @@
-import { defineComponent as S, createBlock as w, openBlock as d, unref as a, withCtx as i, createVNode as s, withModifiers as L, createElementVNode as t, normalizeClass as c, createElementBlock as u, renderSlot as n, createCommentVNode as m, createTextVNode as T, toDisplayString as F } from "vue";
-import { TransitionRoot as N, Dialog as V, TransitionChild as b, DialogPanel as R, DialogTitle as y } from "@headlessui/vue";
-import { _ as k } from "./ButtonBase.vue_vue_type_script_setup_true_lang-DeflHqux.js";
-import { u as A } from "./Modal.vue_vue_type_script_setup_true_lang-CoHkAJj3.js";
-import { r as C } from "./XMarkIcon-90mcPzBs.js";
+import { defineComponent as S, createBlock as m, openBlock as c, unref as t, withCtx as d, createVNode as s, withModifiers as L, createElementVNode as a, normalizeClass as w, createElementBlock as b, renderSlot as i, createCommentVNode as y, createTextVNode as T, toDisplayString as F } from "vue";
+import { TransitionRoot as N, Dialog as V, TransitionChild as k, DialogPanel as R, DialogTitle as p } from "@headlessui/vue";
+import { _ as C } from "./ButtonBase.vue_vue_type_script_setup_true_lang-BLm8QzEC.js";
+import { u as A } from "./Modal.vue_vue_type_script_setup_true_lang-2AljJgxw.js";
+import { r as g } from "./XMarkIcon-90mcPzBs.js";
 const H = {
   class: "rvc-drawer-presentation",
   role: "presentation"
@@ -26,30 +26,30 @@ const H = {
     resetFooter: { type: Boolean, default: !1 }
   },
   emits: ["drawer:open", "drawer:opened", "drawer:close", "drawer:save", "drawer:closed"],
-  setup(g, { emit: $ }) {
-    const B = g, o = $, {
+  setup(e, { emit: $ }) {
+    const B = e, l = $, {
       contentRef: h,
       ready: v,
       isForm: D,
       titleId: f,
-      descriptionId: p,
+      descriptionId: u,
       initialFocusElement: E
     } = A(B);
-    return (e, r) => (d(), w(a(N), { as: "template" }, {
-      default: i(() => [
-        s(a(V), {
+    return (n, r) => (c(), m(t(N), { as: "template" }, {
+      default: d(() => [
+        s(t(V), {
           as: e.as,
           class: "rvc-drawer",
           static: "",
           "aria-modal": "true",
           role: "dialog",
-          "initial-focus": a(E),
-          "aria-labelledby": a(f),
-          onClose: r[6] || (r[6] = (l) => o("drawer:close")),
-          onSubmit: r[7] || (r[7] = L((l) => o("drawer:save", l), ["prevent"]))
+          "initial-focus": t(E),
+          "aria-labelledby": t(f),
+          onClose: r[6] || (r[6] = (o) => l("drawer:close")),
+          onSubmit: r[7] || (r[7] = L((o) => l("drawer:save", o), ["prevent"]))
         }, {
-          default: i(() => [
-            s(a(b), {
+          default: d(() => [
+            s(t(k), {
               as: "template",
               enter: "rvc-drawer-backdrop-transition-enter",
               "enter-from": "rvc-drawer-backdrop-transition-enter-from",
@@ -57,21 +57,21 @@ const H = {
               leave: "rvc-drawer-backdrop-transition-leave",
               "leave-from": "rvc-drawer-backdrop-transition-leave-from",
               "leave-to": "rvc-drawer-backdrop-transition-leave-to",
-              onBeforeEnter: r[0] || (r[0] = (l) => o("drawer:open")),
-              onAfterEnter: r[1] || (r[1] = (l) => o("drawer:opened"))
+              onBeforeEnter: r[0] || (r[0] = (o) => l("drawer:open")),
+              onAfterEnter: r[1] || (r[1] = (o) => l("drawer:opened"))
             }, {
-              default: i(() => [...r[8] || (r[8] = [
-                t("div", {
+              default: d(() => [...r[8] || (r[8] = [
+                a("div", {
                   class: "rvc-drawer-backdrop",
                   "aria-hidden": "true"
                 }, null, -1)
               ])]),
               _: 1
             }),
-            t("div", H, [
-              t("div", I, [
-                t("div", z, [
-                  s(a(b), {
+            a("div", H, [
+              a("div", I, [
+                a("div", z, [
+                  s(t(k), {
                     as: "template",
                     enter: "rvc-drawer-transition-enter",
                     "enter-from": "rvc-drawer-transition-enter-from",
@@ -79,87 +79,87 @@ const H = {
                     leave: "rvc-drawer-transition-leave",
                     "leave-from": "rvc-drawer-transition-leave-from",
                     "leave-to": "rvc-drawer-transition-leave-to",
-                    onBeforeEnter: r[4] || (r[4] = (l) => v.value = !0),
-                    onAfterLeave: r[5] || (r[5] = (l) => (v.value = !1, o("drawer:closed")))
+                    onBeforeEnter: r[4] || (r[4] = (o) => v.value = !0),
+                    onAfterLeave: r[5] || (r[5] = (o) => (v.value = !1, l("drawer:closed")))
                   }, {
-                    default: i(() => [
-                      s(a(R), {
-                        class: c(["rvc-drawer-panel", e.panelClass]),
+                    default: d(() => [
+                      s(t(R), {
+                        class: w(["rvc-drawer-panel", e.panelClass]),
                         "aria-busy": e.spinning,
-                        "aria-describedby": a(p)
+                        "aria-describedby": t(u)
                       }, {
-                        default: i(() => [
-                          t("div", M, [
-                            e.resetHeader ? n(e.$slots, "header", { key: 1 }) : (d(), u("header", {
+                        default: d(() => [
+                          a("div", M, [
+                            e.resetHeader ? i(n.$slots, "header", { key: 1 }) : (c(), b("header", {
                               key: 0,
-                              class: c([{ "rvc-drawer-header-sticky": e.headerSticky }, "rvc-drawer-header"])
+                              class: w([{ "rvc-drawer-header-sticky": e.headerSticky }, "rvc-drawer-header"])
                             }, [
-                              n(e.$slots, "header", {
+                              i(n.$slots, "header", {
                                 title: e.title,
                                 showClose: e.showClose
                               }, () => [
-                                t("div", P, [
-                                  n(e.$slots, "title", {
-                                    id: a(f),
-                                    dialogTitle: a(y),
+                                a("div", P, [
+                                  i(n.$slots, "title", {
+                                    id: t(f),
+                                    dialogTitle: t(p),
                                     title: e.title
                                   }, () => [
-                                    s(a(y), {
-                                      id: a(f),
+                                    s(t(p), {
+                                      id: t(f),
                                       class: "rvc-drawer-title"
                                     }, {
-                                      default: i(() => [
+                                      default: d(() => [
                                         T(F(e.title), 1)
                                       ]),
                                       _: 1
                                     }, 8, ["id"])
                                   ]),
-                                  e.showClose ? n(e.$slots, "close", {
+                                  e.showClose ? i(n.$slots, "close", {
                                     key: 0,
-                                    icon: a(C),
-                                    emitClose: () => o("drawer:close")
+                                    icon: t(g),
+                                    emitClose: () => l("drawer:close")
                                   }, () => [
-                                    t("div", j, [
-                                      t("button", {
+                                    a("div", j, [
+                                      a("button", {
                                         type: "button",
                                         class: "rvc-drawer-close",
                                         "aria-label": "Close panel",
-                                        onClick: r[2] || (r[2] = (l) => o("drawer:close"))
+                                        onClick: r[2] || (r[2] = (o) => l("drawer:close"))
                                       }, [
-                                        s(a(C), { "aria-hidden": "true" })
+                                        s(t(g), { "aria-hidden": "true" })
                                       ])
                                     ])
-                                  ]) : m("", !0)
+                                  ]) : y("", !0)
                                 ])
                               ])
                             ], 2)),
-                            t("div", {
-                              class: c([{ "rvc-drawer-scroll-reverse": e.scrolledDown }, "rvc-drawer-scroll"])
+                            a("div", {
+                              class: w([{ "rvc-drawer-scroll-reverse": e.scrolledDown }, "rvc-drawer-scroll"])
                             }, [
-                              t("div", {
-                                id: a(p),
+                              a("div", {
+                                id: t(u),
                                 ref_key: "contentRef",
                                 ref: h,
                                 class: "rvc-drawer-content"
                               }, [
-                                n(e.$slots, "default", { ready: a(v) })
+                                i(n.$slots, "default", { ready: t(v) })
                               ], 8, q)
                             ], 2),
-                            e.resetFooter ? n(e.$slots, "footer", { key: 3 }) : (d(), u("footer", G, [
-                              n(e.$slots, "footer", { loading: e.spinning }, () => [
-                                s(k, {
+                            e.resetFooter ? i(n.$slots, "footer", { key: 3 }) : (c(), b("footer", G, [
+                              i(n.$slots, "footer", { loading: e.spinning }, () => [
+                                s(C, {
                                   type: "button",
                                   label: e.cancelLabel,
                                   color: "light",
-                                  onClick: r[3] || (r[3] = (l) => o("drawer:close"))
+                                  onClick: r[3] || (r[3] = (o) => l("drawer:close"))
                                 }, null, 8, ["label"]),
-                                a(D) ? (d(), w(k, {
+                                t(D) ? (c(), m(C, {
                                   key: 0,
                                   type: "submit",
                                   label: e.submitLabel,
                                   spinning: e.spinning,
                                   disabled: e.spinning
-                                }, null, 8, ["label", "spinning", "disabled"])) : m("", !0)
+                                }, null, 8, ["label", "spinning", "disabled"])) : y("", !0)
                               ])
                             ]))
                           ])