@oneflowui/ui 0.5.9 → 0.7.0

package/dist/components/base/InfoCard.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as E, useCssVars as L, computed as b, openBlock as t, createElementBlock as r, mergeProps as w, Fragment as f, renderSlot as c, createCommentVNode as n, createElementVNode as d, toDisplayString as i, normalizeStyle as u, renderList as B } from "vue";
-const P = {
+import { defineComponent as E, useCssVars as L, computed as y, openBlock as o, createElementBlock as a, mergeProps as B, Fragment as l, renderSlot as c, createCommentVNode as n, createElementVNode as s, toDisplayString as i, normalizeStyle as u, renderList as P } from "vue";
+const w = {
   key: 0,
   class: "of-info-card__icon-area"
 }, A = { class: "of-info-card__body" }, T = { class: "of-info-card__title" }, V = { class: "of-info-card__footer" }, D = {
@@ -44,126 +44,126 @@ const P = {
     typeColor: { default: void 0 }
   },
   emits: ["click"],
-  setup(o, { emit: m }) {
+  setup(t, { emit: g }) {
     L((e) => ({
-      e6754980: e.unread ? "var(--of-color-warning-light)" : "var(--of-color-bg-elevated)"
+      v36da208e: e.unread ? "var(--of-surface-selected)" : "var(--of-surface-elevated)"
     }));
-    const a = o, h = m, g = {
-      模板: "var(--of-color-primary-500)",
-      template: "var(--of-color-primary-500)",
-      会话: "var(--of-color-success)",
-      session: "var(--of-color-success)"
-    }, k = b(() => a.variant === "memo" ? a.importance === "high" ? "var(--of-color-error)" : a.borderColor ?? "var(--of-color-info)" : a.variant === "history" ? a.typeColor ? a.typeColor : a.type && g[a.type] ? g[a.type] : a.borderColor ?? "var(--of-color-primary-500)" : "transparent"), _ = b(() => {
+    const r = t, h = g, m = {
+      模板: "var(--of-accent-default)",
+      template: "var(--of-accent-default)",
+      会话: "var(--of-text-strong)",
+      session: "var(--of-text-strong)"
+    }, k = y(() => r.variant === "memo" ? r.importance === "high" ? "var(--of-border-strong)" : r.borderColor ?? "var(--of-accent-default)" : r.variant === "history" ? r.typeColor ? r.typeColor : r.type && m[r.type] ? m[r.type] : r.borderColor ?? "var(--of-accent-default)" : "transparent"), _ = y(() => {
       const e = {
         "--of-ic-border": k.value
       };
-      return a.variant === "notify" && (e["--of-ic-unread-dot"] = a.unread ? "var(--of-color-info)" : "var(--of-color-text-tertiary)"), e;
-    }), v = b(
+      return r.variant === "notify" && (e["--of-ic-unread-dot"] = r.unread ? "var(--of-accent-default)" : "var(--of-text-tertiary)"), e;
+    }), v = y(
       () => ({
-        "--of-ic-clamp": String(a.contentLines ?? 3)
+        "--of-ic-clamp": String(r.contentLines ?? 3)
       })
     );
     function C(e) {
-      const l = [
+      const f = [
         {
-          bg: "var(--of-badge-blue-bg)",
-          color: "var(--of-badge-blue-text)",
-          border: "var(--of-badge-blue-border)"
+          bg: "var(--of-surface-muted)",
+          color: "var(--of-accent-default)",
+          border: "var(--of-border-subtle)"
         },
         {
-          bg: "var(--of-badge-green-bg)",
-          color: "var(--of-badge-green-text)",
-          border: "var(--of-badge-green-border)"
+          bg: "var(--of-surface-panel)",
+          color: "var(--of-text-strong)",
+          border: "var(--of-border-subtle)"
         },
         {
-          bg: "var(--of-badge-orange-bg)",
-          color: "var(--of-badge-orange-text)",
-          border: "var(--of-badge-orange-border)"
+          bg: "var(--of-surface-selected)",
+          color: "var(--of-accent-strong)",
+          border: "var(--of-border-strong)"
         },
         {
-          bg: "var(--of-badge-purple-bg)",
-          color: "var(--of-badge-purple-text)",
-          border: "var(--of-badge-purple-border)"
+          bg: "var(--of-surface-panel)",
+          color: "var(--of-text-secondary)",
+          border: "var(--of-border-subtle)"
         },
         {
-          bg: "var(--of-badge-gray-bg)",
-          color: "var(--of-badge-gray-text)",
-          border: "var(--of-badge-gray-border)"
+          bg: "var(--of-surface-muted)",
+          color: "var(--of-text-tertiary)",
+          border: "var(--of-border-subtle)"
         }
-      ], s = l[e % l.length];
+      ], d = f[e % f.length];
       return {
-        "--of-ic-tag-bg": s.bg,
-        "--of-ic-tag-color": s.color,
-        "--of-ic-tag-border": s.border
+        "--of-ic-tag-bg": d.bg,
+        "--of-ic-tag-color": d.color,
+        "--of-ic-tag-border": d.border
       };
     }
-    function y(e) {
+    function b(e) {
       h("click", e);
     }
     function $(e) {
-      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), y(new MouseEvent("click")));
+      e.key !== "Enter" && e.key !== " " || (e.preventDefault(), b(new MouseEvent("click")));
     }
-    return (e, l) => (t(), r("div", w({
-      class: ["of-info-card", `of-info-card--${o.variant}`],
+    return (e, f) => (o(), a("div", B({
+      class: ["of-info-card", `of-info-card--${t.variant}`],
       style: _.value,
       role: "button",
       tabindex: "0"
     }, e.$attrs, {
-      onClick: y,
+      onClick: b,
       onKeydown: $
     }), [
-      o.variant === "memo" ? (t(), r(f, { key: 0 }, [
-        e.$slots.icon ? (t(), r("div", P, [
+      t.variant === "memo" ? (o(), a(l, { key: 0 }, [
+        e.$slots.icon ? (o(), a("div", w, [
           c(e.$slots, "icon", {}, void 0, !0)
         ])) : n("", !0),
-        d("div", A, [
-          d("div", T, i(o.title), 1),
-          o.content ? (t(), r("div", {
+        s("div", A, [
+          s("div", T, i(t.title), 1),
+          t.content ? (o(), a("div", {
             key: 0,
             class: "of-info-card__content of-info-card__content--clamp",
             style: u(v.value)
-          }, i(o.content), 5)) : n("", !0),
-          d("div", V, [
-            o.tags && o.tags.length ? (t(!0), r(f, { key: 0 }, B(o.tags, (s, S) => (t(), r("span", {
-              key: s,
+          }, i(t.content), 5)) : n("", !0),
+          s("div", V, [
+            t.tags && t.tags.length ? (o(!0), a(l, { key: 0 }, P(t.tags, (d, S) => (o(), a("span", {
+              key: d,
               class: "of-info-card__tag",
               style: u(C(S))
-            }, i(s), 5))), 128)) : n("", !0),
-            o.author ? (t(), r("span", D, i(o.author), 1)) : n("", !0),
-            o.date ? (t(), r("span", I, i(o.date), 1)) : n("", !0),
+            }, i(d), 5))), 128)) : n("", !0),
+            t.author ? (o(), a("span", D, i(t.author), 1)) : n("", !0),
+            t.date ? (o(), a("span", I, i(t.date), 1)) : n("", !0),
             c(e.$slots, "footer", {}, void 0, !0)
           ])
         ])
-      ], 64)) : o.variant === "notify" ? (t(), r(f, { key: 1 }, [
-        l[0] || (l[0] = d("span", { class: "of-info-card__dot" }, null, -1)),
-        d("div", K, [
-          d("div", M, i(o.title), 1),
-          o.content ? (t(), r("div", {
+      ], 64)) : t.variant === "notify" ? (o(), a(l, { key: 1 }, [
+        f[0] || (f[0] = s("span", { class: "of-info-card__dot" }, null, -1)),
+        s("div", K, [
+          s("div", M, i(t.title), 1),
+          t.content ? (o(), a("div", {
             key: 0,
             class: "of-info-card__content of-info-card__content--clamp",
             style: u(v.value)
-          }, i(o.content), 5)) : n("", !0),
-          o.meta ? (t(), r("div", N, i(o.meta), 1)) : n("", !0),
+          }, i(t.content), 5)) : n("", !0),
+          t.meta ? (o(), a("div", N, i(t.meta), 1)) : n("", !0),
           c(e.$slots, "footer", {}, void 0, !0)
         ]),
-        e.$slots.actions ? (t(), r("div", O, [
+        e.$slots.actions ? (o(), a("div", O, [
           c(e.$slots, "actions", {}, void 0, !0)
         ])) : n("", !0)
-      ], 64)) : o.variant === "history" ? (t(), r(f, { key: 2 }, [
-        e.$slots.icon ? (t(), r("div", z, [
+      ], 64)) : t.variant === "history" ? (o(), a(l, { key: 2 }, [
+        e.$slots.icon ? (o(), a("div", z, [
           c(e.$slots, "icon", {}, void 0, !0)
         ])) : n("", !0),
-        d("div", F, [
-          d("div", R, i(o.title), 1),
-          o.subtitle ? (t(), r("div", Y, i(o.subtitle), 1)) : n("", !0),
-          o.content ? (t(), r("div", {
+        s("div", F, [
+          s("div", R, i(t.title), 1),
+          t.subtitle ? (o(), a("div", Y, i(t.subtitle), 1)) : n("", !0),
+          t.content ? (o(), a("div", {
             key: 1,
             class: "of-info-card__content of-info-card__content--clamp",
             style: u(v.value)
-          }, i(o.content), 5)) : n("", !0),
+          }, i(t.content), 5)) : n("", !0),
           c(e.$slots, "footer", {}, void 0, !0)
         ]),
-        e.$slots.actions ? (t(), r("div", j, [
+        e.$slots.actions ? (o(), a("div", j, [
           c(e.$slots, "actions", {}, void 0, !0)
         ])) : n("", !0)
       ], 64)) : n("", !0)

package/dist/components/base/MonitorItem.vue.js

@@ -1,7 +1,7 @@
 import o from "./MonitorItem.vue2.js";
 /* empty css                 */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-264421cd"]]);
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-dcb81667"]]);
 export {
   _ as default
 };

package/dist/components/base/MonitorItem.vue2.js

@@ -1,8 +1,8 @@
-import { defineComponent as y, computed as o, openBlock as a, createElementBlock as s, mergeProps as p, withKeys as r, withModifiers as m, toDisplayString as i, createCommentVNode as d, createElementVNode as t, normalizeStyle as u } from "vue";
-const g = ["onKeydown"], C = {
+import { defineComponent as y, computed as o, openBlock as c, createElementBlock as s, mergeProps as g, withKeys as r, withModifiers as m, toDisplayString as i, createCommentVNode as d, createElementVNode as t, normalizeStyle as u } from "vue";
+const p = ["onKeydown"], C = {
   key: 0,
   class: "of-monitor-item__subtitle"
-}, w = { class: "of-monitor-item__label" }, M = { class: "of-monitor-item__progress" }, S = { class: "of-monitor-item__percentage" }, x = {
+}, w = { class: "of-monitor-item__label" }, M = { class: "of-monitor-item__progress" }, x = { class: "of-monitor-item__percentage" }, S = {
   key: 1,
   class: "of-monitor-item__count"
 }, V = /* @__PURE__ */ y({
@@ -19,29 +19,29 @@ const g = ["onKeydown"], C = {
   },
   emits: ["click"],
   setup(e, { emit: f }) {
-    const l = e, v = f, c = o(() => Math.min(100, Math.max(0, l.value))), _ = o(
-      () => c.value === 100 ? "var(--of-color-success)" : l.color ?? "var(--of-color-primary-500)"
+    const l = e, v = f, n = o(() => Math.min(100, Math.max(0, l.value))), _ = o(
+      () => n.value === 100 ? "var(--of-text-strong, var(--of-accent-strong))" : l.color ?? "var(--of-accent-default)"
     ), k = o(() => ({
-      backgroundColor: "var(--of-color-gray-100)"
+      backgroundColor: "var(--of-surface-muted, var(--of-color-gray-100))"
     })), b = o(() => ({
-      width: `${c.value}%`,
+      width: `${n.value}%`,
       background: _.value
     }));
-    function n() {
+    function a() {
       l.clickable && v("click");
     }
-    return (h, B) => (a(), s("div", p({
+    return (h, B) => (c(), s("div", g({
       class: ["of-monitor-item", { "of-monitor-item--clickable": e.clickable }],
       role: "button",
       tabindex: "0"
     }, h.$attrs, {
-      onClick: n,
+      onClick: a,
       onKeydown: [
-        r(m(n, ["prevent"]), ["enter"]),
-        r(m(n, ["prevent"]), ["space"])
+        r(m(a, ["prevent"]), ["enter"]),
+        r(m(a, ["prevent"]), ["space"])
       ]
     }), [
-      e.subtitle !== void 0 ? (a(), s("div", C, i(e.subtitle), 1)) : d("", !0),
+      e.subtitle !== void 0 ? (c(), s("div", C, i(e.subtitle), 1)) : d("", !0),
       t("div", w, i(e.label), 1),
       t("div", M, [
         t("div", {
@@ -54,9 +54,9 @@ const g = ["onKeydown"], C = {
           }, null, 4)
         ], 4)
       ]),
-      t("div", S, i(c.value) + "%", 1),
-      e.count !== void 0 ? (a(), s("div", x, i(e.count), 1)) : d("", !0)
-    ], 16, g));
+      t("div", x, i(n.value) + "%", 1),
+      e.count !== void 0 ? (c(), s("div", S, i(e.count), 1)) : d("", !0)
+    ], 16, p));
   }
 });
 export {

package/dist/components/base/PersonaCard.vue.js

@@ -1,7 +1,7 @@
 import o from "./PersonaCard.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-b283c2cd"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-260d05e8"]]);
 export {
   m as default
 };

package/dist/components/base/PersonaCard.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as P, computed as r, openBlock as t, createElementBlock as n, mergeProps as A, createElementVNode as c, normalizeStyle as g, createBlock as F, resolveDynamicComponent as D, Fragment as _, createTextVNode as N, toDisplayString as l, renderSlot as v, createCommentVNode as i, renderList as T } from "vue";
+import { defineComponent as w, computed as o, openBlock as r, createElementBlock as n, mergeProps as A, createElementVNode as s, normalizeStyle as u, createBlock as F, resolveDynamicComponent as D, Fragment as _, createTextVNode as N, toDisplayString as l, renderSlot as v, createCommentVNode as f, renderList as T } from "vue";
 import { resolveIcon as V } from "../../utils/icon.js";
 const H = { class: "of-persona-card__body" }, I = { class: "of-persona-card__name-row" }, K = {
   key: 0,
@@ -12,7 +12,7 @@ const H = { class: "of-persona-card__body" }, I = { class: "of-persona-card__nam
 }, q = { class: "of-persona-card__chevron" }, G = {
   key: 0,
   class: "of-persona-card__detail"
-}, Q = /* @__PURE__ */ P({
+}, Q = /* @__PURE__ */ w({
   name: "PersonaCard",
   inheritAttrs: !1,
   __name: "PersonaCard",
@@ -30,64 +30,64 @@ const H = { class: "of-persona-card__body" }, I = { class: "of-persona-card__nam
     size: { default: "md" }
   },
   emits: ["update:expanded", "click"],
-  setup(o, { emit: k }) {
-    const e = o, u = k, b = [
+  setup(t, { emit: k }) {
+    const e = t, g = k, b = [
       {
-        accent: "var(--of-color-warning)",
-        bg: "var(--of-color-warning-light)",
-        border: "var(--of-badge-orange-border)",
-        tagBg: "var(--of-badge-orange-bg)"
+        accent: "var(--of-accent-default)",
+        bg: "var(--of-surface-muted)",
+        border: "var(--of-border-subtle)",
+        tagBg: "var(--of-surface-selected)"
       },
       {
-        accent: "var(--of-color-primary-500)",
-        bg: "var(--of-color-primary-50)",
-        border: "var(--of-color-primary-200)",
-        tagBg: "var(--of-color-primary-100)"
+        accent: "var(--of-accent-strong)",
+        bg: "var(--of-surface-panel)",
+        border: "var(--of-border-strong)",
+        tagBg: "var(--of-surface-muted)"
       },
       {
-        accent: "var(--of-role-pm-text)",
-        bg: "var(--of-role-pm-bg)",
-        border: "var(--of-badge-red-border)",
-        tagBg: "var(--of-badge-red-bg)"
+        accent: "var(--of-text-strong)",
+        bg: "var(--of-surface-selected)",
+        border: "var(--of-border-subtle)",
+        tagBg: "var(--of-surface-panel)"
       },
       {
-        accent: "var(--of-color-success)",
-        bg: "var(--of-color-success-light)",
-        border: "var(--of-badge-green-border)",
-        tagBg: "var(--of-badge-green-bg)"
+        accent: "var(--of-text-secondary)",
+        bg: "var(--of-surface-elevated)",
+        border: "var(--of-border-subtle)",
+        tagBg: "var(--of-surface-muted)"
       },
       {
-        accent: "var(--of-color-info)",
-        bg: "var(--of-color-info-light)",
-        border: "var(--of-badge-blue-border)",
-        tagBg: "var(--of-badge-blue-bg)"
+        accent: "var(--of-accent-default)",
+        bg: "var(--of-surface-muted)",
+        border: "var(--of-border-subtle)",
+        tagBg: "var(--of-surface-selected)"
       },
       {
-        accent: "var(--of-role-arch-text)",
-        bg: "var(--of-role-arch-bg)",
-        border: "var(--of-badge-purple-border)",
-        tagBg: "var(--of-badge-purple-bg)"
+        accent: "var(--of-accent-strong)",
+        bg: "var(--of-surface-panel)",
+        border: "var(--of-border-subtle)",
+        tagBg: "var(--of-surface-selected)"
       },
       {
-        accent: "var(--of-color-error)",
-        bg: "var(--of-color-error-light)",
-        border: "var(--of-badge-red-border)",
-        tagBg: "var(--of-badge-red-bg)"
+        accent: "var(--of-text-strong)",
+        bg: "var(--of-surface-elevated)",
+        border: "var(--of-border-strong)",
+        tagBg: "var(--of-surface-muted)"
       },
       {
-        accent: "var(--of-role-fe-text)",
-        bg: "var(--of-role-fe-bg)",
-        border: "var(--of-badge-green-border)",
-        tagBg: "var(--of-badge-green-bg)"
+        accent: "var(--of-text-secondary)",
+        bg: "var(--of-surface-selected)",
+        border: "var(--of-border-subtle)",
+        tagBg: "var(--of-surface-panel)"
       }
     ];
     function x(a) {
-      let d = 0;
-      for (let s = 0; s < a.length; s++)
-        d = (d << 5) - d + a.charCodeAt(s), d |= 0;
-      return Math.abs(d);
+      let c = 0;
+      for (let d = 0; d < a.length; d++)
+        c = (c << 5) - c + a.charCodeAt(d), c |= 0;
+      return Math.abs(c);
     }
-    const f = r(() => {
+    const i = o(() => {
       if (e.color) {
         const a = e.color.replace("#", "");
         return {
@@ -98,15 +98,15 @@ const H = { class: "of-persona-card__body" }, I = { class: "of-persona-card__nam
         };
       }
       return b[x(e.name) % b.length];
-    }), p = r(() => e.size === "sm" ? 24 : 32), m = r(() => e.size === "sm" ? 12 : 16), B = r(() => e.size === "sm" ? 12 : 13), z = r(() => e.size === "sm" ? 11 : 12), h = r(() => {
+    }), p = o(() => e.size === "sm" ? 24 : 32), m = o(() => e.size === "sm" ? 12 : 16), B = o(() => e.size === "sm" ? 12 : 13), z = o(() => e.size === "sm" ? 11 : 12), y = o(() => {
       if (e.icon)
         return V(e.icon);
-    }), S = r(() => {
+    }), S = o(() => {
       if (e.icon && typeof e.icon == "string") return e.icon;
       if (e.icon) return "";
       const a = e.name.trim();
       return a ? a.charAt(0) : "?";
-    }), $ = r(() => [
+    }), $ = o(() => [
       "of-persona-card",
       `of-persona-card--${e.size}`,
       {
@@ -115,74 +115,74 @@ const H = { class: "of-persona-card__body" }, I = { class: "of-persona-card__nam
         "of-persona-card--disabled": e.disabled,
         "of-persona-card--expanded": e.expanded
       }
-    ]), C = r(() => ({
-      "--pc-accent": f.value.accent,
-      "--pc-accent-bg": f.value.bg,
-      "--pc-accent-border": f.value.border,
-      "--pc-accent-tag-bg": f.value.tagBg
-    })), w = r(() => ({
+    ]), C = o(() => ({
+      "--pc-accent": i.value.accent,
+      "--pc-accent-bg": i.value.bg,
+      "--pc-accent-border": i.value.border,
+      "--pc-accent-tag-bg": i.value.tagBg
+    })), E = o(() => ({
       width: `${p.value}px`,
       height: `${p.value}px`,
       fontSize: `${m.value}px`
     }));
-    function y() {
-      e.disabled || (u("update:expanded", !e.expanded), u("click"));
+    function h() {
+      e.disabled || (g("update:expanded", !e.expanded), g("click"));
     }
-    function E(a) {
-      a.key !== "Enter" && a.key !== " " || (a.preventDefault(), y());
+    function P(a) {
+      a.key !== "Enter" && a.key !== " " || (a.preventDefault(), h());
     }
-    return (a, d) => (t(), n("div", A({
+    return (a, c) => (r(), n("div", A({
       class: $.value,
       style: C.value
     }, a.$attrs), [
-      c("div", {
+      s("div", {
         class: "of-persona-card__header",
         role: "button",
         tabindex: "0",
-        onClick: y,
-        onKeydown: E
+        onClick: h,
+        onKeydown: P
       }, [
-        c("span", {
+        s("span", {
           class: "of-persona-card__avatar",
-          style: g(w.value)
+          style: u(E.value)
         }, [
-          h.value ? (t(), F(D(h.value), {
+          y.value ? (r(), F(D(y.value), {
             key: 0,
             size: m.value
-          }, null, 8, ["size"])) : (t(), n(_, { key: 1 }, [
+          }, null, 8, ["size"])) : (r(), n(_, { key: 1 }, [
             N(l(S.value), 1)
           ], 64))
         ], 4),
-        c("div", H, [
-          c("div", I, [
-            c("span", {
+        s("div", H, [
+          s("div", I, [
+            s("span", {
               class: "of-persona-card__name",
-              style: g({ fontSize: `${B.value}px` })
-            }, l(o.name), 5),
+              style: u({ fontSize: `${B.value}px` })
+            }, l(t.name), 5),
             v(a.$slots, "badge", {}, void 0, !0),
-            o.title ? (t(), n("span", K, l(o.title), 1)) : i("", !0)
+            t.title ? (r(), n("span", K, l(t.title), 1)) : f("", !0)
           ]),
-          o.subtitle ? (t(), n("span", {
+          t.subtitle ? (r(), n("span", {
             key: 0,
             class: "of-persona-card__subtitle",
-            style: g({ fontSize: `${z.value}px` })
-          }, l(o.subtitle), 5)) : i("", !0),
-          o.tags && o.tags.length > 0 ? (t(), n("div", L, [
-            (t(!0), n(_, null, T(o.tags, (s) => (t(), n("span", {
-              key: s,
+            style: u({ fontSize: `${z.value}px` })
+          }, l(t.subtitle), 5)) : f("", !0),
+          t.tags && t.tags.length > 0 ? (r(), n("div", L, [
+            (r(!0), n(_, null, T(t.tags, (d) => (r(), n("span", {
+              key: d,
               class: "of-persona-card__tag"
-            }, l(s), 1))), 128))
-          ])) : i("", !0)
+            }, l(d), 1))), 128))
+          ])) : f("", !0)
         ]),
-        c("div", M, [
+        s("div", M, [
           v(a.$slots, "actions", {}, void 0, !0),
-          o.done ? (t(), n("span", j, "✓")) : i("", !0),
-          c("span", q, l(o.expanded ? "▲" : "▼"), 1)
+          t.done ? (r(), n("span", j, "✓")) : f("", !0),
+          s("span", q, l(t.expanded ? "▲" : "▼"), 1)
         ])
       ], 32),
-      o.expanded ? (t(), n("div", G, [
+      t.expanded ? (r(), n("div", G, [
         v(a.$slots, "default", {}, void 0, !0)
-      ])) : i("", !0)
+      ])) : f("", !0)
     ], 16));
   }
 });

package/dist/components/base/ProgressBar.vue.js

@@ -1,7 +1,7 @@
 import o from "./ProgressBar.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-893c13d7"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-ea5a43a9"]]);
 export {
-  m as default
+  e as default
 };

package/dist/components/base/ProgressBar.vue2.js

@@ -1,46 +1,46 @@
-import { defineComponent as p, computed as r, openBlock as t, createElementBlock as d, mergeProps as f, createElementVNode as a, normalizeStyle as c, normalizeClass as v, renderSlot as b, toDisplayString as m, createCommentVNode as _ } from "vue";
-const g = {
+import { defineComponent as f, computed as r, openBlock as l, createElementBlock as d, mergeProps as p, createElementVNode as a, normalizeStyle as c, normalizeClass as v, renderSlot as b, toDisplayString as g, createCommentVNode as m } from "vue";
+const _ = {
   key: 0,
   class: "of-progress-bar__label"
-}, h = { class: "of-progress-bar__slot" }, y = { class: "of-progress-bar__value" }, $ = /* @__PURE__ */ p({
+}, h = { class: "of-progress-bar__slot" }, y = { class: "of-progress-bar__value" }, $ = /* @__PURE__ */ f({
   inheritAttrs: !1,
   __name: "ProgressBar",
   props: {
     value: {},
     height: { default: 4 },
     color: { default: void 0 },
-    bgColor: { default: "var(--of-color-gray-100)" },
+    bgColor: { default: "var(--of-surface-muted, var(--of-color-gray-100))" },
     showLabel: { type: Boolean, default: !1 },
     borderRadius: { default: 2 }
   },
   setup(s) {
-    const e = s, o = r(() => Math.min(100, Math.max(0, e.value))), u = r(
-      () => o.value === 100 ? "var(--of-color-success)" : e.color ?? "var(--of-color-primary-500)"
-    ), i = r(() => ({
+    const e = s, o = r(() => Math.min(100, Math.max(0, e.value))), n = r(
+      () => o.value === 100 ? "var(--of-text-strong, var(--of-accent-strong))" : e.color ?? "var(--of-accent-default)"
+    ), u = r(() => ({
       height: `${e.height}px`,
       backgroundColor: e.bgColor,
       borderRadius: `${e.borderRadius}px`
-    })), n = r(() => ({
+    })), i = r(() => ({
       width: `${o.value}%`,
-      background: u.value,
+      background: n.value,
       borderRadius: `${e.borderRadius}px`
     }));
-    return (l, k) => (t(), d("div", f({ class: "of-progress-bar" }, l.$attrs), [
+    return (t, k) => (l(), d("div", p({ class: "of-progress-bar" }, t.$attrs), [
       a("div", {
         class: "of-progress-bar__track pb",
-        style: c(i.value)
+        style: c(u.value)
       }, [
         a("div", {
           class: v(["of-progress-bar__fill pf", { dn: o.value === 100 }]),
-          style: c(n.value)
+          style: c(i.value)
         }, null, 6)
       ], 4),
-      s.showLabel ? (t(), d("div", g, [
+      s.showLabel ? (l(), d("div", _, [
         a("div", h, [
-          b(l.$slots, "default", {}, void 0, !0)
+          b(t.$slots, "default", {}, void 0, !0)
         ]),
-        a("span", y, m(o.value) + "%", 1)
-      ])) : _("", !0)
+        a("span", y, g(o.value) + "%", 1)
+      ])) : m("", !0)
     ], 16));
   }
 });

package/dist/components/base/RangeSlider.vue.js

@@ -1,7 +1,7 @@
 import o from "./RangeSlider.vue2.js";
 /* empty css                 */
 import r from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-77f7d546"]]);
+const f = /* @__PURE__ */ r(o, [["__scopeId", "data-v-9de86f92"]]);
 export {
   f as default
 };

package/dist/components/base/RefTag.vue.js

@@ -1,7 +1,7 @@
 import o from "./RefTag.vue2.js";
 /* empty css            */
-import f from "../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ f(o, [["__scopeId", "data-v-fbd2cfa1"]]);
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9057023c"]]);
 export {
   m as default
 };