@dillingerstaffing/strand-vue 0.13.0 → 0.14.0

package/dist/index.js

@@ -26,23 +26,23 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.loading && "strand-btn--loading"
       ].filter(Boolean).join(" ")
     );
-    function o(d) {
-      s.value || n("click", d);
+    function d(o) {
+      s.value || n("click", o);
     }
-    return (d, m) => (l(), r("button", {
+    return (o, m) => (l(), r("button", {
       type: e.type,
       class: b(i.value),
       disabled: s.value,
       "aria-disabled": s.value ? "true" : void 0,
       "aria-busy": e.loading ? "true" : void 0,
-      onClick: o
+      onClick: d
     }, [
       e.loading ? (l(), r("span", P)) : g("", !0),
       f("span", {
         class: "strand-btn__content",
         style: S(e.loading ? { visibility: "hidden" } : void 0)
       }, [
-        y(d.$slots, "default")
+        y(o.$slots, "default")
       ], 4)
     ], 10, K));
   }
@@ -73,15 +73,15 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         !!s.trailing && "strand-input--has-trailing"
       ].filter(Boolean).join(" ")
     );
-    function o(d) {
-      const m = d.target;
+    function d(o) {
+      const m = o.target;
       n("update:modelValue", m.value);
     }
-    return (d, m) => (l(), r("div", {
+    return (o, m) => (l(), r("div", {
       class: b(i.value)
     }, [
-      d.$slots.leading ? (l(), r("span", U, [
-        y(d.$slots, "leading")
+      o.$slots.leading ? (l(), r("span", U, [
+        y(o.$slots, "leading")
       ])) : g("", !0),
       f("input", {
         type: e.type,
@@ -89,10 +89,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
         value: e.modelValue,
-        onInput: o
+        onInput: d
       }, null, 40, q),
-      d.$slots.trailing ? (l(), r("span", G, [
-        y(d.$slots, "trailing")
+      o.$slots.trailing ? (l(), r("span", G, [
+        y(o.$slots, "trailing")
       ])) : g("", !0)
     ], 2));
   }
@@ -119,20 +119,20 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.disabled && "strand-textarea--disabled",
         a.autoResize && "strand-textarea--auto-resize"
       ].filter(Boolean).join(" ")
-    ), o = c(
+    ), d = c(
       () => typeof a.modelValue == "string" ? a.modelValue.length : 0
     );
-    function d() {
+    function o() {
       a.autoResize && s.value && (s.value.style.height = "auto", s.value.style.height = `${s.value.scrollHeight}px`);
     }
     function m(v) {
       const u = v.target;
-      n("update:modelValue", u.value), d();
+      n("update:modelValue", u.value), o();
     }
     return I(() => a.modelValue, () => {
-      d();
+      o();
     }), E(() => {
-      d();
+      o();
     }), (v, u) => (l(), r("div", {
       class: b(i.value)
     }, [
@@ -146,7 +146,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         value: e.modelValue,
         onInput: m
       }, null, 40, W),
-      e.showCount && e.maxLength != null ? (l(), r("span", H, _(o.value) + "/" + _(e.maxLength), 1)) : g("", !0)
+      e.showCount && e.maxLength != null ? (l(), r("span", H, _(d.value) + "/" + _(e.maxLength), 1)) : g("", !0)
     ], 2));
   }
 }), Z = ["value", "disabled", "aria-invalid"], J = {
@@ -171,11 +171,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.disabled && "strand-select--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i(o) {
-      const d = o.target;
-      n("update:modelValue", d.value);
+    function i(d) {
+      const o = d.target;
+      n("update:modelValue", o.value);
     }
-    return (o, d) => (l(), r("div", {
+    return (d, o) => (l(), r("div", {
       class: b(s.value)
     }, [
       f("select", {
@@ -191,7 +191,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
           value: m.value
         }, _(m.label), 9, Q))), 128))
       ], 40, Z),
-      d[0] || (d[0] = f("span", {
+      o[0] || (o[0] = f("span", {
         class: "strand-select__arrow",
         "aria-hidden": "true"
       }, null, -1))
@@ -236,10 +236,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.indeterminate && "strand-checkbox--indeterminate",
         a.disabled && "strand-checkbox--disabled"
       ].filter(Boolean).join(" ")
-    ), o = c(
+    ), d = c(
       () => a.indeterminate ? "mixed" : a.checked ? "true" : "false"
     );
-    function d(v) {
+    function o(v) {
       a.disabled || n("change", v);
     }
     function m(v) {
@@ -256,9 +256,9 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         class: "strand-checkbox__native",
         checked: e.checked,
         disabled: e.disabled,
-        "aria-checked": o.value,
+        "aria-checked": d.value,
         role: "checkbox",
-        onChange: d
+        onChange: o
       }, null, 40, X),
       f("span", Y, [
         e.indeterminate ? (l(), r("svg", ee, [...u[0] || (u[0] = [
@@ -305,10 +305,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.disabled && "strand-radio--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i(o) {
-      a.disabled || n("change", o);
+    function i(d) {
+      a.disabled || n("change", d);
     }
-    return (o, d) => (l(), r("label", {
+    return (d, o) => (l(), r("label", {
       class: b(s.value)
     }, [
       f("input", {
@@ -320,7 +320,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         value: e.value,
         onChange: i
       }, null, 40, se),
-      d[0] || (d[0] = f("span", {
+      o[0] || (o[0] = f("span", {
         class: "strand-radio__control",
         "aria-hidden": "true"
       }, [
@@ -351,10 +351,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     function i() {
       a.disabled || n("change", !a.checked);
     }
-    function o(d) {
-      (d.key === " " || d.key === "Enter") && !a.disabled && (d.preventDefault(), n("change", !a.checked));
+    function d(o) {
+      (o.key === " " || o.key === "Enter") && !a.disabled && (o.preventDefault(), n("change", !a.checked));
     }
-    return (d, m) => (l(), r("label", {
+    return (o, m) => (l(), r("label", {
       class: b(s.value)
     }, [
       f("button", {
@@ -364,7 +364,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         "aria-checked": e.checked ? "true" : "false",
         disabled: e.disabled,
         onClick: i,
-        onKeydown: o
+        onKeydown: d
       }, [...m[0] || (m[0] = [
         f("span", {
           class: "strand-switch__thumb",
@@ -391,11 +391,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.disabled && "strand-slider--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i(o) {
-      const d = o.target;
-      n("update:modelValue", Number(d.value));
+    function i(d) {
+      const o = d.target;
+      n("update:modelValue", Number(o.value));
     }
-    return (o, d) => (l(), r("div", {
+    return (d, o) => (l(), r("div", {
       class: b(s.value)
     }, [
       f("input", {
@@ -491,19 +491,19 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     const t = e, a = D(), n = c(() => !!a.default), s = c(() => t.variant === "count" ? t.count != null && t.count > t.maxCount ? `${t.maxCount}+` : t.count : null), i = c(() => {
       if (t.variant === "dot") return "Status indicator";
       if (t.count != null) return `${t.count} notifications`;
-    }), o = c(
+    }), d = c(
       () => [
         "strand-badge__indicator",
         `strand-badge--${t.variant}`,
         `strand-badge--${t.status}`
       ].filter(Boolean).join(" ")
-    ), d = c(
+    ), o = c(
       () => n.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
     );
-    return (m, v) => (l(), r("span", k({ class: d.value }, m.$attrs), [
+    return (m, v) => (l(), r("span", k({ class: o.value }, m.$attrs), [
       y(m.$slots, "default"),
       f("span", {
-        class: b(o.value),
+        class: b(d.value),
         "aria-label": i.value,
         role: "status"
       }, _(s.value), 11, ve)
@@ -525,18 +525,18 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   setup(e) {
     const t = e, a = w(!1), n = () => {
       a.value = !0;
-    }, s = c(() => t.src && !a.value), i = c(() => t.initials.slice(0, 2).toUpperCase()), o = c(
+    }, s = c(() => t.src && !a.value), i = c(() => t.initials.slice(0, 2).toUpperCase()), d = c(
       () => [
         "strand-avatar",
         `strand-avatar--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (d, m) => (l(), r("div", k({
-      class: o.value,
+    return (o, m) => (l(), r("div", k({
+      class: d.value,
       role: "img",
       "aria-label": e.alt || i.value
-    }, d.$attrs), [
+    }, o.$attrs), [
       s.value ? (l(), r("img", {
         key: 0,
         class: "strand-avatar__img",
@@ -564,7 +564,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.className
       ].filter(Boolean).join(" ")
     );
-    return (i, o) => (l(), r("span", k({ class: s.value }, i.$attrs), [
+    return (i, d) => (l(), r("span", k({ class: s.value }, i.$attrs), [
       f("span", be, [
         y(i.$slots, "default")
       ]),
@@ -573,8 +573,8 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         type: "button",
         class: "strand-tag__remove",
         "aria-label": "Remove",
-        onClick: o[0] || (o[0] = (d) => n("remove"))
-      }, [...o[1] || (o[1] = [
+        onClick: d[0] || (d[0] = (o) => n("remove"))
+      }, [...d[1] || (d[1] = [
         f("svg", {
           width: "12",
           height: "12",
@@ -606,11 +606,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     const a = t, n = w(null), s = w("asc"), i = c(
       () => ["strand-table-wrapper"].filter(Boolean).join(" ")
     );
-    function o(m) {
+    function d(m) {
       const v = n.value === m && s.value === "asc" ? "desc" : "asc";
       n.value = m, s.value = v, a("sort", m, v);
     }
-    function d(m) {
+    function o(m) {
       return n.value === m ? s.value === "asc" ? "↑" : "↓" : "↕";
     }
     return (m, v) => (l(), r("div", {
@@ -629,10 +629,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
                 type: "button",
                 class: "strand-table__sort-btn",
                 "aria-label": `Sort by ${u.header}`,
-                onClick: (p) => o(u.key)
+                onClick: (p) => d(u.key)
               }, [
                 R(_(u.header) + " ", 1),
-                f("span", ye, _(d(u.key)), 1)
+                f("span", ye, _(o(u.key)), 1)
               ], 8, ge)) : (l(), r(B, { key: 1 }, [
                 R(_(u.header), 1)
               ], 64))
@@ -775,7 +775,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     const t = e, a = c(() => t.direction === "vertical"), n = c(() => !a.value && !!t.label);
     c(() => !a.value && !t.label);
     const s = c(() => a.value ? ["strand-divider", "strand-divider--vertical", t.className].filter(Boolean).join(" ") : n.value ? ["strand-divider", "strand-divider--horizontal", "strand-divider--labeled", t.className].filter(Boolean).join(" ") : ["strand-divider", "strand-divider--horizontal", t.className].filter(Boolean).join(" "));
-    return (i, o) => a.value ? (l(), r("div", {
+    return (i, d) => a.value ? (l(), r("div", {
       key: 0,
       class: b(s.value),
       role: "separator",
@@ -786,9 +786,9 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      o[0] || (o[0] = f("span", { class: "strand-divider__line" }, null, -1)),
+      d[0] || (d[0] = f("span", { class: "strand-divider__line" }, null, -1)),
       f("span", Ne, _(e.label), 1),
-      o[1] || (o[1] = f("span", { class: "strand-divider__line" }, null, -1))
+      d[1] || (d[1] = f("span", { class: "strand-divider__line" }, null, -1))
     ], 2)) : (l(), r("hr", {
       key: 2,
       class: b(s.value),
@@ -801,6 +801,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   props: {
     variant: { default: "standard" },
     background: { default: "primary" },
+    borderTop: { type: Boolean, default: !1 },
     className: { default: "" }
   },
   setup(e) {
@@ -809,6 +810,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         "strand-section",
         `strand-section--${t.variant}`,
         `strand-section--bg-${t.background}`,
+        t.borderTop && "strand-section--border-top",
         t.className
       ].filter(Boolean).join(" ")
     );
@@ -853,20 +855,20 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     );
     return E(() => {
       a.value && (s = new IntersectionObserver(
-        (o) => {
-          for (const d of o)
-            d.isIntersecting ? (n.value = !0, t.once && s && a.value && s.unobserve(a.value)) : t.once || (n.value = !1);
+        (d) => {
+          for (const o of d)
+            o.isIntersecting ? (n.value = !0, t.once && s && a.value && s.unobserve(a.value)) : t.once || (n.value = !1);
         },
         { threshold: t.threshold }
       ), s.observe(a.value));
     }), j(() => {
       s && (s.disconnect(), s = null);
-    }), (o, d) => (l(), r("div", k({
+    }), (d, o) => (l(), r("div", k({
       ref_key: "elRef",
       ref: a,
       class: i.value
-    }, o.$attrs), [
-      y(o.$slots, "default")
+    }, d.$attrs), [
+      y(d.$slots, "default")
     ], 16));
   }
 }), je = ["href"], Ia = /* @__PURE__ */ h({
@@ -874,11 +876,12 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   props: {
     href: {},
     external: { type: Boolean, default: !1 },
+    variant: { default: "default" },
     className: { default: "" }
   },
   setup(e) {
     const t = e, a = c(
-      () => ["strand-link", t.className].filter(Boolean).join(" ")
+      () => ["strand-link", t.variant !== "default" && `strand-link--${t.variant}`, t.className].filter(Boolean).join(" ")
     );
     return (n, s) => (l(), r("a", k({
       href: e.href,
@@ -899,7 +902,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   emits: ["change"],
   setup(e, { emit: t }) {
     const a = e, n = t, s = w(null), i = c(() => ["strand-tabs"].filter(Boolean).join(" "));
-    function o(m) {
+    function d(m) {
       var u, p;
       const v = a.tabs[m];
       if (v) {
@@ -908,7 +911,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         (p = $ == null ? void 0 : $[m]) == null || p.focus();
       }
     }
-    function d(m) {
+    function o(m) {
       const v = a.tabs.findIndex((p) => p.id === a.activeTab);
       let u = null;
       switch (m.key) {
@@ -927,7 +930,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         default:
           return;
       }
-      m.preventDefault(), o(u);
+      m.preventDefault(), d(u);
     }
     return (m, v) => (l(), r("div", {
       class: b(i.value)
@@ -936,7 +939,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         ref_key: "tablistRef",
         ref: s,
         role: "tablist",
-        onKeydown: d
+        onKeydown: o
       }, [
         (l(!0), r(B, null, C(e.tabs, (u) => (l(), r("button", {
           key: u.id,
@@ -1014,21 +1017,22 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
 }, Ke = ["href", "aria-current"], Va = /* @__PURE__ */ h({
   __name: "Nav",
   props: {
-    items: { default: () => [] }
+    items: { default: () => [] },
+    glass: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = w(!1);
-    function a() {
-      t.value = !t.value;
+    const t = e, a = w(!1);
+    function n() {
+      a.value = !a.value;
     }
-    const n = c(() => ["strand-nav"].filter(Boolean).join(" "));
-    return (s, i) => (l(), r("nav", {
-      class: b(n.value),
+    const s = c(() => ["strand-nav", t.glass && "strand-nav--glass"].filter(Boolean).join(" "));
+    return (i, d) => (l(), r("nav", {
+      class: b(s.value),
       "aria-label": "Main navigation"
     }, [
       f("div", Ve, [
-        s.$slots.logo ? (l(), r("div", Le, [
-          y(s.$slots, "logo")
+        i.$slots.logo ? (l(), r("div", Le, [
+          y(i.$slots, "logo")
         ])) : g("", !0),
         f("div", De, [
           (l(!0), r(B, null, C(e.items, (o) => (l(), r("a", {
@@ -1041,23 +1045,23 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
             "aria-current": o.active ? "page" : void 0
           }, _(o.label), 11, Oe))), 128))
         ]),
-        s.$slots.actions ? (l(), r("div", Ae, [
-          y(s.$slots, "actions")
+        i.$slots.actions ? (l(), r("div", Ae, [
+          y(i.$slots, "actions")
         ])) : g("", !0),
         f("button", {
           type: "button",
           class: "strand-nav__hamburger",
-          "aria-expanded": t.value ? "true" : "false",
-          "aria-label": t.value ? "Close menu" : "Menu",
-          onClick: a
-        }, [...i[0] || (i[0] = [
+          "aria-expanded": a.value ? "true" : "false",
+          "aria-label": a.value ? "Close menu" : "Menu",
+          onClick: n
+        }, [...d[0] || (d[0] = [
           f("span", {
             class: "strand-nav__hamburger-icon",
             "aria-hidden": "true"
           }, null, -1)
         ])], 8, Fe)
       ]),
-      t.value ? (l(), r("div", Me, [
+      a.value ? (l(), r("div", Me, [
         (l(!0), r(B, null, C(e.items, (o) => (l(), r("a", {
           key: o.href,
           href: o.href,
@@ -1082,18 +1086,18 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       () => a.status === "error" || a.status === "warning"
     ), i = c(
       () => ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ")
-    ), o = {
+    ), d = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, d = c(() => o[a.status] ?? a.status.toUpperCase());
+    }, o = c(() => d[a.status] ?? a.status.toUpperCase());
     return (m, v) => (l(), r("div", {
       class: b(i.value),
       role: "status",
       "aria-live": s.value ? "assertive" : "polite"
     }, [
-      f("span", Ue, _(d.value), 1),
+      f("span", Ue, _(o.value), 1),
       f("span", qe, _(e.message), 1),
       f("button", {
         type: "button",
@@ -1143,17 +1147,17 @@ const Ge = {
         clearTimeout(v);
       n.clear();
     });
-    function o(v) {
+    function d(v) {
       return v === "error" || v === "warning";
     }
-    const d = {
+    const o = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
     };
     function m(v) {
-      return d[v] ?? v.toUpperCase();
+      return o[v] ?? v.toUpperCase();
     }
     return (v, u) => (l(), r(B, null, [
       y(v.$slots, "default"),
@@ -1162,7 +1166,7 @@ const Ge = {
           key: p.id,
           class: b(["strand-toast", `strand-toast--${p.status}`].join(" ")),
           role: "status",
-          "aria-live": o(p.status) ? "assertive" : "polite"
+          "aria-live": d(p.status) ? "assertive" : "polite"
         }, [
           f("span", He, _(m(p.status)), 1),
           f("span", Ze, _(p.message), 1),
@@ -1191,12 +1195,12 @@ const Ge = {
         "strand-alert",
         `strand-alert--${a.status}`
       ].filter(Boolean).join(" ")
-    ), o = {
+    ), d = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, d = c(() => o[a.status] ?? a.status.toUpperCase());
+    }, o = c(() => d[a.status] ?? a.status.toUpperCase());
     function m() {
       n("dismiss");
     }
@@ -1204,7 +1208,7 @@ const Ge = {
       class: b(i.value),
       role: s.value
     }, [
-      f("span", Xe, _(d.value), 1),
+      f("span", Xe, _(o.value), 1),
       f("div", Ye, [
         y(v.$slots, "default")
       ]),
@@ -1232,8 +1236,8 @@ const Ge = {
   setup(e, { emit: t }) {
     const a = e, n = t;
     let s = 0;
-    const i = `strand-dialog-title-${++s}`, o = w(null);
-    let d = null, m = "";
+    const i = `strand-dialog-title-${++s}`, d = w(null);
+    let o = null, m = "";
     const v = c(
       () => ["strand-dialog__panel"].filter(Boolean).join(" ")
     );
@@ -1243,7 +1247,7 @@ const Ge = {
         return;
       }
       if ($.key === "Tab") {
-        const x = o.value;
+        const x = d.value;
         if (!x) return;
         const N = Array.from(
           x.querySelectorAll(L)
@@ -1260,14 +1264,14 @@ const Ge = {
       () => a.open,
       async ($) => {
         if ($) {
-          d = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await M();
-          const x = o.value;
+          o = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await M();
+          const x = d.value;
           if (x) {
             const N = x.querySelectorAll(L);
             N.length > 0 ? N[0].focus() : x.focus();
           }
         } else
-          document.body.style.overflow = m, d && d instanceof HTMLElement && d.focus();
+          document.body.style.overflow = m, o && o instanceof HTMLElement && o.focus();
       },
       { immediate: !0 }
     ), j(() => {
@@ -1280,7 +1284,7 @@ const Ge = {
     }, [
       f("div", {
         ref_key: "panelRef",
-        ref: o,
+        ref: d,
         class: b(v.value),
         role: "dialog",
         "aria-modal": "true",
@@ -1317,12 +1321,12 @@ const Ge = {
     let a = 0;
     const n = `strand-tooltip-${++a}`, s = w(!1);
     let i = null;
-    function o() {
+    function d() {
       i = setTimeout(() => {
         s.value = !0;
       }, t.delay);
     }
-    function d() {
+    function o() {
       i !== null && (clearTimeout(i), i = null), s.value = !1;
     }
     j(() => {
@@ -1340,10 +1344,10 @@ const Ge = {
     return (u, p) => (l(), r("span", {
       class: b(m.value),
       "aria-describedby": n,
-      onMouseenter: o,
-      onMouseleave: d,
-      onFocus: o,
-      onBlur: d
+      onMouseenter: d,
+      onMouseleave: o,
+      onFocus: d,
+      onBlur: o
     }, [
       y(u.$slots, "default"),
       f("span", {
@@ -1371,8 +1375,8 @@ const Ge = {
         !n.value && "strand-progress--indeterminate",
         t.className
       ].filter(Boolean).join(" ")
-    ), i = c(() => a[t.size] ?? a.md), o = c(() => (i.value - T) / 2), d = c(() => 2 * Math.PI * o.value), m = c(
-      () => n.value ? d.value - d.value * t.value / 100 : 0
+    ), i = c(() => a[t.size] ?? a.md), d = c(() => (i.value - T) / 2), o = c(() => 2 * Math.PI * d.value), m = c(
+      () => n.value ? o.value - o.value * t.value / 100 : 0
     );
     return (v, u) => (l(), r("div", k({
       class: s.value,
@@ -1391,7 +1395,7 @@ const Ge = {
         f("circle", {
           cx: i.value / 2,
           cy: i.value / 2,
-          r: o.value,
+          r: d.value,
           fill: "none",
           "stroke-width": T,
           class: "strand-progress__track"
@@ -1399,10 +1403,10 @@ const Ge = {
         f("circle", {
           cx: i.value / 2,
           cy: i.value / 2,
-          r: o.value,
+          r: d.value,
           fill: "none",
           "stroke-width": T,
-          "stroke-dasharray": d.value,
+          "stroke-dasharray": o.value,
           "stroke-dashoffset": n.value ? m.value : void 0,
           "stroke-linecap": "round",
           class: "strand-progress__fill",
@@ -1464,11 +1468,11 @@ const Ge = {
       width: a.value,
       height: n.value
     }));
-    return (o, d) => (l(), r("div", k({
+    return (d, o) => (l(), r("div", k({
       class: s.value,
       "aria-hidden": "true",
       style: i.value
-    }, o.$attrs), null, 16));
+    }, d.$attrs), null, 16));
   }
 });
 export {