@robuust-digital/vue-components 2.0.0-rc.5 → 2.0.0-rc.6

package/dist/dialogs/drawer.css

@@ -17,15 +17,61 @@
   --rvc-drawer-footer-bg-color: var(--rvc-dialog-footer-bg-color);
   --rvc-drawer-footer-gap: var(--rvc-dialog-footer-gap);
   --rvc-drawer-footer-justify-content: space-between;
+  --rvc-drawer-transition-timing-function: var(--rvc-dialog-transition-timing-function);
+  --rvc-drawer-transition-duration: var(--rvc-dialog-transition-duration);
+  --rvc-drawer-panel-shadow: var(--rvc-dialog-panel-shadow);
 }
 
 @layer components {
   .rvc-drawer {
-    z-index: 500;
     position: relative;
+    z-index: 500;
 
     .rvc-drawer-backdrop {
+      position: fixed;
+      transition-property: opacity;
+      transition-duration: var(--rvc-drawer-transition-duration);
+      transition-timing-function: var(--rvc-drawer-transition-timing-function);
       background-color: var(--rvc-drawer-backdrop-bg-color);
+      inset: 0;
+    }
+
+    .rvc-drawer-presentation {
+      inset: 0;
+      position: fixed;
+      overflow: hidden;
+    }
+
+    .rvc-drawer-container {
+      inset: 0;
+      position: absolute;
+      overflow: hidden;
+    }
+
+    .rvc-drawer-inner {
+      display: flex;
+      position: fixed;
+      right: 0;
+      max-width: 100%;
+      padding-left: calc(var(--spacing) * 10);
+      pointer-events: none;
+      inset-block: 0;
+    }
+
+    .rvc-drawer-panel {
+      width: 100vw;
+      pointer-events: auto;
+
+      &.rvc-drawer-panel-max-width {
+        max-width: 36rem;
+      }
+    }
+
+    .rvc-drawer-panel-inner {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);
     }
 
     .rvc-drawer-header {
@@ -34,16 +80,38 @@
       border-bottom-style: var(--rvc-drawer-border-style);
       border-color: var(--rvc-drawer-border-color);
       background-color: var(--rvc-drawer-header-bg-color);
+
+      &.rvc-drawer-header-sticky {
+        position: sticky;
+        z-index: 10;
+        top: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+
+    .rvc-drawer-header-inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
     .rvc-drawer-title {
+      color: var(--rvc-drawer-title-color);
+      font-family: var(--rvc-drawer-title-font-family);
       font-size: var(--rvc-drawer-title-font-size);
       font-weight: var(--rvc-drawer-title-font-weight);
-      font-family: var(--rvc-drawer-title-font-family);
-      color: var(--rvc-drawer-title-color);
+    }
+
+    .rvc-drawer-close-wrapper {
+      display: flex;
+      align-items: center;
+      height: calc(var(--spacing) * 7);
+      margin-left: calc(var(--spacing) * 3);
     }
 
     .rvc-drawer-close {
+      position: relative;
       width: var(--rvc-drawer-close-size);
       height: var(--rvc-drawer-close-size);
       color: var(--rvc-drawer-close-color);
@@ -51,22 +119,90 @@
       &:hover {
         color: var(--rvc-drawer-close-color-hover);
       }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .rvc-drawer-scroll {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-height: 0;
+      overflow-y: scroll;
+
+      &.rvc-drawer-scroll-reverse {
+        flex-direction: column-reverse;
+      }
     }
 
     .rvc-drawer-content {
+      position: relative;
+      flex: 1;
       padding-block: var(--rvc-drawer-padding-y);
       padding-inline: var(--rvc-drawer-padding-x);
       background-color: var(--rvc-drawer-content-bg-color);
     }
 
     .rvc-drawer-footer {
+      display: flex;
+      flex-shrink: 0;
+      justify-content: var(--rvc-drawer-footer-justify-content);
       padding: var(--rvc-drawer-padding-y) var(--rvc-drawer-padding-x);
       border-top-width: var(--rvc-drawer-border-width);
       border-top-style: var(--rvc-drawer-border-style);
       border-color: var(--rvc-drawer-border-color);
       background-color: var(--rvc-drawer-footer-bg-color);
       gap: var(--rvc-drawer-footer-gap);
-      justify-content: var(--rvc-drawer-footer-justify-content);
     }
   }
+
+  /* Transitions */
+  .rvc-drawer-backdrop-transition-enter,
+  .rvc-drawer-backdrop-transition-leave {
+    --tw-duration: var(--rvc-drawer-transition-duration);
+
+    transition-duration: var(--rvc-drawer-transition-duration);
+
+    --tw-ease: var(--rvc-drawer-transition-timing-function);
+
+    transition-timing-function: var(--rvc-drawer-transition-timing-function);
+  }
+
+  .rvc-drawer-backdrop-transition-enter-from,
+  .rvc-drawer-backdrop-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-drawer-backdrop-transition-enter-to,
+  .rvc-drawer-backdrop-transition-leave-from {
+    opacity: 1;
+  }
+
+  .rvc-drawer-transition-enter,
+  .rvc-drawer-transition-leave {
+    --tw-duration: var(--rvc-drawer-transition-duration);
+
+    transition-duration: var(--rvc-drawer-transition-duration);
+
+    --tw-ease: var(--rvc-drawer-transition-timing-function);
+
+    transition-timing-function: var(--rvc-drawer-transition-timing-function);
+  }
+
+  .rvc-drawer-transition-enter-from,
+  .rvc-drawer-transition-leave-to {
+    --tw-translate-x: 100%;
+
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
+  .rvc-drawer-transition-enter-to,
+  .rvc-drawer-transition-leave-from {
+    --tw-translate-x: 0;
+
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
 }

package/dist/dialogs/index.js

@@ -1,13 +1,13 @@
-import { createBlock as v, openBlock as w, unref as e, withCtx as n, createVNode as r, withModifiers as D, createElementVNode as a, normalizeClass as c, renderSlot as d, createCommentVNode as y, createTextVNode as B, toDisplayString as L } from "vue";
-import { TransitionRoot as T, Dialog as E, TransitionChild as b, DialogPanel as N, DialogTitle as p } from "@headlessui/vue";
-import { _ as g } from "../_shared/ButtonBase-CQjlJ85F.js";
-import { u as V } from "../_shared/Modal-CsI5mZlJ.js";
-import { _ as W } from "../_shared/Modal-CsI5mZlJ.js";
-import { r as x } from "../_shared/XMarkIcon-90mcPzBs.js";
-const z = {
-  class: "fixed inset-0 overflow-hidden",
+import { createBlock as f, openBlock as m, unref as e, withCtx as s, createVNode as i, withModifiers as B, createElementVNode as a, normalizeClass as w, renderSlot as d, createCommentVNode as b, createTextVNode as L, toDisplayString as T } from "vue";
+import { TransitionRoot as E, Dialog as N, TransitionChild as p, DialogPanel as V, DialogTitle as y } from "@headlessui/vue";
+import { _ as g } from "../_shared/ButtonBase-DfkwHIhN.js";
+import { u as R } from "../_shared/Modal-BXOR8t7c.js";
+import { _ as W } from "../_shared/Modal-BXOR8t7c.js";
+import { r as k } from "../_shared/XMarkIcon-90mcPzBs.js";
+const q = {
+  class: "rvc-drawer-presentation",
   role: "presentation"
-}, R = { class: "absolute inset-0 overflow-hidden" }, q = { class: "pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10" }, F = { class: "flex h-full flex-col shadow-xl" }, I = { class: "flex items-center justify-between" }, M = { class: "ml-3 flex h-7 items-center" }, j = ["id"], A = { class: "flex shrink-0 rvc-drawer-footer" }, O = {
+}, F = { class: "rvc-drawer-container" }, I = { class: "rvc-drawer-inner" }, M = { class: "rvc-drawer-panel-inner" }, x = { class: "rvc-drawer-header-inner" }, z = { class: "rvc-drawer-close-wrapper" }, A = ["id"], P = { class: "rvc-drawer-footer" }, O = {
   __name: "Drawer",
   props: {
     as: {
@@ -44,145 +44,142 @@ const z = {
     },
     panelClass: {
       type: String,
-      default: "max-w-xl"
+      default: "rvc-drawer-panel-max-width"
     }
   },
   emits: ["drawer:open", "drawer:close", "drawer:save", "drawer:closed"],
-  setup(t, { emit: C }) {
-    const o = C, h = t, {
-      contentRef: $,
-      ready: f,
-      isForm: k,
-      titleId: u,
-      descriptionId: m,
-      initialFocusElement: S
-    } = V(h);
-    return (s, l) => (w(), v(e(T), { as: "template" }, {
-      default: n(() => [
-        r(e(E), {
-          as: t.as,
+  setup(r, { emit: C }) {
+    const o = C, $ = r, {
+      contentRef: S,
+      ready: c,
+      isForm: h,
+      titleId: v,
+      descriptionId: u,
+      initialFocusElement: D
+    } = R($);
+    return (l, t) => (m(), f(e(E), { as: "template" }, {
+      default: s(() => [
+        i(e(N), {
+          as: r.as,
           class: "rvc-drawer",
           static: "",
           "aria-modal": "true",
           role: "dialog",
-          "initial-focus": e(S),
-          "aria-labelledby": e(u),
-          onClose: l[5] || (l[5] = (i) => s.$emit("drawer:close")),
-          onSubmit: l[6] || (l[6] = D((i) => o("drawer:save", i), ["prevent"]))
+          "initial-focus": e(D),
+          "aria-labelledby": e(v),
+          onClose: t[5] || (t[5] = (n) => l.$emit("drawer:close")),
+          onSubmit: t[6] || (t[6] = B((n) => o("drawer:save", n), ["prevent"]))
         }, {
-          default: n(() => [
-            r(e(b), {
+          default: s(() => [
+            i(e(p), {
               as: "template",
-              enter: "ease-in-out duration-500",
-              "enter-from": "opacity-0",
-              "enter-to": "opacity-100",
-              leave: "ease-in-out duration-500",
-              "leave-from": "opacity-100",
-              "leave-to": "opacity-0",
-              onBeforeEnter: l[0] || (l[0] = (i) => o("drawer:open"))
+              enter: "rvc-drawer-backdrop-transition-enter",
+              "enter-from": "rvc-drawer-backdrop-transition-enter-from",
+              "enter-to": "rvc-drawer-backdrop-transition-enter-to",
+              leave: "rvc-drawer-backdrop-transition-leave",
+              "leave-from": "rvc-drawer-backdrop-transition-leave-from",
+              "leave-to": "rvc-drawer-backdrop-transition-leave-to",
+              onBeforeEnter: t[0] || (t[0] = (n) => o("drawer:open"))
             }, {
-              default: n(() => l[7] || (l[7] = [
+              default: s(() => t[7] || (t[7] = [
                 a("div", {
-                  class: "fixed inset-0 transition-opacity rvc-drawer-backdrop",
+                  class: "rvc-drawer-backdrop",
                   "aria-hidden": "true"
                 }, null, -1)
               ])),
               _: 1
             }),
-            a("div", z, [
-              a("div", R, [
-                a("div", q, [
-                  r(e(b), {
+            a("div", q, [
+              a("div", F, [
+                a("div", I, [
+                  i(e(p), {
                     as: "template",
-                    enter: "transform transition ease-in-out duration-500 sm:duration-700",
-                    "enter-from": "translate-x-full",
-                    "enter-to": "translate-x-0",
-                    leave: "transform transition ease-in-out duration-500 sm:duration-700",
-                    "leave-from": "translate-x-0",
-                    "leave-to": "translate-x-full",
-                    onBeforeEnter: l[3] || (l[3] = (i) => f.value = !0),
-                    onAfterLeave: l[4] || (l[4] = (i) => (f.value = !1, o("drawer:closed")))
+                    enter: "rvc-drawer-transition-enter",
+                    "enter-from": "rvc-drawer-transition-enter-from",
+                    "enter-to": "rvc-drawer-transition-enter-to",
+                    leave: "rvc-drawer-transition-leave",
+                    "leave-from": "rvc-drawer-transition-leave-from",
+                    "leave-to": "rvc-drawer-transition-leave-to",
+                    onBeforeEnter: t[3] || (t[3] = (n) => c.value = !0),
+                    onAfterLeave: t[4] || (t[4] = (n) => (c.value = !1, o("drawer:closed")))
                   }, {
-                    default: n(() => [
-                      r(e(N), {
-                        class: c(["pointer-events-auto w-screen", t.panelClass]),
-                        "aria-busy": t.spinning,
-                        "aria-describedby": e(m)
+                    default: s(() => [
+                      i(e(V), {
+                        class: w(["rvc-drawer-panel", r.panelClass]),
+                        "aria-busy": r.spinning,
+                        "aria-describedby": e(u)
                       }, {
-                        default: n(() => [
-                          a("div", F, [
+                        default: s(() => [
+                          a("div", M, [
                             a("header", {
-                              class: c([{ "sticky top-0 left-0 -w-full z-10": t.headerSticky }, "rvc-drawer-header"])
+                              class: w([{ "rvc-drawer-header-sticky": r.headerSticky }, "rvc-drawer-header"])
                             }, [
-                              d(s.$slots, "header", {
-                                title: t.title,
-                                showClose: t.showClose
+                              d(l.$slots, "header", {
+                                title: r.title,
+                                showClose: r.showClose
                               }, () => [
-                                a("div", I, [
-                                  d(s.$slots, "title", {
-                                    id: e(u),
-                                    dialogTitle: e(p),
-                                    title: t.title
+                                a("div", x, [
+                                  d(l.$slots, "title", {
+                                    id: e(v),
+                                    dialogTitle: e(y),
+                                    title: r.title
                                   }, () => [
-                                    r(e(p), {
-                                      id: e(u),
+                                    i(e(y), {
+                                      id: e(v),
                                       class: "rvc-drawer-title"
                                     }, {
-                                      default: n(() => [
-                                        B(L(t.title), 1)
+                                      default: s(() => [
+                                        L(T(r.title), 1)
                                       ]),
                                       _: 1
                                     }, 8, ["id"])
                                   ]),
-                                  t.showClose ? d(s.$slots, "close", {
+                                  r.showClose ? d(l.$slots, "close", {
                                     key: 0,
-                                    icon: e(x),
+                                    icon: e(k),
                                     emitClose: () => o("drawer:close")
                                   }, () => [
-                                    a("div", M, [
+                                    a("div", z, [
                                       a("button", {
                                         type: "button",
-                                        class: "relative rvc-drawer-close",
+                                        class: "rvc-drawer-close",
                                         "aria-label": "Close panel",
-                                        onClick: l[1] || (l[1] = (i) => o("drawer:close"))
+                                        onClick: t[1] || (t[1] = (n) => o("drawer:close"))
                                       }, [
-                                        r(e(x), {
-                                          class: "size-full",
-                                          "aria-hidden": "true"
-                                        })
+                                        i(e(k), { "aria-hidden": "true" })
                                       ])
                                     ])
-                                  ]) : y("", !0)
+                                  ]) : b("", !0)
                                 ])
                               ])
                             ], 2),
                             a("div", {
-                              class: c([t.scrolledDown ? "flex-col-reverse" : "flex-col", "flex min-h-0 flex-1 overflow-y-scroll"])
+                              class: w([{ "rvc-drawer-scroll-reverse": r.scrolledDown }, "rvc-drawer-scroll"])
                             }, [
                               a("div", {
-                                id: e(m),
+                                id: e(u),
                                 ref_key: "contentRef",
-                                ref: $,
-                                class: "relative flex-1 rvc-drawer-content"
+                                ref: S,
+                                class: "rvc-drawer-content"
                               }, [
-                                d(s.$slots, "default", { ready: e(f) })
-                              ], 8, j)
+                                d(l.$slots, "default", { ready: e(c) })
+                              ], 8, A)
                             ], 2),
-                            a("footer", A, [
-                              d(s.$slots, "footer", { loading: t.spinning }, () => [
-                                r(g, {
+                            a("footer", P, [
+                              d(l.$slots, "footer", { loading: r.spinning }, () => [
+                                i(g, {
                                   type: "button",
-                                  label: t.cancelLabel,
+                                  label: r.cancelLabel,
                                   color: "light",
-                                  onClick: l[2] || (l[2] = (i) => o("drawer:close"))
+                                  onClick: t[2] || (t[2] = (n) => o("drawer:close"))
                                 }, null, 8, ["label"]),
-                                e(k) ? (w(), v(g, {
+                                e(h) ? (m(), f(g, {
                                   key: 0,
                                   type: "submit",
-                                  label: t.submitLabel,
-                                  spinning: t.spinning,
-                                  disabled: t.spinning
-                                }, null, 8, ["label", "spinning", "disabled"])) : y("", !0)
+                                  label: r.submitLabel,
+                                  spinning: r.spinning,
+                                  disabled: r.spinning
+                                }, null, 8, ["label", "spinning", "disabled"])) : b("", !0)
                               ])
                             ])
                           ])

package/dist/dialogs/modal.css

@@ -19,51 +19,90 @@
   --rvc-modal-footer-gap: var(--rvc-dialog-footer-gap);
   --rvc-modal-box-shadow: var(--box-shadow-xl);
   --rvc-modal-margin-y: 0;
+  --rvc-modal-transition-timing-function: var(--rvc-dialog-transition-timing-function);
+  --rvc-modal-transition-duration: var(--rvc-dialog-transition-duration);
 }
 
 @layer components {
   .rvc-modal {
-    z-index: 600;
     position: relative;
+    z-index: 600;
 
     .rvc-modal-backdrop {
+      position: fixed;
+      transition-property: opacity;
+      transition-duration: var(--rvc-modal-transition-duration);
+      transition-timing-function: var(--rvc-modal-transition-timing-function);
       background-color: var(--rvc-modal-backdrop-bg-color);
+      inset: 0;
+    }
+
+    .rvc-modal-presentation {
+      position: fixed;
+      z-index: 10;
+      width: 100vw;
+      overflow-y: auto;
+      inset: 0;
+    }
+
+    .rvc-modal-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 100%;
+      padding: calc(var(--spacing) * 4);
+
+      @media (width >= theme(--breakpoint-sm)) {
+        padding: 0;
+      }
     }
 
     .rvc-modal-panel {
-      border-color: var(--rvc-modal-border-color);
+      display: flex;
+      position: relative;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+      margin-block: var(--rvc-modal-margin-y);
+      overflow: hidden;
+      transform: translate(0, 0);
       border-width: var(--rvc-modal-border-width);
       border-style: var(--rvc-modal-border-style);
       border-radius: var(--rvc-modal-border-radius);
+      border-color: var(--rvc-modal-border-color);
       box-shadow: var(--rvc-modal-box-shadow);
-      margin-block: var(--rvc-modal-margin-y);
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      position: relative;
-      transform: translate(0, 0);
-      overflow: hidden;
-      width: 100%;
       text-align: left;
     }
 
     .rvc-modal-header {
       padding-block: var(--rvc-modal-padding-y);
       padding-inline: var(--rvc-modal-padding-x);
+      border-bottom: var(--rvc-modal-border-width) var(--rvc-modal-border-style) var(--rvc-modal-border-color);
       background-color: var(--rvc-modal-header-bg-color);
-      border-bottom-color: var(--rvc-modal-border-color);
-      border-bottom-width: var(--rvc-modal-border-width);
-      border-bottom-style: var(--rvc-modal-border-style);
+    }
+
+    .rvc-modal-header-inner {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
     }
 
     .rvc-modal-title {
+      color: var(--rvc-modal-title-color);
+      font-family: var(--rvc-modal-title-font-family);
       font-size: var(--rvc-modal-title-font-size);
       font-weight: var(--rvc-modal-title-font-weight);
-      font-family: var(--rvc-modal-title-font-family);
-      color: var(--rvc-modal-title-color);
+    }
+
+    .rvc-modal-close-wrapper {
+      display: flex;
+      align-items: center;
+      height: cacl(var(--spacing) * 7);
+      margin-left: calc(var(--spacing) * 3);
     }
 
     .rvc-modal-close {
+      position: relative;
       width: var(--rvc-modal-close-size);
       height: var(--rvc-modal-close-size);
       color: var(--rvc-modal-close-color);
@@ -71,6 +110,11 @@
       &:hover {
         color: var(--rvc-modal-close-color-hover);
       }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
     }
 
     .rvc-modal-content {
@@ -80,19 +124,71 @@
     }
 
     .rvc-modal-footer {
+      display: flex;
+      flex-direction: column;
       padding-block: var(--rvc-modal-padding-y);
       padding-inline: var(--rvc-modal-padding-x);
-      gap: var(--rvc-modal-footer-gap);
+      border-top: var(--rvc-modal-border-width) var(--rvc-modal-border-style) var(--rvc-modal-border-color);
       background-color: var(--rvc-modal-footer-bg-color);
-      border-top-color: var(--rvc-modal-border-color);
-      border-top-width: var(--rvc-modal-border-width);
-      border-top-style: var(--rvc-modal-border-style);
-      display: flex;
-      flex-direction: column;
+      gap: var(--rvc-modal-footer-gap);
 
-      @media (width >= 40rem) {
+      @media (width >= theme(--breakpoint-sm)) {
         flex-direction: row-reverse;
       }
     }
   }
+
+  /* Transition */
+  .rvc-modal-backdrop-transition-enter,
+  .rvc-modal-backgrop-transition-leave {
+    --tw-duration: var(--rvc-modal-transition-duration);
+
+    transition-duration: var(--rvc-modal-transition-duration);
+
+    --tw-ease: var(--rvc-modal-transition-timing-function);
+
+    transition-timing-function: var(--rvc-modal-transition-timing-function);
+  }
+
+  .rvc-modal-backdrop-transition-enter-from,
+  .rvc-modal-backdrop-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-modal-backdrop-transition-enter-to,
+  .rvc-modal-backdrop-transition-leave-from {
+    opacity: 1;
+  }
+
+  .rvc-modal-transition-enter,
+  .rvc-modal-transition-leave {
+    --tw-duration: var(--rvc-modal-transition-duration);
+
+    transition-duration: var(--rvc-modal-transition-duration);
+
+    --tw-ease: var(--rvc-modal-transition-timing-function);
+
+    transition-timing-function: var(--rvc-modal-transition-timing-function);
+  }
+
+  .rvc-modal-transition-enter-from,
+  .rvc-modal-transition-leave-to {
+    opacity: 0;
+    translate: 0 calc(var(--spacing) * 4);
+
+    @media (width >= theme(--breakpoint-sm)) {
+      scale: 0.95;
+      translate: 0 0;
+    }
+  }
+
+  .rvc-modal-transition-enter-to,
+  .rvc-modal-transition-leave-from {
+    opacity: 1;
+    translate: 0 0;
+
+    @media (width >= theme(--breakpoint-sm)) {
+      scale: 1;
+    }
+  }
 }

package/dist/dialogs/styles.css

@@ -1,2 +1,22 @@
 @import "./drawer.css";
 @import "./modal.css";
+
+:root {
+  /* Dialogs Variables */
+  --rvc-dialog-backdrop-bg-color: --alpha(var(--color-slate-900) / 50%);
+  --rvc-dialog-padding-x: calc(var(--spacing) * 4);
+  --rvc-dialog-padding-y: calc(var(--spacing) * 4);
+  --rvc-dialog-header-bg-color: var(--color-white);
+  --rvc-dialog-close-size: calc(var(--spacing) * 6);
+  --rvc-dialog-close-color: var(--color-slate-700);
+  --rvc-dialog-close-color-hover: var(--color-slate-900);
+  --rvc-dialog-title-color: var(--color-slate-900);
+  --rvc-dialog-title-font-size: var(--text-xl);
+  --rvc-dialog-title-font-weight: var(--font-weight-bold);
+  --rvc-dialog-title-font-family: var(--font-sans);
+  --rvc-dialog-content-bg-color: var(--color-white);
+  --rvc-dialog-footer-bg-color: var(--color-slate-50);
+  --rvc-dialog-footer-gap: calc(var(--spacing) * 2);
+  --rvc-dialog-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-dialog-transition-duration: 300ms;
+}