maz-ui 3.47.2-beta.9 → 3.48.0

package/components/MazAccordion.mjs

@@ -1,4 +1,4 @@
-import { openBlock as p, createElementBlock as b, createElementVNode as c, useId as V, computed as g, defineComponent as w, ref as f, onMounted as O, onUnmounted as B, normalizeClass as $, normalizeStyle as k, renderSlot as h, withDirectives as E, vShow as z, mergeModels as A, useModel as x, mergeProps as I, useSlots as L, Fragment as j, renderList as F, createBlock as N, withCtx as M, unref as y, createVNode as S } from "vue";
+import { openBlock as p, createElementBlock as g, createElementVNode as u, computed as $, useId as V, defineComponent as w, ref as f, onMounted as O, onUnmounted as B, normalizeClass as b, normalizeStyle as k, renderSlot as h, withDirectives as E, vShow as z, mergeModels as A, useModel as x, mergeProps as I, useSlots as L, Fragment as j, renderList as F, createBlock as N, withCtx as M, unref as y, createVNode as S } from "vue";
 import './assets/MazAccordion.css';const R = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "1em",
@@ -6,9 +6,9 @@ import './assets/MazAccordion.css';const R = {
   fill: "none",
   viewBox: "0 0 24 24"
 };
-function P(r, n) {
-  return p(), b("svg", R, n[0] || (n[0] = [
-    c(
+function P(r, t) {
+  return p(), g("svg", R, t[0] || (t[0] = [
+    u(
       "path",
       {
         stroke: "currentColor",
@@ -26,10 +26,9 @@ function P(r, n) {
 const T = { render: P };
 function U({
   componentName: r,
-  providedId: n
+  providedId: t
 }) {
-  const o = V();
-  return g(() => n ?? `${r}-${o}`);
+  return $(() => t ?? `${r}-${V().replace(/:/g, "")}`);
 }
 const q = { class: "inner" }, D = /* @__PURE__ */ w({
   __name: "MazCardSpotlight",
@@ -42,16 +41,16 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
     innerOpacity: { default: 0.95 }
   },
   setup(r) {
-    const n = r, o = f(), a = f(), s = f(!1);
-    function m({ clientX: d, clientY: u }) {
-      var e, _, t;
+    const t = r, l = f(), o = f(), s = f(!1);
+    function m({ clientX: d, clientY: c }) {
+      var e, _, n;
       s.value = !0;
-      const v = (e = a.value) == null ? void 0 : e.getBoundingClientRect();
-      v && ((t = (_ = o.value) == null ? void 0 : _.animate) == null || t.call(
+      const v = (e = o.value) == null ? void 0 : e.getBoundingClientRect();
+      v && ((n = (_ = l.value) == null ? void 0 : _.animate) == null || n.call(
         _,
         [
           {
-            transform: `translate(${d - v.left - v.width / 2}px,${u - v.top - v.height / 2}px)`
+            transform: `translate(${d - v.left - v.width / 2}px,${c - v.top - v.height / 2}px)`
           }
         ],
         {
@@ -60,23 +59,23 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
         }
       ));
     }
-    const l = g(() => `var(--maz-color-${n.color}-alpha)`), i = g(() => `var(--maz-color-${n.color}-alpha-20)`);
+    const a = $(() => `var(--maz-color-${t.color}-alpha)`), i = $(() => `var(--maz-color-${t.color}-alpha-20)`);
     return O(() => {
       window.addEventListener("mousemove", m);
     }), B(() => {
       window.removeEventListener("mousemove", m);
-    }), (d, u) => (p(), b(
+    }), (d, c) => (p(), g(
       "div",
       {
-        class: $(["m-card-spotlight", { "maz-elevation": !d.noElevation }]),
+        class: b(["m-card-spotlight m-reset-css", { "maz-elevation": !d.noElevation }]),
         style: k({ backgroundColor: i.value, "--inner-opacity": d.innerOpacity })
       },
       [
-        c("div", q, [
-          c(
+        u("div", q, [
+          u(
             "div",
             {
-              class: $(["content", [{ "maz-p-4": d.padding }, d.contentClass]])
+              class: b(["content", [{ "maz-p-4": d.padding }, d.contentClass]])
             },
             [
               h(d.$slots, "default", {}, void 0, !0)
@@ -85,13 +84,13 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
             /* CLASS */
           )
         ]),
-        E(c(
+        E(u(
           "div",
           {
             ref_key: "blobElement",
-            ref: o,
+            ref: l,
             class: "blob",
-            style: k({ backgroundColor: l.value })
+            style: k({ backgroundColor: a.value })
           },
           null,
           4
@@ -99,11 +98,11 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
         ), [
           [z, s.value]
         ]),
-        E(c(
+        E(u(
           "div",
           {
             ref_key: "fakeblobElement",
-            ref: a,
+            ref: o,
             class: "fakeblob"
           },
           null,
@@ -117,12 +116,12 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
       /* CLASS, STYLE */
     ));
   }
-}), C = (r, n) => {
-  const o = r.__vccOpts || r;
-  for (const [a, s] of n)
-    o[a] = s;
-  return o;
-}, H = /* @__PURE__ */ C(D, [["__scopeId", "data-v-30c7054c"]]), W = ["aria-hidden"], G = /* @__PURE__ */ w({
+}), C = (r, t) => {
+  const l = r.__vccOpts || r;
+  for (const [o, s] of t)
+    l[o] = s;
+  return l;
+}, H = /* @__PURE__ */ C(D, [["__scopeId", "data-v-4f773edc"]]), W = ["aria-hidden"], G = /* @__PURE__ */ w({
   inheritAttrs: !1,
   __name: "MazExpandAnimation",
   props: /* @__PURE__ */ A({
@@ -134,44 +133,44 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
   }),
   emits: ["update:modelValue"],
   setup(r) {
-    const n = x(r, "modelValue"), o = f(!n.value), a = f();
+    const t = x(r, "modelValue"), l = f(!t.value), o = f();
     function s() {
-      n.value || (o.value = !0);
+      t.value || (l.value = !0);
     }
     function m() {
-      n.value && (o.value = !1);
+      t.value && (l.value = !1);
     }
     return O(() => {
-      var l, i;
-      (l = a.value) == null || l.addEventListener("transitionstart", s, !1), (i = a.value) == null || i.addEventListener("transitionend", m, !1);
+      var a, i;
+      (a = o.value) == null || a.addEventListener("transitionstart", s, !1), (i = o.value) == null || i.addEventListener("transitionend", m, !1);
     }), B(() => {
-      var l, i;
-      (l = a.value) == null || l.removeEventListener("transitionstart", s, !1), (i = a.value) == null || i.removeEventListener("transitionend", m, !1);
-    }), (l, i) => (p(), b("div", {
+      var a, i;
+      (a = o.value) == null || a.removeEventListener("transitionstart", s, !1), (i = o.value) == null || i.removeEventListener("transitionend", m, !1);
+    }), (a, i) => (p(), g("div", {
       ref_key: "expandAnimationRef",
-      ref: a,
-      class: $(["m-expand-animation", { "m-expand-animation--expanded": n.value }]),
-      "aria-hidden": !n.value,
+      ref: o,
+      class: b(["m-expand-animation m-reset-css", { "m-expand-animation--expanded": t.value }]),
+      "aria-hidden": !t.value,
       role: "region",
-      style: k([{ "--expand-animation-duration": l.duration, "--expand-animation-timing-function": l.timingFunction }])
+      style: k([{ "--expand-animation-duration": a.duration, "--expand-animation-timing-function": a.timingFunction }])
     }, [
-      c(
+      u(
         "div",
-        I({ class: "m-expand-animation__inner" }, l.$attrs, {
+        I({ class: "m-expand-animation__inner" }, a.$attrs, {
           class: {
-            "--overflow-hidden": o.value
+            "--overflow-hidden": l.value
           }
         }),
         [
-          h(l.$slots, "default", {}, void 0, !0)
+          h(a.$slots, "default", {}, void 0, !0)
         ],
         16
         /* FULL_PROPS */
       )
     ], 14, W));
   }
-}), J = /* @__PURE__ */ C(G, [["__scopeId", "data-v-3bfdfbc1"]]), K = {
-  class: "m-accordion",
+}), J = /* @__PURE__ */ C(G, [["__scopeId", "data-v-058a2912"]]), K = {
+  class: "m-accordion m-reset-css",
   role: "presentation"
 }, Q = ["id", "aria-controls", "aria-expanded", "onClick"], X = /* @__PURE__ */ w({
   __name: "MazAccordion",
@@ -181,68 +180,68 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
     contentClass: { default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(r, { emit: n }) {
-    const o = r, a = n, s = U({
+  setup(r, { emit: t }) {
+    const l = r, o = t, s = U({
       componentName: "MazAccordion",
-      providedId: o.id
-    }), m = L(), l = g(
+      providedId: l.id
+    }), m = L(), a = $(
       () => Object.keys(m).filter((e) => e.startsWith("title-")).length
-    ), i = f(o.modelValue), d = g({
-      get: () => o.modelValue || i.value,
+    ), i = f(l.modelValue), d = $({
+      get: () => l.modelValue || i.value,
       set: (e) => {
-        i.value = e, a("update:model-value", e);
+        i.value = e, o("update:model-value", e);
       }
     });
-    function u(e) {
+    function c(e) {
       return d.value === e;
     }
     function v(e) {
-      d.value === e ? (i.value = 0, a("update:model-value", 0)) : (i.value = e, a("update:model-value", e));
+      d.value === e ? (i.value = 0, o("update:model-value", 0)) : (i.value = e, o("update:model-value", e));
     }
-    return (e, _) => (p(), b("div", K, [
-      (p(!0), b(
+    return (e, _) => (p(), g("div", K, [
+      (p(!0), g(
         j,
         null,
-        F(l.value, (t) => (p(), N(
+        F(a.value, (n) => (p(), N(
           H,
           {
-            key: t,
+            key: n,
             class: "m-accordion__spotlight",
             padding: !1
           },
           {
             default: M(() => [
-              c("button", {
-                id: `step-${t}-${y(s)}`,
+              u("button", {
+                id: `step-${n}-${y(s)}`,
                 class: "m-accordion__header",
-                "aria-controls": `step-${t}-${y(s)}`,
-                "aria-expanded": u(t),
-                onClick: (Y) => v(t)
+                "aria-controls": `step-${n}-${y(s)}`,
+                "aria-expanded": c(n),
+                onClick: (Y) => v(n)
               }, [
-                h(e.$slots, `title-${t}`, {
-                  isOpen: u(t)
+                h(e.$slots, `title-${n}`, {
+                  isOpen: c(n)
                 }, void 0, !0),
                 S(y(T), {
-                  class: $(["header-icon", { "--rotate": u(t) }])
+                  class: b(["header-icon", { "--rotate": c(n) }])
                 }, null, 8, ["class"])
               ], 8, Q),
               S(J, {
                 "animation-duration": "300ms",
-                "model-value": u(t),
-                "aria-labelledby": `step-${t}-${y(s)}`
+                "model-value": c(n),
+                "aria-labelledby": `step-${n}-${y(s)}`
               }, {
                 default: M(() => [
-                  c(
+                  u(
                     "div",
                     {
-                      class: $(["m-accordion__content", e.contentClass])
+                      class: b(["m-accordion__content", e.contentClass])
                     },
                     [
                       h(e.$slots, "content", {
-                        isOpen: u(t)
+                        isOpen: c(n)
                       }, void 0, !0),
-                      h(e.$slots, `content-${t}`, {
-                        isOpen: u(t)
+                      h(e.$slots, `content-${n}`, {
+                        isOpen: c(n)
                       }, void 0, !0)
                     ],
                     2
@@ -264,7 +263,7 @@ const q = { class: "inner" }, D = /* @__PURE__ */ w({
       ))
     ]));
   }
-}), ee = /* @__PURE__ */ C(X, [["__scopeId", "data-v-052b6500"]]);
+}), ee = /* @__PURE__ */ C(X, [["__scopeId", "data-v-6a945de6"]]);
 export {
   ee as default
 };

package/components/MazAnimatedCounter.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as v, useSlots as x, computed as l, ref as _, watch as h, openBlock as d, createElementBlock as p, normalizeClass as y, normalizeStyle as z, createElementVNode as C, renderSlot as i, createTextVNode as o, toDisplayString as a, createCommentVNode as S } from "vue";
+import { defineComponent as v, useSlots as x, computed as l, ref as _, watch as h, openBlock as d, createElementBlock as m, normalizeClass as y, normalizeStyle as z, createElementVNode as C, renderSlot as i, createTextVNode as o, toDisplayString as a, createCommentVNode as S } from "vue";
 import './assets/MazAnimatedCounter.css';const $ = { class: "maz-sr-only" }, k = {
   key: 0,
   class: "m-animated-counter__fix"
@@ -20,18 +20,18 @@ import './assets/MazAnimatedCounter.css';const $ = { class: "maz-sr-only" }, k =
         }, 100));
       }
     );
-    const m = l(() => `${t.duration}ms`);
-    return (e, c) => (d(), p(
+    const p = l(() => `${t.duration}ms`);
+    return (e, c) => (d(), m(
       "span",
       {
-        class: y(["m-animated-counter", {
+        class: y(["m-animated-counter m-reset-css", {
           "--animated": f.value,
           "--prefixed": r.value,
           "--suffixed": u.value
         }]),
         style: z({
           "--count": e.count,
-          "--animation-duration": m.value
+          "--animation-duration": p.value
         })
       },
       [
@@ -56,7 +56,7 @@ import './assets/MazAnimatedCounter.css';const $ = { class: "maz-sr-only" }, k =
             )
           ], !0)
         ]),
-        r.value || u.value ? (d(), p("span", k, [
+        r.value || u.value ? (d(), m("span", k, [
           i(e.$slots, "prefix", {}, () => [
             o(
               a(e.prefix),
@@ -82,7 +82,7 @@ import './assets/MazAnimatedCounter.css';const $ = { class: "maz-sr-only" }, k =
   for (const [r, u] of t)
     s[r] = u;
   return s;
-}, V = /* @__PURE__ */ M(A, [["__scopeId", "data-v-fc78b268"]]);
+}, V = /* @__PURE__ */ M(A, [["__scopeId", "data-v-c2cd744f"]]);
 export {
   V as default
 };

package/components/MazAvatar.mjs

@@ -1,4 +1,4 @@
-import { M as f } from "./chunks/MazAvatar-CZzOIbzh.mjs";
+import { M as f } from "./chunks/MazAvatar-CuOWgdVG.mjs";
 export {
   f as default
 };

package/components/MazBackdrop.d.ts

@@ -1,13 +1,29 @@
 import { type HTMLAttributes } from 'vue';
-export interface Props {
+export interface MazBackdropProps {
+    /** @model Modal's model value */
     modelValue?: boolean;
+    /** Teleport selector */
     teleportSelector?: string;
+    /** Function called before modal is close */
     beforeClose?: () => Promise<void> | void;
+    /** Persistent dialog (not closable by clicking outside and remove close button) */
     persistent?: boolean;
+    /** Prevent close on escape key */
     noCloseOnEscKey?: boolean;
+    /** Transition name */
     transitionName?: string;
+    /** Backdrop class */
     backdropClass?: HTMLAttributes['class'];
+    /** Backdrop content class */
     backdropContentClass?: HTMLAttributes['class'];
+    /** Add padding to the content */
+    contentPadding?: boolean;
+    /** Justify content */
+    justify?: 'center' | 'end' | 'start' | 'space-between' | 'space-around' | 'none';
+    /** Align content */
+    align?: 'center' | 'end' | 'start' | 'none';
+    /** Variant */
+    variant?: 'bottom-sheet' | 'dialog' | 'drawer';
 }
 declare function close(): void;
 declare function toggleModal(value: any): Promise<void>;
@@ -20,13 +36,14 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {
             close: typeof close;
+            onBackdropClicked: typeof onBackdropClicked;
         }): any;
     };
     refs: {};
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<Props, {
+declare const __VLS_component: import("vue").DefineComponent<MazBackdropProps, {
     onBackdropAnimationEnter: typeof onBackdropAnimationEnter;
     onBackdropAnimationLeave: typeof onBackdropAnimationLeave;
     onBackdropClicked: typeof onBackdropClicked;
@@ -39,21 +56,12 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {
     open: (value: void) => any;
     "update:model-value": (value: boolean) => any;
     "before-close": (value: void) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<MazBackdropProps> & Readonly<{
     onClose?: ((value?: void | undefined) => any) | undefined;
     onOpen?: ((value?: void | undefined) => any) | undefined;
     "onUpdate:model-value"?: ((value: boolean) => any) | undefined;
     "onBefore-close"?: ((value?: void | undefined) => any) | undefined;
-}>, {
-    modelValue: boolean;
-    teleportSelector: string;
-    beforeClose: () => Promise<void> | void;
-    persistent: boolean;
-    noCloseOnEscKey: boolean;
-    transitionName: string;
-    backdropClass: HTMLAttributes["class"];
-    backdropContentClass: HTMLAttributes["class"];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/components/MazBackdrop.mjs

@@ -1,5 +1,9 @@
-import { defineComponent as A, ref as L, onMounted as V, watch as D, openBlock as f, createBlock as N, Teleport as S, createVNode as h, Transition as M, withCtx as P, createElementBlock as T, normalizeClass as p, createElementVNode as k, withModifiers as g, mergeProps as w, renderSlot as O, createCommentVNode as K } from "vue";
-import './assets/MazBackdrop.css';const b = "--backdrop-present", F = /* @__PURE__ */ A({
+import { defineComponent as L, ref as P, onMounted as V, watch as D, nextTick as B, openBlock as h, createBlock as M, Teleport as N, createVNode as T, Transition as O, withCtx as $, createElementBlock as j, mergeProps as q, createElementVNode as v, normalizeClass as z, withModifiers as F, renderSlot as K, createCommentVNode as I } from "vue";
+import './assets/MazBackdrop.css';const G = {
+  role: "dialog",
+  class: "m-backdrop-container",
+  "aria-modal": "true"
+}, H = { class: "m-backdrop-wrapper" }, A = "--backdrop-present", J = /* @__PURE__ */ L({
   inheritAttrs: !1,
   __name: "MazBackdrop",
   props: {
@@ -9,112 +13,133 @@ import './assets/MazBackdrop.css';const b = "--backdrop-present", F = /* @__PURE
     persistent: { type: Boolean, default: !1 },
     noCloseOnEscKey: { type: Boolean, default: !1 },
     transitionName: { default: "backdrop-anim" },
-    backdropClass: { default: void 0 },
-    backdropContentClass: { default: void 0 }
+    backdropClass: { default: () => {
+    } },
+    backdropContentClass: { default: () => {
+    } },
+    contentPadding: { type: Boolean, default: !1 },
+    justify: { default: "none" },
+    align: { default: "none" },
+    variant: {}
   },
   emits: ["open", "close", "update:model-value", "before-close"],
-  setup(C, { expose: v, emit: y }) {
-    const o = C, t = y;
-    function E() {
-      document.documentElement.classList.add(b);
+  setup(t, { expose: r, emit: a }) {
+    const o = a;
+    function d() {
+      document.documentElement.classList.add(A);
     }
-    async function B() {
-      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(b);
+    function w() {
+      document.querySelector(".m-backdrop.--present") || document.documentElement.classList.remove(A);
     }
-    const n = L(o.modelValue);
-    function a() {
-      d(!1);
+    const s = P(t.modelValue);
+    function l() {
+      k(!1);
+    }
+    async function k(e) {
+      var n;
+      e || (o("before-close"), await ((n = t.beforeClose) == null ? void 0 : n.call(t))), s.value = e;
     }
-    async function d(e) {
-      var r;
-      e || (t("before-close"), await ((r = o.beforeClose) == null ? void 0 : r.call(o))), n.value = e;
+    function y() {
+      o("open");
     }
-    function c() {
-      t("open");
+    function b() {
+      o("update:model-value", !1), o("close"), f();
     }
     function i() {
-      t("update:model-value", !1), t("close"), l();
+      t.persistent || l();
     }
-    function u() {
-      o.persistent || a();
+    function u(e) {
+      !t.noCloseOnEscKey && e.key === "Escape" && !t.persistent && l();
     }
-    function s(e) {
-      !o.noCloseOnEscKey && e.key === "Escape" && !o.persistent && a();
+    function C() {
+      d(), document.addEventListener("keyup", u, !1);
     }
-    function m() {
-      E(), document.addEventListener("keyup", s, !1);
+    function f() {
+      document.removeEventListener("keyup", u), w();
     }
-    function l() {
-      document.removeEventListener("keyup", s), B();
+    V(() => {
+      t.modelValue ? C() : f();
+    });
+    let c = null;
+    function S(e) {
+      const n = document.querySelector(e), m = n && Array.from(n.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select')), p = m == null ? void 0 : m.filter((E) => {
+        const g = window.getComputedStyle(E);
+        return g.display !== "none" && g.visibility !== "hidden" && !E.disabled;
+      });
+      return p && p.length > 0 ? p[0] : null;
     }
-    return V(() => {
-      o.modelValue ? m() : l();
-    }), D(
-      () => o.modelValue,
-      (e) => {
-        n.value = e, e ? m() : l();
+    return D(
+      () => t.modelValue,
+      async (e) => {
+        if (s.value = e, e) {
+          C(), c = document.activeElement, await B();
+          const n = S(".m-backdrop-content");
+          n == null || n.focus();
+        } else
+          f(), await B(), c == null || c.focus();
       }
-    ), v({
-      onBackdropAnimationEnter: c,
-      onBackdropAnimationLeave: i,
-      onBackdropClicked: u,
-      close: a,
-      present: n,
-      toggleModal: d,
-      onKeyPress: s
-    }), (e, r) => (f(), N(S, { to: e.teleportSelector }, [
-      h(M, {
+    ), r({
+      onBackdropAnimationEnter: y,
+      onBackdropAnimationLeave: b,
+      onBackdropClicked: i,
+      close: l,
+      present: s,
+      toggleModal: k,
+      onKeyPress: u
+    }), (e, n) => (h(), M(N, { to: e.teleportSelector }, [
+      T(O, {
         appear: "",
         name: e.transitionName,
-        onAfterEnter: c,
-        onAfterLeave: i
+        onAfterEnter: y,
+        onAfterLeave: b
       }, {
-        default: P(() => [
-          n.value ? (f(), T(
+        default: $(() => [
+          s.value ? (h(), j(
             "div",
-            {
+            q({
               key: 0,
-              class: p(["m-backdrop --present", [e.backdropClass]]),
-              tabindex: "-1",
-              role: "dialog"
-            },
+              class: "m-backdrop --present m-reset-css"
+            }, e.$attrs, {
+              class: [e.backdropClass, e.variant && `--variant-${e.variant}`, { "--persistent": e.persistent }]
+            }),
             [
-              k(
-                "button",
-                {
-                  class: p(["m-backdrop-overlay", { "--disabled": e.persistent }]),
-                  tabindex: "-1",
-                  onClick: g(u, ["self"])
-                },
-                null,
-                2
-                /* CLASS */
-              ),
-              k(
-                "div",
-                w({
-                  class: ["m-backdrop-content", e.backdropContentClass]
-                }, e.$attrs, {
-                  role: "document",
-                  tabindex: "0"
-                }),
-                [
-                  O(e.$slots, "default", { close: a })
-                ],
-                16
-                /* FULL_PROPS */
-              )
+              v("div", G, [
+                v("div", H, [
+                  v(
+                    "div",
+                    {
+                      class: z(["m-backdrop-content", [e.backdropContentClass, `--justify-${e.justify}`, `--align-${e.align}`, { "--padding": e.contentPadding }]]),
+                      role: "button",
+                      tabindex: "-1",
+                      onClick: F(i, ["self"])
+                    },
+                    [
+                      K(e.$slots, "default", {
+                        close: l,
+                        onBackdropClicked: i
+                      }, void 0, !0)
+                    ],
+                    2
+                    /* CLASS */
+                  )
+                ])
+              ])
             ],
-            2
-            /* CLASS */
-          )) : K("v-if", !0)
+            16
+            /* FULL_PROPS */
+          )) : I("v-if", !0)
         ]),
         _: 3
         /* FORWARDED */
       }, 8, ["name"])
     ], 8, ["to"]));
   }
-});
+}), Q = (t, r) => {
+  const a = t.__vccOpts || t;
+  for (const [o, d] of r)
+    a[o] = d;
+  return a;
+}, W = /* @__PURE__ */ Q(J, [["__scopeId", "data-v-90448c91"]]);
 export {
-  F as default
+  W as default
 };