@ulu/frontend-vue 0.4.1 → 0.5.0

package/dist/components/visualizations/UluProgressBar.vue.d.ts

@@ -5,14 +5,15 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     classes: Record<string, any>;
+    danger: boolean;
     small: boolean;
     labelHidden: boolean;
+    warning: boolean;
     amount: number;
     labelElement: string;
     total: number;
     deficit: number;
-    positive: boolean;
-    negative: boolean;
+    success: boolean;
     loader: boolean;
     rounded: boolean;
     indeterminate: boolean;
@@ -23,14 +24,15 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     formatValue?: Function | undefined;
     $props: {
         readonly classes?: Record<string, any> | undefined;
+        readonly danger?: boolean | undefined;
         readonly small?: boolean | undefined;
         readonly labelHidden?: boolean | undefined;
+        readonly warning?: boolean | undefined;
         readonly amount?: number | undefined;
         readonly labelElement?: string | undefined;
         readonly total?: number | undefined;
         readonly deficit?: number | undefined;
-        readonly positive?: boolean | undefined;
-        readonly negative?: boolean | undefined;
+        readonly success?: boolean | undefined;
         readonly loader?: boolean | undefined;
         readonly rounded?: boolean | undefined;
         readonly indeterminate?: boolean | undefined;

package/dist/components/visualizations/UluProgressBar.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluProgressBar.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluProgressBar.vue"],"names":[],"mappings":"AA4DA;wBA4cqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sPAQG"}
+{"version":3,"file":"UluProgressBar.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluProgressBar.vue"],"names":[],"mappings":"AA4DA;wBAsdqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sPAQG"}

package/dist/components/visualizations/UluProgressBar.vue.js

@@ -1,21 +1,21 @@
-import { computed as m, createElementBlock as n, openBlock as s, normalizeClass as v, unref as B, createCommentVNode as r, createElementVNode as o, createBlock as h, resolveDynamicComponent as k, withCtx as V, renderSlot as i, createTextVNode as d, toDisplayString as u, normalizeStyle as b } from "vue";
+import { computed as m, createElementBlock as o, openBlock as s, normalizeClass as b, unref as B, createCommentVNode as r, createElementVNode as n, createBlock as h, resolveDynamicComponent as k, withCtx as V, renderSlot as i, createTextVNode as d, toDisplayString as u, normalizeStyle as v } from "vue";
 import { useModifiers as $ } from "../../composables/useModifiers.js";
