sprintify-ui 0.12.5 → 0.12.7

package/dist/sprintify-ui.es.js

@@ -13625,7 +13625,7 @@ function LE(n) {
 function zE(n, t = "data:application/octet-stream") {
   return n.match(/^data:.*\/.*;base64,/) || (n = `${t};base64,${n}`), n;
 }
-async function mF(n, t = "data:application/octet-stream") {
+async function yF(n, t = "data:application/octet-stream") {
   return n = zE(n, t), (await fetch(n)).blob();
 }
 class w0 {
@@ -22159,6 +22159,10 @@ const pI = /* @__PURE__ */ Pu(hI), mI = { class: "text-xs text-slate-600" }, Q0
     twButton: {
       default: "outline-none",
       type: String
+    },
+    disabled: {
+      default: !1,
+      type: Boolean
     }
   },
   setup(n) {
@@ -22173,7 +22177,8 @@ const pI = /* @__PURE__ */ Pu(hI), mI = { class: "text-xs text-slate-600" }, Q0
     return (l, a) => (k(), ne(g(wv), null, {
       default: X(({ open: u }) => [
         ee(g(tk), {
-          class: j(g(s))
+          class: j(g(s)),
+          disabled: n.disabled
         }, {
           default: X(() => [
             A("div", {
@@ -22184,7 +22189,7 @@ const pI = /* @__PURE__ */ Pu(hI), mI = { class: "text-xs text-slate-600" }, Q0
             ], 512)
           ]),
           _: 3
-        }, 8, ["class"]),
+        }, 8, ["class", "disabled"]),
         (k(), ne(rr, { to: "body" }, [
           A("div", {
             ref_key: "dropdownRef",
@@ -44530,11 +44535,12 @@ const zz = { class: "px-1 py-1 border-b flex flex-wrap items-center" }, Pz = { c
             M.name === "highlight" ? (k(), ne(Qs, {
               key: 0,
               placement: "bottom",
-              "tw-button": "block"
+              "tw-button": "block",
+              disabled: n.disabled
             }, {
               button: X(() => [
                 A("div", {
-                  class: j([g(C), g(o).isActive("highlight") ? "bg-slate-200" : ""])
+                  class: j([g(C), g(o).isActive("highlight") ? "bg-slate-200" : "", n.disabled ? "opacity-50 cursor-not-allowed" : ""])
                 }, [
                   ee(x, {
                     class: "h-4 w-4 text-slate-600",
@@ -44569,14 +44575,15 @@ const zz = { class: "px-1 py-1 border-b flex flex-wrap items-center" }, Pz = { c
                 ])
               ]),
               _: 2
-            }, 1024)) : M.name === "link" ? (k(), ne(Qs, {
+            }, 1032, ["disabled"])) : M.name === "link" ? (k(), ne(Qs, {
               key: 1,
               placement: "bottom",
-              "tw-button": "block"
+              "tw-button": "block",
+              disabled: n.disabled
             }, {
               button: X(() => [
                 A("div", {
-                  class: j([g(C), g(o).isActive("link") ? "bg-slate-200" : ""]),
+                  class: j([g(C), g(o).isActive("link") ? "bg-slate-200" : "", n.disabled ? "opacity-50 cursor-not-allowed" : ""]),
                   onClick: h
                 }, [
                   ee(x, {
@@ -44639,7 +44646,7 @@ const zz = { class: "px-1 py-1 border-b flex flex-wrap items-center" }, Pz = { c
                 ])
               ]),
               _: 2
-            }, 1024)) : (k(), $("button", {
+            }, 1032, ["disabled"])) : (k(), $("button", {
               key: 2,
               class: j([g(C), g(o).isActive(M.name) ? "bg-slate-200" : ""]),
               type: "button",
@@ -46278,35 +46285,41 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
       ])
     ], 64));
   }
-}), MP = ["innerHTML"], Bg = /* @__PURE__ */ re({
+}), MP = { class: "flex items-start gap-2" }, EP = { class: "min-w-0 flex-1" }, TP = ["innerHTML"], AP = { class: "mt-1 text-xs text-slate-500" }, Bg = /* @__PURE__ */ re({
   __name: "BaseLayoutNotificationItemContent",
   props: {
     active: { type: Boolean },
     notification: {}
   },
   setup(n) {
-    const t = n, e = S(() => t.notification.read ? "text-slate-500" : "text-black font-medium before:bg-red-500 before:inline-block before:rounded-full before:mr-1 before:relative before:-top-px before:h-2 before:w-2 before:content-['']");
+    const t = n, e = S(() => t.notification.read ? "text-slate-900" : "text-slate-900 font-medium");
     return (r, o) => (k(), $("div", {
-      class: j(["px-3 py-2", [n.active ? "bg-slate-100" : ""]])
+      class: j(["px-3 py-2 rounded", [n.active ? "bg-slate-100" : ""]])
     }, [
-      A("div", {
-        class: j(["text-sm leading-tight", g(e)]),
-        innerHTML: n.notification.text
-      }, null, 10, MP),
-      n.notification.created_at ? (k(), ne(Q0, {
-        key: 0,
-        value: n.notification.created_at
-      }, {
-        default: X(({ readableDate: i }) => [
-          A("p", {
-            class: j(["mt-1 text-xs text-slate-400", [n.notification.read ? "opacity-70" : "opacity-100"]])
-          }, ie(i), 3)
-        ]),
-        _: 1
-      }, 8, ["value"])) : Z("", !0)
+      A("div", MP, [
+        A("span", {
+          class: j(["mt-1.5 inline-block h-2 w-2 shrink-0 rounded-full bg-red-500", [n.notification.read ? "invisible" : ""]])
+        }, null, 2),
+        A("div", EP, [
+          A("div", {
+            class: j(["text-sm leading-tight", g(e)]),
+            innerHTML: n.notification.text
+          }, null, 10, TP),
+          n.notification.created_at ? (k(), ne(Q0, {
+            key: 0,
+            tooltip: !1,
+            value: n.notification.created_at
+          }, {
+            default: X(({ readableDate: i }) => [
+              A("p", AP, ie(i), 1)
+            ]),
+            _: 1
+          }, 8, ["value"])) : Z("", !0)
+        ])
+      ])
     ], 2));
   }
-}), EP = { key: 1 }, TP = /* @__PURE__ */ re({
+}), IP = { key: 1 }, OP = /* @__PURE__ */ re({
   __name: "BaseLayoutNotificationItem",
   props: {
     notification: {
@@ -46338,7 +46351,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
           }, 1032, ["to", "onMouseup"])
         ]),
         _: 1
-      })) : (k(), $("div", EP, [
+      })) : (k(), $("div", IP, [
         ee(g(Di), {
           as: "button",
           class: "w-full text-left"
@@ -46355,10 +46368,10 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
       ]));
     };
   }
-}), AP = {
+}), DP = {
   key: 0,
   class: "flex items-center justify-center p-6"
-}, IP = { class: "" }, OP = { class: "text-center text-sm text-slate-700" }, DP = {
+}, BP = { class: "" }, RP = { class: "text-center text-sm text-slate-700" }, NP = {
   key: 1,
   class: "mt-1 border-t border-slate-200 pt-1"
 }, j1 = /* @__PURE__ */ re({
@@ -46418,21 +46431,21 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
           ], 2)
         ]),
         items: X(() => [
-          (k(!0), $(Be, null, Ye(n.notificationsConfig.items.slice(0, 4), (p) => (k(), ne(TP, {
+          (k(!0), $(Be, null, Ye(n.notificationsConfig.items.slice(0, 4), (p) => (k(), ne(OP, {
             key: p.id + "link",
             notification: p,
             onClick: l
           }, null, 8, ["notification"]))), 128)),
-          n.notificationsConfig.items.length == 0 ? (k(), $("div", AP, [
-            A("div", IP, [
+          n.notificationsConfig.items.length == 0 ? (k(), $("div", DP, [
+            A("div", BP, [
               ee(g(Je), {
                 icon: "heroicons:inbox-stack",
                 class: "mx-auto mb-2 h-8 w-8 text-slate-400"
               }),
-              A("p", OP, ie(g(be)("sui.notifications_empty")), 1)
+              A("p", RP, ie(g(be)("sui.notifications_empty")), 1)
             ])
           ])) : Z("", !0),
-          n.notificationsConfig.footerTo ? (k(), $("div", DP, [
+          n.notificationsConfig.footerTo ? (k(), $("div", NP, [
             ee(g(Di), null, {
               default: X(({ active: p, close: m }) => [
                 ee(h, {
@@ -46455,7 +46468,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
       }, 8, ["width"]);
     };
   }
-}), BP = { class: "flex w-full justify-between" }, RP = { class: "flex grow" }, NP = ["src", "alt"], $P = { class: "space-y-0.5 p-2" }, LP = { class: "p-2 pb-6" }, zP = { class: "mt-4 space-y-1" }, PP = /* @__PURE__ */ re({
+}), $P = { class: "flex w-full justify-between" }, LP = { class: "flex grow" }, zP = ["src", "alt"], PP = { class: "space-y-0.5 p-2" }, FP = { class: "p-2 pb-6" }, _P = { class: "mt-4 space-y-1" }, VP = /* @__PURE__ */ re({
   __name: "BaseLayoutStackedConfigurable",
   props: {
     appName: {
@@ -46516,8 +46529,8 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
         navbar: n.navbar
       }, {
         navbar: X(({ mobile: a }) => [
-          A("div", BP, [
-            A("div", RP, [
+          A("div", $P, [
+            A("div", LP, [
               n.logoUrl ? (k(), ne(l, {
                 key: 0,
                 to: n.logoTo,
@@ -46532,7 +46545,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                     class: "block h-8 w-auto",
                     src: n.logoUrl,
                     alt: n.appName
-                  }, null, 8, NP)
+                  }, null, 8, zP)
                 ]),
                 _: 1
               }, 8, ["to", "class"])) : Z("", !0),
@@ -46585,7 +46598,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
           ])
         ]),
         mobile: X(() => [
-          A("div", $P, [
+          A("div", PP, [
             (k(!0), $(Be, null, Ye(n.menu, (a) => (k(), ne(Zs, {
               key: a.label,
               item: a,
@@ -46596,14 +46609,14 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
           A("hr", {
             class: j(["mb-4 mt-2", [n.dark ? "border-slate-700" : "border-slate-200"]])
           }, null, 2),
-          A("div", LP, [
+          A("div", FP, [
             ee(Js, {
               user: n.user,
               "show-details": "",
               size: "base",
               class: j(["px-3", n.dark ? "text-white" : ""])
             }, null, 8, ["user", "class"]),
-            A("div", zP, [
+            A("div", _P, [
               (k(!0), $(Be, null, Ye(n.userMenu, (a) => (k(), ne(Zs, {
                 key: a.label,
                 item: a,
@@ -46620,10 +46633,10 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
       }, 8, ["size", "dark", "navbar"]);
     };
   }
-}), FP = { class: "min-h-full" }, _P = { class: "fixed inset-0 z-40 flex" }, VP = { class: "absolute top-0 right-0 pt-2 -mr-12" }, jP = ["src", "alt"], HP = {
+}), jP = { class: "min-h-full" }, HP = { class: "fixed inset-0 z-40 flex" }, WP = { class: "absolute top-0 right-0 pt-2 -mr-12" }, qP = ["src", "alt"], UP = {
   "data-scroll-lock-scrollable": "",
   class: "flex-1 h-0 mt-5 overflow-y-auto"
-}, WP = { class: "sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden" }, qP = { class: "flex flex-1" }, UP = { class: "relative flex-1 min-h-full" }, KP = ["src", "alt"], YP = { class: "flex flex-1" }, GP = { class: "flex-1" }, JP = "base_layout_sidebar.", H1 = /* @__PURE__ */ re({
+}, KP = { class: "sticky top-0 left-0 z-10 shadow shrink-0 || print:hidden" }, YP = { class: "flex flex-1" }, GP = { class: "relative flex-1 min-h-full" }, JP = ["src", "alt"], XP = { class: "flex flex-1" }, QP = { class: "flex-1" }, ZP = "base_layout_sidebar.", H1 = /* @__PURE__ */ re({
   __name: "BaseLayoutSidebar",
   props: {
     appName: {
@@ -46658,7 +46671,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
     function l() {
       o.value = !1;
     }
-    const a = St.settingsStorage, u = `${JP}.collapsed`, c = F(!1);
+    const a = St.settingsStorage, u = `${ZP}.collapsed`, c = F(!1);
     et(async () => {
       c.value = await a.get(u) == 1;
     });
@@ -46668,7 +46681,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
     const f = S(() => t.size === "xs" ? 50 : t.size === "sm" ? 54 : 64);
     return Ke("toggleMenu", i), Ke("openMenu", s), Ke("closeMenu", l), (h, p) => {
       const m = Dt("RouterLink");
-      return k(), $("div", FP, [
+      return k(), $("div", jP, [
         ee(g(Ev), {
           as: "template",
           show: o.value
@@ -46694,7 +46707,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                   ])]),
                   _: 1
                 }),
-                A("div", _P, [
+                A("div", HP, [
                   ee(g(ia), {
                     as: "template",
                     enter: "transition ease-in-out duration-300 transform",
@@ -46719,7 +46732,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                             "leave-to": "opacity-0"
                           }, {
                             default: X(() => [
-                              A("div", VP, [
+                              A("div", WP, [
                                 A("button", {
                                   type: "button",
                                   class: "flex items-center justify-center w-10 h-10 ml-1 rounded-full",
@@ -46746,11 +46759,11 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                                 class: "block w-auto h-8",
                                 src: n.logoUrl,
                                 alt: n.appName
-                              }, null, 8, jP)
+                              }, null, 8, qP)
                             ]),
                             _: 1
                           }, 8, ["to"]),
-                          A("div", HP, [
+                          A("div", UP, [
                             A("nav", null, [
                               ue(h.$slots, "menu")
                             ])
@@ -46775,7 +46788,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
         A("div", {
           class: j(["flex flex-col min-h-full || xl:print:pl-0", [c.value ? "xl:pl-14" : "xl:pl-64"]])
         }, [
-          A("div", WP, [
+          A("div", KP, [
             (k(!0), $(Be, null, Ye(g(r), (v) => (k(), ne(Uh, {
               key: v.id,
               color: v.color,
@@ -46805,12 +46818,12 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                   "aria-hidden": "true"
                 })
               ]),
-              A("div", qP, [
+              A("div", YP, [
                 ue(h.$slots, "navbar")
               ])
             ], 4)
           ]),
-          A("main", UP, [
+          A("main", GP, [
             ue(h.$slots, "default")
           ])
         ], 2),
@@ -46836,7 +46849,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                     class: "block w-auto h-8",
                     src: n.logoUrl,
                     alt: n.appName
-                  }, null, 8, KP)
+                  }, null, 8, JP)
                 ]),
                 _: 1
               }, 8, ["to"])),
@@ -46854,8 +46867,8 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
                 })
               ], 2)
             ], 6),
-            A("div", YP, [
-              A("nav", GP, [
+            A("div", XP, [
+              A("nav", QP, [
                 ue(h.$slots, "menu", { collapsed: c.value })
               ])
             ])
@@ -46864,10 +46877,10 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
       ]);
     };
   }
-}), XP = {
+}), eF = {
   key: 1,
   class: "px-4"
-}, QP = { class: "flex flex-1 justify-between px-4" }, ZP = { class: "flex grow" }, eF = { class: "ml-4 flex items-center md:ml-6" }, tF = /* @__PURE__ */ re({
+}, tF = { class: "flex flex-1 justify-between px-4" }, nF = { class: "flex grow" }, rF = { class: "ml-4 flex items-center md:ml-6" }, oF = /* @__PURE__ */ re({
   __name: "BaseLayoutSidebarConfigurable",
   props: {
     appName: {
@@ -46940,7 +46953,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
               d.label && !d.href && !d.to && !d.action ? (k(), $("div", {
                 key: d.label
               }, [
-                c ? (k(), $("div", XP, [...u[0] || (u[0] = [
+                c ? (k(), $("div", eF, [...u[0] || (u[0] = [
                   A("hr", { class: "my-2 border-slate-600" }, null, -1)
                 ])])) : (k(), $("h2", {
                   key: 0,
@@ -46973,11 +46986,11 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
         ], 2)
       ]),
       navbar: X(() => [
-        A("div", QP, [
-          A("div", ZP, [
+        A("div", tF, [
+          A("div", nF, [
             ue(a.$slots, "navbar")
           ]),
-          A("div", eF, [
+          A("div", rF, [
             n.notifications ? (k(), ne(j1, {
               key: 0,
               "notifications-config": n.notifications,
@@ -47080,9 +47093,9 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
   BaseInputPercent: $O,
   BaseJsonReader: jO,
   BaseLayoutSidebar: H1,
-  BaseLayoutSidebarConfigurable: tF,
+  BaseLayoutSidebarConfigurable: oF,
   BaseLayoutStacked: V1,
-  BaseLayoutStackedConfigurable: PP,
+  BaseLayoutStackedConfigurable: VP,
   BaseLazy: WO,
   BaseLoadingCover: nh,
   BaseMediaItem: nD,
@@ -47132,7 +47145,7 @@ const g4 = /* @__PURE__ */ Zi(a4, [["render", m4]]), v4 = { class: "flex-shrink-
   BaseTooltip: Qi,
   BaseUniqueCode: CP
 }, Symbol.toStringTag, { value: "Module" })), Ng = "sui.";
-class nF {
+class iF {
   constructor(t, e) {
     Kn(this, "getFunction");
     Kn(this, "setFunction");
@@ -47146,10 +47159,10 @@ class nF {
     return this.setFunction(t, e);
   }
 }
-const rF = 100, vF = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const sF = 100, wF = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  MAGIC_NUM: rF
-}, Symbol.toStringTag, { value: "Module" })), yF = { en: o0, fr: i0 }, St = {
+  MAGIC_NUM: sF
+}, Symbol.toStringTag, { value: "Module" })), xF = { en: o0, fr: i0 }, St = {
   http: lw.create(),
   locales: {
     en: "English",
@@ -47169,14 +47182,14 @@ const rF = 100, vF = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
       //comma: true,
     });
   },
-  settingsStorage: new nF(),
+  settingsStorage: new iF(),
   countries: [],
   regions: [],
   props: {
     size: "md"
   }
 };
-function oF(n, t) {
+function lF(n, t) {
   for (const e in Rg)
     n.component(e, Rg[e]);
   t != null && t.http && (St.http = t.http), t != null && t.locales && (St.locales = t.locales), t != null && t.upload_url && (St.upload_url = t.upload_url), t != null && t.formatQueryString && (St.formatQueryString = t.formatQueryString), t != null && t.parseQueryString && (St.parseQueryString = t.parseQueryString), t != null && t.settingsStorage && (St.settingsStorage = t.settingsStorage), t != null && t.countries && (St.countries = t.countries), t != null && t.regions && (St.regions = t.regions), t != null && t.props && (St.props = t.props), n.config.globalProperties.$i18n && We(
@@ -47187,7 +47200,7 @@ function oF(n, t) {
     { immediate: !0 }
   );
 }
-const bF = { install: oF };
+const kF = { install: lF };
 export {
   Nf as BaseActionButtons,
   yo as BaseActionItem,
@@ -47247,9 +47260,9 @@ export {
   $O as BaseInputPercent,
   jO as BaseJsonReader,
   H1 as BaseLayoutSidebar,
-  tF as BaseLayoutSidebarConfigurable,
+  oF as BaseLayoutSidebarConfigurable,
   V1 as BaseLayoutStacked,
-  PP as BaseLayoutStackedConfigurable,
+  VP as BaseLayoutStackedConfigurable,
   WO as BaseLazy,
   nh as BaseLoadingCover,
   nD as BaseMediaItem,
@@ -47298,19 +47311,19 @@ export {
   F1 as BaseTimelineItem,
   Qi as BaseTooltip,
   CP as BaseUniqueCode,
-  vF as MyConstants,
-  nF as SettingsStorage,
-  mF as base64ToBlob,
+  wF as MyConstants,
+  iF as SettingsStorage,
+  yF as base64ToBlob,
   LE as blobToBase64,
   St as config,
-  bF as default,
+  kF as default,
   jf as disableScroll,
   Hf as enableScroll,
   Wu as fileSizeFormat,
   HM as getAvatarColor,
   Sl as getColorConfig,
   jM as getInitials,
-  yF as messages,
+  xF as messages,
   b0 as resizeImageForUpload,
   TE as resizeImageFromURI,
   EE as toHumanList,

package/dist/types/components/BaseDropdown.vue.d.ts

@@ -26,6 +26,10 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: StringConstructor;
     };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     animated: {
         default: boolean;
@@ -43,7 +47,12 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
         default: string;
         type: StringConstructor;
     };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     placement: Placement;
     twButton: string;
     animated: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.12.5",
+  "version": "0.12.7",
   "type": "module",
   "scripts": {
     "generate-llm-txt": "node scripts/generate-llm-txt.js",

package/src/components/BaseDropdown.vue

@@ -2,6 +2,7 @@
   <Popover v-slot="{ open }">
     <PopoverButton
       :class="twButtonInternal"
+      :disabled="disabled"
     >
       <div ref="buttonRef">
         <slot name="button" />
@@ -70,6 +71,10 @@ const props = defineProps({
     default: 'outline-none',
     type: String,
   },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
 });
 
 const { floatingStyles } = useFloating(buttonRefEl, dropdownRef, {

package/src/components/BaseLayoutNotificationItemContent.vue

@@ -1,25 +1,33 @@
 <template>
   <div
-    class="px-3 py-2"
+    class="px-3 py-2 rounded"
     :class="[active ? 'bg-slate-100' : '']"
   >
-    <div
-      class="text-sm leading-tight"
-      :class="textClasses"
-      v-html="notification.text"
-    />
-    <BaseDisplayRelativeTime
-      v-if="notification.created_at"
-      v-slot="{ readableDate }"
-      :value="notification.created_at"
-    >
-      <p 
-        class="mt-1 text-xs text-slate-400"
-        :class="[notification.read ? 'opacity-70' : 'opacity-100']"
-      >
-        {{ readableDate }}
-      </p>
-    </BaseDisplayRelativeTime>
+    <div class="flex items-start gap-2">
+      <span
+        class="mt-1.5 inline-block h-2 w-2 shrink-0 rounded-full bg-red-500"
+        :class="[notification.read ? 'invisible' : '']"
+      />
+      <div class="min-w-0 flex-1">
+        <div
+          class="text-sm leading-tight"
+          :class="textClasses"
+          v-html="notification.text"
+        />
+        <BaseDisplayRelativeTime
+          v-if="notification.created_at"
+          v-slot="{ readableDate }"
+          :tooltip="false"
+          :value="notification.created_at"
+        >
+          <p
+            class="mt-1 text-xs text-slate-500"
+          >
+            {{ readableDate }}
+          </p>
+        </BaseDisplayRelativeTime>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -33,9 +41,7 @@ const props = defineProps<{
 }>();
 
 const textClasses = computed(() => {
-  return props.notification.read ?
-    'text-slate-500' :
-    "text-black font-medium before:bg-red-500 before:inline-block before:rounded-full before:mr-1 before:relative before:-top-px before:h-2 before:w-2 before:content-['']";
+  return props.notification.read ? 'text-slate-900' : 'text-slate-900 font-medium';
 });
 
 </script>

package/src/components/BaseLayoutSidebarConfigurable.stories.js

@@ -131,6 +131,12 @@ export default {
           text: "You have a new message",
           created_at: DateTime.now().minus({ second: 1 }).toISO(),
         },
+        {
+          id: "3",
+          text: "Please verify your email address",
+          created_at: DateTime.now().minus({ second: 1000 }).toISO(),
+          read: true,
+        },
         {
           id: "2",
           text: "Your inbox is now full. Please empty your inbox before it goes bang.",

package/src/components/BaseTipTap.vue

@@ -15,9 +15,10 @@
           v-if="action.name === 'highlight'"
           placement="bottom"
           tw-button="block"
+          :disabled="disabled"
         >
           <template #button>
-            <div :class="[buttonClass, editor.isActive('highlight') ? 'bg-slate-200' : '']">
+            <div :class="[buttonClass, editor.isActive('highlight') ? 'bg-slate-200' : '', disabled ? 'opacity-50 cursor-not-allowed' : '']">
               <BaseIcon
                 class="h-4 w-4 text-slate-600"
                 :icon="action.icon"
@@ -52,10 +53,11 @@
           v-else-if="action.name === 'link'"
           placement="bottom"
           tw-button="block"
+          :disabled="disabled"
         >
           <template #button>
             <div
-              :class="[buttonClass, editor.isActive('link') ? 'bg-slate-200' : '']"
+              :class="[buttonClass, editor.isActive('link') ? 'bg-slate-200' : '', disabled ? 'opacity-50 cursor-not-allowed' : '']"
               @click="openLinkDropdown"
             >
               <BaseIcon