@robuust-digital/vue-components 2.0.0-rc.0 → 2.0.0-rc.10

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;
+}

package/dist/dropdown/dropdown.css

@@ -23,67 +23,97 @@
   --rvc-dropdown-item-padding-y: 0;
   --rvc-dropdown-item-font-size: var(--rvc-base-font-size);
   --rvc-dropdown-item-font-weight: var(--rvc-base-font-weight);
+  --rvc-dropdown-transition-timing-function: ease-in-out;
+  --rvc-dropdown-transition-duration: 100ms;
 }
 
 @layer components {
   .rvc-dropdown {
-    width: var(--rvc-dropdown-width);
-    background-color: var(--rvc-dropdown-bg-color);
-    border-radius: var(--rvc-dropdown-border-radius);
-    border-width: var(--rvc-dropdown-border-width);
-    border-color: var(--rvc-dropdown-border-color);
-    padding-block: var(--rvc-dropdown-padding-y);
-    padding-inline: var(--rvc-dropdown-padding-x);
-    font-size: var(--rvc-dropdown-font-size);
-    font-weight: var(--rvc-dropdown-font-weight);
-    gap: var(--rvc-dropdown-gap);
-    z-index: var(--rvc-dropdown-z-index);
-    margin-top: calc(var(--spacing) * 1);
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    right: 0;
+    display: inline-block;
+    position: relative;
+    width: fit-content;
 
-    &.rvc-dropdown-left {
-      left: 0;
-      right: auto;
-    }
-
-    &.rvc-dropdown-full {
-      left: 0;
+    .rvc-dropdown-items {
+      display: flex;
+      position: absolute;
+      z-index: var(--rvc-dropdown-z-index);
       right: 0;
-      width: 100%;
-    }
+      flex-direction: column;
+      align-items: flex-start;
+      width: var(--rvc-dropdown-width);
+      margin-top: calc(var(--spacing) * 1);
+      padding-block: var(--rvc-dropdown-padding-y);
+      padding-inline: var(--rvc-dropdown-padding-x);
+      border-width: var(--rvc-dropdown-border-width);
+      border-radius: var(--rvc-dropdown-border-radius);
+      border-color: var(--rvc-dropdown-border-color);
+      background-color: var(--rvc-dropdown-bg-color);
+      font-size: var(--rvc-dropdown-font-size);
+      font-weight: var(--rvc-dropdown-font-weight);
+      gap: var(--rvc-dropdown-gap);
 
-    .rvc-dropdown-item {
-      color: var(--rvc-dropdown-item-color);
-      background-color: var(--rvc-dropdown-item-bg-color);
-      gap: var(--rvc-dropdown-item-gap);
-      padding-block: var(--rvc-dropdown-item-padding-y);
-      padding-inline: var(--rvc-dropdown-item-padding-x);
-      border-radius: var(--rvc-dropdown-item-border-radius);
-      font-size: var(--rvc-dropdown-item-font-size);
-      font-weight: var(--rvc-dropdown-item-font-weight);
-      display: flex;
-      align-items: center;
-      width: 100%;
+      &.rvc-dropdown-items-left {
+        right: auto;
+        left: 0;
+      }
 
-      &:hover {
-        color: var(--rvc-dropdown-item-color-hover);
-        background-color: var(--rvc-dropdown-item-bg-color-hover);
-        text-decoration: underline;
+      &.rvc-dropdown-items-full {
+        right: 0;
+        left: 0;
+        width: 100%;
+      }
 
-        .rvc-dropdown-item-icon {
-          color: var(--rvc-dropdown-icon-color-hover);
+      .rvc-dropdown-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        padding-block: var(--rvc-dropdown-item-padding-y);
+        padding-inline: var(--rvc-dropdown-item-padding-x);
+        border-radius: var(--rvc-dropdown-item-border-radius);
+        background-color: var(--rvc-dropdown-item-bg-color);
+        color: var(--rvc-dropdown-item-color);
+        font-size: var(--rvc-dropdown-item-font-size);
+        font-weight: var(--rvc-dropdown-item-font-weight);
+        gap: var(--rvc-dropdown-item-gap);
+
+        &:hover {
+          background-color: var(--rvc-dropdown-item-bg-color-hover);
+          color: var(--rvc-dropdown-item-color-hover);
+          text-decoration: underline;
+
+          .rvc-dropdown-item-icon {
+            color: var(--rvc-dropdown-icon-color-hover);
+          }
         }
-      }
 
-      .rvc-dropdown-item-icon {
-        width: var(--rvc-dropdown-icon-size);
-        height: var(--rvc-dropdown-icon-size);
-        color: var(--rvc-dropdown-icon-color);
+        .rvc-dropdown-item-icon {
+          width: var(--rvc-dropdown-icon-size);
+          height: var(--rvc-dropdown-icon-size);
+          color: var(--rvc-dropdown-icon-color);
+        }
       }
     }
   }
+
+  /* Transitions */
+  .rvc-dropdown-transition-enter,
+  .rvc-dropdown-transition-leave {
+    --tw-duration: var(--rvc-dropdown-transition-duration);
+
+    transition-duration: var(--rvc-dropdown-transition-duration);
+
+    --tw-ease: var(--rvc-dropdown-transition-timing-function);
+
+    transition-timing-function: var(--rvc-dropdown-transition-timing-function);
+  }
+
+  .rvc-dropdown-transition-enter-from,
+  .rvc-dropdown-transition-leave-to {
+    opacity: 0;
+  }
+
+  .rvc-dropdown-transition-enter-to,
+  .rvc-dropdown-transition-leave-from {
+    opacity: 1;
+  }
 }

package/dist/dropdown/index.js

@@ -1,8 +1,8 @@
-import { createElementBlock as w, openBlock as o, createElementVNode as C, createBlock as r, unref as a, normalizeClass as u, withCtx as l, renderSlot as s, createVNode as i, mergeProps as f, Transition as B, Fragment as M, renderList as $, resolveDynamicComponent as m, createCommentVNode as A, createTextVNode as D, toDisplayString as L } from "vue";
-import { Menu as N, MenuButton as p, MenuItems as S, MenuItem as v } from "@headlessui/vue";
-import { _ as V } from "../_shared/ButtonBase-CQjlJ85F.js";
+import { createElementBlock as w, openBlock as r, createElementVNode as C, createBlock as l, unref as n, normalizeClass as u, withCtx as a, renderSlot as s, createVNode as i, mergeProps as f, Transition as B, Fragment as M, renderList as $, resolveDynamicComponent as m, createCommentVNode as A, createTextVNode as D, toDisplayString as L } from "vue";
+import { Menu as N, MenuButton as v, MenuItems as S, MenuItem as p } from "@headlessui/vue";
+import { _ as V } from "../_shared/ButtonBase-DfkwHIhN.js";
 function x(t, c) {
-  return o(), w("svg", {
+  return r(), w("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     fill: "currentColor",
@@ -41,72 +41,72 @@ const T = /* @__PURE__ */ Object.assign({
   },
   emits: ["dropdown:click"],
   setup(t, { emit: c }) {
-    const b = c, y = (n) => {
+    const b = c, g = (o) => {
       const {
-        as: g,
+        as: h,
         bindAs: e,
         event: d,
-        icon: h,
+        icon: y,
         name: I,
         ...k
-      } = n;
+      } = o;
       return k;
     };
-    return (n, g) => (o(), r(a(N), {
+    return (o, h) => (r(), l(n(N), {
       as: "div",
-      class: u(["relative inline-block w-fit", t.rootClass])
+      class: u(["rvc-dropdown", t.rootClass])
     }, {
-      default: l(() => [
-        s(n.$slots, "button", {
+      default: a(() => [
+        s(o.$slots, "button", {
           label: t.label,
-          button: a(p)
+          button: n(v)
         }, () => [
-          i(a(p), f({
+          i(n(v), f({
             as: V,
             label: t.label,
             color: "light",
-            icon: a(x),
+            icon: n(x),
             "icon-left": t.alignLeft
-          }, n.$attrs), null, 16, ["label", "icon", "icon-left"])
+          }, o.$attrs), null, 16, ["label", "icon", "icon-left"])
         ]),
         i(B, {
-          "enter-active-class": "transition duration-100 ease-out",
-          "enter-from-class": "transform scale-95 opacity-0",
-          "enter-to-class": "transform scale-100 opacity-100",
-          "leave-active-class": "transition duration-75 ease-in",
-          "leave-from-class": "transform scale-100 opacity-100",
-          "leave-to-class": "transform scale-95 opacity-0"
+          "enter-active-class": "rvc-dropdown-transition-enter",
+          "enter-from-class": "rvc-dropdown-transition-enter-from",
+          "enter-to-class": "rvc-dropdown-transition-enter-to",
+          "leave-active-class": "rvc-dropdown-transition-leave",
+          "leave-from-class": "rvc-dropdown-transition-leave-from",
+          "leave-to-class": "rvc-dropdown-transition-leave-to"
         }, {
-          default: l(() => [
-            i(a(S), {
+          default: a(() => [
+            i(n(S), {
               class: u([
-                "rvc-dropdown",
+                "rvc-dropdown-items",
                 {
-                  "rvc-dropdown-left": t.alignLeft,
-                  "rvc-dropdown-full": t.fullWidth
+                  "rvc-dropdown-items-left": t.alignLeft,
+                  "rvc-dropdown-items-full": t.fullWidth
                 }
               ])
             }, {
-              default: l(() => [
-                s(n.$slots, "items", {
+              default: a(() => [
+                s(o.$slots, "items", {
                   items: t.items,
-                  menuItem: a(v)
+                  menuItem: n(p)
                 }, () => [
-                  (o(!0), w(M, null, $(t.items, (e, d) => (o(), r(a(v), {
+                  (r(!0), w(M, null, $(t.items, (e, d) => (r(), l(n(p), {
                     key: `${d}-dropdown-item`,
                     as: "template"
                   }, {
-                    default: l(() => [
-                      s(n.$slots, "item", { item: e }, () => [
-                        (o(), r(m(e.as ? e.as : "button"), f({
+                    default: a(() => [
+                      s(o.$slots, "item", { item: e }, () => [
+                        (r(), l(m(e.as ? e.as : "button"), f({
                           class: "rvc-dropdown-item",
                           ref_for: !0
-                        }, y(e), {
+                        }, g(e), {
                           as: e.bindAs ? e.bindAs : void 0,
-                          onClick: (h) => (b("dropdown:click", e), e.event ? e.event() : null)
+                          onClick: (y) => (b("dropdown:click", e), e.event ? e.event() : null)
                         }), {
-                          default: l(() => [
-                            e.icon ? (o(), r(m(e.icon), {
+                          default: a(() => [
+                            e.icon ? (r(), l(m(e.icon), {
                               key: 0,
                               class: "rvc-dropdown-item-icon"
                             })) : A("", !0),

package/dist/lightswitch/lightswitch.css

@@ -8,6 +8,8 @@
   --rvc-lightswitch-width: 3.125rem;
   --rvc-lightswitch-bg-color: var(--color-slate-200);
   --rvc-lightswitch-bg-color-enabled: var(--color-green-400);
+  --rvc-lightswitch-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
+  --rvc-lightswitch-disabled-opacity: var(--rvc-base-input-disabled-opacity);
   --rvc-lightswitch-transition-property: colors;
   --rvc-lightswitch-label-offset: 0.5rem;
   --rvc-lightswitch-toggle-offset: 0.1875rem;
@@ -25,34 +27,43 @@
       align-items: center;
     }
 
+    &:has(:disabled) .rvc-lightswitch {
+      opacity: var(--rvc-lightswitch-disabled-opacity);
+      cursor: default;
+
+      .rvc-lightswitch-toggle {
+        background-color: var(--rvc-lightswitch-bg-color-disabled);
+      }
+    }
+
     label {
-      cursor: pointer;
       padding-left: var(--rvc-lightswitch-label-offset);
+      cursor: pointer;
     }
 
     .rvc-lightswitch {
+      display: inline-flex;
+      position: relative;
+      align-items: center;
+      width: var(--rvc-lightswitch-width);
       height: var(--rvc-lightswitch-height);
       transition-property: var(--rvc-lightswitch-transition-property);
       transition-duration: var(--rvc-lightswitch-transition-duration);
       transition-timing-function: var(--rvc-lightswitch-transition-timing-function);
-      width: var(--rvc-lightswitch-width);
       border-radius: var(--rvc-lightswitch-border-radius);
       background-color: var(--rvc-lightswitch-bg-color);
-      position: relative;
-      display: inline-flex;
-      align-items: center;
 
       .rvc-lightswitch-toggle {
+        display: inline-block;
         width: var(--rvc-lightswitch-toggle-size);
         height: var(--rvc-lightswitch-toggle-size);
         transform: translateX(var(--rvc-lightswitch-toggle-offset));
         transform-origin: left;
-        border-radius: var(--rvc-lightswitch-border-radius);
-        background-color: var(--rvc-lightswitch-toggle-bg-color);
         transition-property: var(--rvc-lightswitch-toggle-transition-property);
         transition-duration: var(--rvc-lightswitch-toggle-transition-duration);
         transition-timing-function: var(--rvc-lightswitch-toggle-transition-timing-function);
-        display: inline-block;
+        border-radius: var(--rvc-lightswitch-border-radius);
+        background-color: var(--rvc-lightswitch-toggle-bg-color);
         box-shadow: var(--shadow-md);
       }
 

package/dist/rich-text-editor/index.js

@@ -1,11 +1,11 @@
-import { createElementBlock as r, openBlock as s, createElementVNode as n, ref as p, useAttrs as H, computed as x, watch as L, Fragment as A, createVNode as v, renderSlot as C, withCtx as _, normalizeClass as M, createCommentVNode as $, unref as m, renderList as B, createBlock as E, resolveDynamicComponent as S } from "vue";
+import { createElementBlock as r, openBlock as s, createElementVNode as n, ref as p, useAttrs as H, computed as x, watch as L, Fragment as A, createVNode as v, renderSlot as C, withCtx as M, normalizeClass as _, createCommentVNode as $, unref as f, renderList as B, createBlock as E, resolveDynamicComponent as S } from "vue";
 import { useEditor as O, EditorContent as T } from "@tiptap/vue-3";
 import N from "@tiptap/extension-link";
 import U from "@tiptap/starter-kit";
-import { _ as q } from "../_shared/Tooltip-BKXJoJ1x.js";
+import { _ as q } from "../_shared/Tooltip-B93ZF7IF.js";
 import { _ as z } from "../_shared/FormInput-abFMz_J4.js";
-import { _ as D } from "../_shared/Modal-COVlUEud.js";
-function I(a, c) {
+import { _ as D } from "../_shared/Modal-DdpJnce6.js";
+function I(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -20,7 +20,7 @@ function I(a, c) {
     })
   ]);
 }
-function R(a, c) {
+function R(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -35,7 +35,7 @@ function R(a, c) {
     })
   ]);
 }
-function j(a, c) {
+function j(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -55,7 +55,7 @@ function j(a, c) {
     })
   ]);
 }
-function F(a, c) {
+function F(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -66,7 +66,7 @@ function F(a, c) {
     n("path", { d: "M3 4.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6.25 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 7.25a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 11.5a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM4 12.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" })
   ]);
 }
-function K(a, c) {
+function K(i, d) {
   return s(), r("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 16 16",
@@ -95,7 +95,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
     config: {
       type: String,
       default: "default",
-      validator: (a) => ["default", "simple"].includes(a)
+      validator: (i) => ["default", "simple"].includes(i)
     },
     customExtensions: {
       type: Array,
@@ -104,22 +104,25 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
     customCommands: {
       type: Array,
       default: () => []
+    },
+    disabled: {
+      type: Boolean
     }
   },
   emits: ["update:modelValue", "tiptap:onCreate"],
-  setup(a, { emit: c }) {
-    const i = a, h = c, g = p(!1), u = p(!1), d = p(""), f = H(), k = f.class ? `${f.class} ` : "", V = [
+  setup(i, { emit: d }) {
+    const a = i, h = d, b = p(!1), u = p(!1), c = p(""), m = H(), k = m.class ? `${m.class} ` : "", y = [
       U,
       N.configure({
         openOnClick: !1
       })
     ], t = O({
-      extensions: [...V, ...i.customExtensions],
-      content: i.modelValue,
+      extensions: [...y, ...a.customExtensions],
+      content: a.modelValue,
       editorProps: {
         attributes: {
-          ...f,
-          id: i.id,
+          ...m,
+          id: a.id,
           class: `${k}rvc-textarea rvc-rich-text-textarea`
         }
       },
@@ -131,9 +134,9 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         h("update:modelValue", o);
       },
       onSelectionUpdate({ editor: l }) {
-        g.value = !l.view.state.selection.empty;
+        b.value = !l.view.state.selection.empty;
       }
-    }), y = x(() => [
+    }), V = x(() => [
       {
         name: "bold",
         icon: I,
@@ -154,7 +157,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         name: "bulletList",
         icon: F,
         title: "Bullet List",
-        isVisible: i.config === "default",
+        isVisible: a.config === "default",
         isActive: () => t.value.isActive("bulletList"),
         action: () => t.value.commands.toggleBulletList()
       },
@@ -162,7 +165,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         name: "orderedList",
         icon: K,
         title: "Ordered List",
-        isVisible: i.config === "default",
+        isVisible: a.config === "default",
         isActive: () => t.value.isActive("orderedList"),
         action: () => t.value.commands.toggleOrderedList()
       },
@@ -170,15 +173,15 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
         name: "link",
         icon: j,
         title: "Hyperlink",
-        isVisible: i.config === "default",
-        disabled: !g.value && !t.value.isActive("link"),
+        isVisible: a.config === "default",
+        disabled: !b.value && !t.value.isActive("link"),
         isActive: () => t.value.isActive("link"),
         action: () => {
-          d.value = t.value.getAttributes("link").href, u.value = !0;
+          c.value = t.value.getAttributes("link").href, u.value = !0;
         }
       }
-    ]), b = x(() => {
-      const l = y.value.filter((e) => i.config === "default" || ["bold", "italic"].includes(e.name)), o = i.customCommands.map((e) => ({
+    ]), g = x(() => {
+      const l = V.value.filter((e) => a.config === "default" || ["bold", "italic"].includes(e.name)), o = a.customCommands.map((e) => ({
         ...e,
         isVisible: e.isVisible ?? !0,
         disabled: typeof e.disabled == "function" ? e.disabled(t.value) : e.disabled ?? !1,
@@ -190,25 +193,25 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
       }));
       return [...l, ...o];
     });
-    L(() => i.modelValue, (l) => {
+    L(() => a.modelValue, (l) => {
       t.value.getHTML() === l || t.value.commands.setContent(l, !1);
     });
     const Z = () => {
-      t.value.commands.setLink({ href: d.value }), u.value = !1, d.value = null;
+      t.value.commands.setLink({ href: c.value }), u.value = !1, c.value = null;
     };
     return (l, o) => (s(), r(A, null, [
       v(D, {
-        id: `${i.id}-modal-add-hyperlink`,
+        id: `${a.id}-modal-add-hyperlink`,
         title: "Add Hyperlink",
         as: "form",
         show: u.value,
         "onModal:close": o[1] || (o[1] = (e) => u.value = !1),
         "onModal:save": Z
       }, {
-        default: _(() => [
+        default: M(() => [
           v(z, {
-            modelValue: d.value,
-            "onUpdate:modelValue": o[0] || (o[0] = (e) => d.value = e),
+            modelValue: c.value,
+            "onUpdate:modelValue": o[0] || (o[0] = (e) => c.value = e),
             placeholder: "https://www.example.com",
             type: "url",
             required: ""
@@ -218,29 +221,29 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
       }, 8, ["id", "show"]),
       C(l.$slots, "default"),
       n("div", {
-        class: M(["rvc-rich-text", a.rootClass])
+        class: _(["rvc-rich-text", i.rootClass, { "rvc-rich-text-disabled": i.disabled }])
       }, [
-        m(t) ? C(l.$slots, "toolbar", {
+        f(t) ? C(l.$slots, "toolbar", {
           key: 0,
-          commands: b.value,
-          tiptap: m(t)
+          commands: g.value,
+          tiptap: f(t)
         }, () => [
           n("ul", P, [
-            (s(!0), r(A, null, B(b.value.filter((e) => e.isVisible), (e) => (s(), r("li", {
+            (s(!0), r(A, null, B(g.value.filter((e) => e.isVisible), (e) => (s(), r("li", {
               key: `toolbar-item-command-${e.name}`
             }, [
               v(q, {
                 content: e.title,
                 placement: "bottom",
                 size: "sm",
-                class: "text-sm font-medium"
+                class: "rvc-rich-text-tooltip"
               }, {
-                default: _(() => [
+                default: M(() => [
                   n("button", {
                     disabled: e.disabled,
                     type: "button",
                     "aria-label": e.title,
-                    class: M([{ "rvc-rich-text-button-active": e.isActive() }, "rvc-rich-text-button"]),
+                    class: _([{ "rvc-rich-text-button-active": e.isActive() }, "rvc-rich-text-button"]),
                     onClick: e.action
                   }, [
                     (s(), E(S(e.icon)))
@@ -251,7 +254,7 @@ const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "on
             ]))), 128))
           ])
         ]) : $("", !0),
-        v(m(T), { editor: m(t) }, null, 8, ["editor"])
+        v(f(T), { editor: f(t) }, null, 8, ["editor"])
       ], 2)
     ], 64));
   }

package/dist/rich-text-editor/rich-text.css

@@ -28,8 +28,8 @@
       }
 
       ul, ol {
-        list-style-position: var(--rvc-rich-text-list-position);
         padding-left: var(--rvc-rich-text-list-padding);
+        list-style-position: var(--rvc-rich-text-list-position);
 
         li > * {
           display: inline;
@@ -40,28 +40,41 @@
       ol { list-style-type: decimal; }
 
       a {
-        text-decoration: var(--rvc-rich-text-anchor-text-decoration);
-        font-weight: var(--rvc-rich-text-anchor-font-weight);
         color: var(--rvc-rich-text-anchor-color);
+        font-weight: var(--rvc-rich-text-anchor-font-weight);
+        text-decoration: var(--rvc-rich-text-anchor-text-decoration);
+      }
+    }
+
+    &.rvc-rich-text-disabled {
+      opacity: var(--rvc-textarea-disabled-opacity);
+      pointer-events: none;
+
+      .rvc-rich-text-button {
+        pointer-events: none;
+      }
+
+      .rvc-rich-text-textarea {
+        background-color: var(--rvc-textarea-bg-color-disabled);
       }
     }
 
     .rvc-rich-text-toolbar {
-      padding: var(--rvc-textarea-padding-x);
-      gap: calc(var(--spacing) * 1);
       display: flex;
-      align-items: center;
       position: absolute;
-      inset-block-start: 0;
-      inset-inline: 0;
-      flex-wrap: wrap;
       z-index: 1;
+      flex-wrap: wrap;
+      align-items: center;
+      padding: var(--rvc-textarea-padding-x);
       pointer-events: none;
+      gap: calc(var(--spacing) * 1);
+      inset-block-start: 0;
+      inset-inline: 0;
     }
 
     .rvc-rich-text-button {
-      border-radius: var(--rvc-rich-text-button-border-radius);
       padding: var(--rvc-rich-text-button-padding);
+      border-radius: var(--rvc-rich-text-button-border-radius);
       background-color: var(--rvc-rich-text-button-bg-color);
       color: var(--rvc-rich-text-button-color);
       pointer-events: auto;
@@ -79,5 +92,10 @@
         height: var(--rvc-rich-text-icon-size);
       }
     }
+
+    .rvc-rich-text-tooltip {
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+    }
   }
 }