-const C = {
+const w = {
   key: 0,
   class: "progress-bar__header"
-}, H = {
+}, C = {
   key: 1,
   class: "progress-bar__value progress-bar__value--amount"
-}, N = {
+}, H = {
   key: 2,
   class: "progress-bar__icon"
-}, S = { class: "progress-bar__track" }, A = {
+}, N = { class: "progress-bar__track" }, S = {
   key: 1,
   class: "progress-bar__values"
-}, D = { class: "progress-bar__value progress-bar__value--amount" }, E = {
+}, A = { class: "progress-bar__value progress-bar__value--amount" }, D = {
   key: 0,
   class: "progress-bar__value progress-bar__value--deficit"
-}, I = { class: "progress-bar__value progress-bar__value--total" }, M = {
+}, E = { class: "progress-bar__value progress-bar__value--total" }, M = {
   __name: "UluProgressBar",
   props: {
     /**
@@ -66,13 +66,17 @@ const C = {
     */
     small: Boolean,
     /**
-    * Applies the 'positive' style (e.g., green).
+    * Applies the 'success' style.
+    */
+    success: Boolean,
+    /**
+    * Applies the 'warning' style.
     */
-    positive: Boolean,
+    warning: Boolean,
     /**
-    * Applies the 'negative' style (e.g., red).
+    * Applies the 'danger' style.
     */
-    negative: Boolean,
+    danger: Boolean,
     /**
     * Applies styles for use as a thin loader.
     */
@@ -107,28 +111,29 @@ const C = {
     modifiers: [String, Array]
   },
   setup(e) {
-    const a = e, c = (t, l) => `${l === 0 ? 0 : t / l * 100}%`, f = m(() => a.indeterminate ? null : c(a.amount, a.total)), g = m(() => c(a.deficit, a.total)), { resolvedModifiers: y } = $({
+    const a = e, c = (t, l) => `${l === 0 ? 0 : t / l * 100}%`, g = m(() => a.indeterminate ? null : c(a.amount, a.total)), f = m(() => c(a.deficit, a.total)), { resolvedModifiers: y } = $({
       props: a,
       baseClass: "progress-bar",
       internal: m(() => ({
         small: a.small,
-        positive: a.positive,
-        negative: a.negative,
+        success: a.success,
+        warning: a.warning,
+        danger: a.danger,
         loader: a.loader,
         rounded: a.rounded,
         indeterminate: a.indeterminate
       }))
     });
-    return (t, l) => (s(), n("div", {
-      class: v(["progress-bar", [
+    return (t, l) => (s(), o("div", {
+      class: b(["progress-bar", [
         B(y),
         { "type-small": e.small }
       ]])
     }, [
-      e.label || t.$slots.label || t.$slots.icon || e.amountInHeader ? (s(), n("div", C, [
+      e.label || t.$slots.label || t.$slots.icon || e.amountInHeader ? (s(), o("div", w, [
         e.label ? (s(), h(k(e.labelElement), {
           key: 0,
-          class: v(["progress-bar__label", [e.classes.label, { "hidden-visually": e.labelHidden }]])
+          class: b(["progress-bar__label", [e.classes.label, { "hidden-visually": e.labelHidden }]])
         }, {
           default: V(() => [
             i(t.$slots, "label", {}, () => [
@@ -137,42 +142,42 @@ const C = {
           ]),
           _: 3
         }, 8, ["class"])) : r("", !0),
-        e.amountInHeader ? (s(), n("div", H, [
-          l[0] || (l[0] = o("strong", { class: "hidden-visually" }, "Amount:", -1)),
+        e.amountInHeader ? (s(), o("div", C, [
+          l[0] || (l[0] = n("strong", { class: "hidden-visually" }, "Amount:", -1)),
           i(t.$slots, "valueAmount", { value: e.amount }, () => [
             d(u(e.formatValue(e.amount, "amount")), 1)
           ])
         ])) : r("", !0),
-        t.$slots.icon ? (s(), n("div", N, [
+        t.$slots.icon ? (s(), o("div", H, [
           i(t.$slots, "icon")
         ])) : r("", !0)
       ])) : r("", !0),
-      o("div", S, [
-        o("div", {
+      n("div", N, [
+        n("div", {
           class: "progress-bar__bar",
-          style: b({ width: f.value })
+          style: v({ width: g.value })
         }, null, 4),
-        e.deficit > 0 ? (s(), n("div", {
+        e.deficit > 0 ? (s(), o("div", {
           key: 0,
           class: "progress-bar__bar--deficit",
-          style: b({ width: g.value })
+          style: v({ width: f.value })
         }, null, 4)) : r("", !0)
       ]),
-      !e.noValues && !e.amountInHeader && !e.loader && !e.indeterminate ? (s(), n("div", A, [
-        o("div", D, [
-          l[1] || (l[1] = o("strong", { class: "hidden-visually" }, "Amount:", -1)),
+      !e.noValues && !e.amountInHeader && !e.loader && !e.indeterminate ? (s(), o("div", S, [
+        n("div", A, [
+          l[1] || (l[1] = n("strong", { class: "hidden-visually" }, "Amount:", -1)),
           i(t.$slots, "valueAmount", { value: e.amount }, () => [
             d(u(e.formatValue(e.amount, "amount")), 1)
           ])
         ]),
-        e.deficit > 0 ? (s(), n("div", E, [
-          l[2] || (l[2] = o("strong", { class: "hidden-visually" }, "Deficit: ", -1)),
+        e.deficit > 0 ? (s(), o("div", D, [
+          l[2] || (l[2] = n("strong", { class: "hidden-visually" }, "Deficit: ", -1)),
           i(t.$slots, "valueDeficit", { value: e.deficit }, () => [
             d("-" + u(e.formatValue(e.deficit, "deficit")), 1)
           ])
         ])) : r("", !0),
-        o("div", I, [
-          l[3] || (l[3] = o("strong", { class: "hidden-visually" }, "Total:", -1)),
+        n("div", E, [
+          l[3] || (l[3] = n("strong", { class: "hidden-visually" }, "Total:", -1)),
           i(t.$slots, "valueTotal", { value: e.total }, () => [
             d(u(e.formatValue(e.total, "total")), 1)
           ])

package/dist/components/visualizations/UluProgressCircle.vue.d.ts

@@ -6,29 +6,35 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     duration: number;
     easing: string;
+    danger: boolean;
     small: boolean;
     label: string;
+    warning: boolean;
+    success: boolean;
     formatValue: Function;
     percentage: number;
     noValue: boolean;
     outside: boolean;
     outsideBelow: boolean;
-    status: string;
     pieStyle: boolean;
     noMask: boolean;
+    modifiers?: string | unknown[] | undefined;
     $props: {
         readonly duration?: number | undefined;
         readonly easing?: string | undefined;
+        readonly danger?: boolean | undefined;
         readonly small?: boolean | undefined;
         readonly label?: string | undefined;
+        readonly warning?: boolean | undefined;
+        readonly success?: boolean | undefined;
         readonly formatValue?: Function | undefined;
         readonly percentage?: number | undefined;
         readonly noValue?: boolean | undefined;
         readonly outside?: boolean | undefined;
         readonly outsideBelow?: boolean | undefined;
-        readonly status?: string | undefined;
         readonly pieStyle?: boolean | undefined;
         readonly noMask?: boolean | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     pie: SVGCircleElement;

package/dist/components/visualizations/UluProgressCircle.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluProgressCircle.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluProgressCircle.vue"],"names":[],"mappings":"AAkCA;wBAqYqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBASG"}
+{"version":3,"file":"UluProgressCircle.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/visualizations/UluProgressCircle.vue"],"names":[],"mappings":"AAkCA;wBA0ZqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBASG"}

package/dist/components/visualizations/UluProgressCircle.vue.js

@@ -1,14 +1,15 @@
-import { ref as h, watch as k, computed as i, onMounted as B, createElementBlock as o, openBlock as c, normalizeClass as V, createElementVNode as a, createCommentVNode as p, toDisplayString as u, normalizeStyle as w, renderSlot as y, createTextVNode as f } from "vue";
-const S = { class: "hidden-visually" }, _ = { class: "progress-circle__chart" }, x = {
+import { ref as B, watch as h, computed as i, onMounted as k, createElementBlock as o, openBlock as n, normalizeClass as w, unref as V, createElementVNode as l, createCommentVNode as f, toDisplayString as u, normalizeStyle as S, renderSlot as y, createTextVNode as v } from "vue";
+import { useModifiers as _ } from "../../composables/useModifiers.js";
+const b = { class: "hidden-visually" }, x = { class: "progress-circle__chart" }, M = {
   class: "progress-circle__chart-svg",
   viewBox: "0 0 32 32"
-}, $ = {
+}, N = {
   key: 0,
   class: "progress-circle__chart-value"
-}, b = {
+}, $ = {
   key: 0,
   class: "progress-circle__value type-small-x"
-}, C = {
+}, z = {
   __name: "UluProgressCircle",
   props: {
     /**
@@ -31,7 +32,7 @@ const S = { class: "hidden-visually" }, _ = { class: "progress-circle__chart" },
      */
     formatValue: {
       type: Function,
-      default: (s) => `${s}%`
+      default: (a) => `${a}%`
     },
     /**
      * Hides the percentage value display.
@@ -50,12 +51,17 @@ const S = { class: "hidden-visually" }, _ = { class: "progress-circle__chart" },
      */
     outsideBelow: Boolean,
     /**
-     * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
+     * Applies the 'danger' style.
      */
-    status: {
-      type: String,
-      default: ""
-    },
+    danger: Boolean,
+    /**
+     * Applies the 'warning' style.
+     */
+    warning: Boolean,
+    /**
+     * Applies the 'success' style.
+     */
+    success: Boolean,
     /**
      * Renders the component as a solid pie chart instead of a donut.
      */
@@ -79,71 +85,78 @@ const S = { class: "hidden-visually" }, _ = { class: "progress-circle__chart" },
       type: String,
       default: "ease-in"
       // Matches SCSS animation-timing
-    }
+    },
+    /**
+     * Modifiers (to add any modifier classes based on base class)
+     */
+    modifiers: [String, Array]
   },
-  setup(s) {
-    const e = s, l = h(null), d = (r) => r === 100 ? 101 : r, g = (r = 0) => {
-      if (!l.value || !l.value.animate) return;
-      const t = { strokeDasharray: [`${r} 100`, m.value] };
-      l.value.animate(t, { duration: e.duration, easing: e.easing, fill: "forwards" });
+  setup(a) {
+    const e = a, t = B(null), d = (s) => s === 100 ? 101 : s, g = (s = 0) => {
+      if (!t.value || !t.value.animate) return;
+      const r = { strokeDasharray: [`${s} 100`, m.value] };
+      t.value.animate(r, { duration: e.duration, easing: e.easing, fill: "forwards" });
     };
-    k(() => e.percentage, (r, t) => {
-      r !== t && g(d(t));
+    h(() => e.percentage, (s, r) => {
+      s !== r && g(d(r));
     });
-    const m = i(() => `${d(e.percentage)} 100`), n = i(() => e.outside || e.outsideBelow || e.small), v = i(() => {
-      const r = {
-        "progress-circle": !0,
-        "progress-circle--small": e.small,
-        "progress-circle--pie": e.pieStyle,
-        "progress-circle--outside": n.value,
-        "progress-circle--outside-below": e.outsideBelow,
-        "progress-circle--no-mask": e.noMask
-      };
-      return e.status && (r[`progress-circle--${e.status}`] = !0), r;
+    const m = i(() => `${d(e.percentage)} 100`), c = i(() => e.outside || e.outsideBelow || e.small), { resolvedModifiers: p } = _({
+      props: e,
+      baseClass: "progress-circle",
+      internal: i(() => ({
+        small: e.small,
+        pie: e.pieStyle,
+        outside: c.value,
+        "outside-below": e.outsideBelow,
+        "no-mask": e.noMask,
+        danger: e.danger,
+        warning: e.warning,
+        success: e.success
+      }))
     });
-    return B(() => {
+    return k(() => {
       g();
-    }), (r, t) => (c(), o("div", {
-      class: V(v.value)
+    }), (s, r) => (n(), o("div", {
+      class: w(["progress-circle", V(p)])
     }, [
-      a("strong", S, u(s.label), 1),
-      a("div", _, [
-        (c(), o("svg", x, [
-          t[0] || (t[0] = a("circle", {
+      l("strong", b, u(a.label), 1),
+      l("div", x, [
+        (n(), o("svg", M, [
+          r[0] || (r[0] = l("circle", {
             class: "progress-circle__chart-track",
             r: "16",
             cx: "16",
             cy: "16"
           }, null, -1)),
-          a("circle", {
+          l("circle", {
             class: "progress-circle__chart-pie",
             ref_key: "pie",
-            ref: l,
+            ref: t,
             r: "16",
             cx: "16",
             cy: "16",
-            style: w({ strokeDasharray: m.value })
+            style: S({ strokeDasharray: m.value })
           }, null, 4),
-          t[1] || (t[1] = a("circle", {
+          r[1] || (r[1] = l("circle", {
             class: "progress-circle__chart-mask",
             cx: "16",
             cy: "16"
           }, null, -1))
         ])),
-        !n.value && !s.noValue ? (c(), o("strong", $, [
-          y(r.$slots, "value", { value: s.percentage }, () => [
-            f(u(s.formatValue(s.percentage)), 1)
+        !c.value && !a.noValue ? (n(), o("strong", N, [
+          y(s.$slots, "value", { value: a.percentage }, () => [
+            v(u(a.formatValue(a.percentage)), 1)
           ])
-        ])) : p("", !0)
+        ])) : f("", !0)
       ]),
-      n.value && !s.noValue ? (c(), o("strong", b, [
-        y(r.$slots, "value", { value: s.percentage }, () => [
-          f(u(s.formatValue(s.percentage)), 1)
+      c.value && !a.noValue ? (n(), o("strong", $, [
+        y(s.$slots, "value", { value: a.percentage }, () => [
+          v(u(a.formatValue(a.percentage)), 1)
         ])
-      ])) : p("", !0)
+      ])) : f("", !0)
     ], 2));
   }
 };
 export {
-  C as default
+  z as default
 };

package/lib/components/visualizations/UluProgressBar.vue

@@ -116,13 +116,17 @@
     */
     small: Boolean,
     /**
-    * Applies the 'positive' style (e.g., green).
+    * Applies the 'success' style.
     */
-    positive: Boolean,
+    success: Boolean,
     /**
-    * Applies the 'negative' style (e.g., red).
+    * Applies the 'warning' style.
     */
-    negative: Boolean,
+    warning: Boolean,
+    /**
+    * Applies the 'danger' style.
+    */
+    danger: Boolean,
     /**
     * Applies styles for use as a thin loader.
     */
@@ -174,8 +178,9 @@
     baseClass: "progress-bar",
     internal: computed(() => ({
       'small': props.small,
-      'positive': props.positive,
-      'negative': props.negative,
+      'success': props.success,
+      'warning': props.warning,
+      'danger': props.danger,
       'loader': props.loader,
       'rounded': props.rounded,
       'indeterminate': props.indeterminate,

package/lib/components/visualizations/UluProgressCircle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="componentClasses">
+  <div class="progress-circle" :class="resolvedModifiers">
     <strong class="hidden-visually">{{ label }}</strong>
     <div class="progress-circle__chart">
       <svg class="progress-circle__chart-svg" viewBox="0 0 32 32">
@@ -34,126 +34,136 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted } from 'vue';
+  import { ref, computed, watch, onMounted } from 'vue';
+  import { useModifiers } from "../../composables/useModifiers.js";
 
-/**
- * A circular progress indicator component.
- * @slot value - The value display. Overrides the `formatValue` prop.
- */
-const props = defineProps({
   /**
-   * The label for accessibility (visually hidden).
+   * A circular progress indicator component.
+   * @slot value - The value display. Overrides the `formatValue` prop.
    */
-  label: {
-    type: String,
-    default: "Progress"
-  },
-  /**
-   * The progress percentage (0-100).
-   */
-  percentage: {
-    type: Number,
-    default: 0
-  },
-  /**
-   * A function to format the percentage value.
-   * Takes the number as input and should return a string.
-   */
-  formatValue: {
-    type: Function,
-    default: (value) => `${ value }%`,
-  },
-  /**
-   * Hides the percentage value display.
-   */
-  noValue: Boolean,
-  /**
-   * Renders a smaller version of the component.
-   */
-  small: Boolean,
-  /**
-   * Displays the percentage value outside (to the side) of the circle.
-   */
-  outside: Boolean,
-  /**
-   * Displays the percentage value below the circle.
-   */
-  outsideBelow: Boolean,
-  /**
-   * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
-   */
-  status: {
-    type: String,
-    default: ''
-  },
-  /**
-   * Renders the component as a solid pie chart instead of a donut.
-   */
-  pieStyle: Boolean,
-  /**
-   * Removes the center mask, filling the entire circle.
-   */
-  noMask: Boolean,
-  /**
-   * The duration of the animation in milliseconds.
-   */
-  duration: {
-    type: Number,
-    default: 1000 // Matches SCSS animation-duration
-  },
-  /**
-   * The easing function for the animation.
-   */
-  easing: {
-    type: String,
-    default: "ease-in" // Matches SCSS animation-timing
-  }
-});
+  const props = defineProps({
+    /**
+     * The label for accessibility (visually hidden).
+     */
+    label: {
+      type: String,
+      default: "Progress"
+    },
+    /**
+     * The progress percentage (0-100).
+     */
+    percentage: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * A function to format the percentage value.
+     * Takes the number as input and should return a string.
+     */
+    formatValue: {
+      type: Function,
+      default: (value) => `${ value }%`,
+    },
+    /**
+     * Hides the percentage value display.
+     */
+    noValue: Boolean,
+    /**
+     * Renders a smaller version of the component.
+     */
+    small: Boolean,
+    /**
+     * Displays the percentage value outside (to the side) of the circle.
+     */
+    outside: Boolean,
+    /**
+     * Displays the percentage value below the circle.
+     */
+    outsideBelow: Boolean,
+    /**
+     * Applies the 'danger' style.
+     */
+    danger: Boolean,
+    /**
+     * Applies the 'warning' style.
+     */
+    warning: Boolean,
+    /**
+     * Applies the 'success' style.
+     */
+    success: Boolean,
+    /**
+     * Renders the component as a solid pie chart instead of a donut.
+     */
+    pieStyle: Boolean,
+    /**
+     * Removes the center mask, filling the entire circle.
+     */
+    noMask: Boolean,
+    /**
+     * The duration of the animation in milliseconds.
+     */
+    duration: {
+      type: Number,
+      default: 1000 // Matches SCSS animation-duration
+    },
+    /**
+     * The easing function for the animation.
+     */
+    easing: {
+      type: String,
+      default: "ease-in" // Matches SCSS animation-timing
+    },
+    /**
+     * Modifiers (to add any modifier classes based on base class)
+     */
+    modifiers: [String, Array]
+  });
 
-const pie = ref(null);
+  const pie = ref(null);
 
-const normalize = (percentage) => {
-  // Added the 1% extra to 100% because sometimes it renders with a tiny gap
-  return percentage === 100 ? 101 : percentage;
-};
+  const normalize = (percentage) => {
+    // Added the 1% extra to 100% because sometimes it renders with a tiny gap
+    return percentage === 100 ? 101 : percentage;
+  };
 
-const animate = (from = 0) => {
-  if (!pie.value || !pie.value.animate) return; // No Animation API or element not ready
-  
-  const keyframes = { strokeDasharray: [`${from} 100`, endDasharray.value] };
-  pie.value.animate(keyframes, { duration: props.duration, easing: props.easing, fill: "forwards" });
-};
+  const animate = (from = 0) => {
+    if (!pie.value || !pie.value.animate) return; // No Animation API or element not ready
+    
+    const keyframes = { strokeDasharray: [`${from} 100`, endDasharray.value] };
+    pie.value.animate(keyframes, { duration: props.duration, easing: props.easing, fill: "forwards" });
+  };
 
-watch(() => props.percentage, (newVal, oldVal) => {
-  if (newVal !== oldVal) {
-    animate(normalize(oldVal));
-  }
-});
+  watch(() => props.percentage, (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+      animate(normalize(oldVal));
+    }
+  });
 
-const endDasharray = computed(() => {
-  return `${normalize(props.percentage)} 100`;
-});
+  const endDasharray = computed(() => {
+    return `${normalize(props.percentage)} 100`;
+  });
 
-const showValueOutside = computed(() => {
-  return props.outside || props.outsideBelow || props.small;
-});
+  const showValueOutside = computed(() => {
+    return props.outside || props.outsideBelow || props.small;
+  });
 
-const componentClasses = computed(() => {
-  const classes = {
-    'progress-circle': true,
-    'progress-circle--small': props.small,
-    'progress-circle--pie': props.pieStyle,
-    'progress-circle--outside': showValueOutside.value,
-    'progress-circle--outside-below': props.outsideBelow,
-    'progress-circle--no-mask': props.noMask,
-  };
-  if (props.status) {
-    classes[`progress-circle--${props.status}`] = true;
-  }
-  return classes;
-});
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "progress-circle",
+    internal: computed(() => ({
+      'small': props.small,
+      'pie': props.pieStyle,
+      'outside': showValueOutside.value,
+      'outside-below': props.outsideBelow,
+      'no-mask': props.noMask,
+      'danger': props.danger,
+      'warning': props.warning,
+      'success': props.success,
+    }))
+  });
 
-onMounted(() => {
-  animate();
-});
+  onMounted(() => {
+    animate();
+  });
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [
@@ -65,7 +65,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@headlessui/vue": "^1.7.23",
     "@portabletext/vue": "^1.0.14",
-    "@ulu/frontend": "^0.3.6",
+    "@ulu/frontend": "^0.4.0",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "fuse.js": "^6.6.2",
@@ -87,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.3.6",
+    "@ulu/frontend": "^0.4.0",
     "@ulu/utils": "^0.0.34",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",