@dillingerstaffing/strand-vue 0.15.2 → 0.16.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as h, computed as c, openBlock as l, createElementBlock as o, normalizeClass as b, createCommentVNode as y, createElementVNode as f, normalizeStyle as S, renderSlot as g, useSlots as L, ref as w, watch as I, onMounted as E, toDisplayString as _, Fragment as B, renderList as C, createTextVNode as R, mergeProps as k, onBeforeUnmount as M, onUnmounted as j, inject as A, provide as F, nextTick as K } from "vue";
+import { defineComponent as h, computed as f, openBlock as l, createElementBlock as r, normalizeClass as _, createCommentVNode as y, createElementVNode as m, normalizeStyle as O, renderSlot as $, useSlots as V, ref as B, watch as T, onMounted as S, toDisplayString as b, Fragment as w, renderList as C, createTextVNode as I, mergeProps as k, onBeforeUnmount as M, onUnmounted as N, inject as A, provide as F, nextTick as K } from "vue";
 const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   key: 0,
   class: "strand-btn__spinner",
   "aria-hidden": "true"
-}, va = /* @__PURE__ */ h({
+}, ha = /* @__PURE__ */ h({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,7 +16,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(() => a.disabled || a.loading), i = c(
+    const a = e, n = t, s = f(() => a.disabled || a.loading), d = f(
       () => [
         "strand-btn",
         `strand-btn--${a.variant}`,
@@ -26,23 +26,23 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         a.loading && "strand-btn--loading"
       ].filter(Boolean).join(" ")
     );
-    function d(r) {
-      s.value || n("click", r);
+    function i(o) {
+      s.value || n("click", o);
     }
-    return (r, m) => (l(), o("button", {
+    return (o, c) => (l(), r("button", {
       type: e.type,
-      class: b(i.value),
+      class: _(d.value),
       disabled: s.value,
       "aria-disabled": s.value ? "true" : void 0,
       "aria-busy": e.loading ? "true" : void 0,
-      onClick: d
+      onClick: i
     }, [
-      e.loading ? (l(), o("span", U)) : y("", !0),
-      f("span", {
+      e.loading ? (l(), r("span", U)) : y("", !0),
+      m("span", {
         class: "strand-btn__content",
-        style: S(e.loading ? { visibility: "hidden" } : void 0)
+        style: O(e.loading ? { visibility: "hidden" } : void 0)
       }, [
-        g(r.$slots, "default")
+        $(o.$slots, "default")
       ], 4)
     ], 10, P));
   }
@@ -54,7 +54,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   key: 1,
   class: "strand-input__trailing",
   "aria-hidden": "true"
-}, ma = /* @__PURE__ */ h({
+}, ba = /* @__PURE__ */ h({
   __name: "Input",
   props: {
     type: { default: "text" },
@@ -64,7 +64,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = L(), i = c(
+    const a = e, n = t, s = V(), d = f(
       () => [
         "strand-input",
         a.error && "strand-input--error",
@@ -73,26 +73,26 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         !!s.trailing && "strand-input--has-trailing"
       ].filter(Boolean).join(" ")
     );
-    function d(r) {
-      const m = r.target;
-      n("update:modelValue", m.value);
+    function i(o) {
+      const c = o.target;
+      n("update:modelValue", c.value);
     }
-    return (r, m) => (l(), o("div", {
-      class: b(i.value)
+    return (o, c) => (l(), r("div", {
+      class: _(d.value)
     }, [
-      r.$slots.leading ? (l(), o("span", q, [
-        g(r.$slots, "leading")
+      o.$slots.leading ? (l(), r("span", q, [
+        $(o.$slots, "leading")
       ])) : y("", !0),
-      f("input", {
+      m("input", {
         type: e.type,
         class: "strand-input__field",
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
         value: e.modelValue,
-        onInput: d
+        onInput: i
       }, null, 40, G),
-      r.$slots.trailing ? (l(), o("span", W, [
-        g(r.$slots, "trailing")
+      o.$slots.trailing ? (l(), r("span", W, [
+        $(o.$slots, "trailing")
       ])) : y("", !0)
     ], 2));
   }
@@ -100,7 +100,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   key: 0,
   class: "strand-textarea__count",
   "aria-live": "polite"
-}, ha = /* @__PURE__ */ h({
+}, _a = /* @__PURE__ */ h({
   __name: "Textarea",
   props: {
     autoResize: { type: Boolean, default: !1 },
@@ -112,31 +112,31 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = w(null), i = c(
+    const a = e, n = t, s = B(null), d = f(
       () => [
         "strand-textarea",
         a.error && "strand-textarea--error",
         a.disabled && "strand-textarea--disabled",
         a.autoResize && "strand-textarea--auto-resize"
       ].filter(Boolean).join(" ")
-    ), d = c(
+    ), i = f(
       () => typeof a.modelValue == "string" ? a.modelValue.length : 0
     );
-    function r() {
+    function o() {
       a.autoResize && s.value && (s.value.style.height = "auto", s.value.style.height = `${s.value.scrollHeight}px`);
     }
-    function m(v) {
+    function c(v) {
       const u = v.target;
-      n("update:modelValue", u.value), r();
+      n("update:modelValue", u.value), o();
     }
-    return I(() => a.modelValue, () => {
-      r();
-    }), E(() => {
-      r();
-    }), (v, u) => (l(), o("div", {
-      class: b(i.value)
+    return T(() => a.modelValue, () => {
+      o();
+    }), S(() => {
+      o();
+    }), (v, u) => (l(), r("div", {
+      class: _(d.value)
     }, [
-      f("textarea", {
+      m("textarea", {
         ref_key: "textareaRef",
         ref: s,
         class: "strand-textarea__field",
@@ -144,16 +144,16 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         "aria-invalid": e.error ? "true" : void 0,
         maxlength: e.maxLength,
         value: e.modelValue,
-        onInput: m
+        onInput: c
       }, null, 40, H),
-      e.showCount && e.maxLength != null ? (l(), o("span", Z, _(d.value) + "/" + _(e.maxLength), 1)) : y("", !0)
+      e.showCount && e.maxLength != null ? (l(), r("span", Z, b(i.value) + "/" + b(e.maxLength), 1)) : y("", !0)
     ], 2));
   }
 }), J = ["value", "disabled", "aria-invalid"], Q = {
   key: 0,
   value: "",
   disabled: ""
-}, X = ["value"], _a = /* @__PURE__ */ h({
+}, X = ["value"], pa = /* @__PURE__ */ h({
   __name: "Select",
   props: {
     options: {},
@@ -164,34 +164,34 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => [
         "strand-select",
         a.error && "strand-select--error",
         a.disabled && "strand-select--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i(d) {
-      const r = d.target;
-      n("update:modelValue", r.value);
+    function d(i) {
+      const o = i.target;
+      n("update:modelValue", o.value);
     }
-    return (d, r) => (l(), o("div", {
-      class: b(s.value)
+    return (i, o) => (l(), r("div", {
+      class: _(s.value)
     }, [
-      f("select", {
+      m("select", {
         class: "strand-select__field",
         value: e.modelValue,
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
-        onChange: i
+        onChange: d
       }, [
-        e.placeholder ? (l(), o("option", Q, _(e.placeholder), 1)) : y("", !0),
-        (l(!0), o(B, null, C(e.options, (m) => (l(), o("option", {
-          key: m.value,
-          value: m.value
-        }, _(m.label), 9, X))), 128))
+        e.placeholder ? (l(), r("option", Q, b(e.placeholder), 1)) : y("", !0),
+        (l(!0), r(w, null, C(e.options, (c) => (l(), r("option", {
+          key: c.value,
+          value: c.value
+        }, b(c.label), 9, X))), 128))
       ], 40, J),
-      r[0] || (r[0] = f("span", {
+      o[0] || (o[0] = m("span", {
         class: "strand-select__arrow",
         "aria-hidden": "true"
       }, null, -1))
@@ -213,7 +213,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
 }, se = {
   key: 0,
   class: "strand-checkbox__label"
-}, ba = /* @__PURE__ */ h({
+}, ya = /* @__PURE__ */ h({
   __name: "Checkbox",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -223,46 +223,46 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = w(null);
-    E(() => {
+    const a = e, n = t, s = B(null);
+    S(() => {
       s.value && (s.value.indeterminate = a.indeterminate);
-    }), I(() => a.indeterminate, (v) => {
+    }), T(() => a.indeterminate, (v) => {
       s.value && (s.value.indeterminate = v);
     });
-    const i = c(
+    const d = f(
       () => [
         "strand-checkbox",
         a.checked && "strand-checkbox--checked",
         a.indeterminate && "strand-checkbox--indeterminate",
         a.disabled && "strand-checkbox--disabled"
       ].filter(Boolean).join(" ")
-    ), d = c(
+    ), i = f(
       () => a.indeterminate ? "mixed" : a.checked ? "true" : "false"
     );
-    function r(v) {
+    function o(v) {
       a.disabled || n("change", v);
     }
-    function m(v) {
+    function c(v) {
       v.key === " " && !a.disabled && (v.preventDefault(), s.value && s.value.click());
     }
-    return (v, u) => (l(), o("label", {
-      class: b(i.value),
-      onKeydown: m
+    return (v, u) => (l(), r("label", {
+      class: _(d.value),
+      onKeydown: c
     }, [
-      f("input", {
+      m("input", {
         ref_key: "inputRef",
         ref: s,
         type: "checkbox",
         class: "strand-checkbox__native",
         checked: e.checked,
         disabled: e.disabled,
-        "aria-checked": d.value,
+        "aria-checked": i.value,
         role: "checkbox",
-        onChange: r
+        onChange: o
       }, null, 40, Y),
-      f("span", ee, [
-        e.indeterminate ? (l(), o("svg", ae, [...u[0] || (u[0] = [
-          f("line", {
+      m("span", ee, [
+        e.indeterminate ? (l(), r("svg", ae, [...u[0] || (u[0] = [
+          m("line", {
             x1: "4",
             y1: "8",
             x2: "12",
@@ -271,8 +271,8 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
             "stroke-width": "2",
             "stroke-linecap": "round"
           }, null, -1)
-        ])])) : e.checked ? (l(), o("svg", te, [...u[1] || (u[1] = [
-          f("path", {
+        ])])) : e.checked ? (l(), r("svg", te, [...u[1] || (u[1] = [
+          m("path", {
             d: "M3.5 8L6.5 11L12.5 5",
             stroke: "currentColor",
             "stroke-width": "2",
@@ -281,13 +281,13 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
           }, null, -1)
         ])])) : y("", !0)
       ]),
-      e.label ? (l(), o("span", se, _(e.label), 1)) : y("", !0)
+      e.label ? (l(), r("span", se, b(e.label), 1)) : y("", !0)
     ], 34));
   }
 }), ne = ["checked", "disabled", "name", "value"], le = {
   key: 0,
   class: "strand-radio__label"
-}, pa = /* @__PURE__ */ h({
+}, ga = /* @__PURE__ */ h({
   __name: "Radio",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -298,41 +298,41 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => [
         "strand-radio",
         a.checked && "strand-radio--checked",
         a.disabled && "strand-radio--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i(d) {
-      a.disabled || n("change", d);
+    function d(i) {
+      a.disabled || n("change", i);
     }
-    return (d, r) => (l(), o("label", {
-      class: b(s.value)
+    return (i, o) => (l(), r("label", {
+      class: _(s.value)
     }, [
-      f("input", {
+      m("input", {
         type: "radio",
         class: "strand-radio__native",
         checked: e.checked,
         disabled: e.disabled,
         name: e.name,
         value: e.value,
-        onChange: i
+        onChange: d
       }, null, 40, ne),
-      r[0] || (r[0] = f("span", {
+      o[0] || (o[0] = m("span", {
         class: "strand-radio__control",
         "aria-hidden": "true"
       }, [
-        f("span", { class: "strand-radio__dot" })
+        m("span", { class: "strand-radio__dot" })
       ], -1)),
-      e.label ? (l(), o("span", le, _(e.label), 1)) : y("", !0)
+      e.label ? (l(), r("span", le, b(e.label), 1)) : y("", !0)
     ], 2));
   }
-}), oe = ["aria-checked", "disabled"], re = {
+}), re = ["aria-checked", "disabled"], oe = {
   key: 0,
   class: "strand-switch__label"
-}, ya = /* @__PURE__ */ h({
+}, $a = /* @__PURE__ */ h({
   __name: "Switch",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -341,40 +341,40 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => [
         "strand-switch",
         a.checked && "strand-switch--checked",
         a.disabled && "strand-switch--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i() {
+    function d() {
       a.disabled || n("change", !a.checked);
     }
-    function d(r) {
-      (r.key === " " || r.key === "Enter") && !a.disabled && (r.preventDefault(), n("change", !a.checked));
+    function i(o) {
+      (o.key === " " || o.key === "Enter") && !a.disabled && (o.preventDefault(), n("change", !a.checked));
     }
-    return (r, m) => (l(), o("label", {
-      class: b(s.value)
+    return (o, c) => (l(), r("label", {
+      class: _(s.value)
     }, [
-      f("button", {
+      m("button", {
         type: "button",
         role: "switch",
         class: "strand-switch__track",
         "aria-checked": e.checked ? "true" : "false",
         disabled: e.disabled,
-        onClick: i,
-        onKeydown: d
-      }, [...m[0] || (m[0] = [
-        f("span", {
+        onClick: d,
+        onKeydown: i
+      }, [...c[0] || (c[0] = [
+        m("span", {
           class: "strand-switch__thumb",
           "aria-hidden": "true"
         }, null, -1)
-      ])], 40, oe),
-      e.label ? (l(), o("span", re, _(e.label), 1)) : y("", !0)
+      ])], 40, re),
+      e.label ? (l(), r("span", oe, b(e.label), 1)) : y("", !0)
     ], 2));
   }
-}), ie = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], $a = /* @__PURE__ */ h({
+}), ie = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], ka = /* @__PURE__ */ h({
   __name: "Slider",
   props: {
     min: { default: 0 },
@@ -385,20 +385,20 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => [
         "strand-slider",
         a.disabled && "strand-slider--disabled"
       ].filter(Boolean).join(" ")
     );
-    function i(d) {
-      const r = d.target;
-      n("update:modelValue", Number(r.value));
+    function d(i) {
+      const o = i.target;
+      n("update:modelValue", Number(o.value));
     }
-    return (d, r) => (l(), o("div", {
-      class: b(s.value)
+    return (i, o) => (l(), r("div", {
+      class: _(s.value)
     }, [
-      f("input", {
+      m("input", {
         type: "range",
         class: "strand-slider__field",
         min: e.min,
@@ -409,7 +409,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         "aria-valuemin": e.min,
         "aria-valuemax": e.max,
         "aria-valuenow": e.modelValue,
-        onInput: i
+        onInput: d
       }, null, 40, ie)
     ], 2));
   }
@@ -417,7 +417,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   key: 0,
   class: "strand-form-field__required",
   "aria-hidden": "true"
-}, ue = { class: "strand-form-field__control" }, fe = ["id"], ve = ["id"], ga = /* @__PURE__ */ h({
+}, ue = { class: "strand-form-field__control" }, fe = ["id"], ve = ["id"], Ba = /* @__PURE__ */ h({
   __name: "FormField",
   props: {
     label: {},
@@ -427,38 +427,38 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     required: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-form-field",
         t.error && "strand-form-field--error"
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("div", {
-      class: b(a.value)
+    return (n, s) => (l(), r("div", {
+      class: _(a.value)
     }, [
-      f("label", {
+      m("label", {
         class: "strand-form-field__label",
         for: e.htmlFor
       }, [
-        R(_(e.label) + " ", 1),
-        e.required ? (l(), o("span", ce, " * ")) : y("", !0)
+        I(b(e.label) + " ", 1),
+        e.required ? (l(), r("span", ce, " * ")) : y("", !0)
       ], 8, de),
-      f("div", ue, [
-        g(n.$slots, "default")
+      m("div", ue, [
+        $(n.$slots, "default")
       ]),
-      e.error ? (l(), o("p", {
+      e.error ? (l(), r("p", {
         key: 0,
         class: "strand-form-field__error",
         id: `${e.htmlFor}-error`,
         role: "alert"
-      }, _(e.error), 9, fe)) : e.hint ? (l(), o("p", {
+      }, b(e.error), 9, fe)) : e.hint ? (l(), r("p", {
         key: 1,
         class: "strand-form-field__hint",
         id: `${e.htmlFor}-hint`
-      }, _(e.hint), 9, ve)) : y("", !0)
+      }, b(e.hint), 9, ve)) : y("", !0)
     ], 2));
   }
-}), ka = /* @__PURE__ */ h({
+}), wa = /* @__PURE__ */ h({
   __name: "Card",
   props: {
     variant: { default: "elevated" },
@@ -466,7 +466,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-card",
         `strand-card--${t.variant}`,
@@ -474,11 +474,11 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
-      g(n.$slots, "default")
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      $(n.$slots, "default")
     ], 16));
   }
-}), me = ["aria-label"], wa = /* @__PURE__ */ h({
+}), me = ["aria-label"], Ca = /* @__PURE__ */ h({
   __name: "Badge",
   props: {
     variant: { default: "count" },
@@ -488,32 +488,32 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = L(), n = c(() => !!a.default), s = c(() => t.variant === "count" ? t.count != null && t.count > t.maxCount ? `${t.maxCount}+` : t.count : null), i = c(() => {
+    const t = e, a = V(), n = f(() => !!a.default), s = f(() => t.variant === "count" ? t.count != null && t.count > t.maxCount ? `${t.maxCount}+` : t.count : null), d = f(() => {
       if (t.variant === "dot") return "Status indicator";
       if (t.count != null) return `${t.count} notifications`;
-    }), d = c(
+    }), i = f(
       () => [
         "strand-badge__indicator",
         `strand-badge--${t.variant}`,
         `strand-badge--${t.status}`
       ].filter(Boolean).join(" ")
-    ), r = c(
+    ), o = f(
       () => n.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
     );
-    return (m, v) => (l(), o("span", k({ class: r.value }, m.$attrs), [
-      g(m.$slots, "default"),
-      f("span", {
-        class: b(d.value),
-        "aria-label": i.value,
+    return (c, v) => (l(), r("span", k({ class: o.value }, c.$attrs), [
+      $(c.$slots, "default"),
+      m("span", {
+        class: _(i.value),
+        "aria-label": d.value,
         role: "status"
-      }, _(s.value), 11, me)
+      }, b(s.value), 11, me)
     ], 16));
   }
-}), he = ["aria-label"], _e = ["src", "alt"], be = {
+}), he = ["aria-label"], be = ["src", "alt"], _e = {
   key: 1,
   class: "strand-avatar__initials",
   "aria-hidden": "true"
-}, Ba = /* @__PURE__ */ h({
+}, xa = /* @__PURE__ */ h({
   __name: "Avatar",
   props: {
     src: {},
@@ -523,30 +523,30 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = w(!1), n = () => {
+    const t = e, a = B(!1), n = () => {
       a.value = !0;
-    }, s = c(() => t.src && !a.value), i = c(() => t.initials.slice(0, 2).toUpperCase()), d = c(
+    }, s = f(() => t.src && !a.value), d = f(() => t.initials.slice(0, 2).toUpperCase()), i = f(
       () => [
         "strand-avatar",
         `strand-avatar--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (r, m) => (l(), o("div", k({
-      class: d.value,
+    return (o, c) => (l(), r("div", k({
+      class: i.value,
       role: "img",
-      "aria-label": e.alt || i.value
-    }, r.$attrs), [
-      s.value ? (l(), o("img", {
+      "aria-label": e.alt || d.value
+    }, o.$attrs), [
+      s.value ? (l(), r("img", {
         key: 0,
         class: "strand-avatar__img",
         src: e.src,
         alt: e.alt,
         onError: n
-      }, null, 40, _e)) : (l(), o("span", be, _(i.value), 1))
+      }, null, 40, be)) : (l(), r("span", _e, b(d.value), 1))
     ], 16, he));
   }
-}), pe = { class: "strand-tag__text" }, Ca = /* @__PURE__ */ h({
+}), pe = { class: "strand-tag__text" }, ja = /* @__PURE__ */ h({
   __name: "Tag",
   props: {
     variant: { default: "solid" },
@@ -556,7 +556,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["remove"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => [
         "strand-tag",
         `strand-tag--${a.variant}`,
@@ -564,25 +564,25 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         a.className
       ].filter(Boolean).join(" ")
     );
-    return (i, d) => (l(), o("span", k({ class: s.value }, i.$attrs), [
-      f("span", pe, [
-        g(i.$slots, "default")
+    return (d, i) => (l(), r("span", k({ class: s.value }, d.$attrs), [
+      m("span", pe, [
+        $(d.$slots, "default")
       ]),
-      e.removable ? (l(), o("button", {
+      e.removable ? (l(), r("button", {
         key: 0,
         type: "button",
         class: "strand-tag__remove",
         "aria-label": "Remove",
-        onClick: d[0] || (d[0] = (r) => n("remove"))
-      }, [...d[1] || (d[1] = [
-        f("svg", {
+        onClick: i[0] || (i[0] = (o) => n("remove"))
+      }, [...i[1] || (i[1] = [
+        m("svg", {
           width: "12",
           height: "12",
           viewBox: "0 0 12 12",
           fill: "none",
           "aria-hidden": "true"
         }, [
-          f("path", {
+          m("path", {
             d: "M3 3l6 6M9 3l-6 6",
             stroke: "currentColor",
             "stroke-width": "1.5",
@@ -592,10 +592,10 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
       ])])) : y("", !0)
     ], 16));
   }
-}), ye = { class: "strand-table" }, $e = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ke = {
+}), ye = { class: "strand-table" }, ge = { class: "strand-table__head" }, $e = ["aria-label", "onClick"], ke = {
   class: "strand-table__sort-indicator",
   "aria-hidden": "true"
-}, we = { class: "strand-table__body" }, xa = /* @__PURE__ */ h({
+}, Be = { class: "strand-table__body" }, Na = /* @__PURE__ */ h({
   __name: "Table",
   props: {
     columns: {},
@@ -603,57 +603,57 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["sort"],
   setup(e, { emit: t }) {
-    const a = t, n = w(null), s = w("asc"), i = c(
+    const a = t, n = B(null), s = B("asc"), d = f(
       () => ["strand-table-wrapper"].filter(Boolean).join(" ")
     );
-    function d(m) {
-      const v = n.value === m && s.value === "asc" ? "desc" : "asc";
-      n.value = m, s.value = v, a("sort", m, v);
+    function i(c) {
+      const v = n.value === c && s.value === "asc" ? "desc" : "asc";
+      n.value = c, s.value = v, a("sort", c, v);
     }
-    function r(m) {
-      return n.value === m ? s.value === "asc" ? "↑" : "↓" : "↕";
+    function o(c) {
+      return n.value === c ? s.value === "asc" ? "↑" : "↓" : "↕";
     }
-    return (m, v) => (l(), o("div", {
-      class: b(i.value)
+    return (c, v) => (l(), r("div", {
+      class: _(d.value)
     }, [
-      f("table", ye, [
-        f("thead", $e, [
-          f("tr", null, [
-            (l(!0), o(B, null, C(e.columns, (u) => (l(), o("th", {
+      m("table", ye, [
+        m("thead", ge, [
+          m("tr", null, [
+            (l(!0), r(w, null, C(e.columns, (u) => (l(), r("th", {
               key: u.key,
               class: "strand-table__th",
-              style: S(u.width ? { width: u.width } : void 0)
+              style: O(u.width ? { width: u.width } : void 0)
             }, [
-              u.sortable ? (l(), o("button", {
+              u.sortable ? (l(), r("button", {
                 key: 0,
                 type: "button",
                 class: "strand-table__sort-btn",
                 "aria-label": `Sort by ${u.header}`,
-                onClick: (p) => d(u.key)
+                onClick: (p) => i(u.key)
               }, [
-                R(_(u.header) + " ", 1),
-                f("span", ke, _(r(u.key)), 1)
-              ], 8, ge)) : (l(), o(B, { key: 1 }, [
-                R(_(u.header), 1)
+                I(b(u.header) + " ", 1),
+                m("span", ke, b(o(u.key)), 1)
+              ], 8, $e)) : (l(), r(w, { key: 1 }, [
+                I(b(u.header), 1)
               ], 64))
             ], 4))), 128))
           ])
         ]),
-        f("tbody", we, [
-          (l(!0), o(B, null, C(e.data, (u, p) => (l(), o("tr", {
+        m("tbody", Be, [
+          (l(!0), r(w, null, C(e.data, (u, p) => (l(), r("tr", {
             key: p,
             class: "strand-table__row"
           }, [
-            (l(!0), o(B, null, C(e.columns, ($) => (l(), o("td", {
-              key: $.key,
+            (l(!0), r(w, null, C(e.columns, (g) => (l(), r("td", {
+              key: g.key,
               class: "strand-table__td"
-            }, _(u[$.key]), 1))), 128))
+            }, b(u[g.key]), 1))), 128))
           ]))), 128))
         ])
       ])
     ], 2));
   }
-}), Be = { class: "strand-data-readout__label" }, Ce = { class: "strand-data-readout__value" }, Na = /* @__PURE__ */ h({
+}), we = { class: "strand-data-readout__label" }, Ce = { class: "strand-data-readout__value" }, Ta = /* @__PURE__ */ h({
   __name: "DataReadout",
   props: {
     label: {},
@@ -662,22 +662,22 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-data-readout",
         t.size && t.size !== "md" ? `strand-data-readout--${t.size}` : "",
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
-      f("span", Be, _(e.label), 1),
-      f("span", Ce, _(e.value), 1)
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      m("span", we, b(e.label), 1),
+      m("span", Ce, b(e.value), 1)
     ], 16));
   }
-}), xe = ["data-strand-copy"], Ne = {
+}), xe = ["data-strand-copy"], je = {
   key: 0,
   class: "strand-code-block__label"
-}, je = { class: "strand-code-block__pre" }, Te = ["aria-label"], Re = 1500, ja = /* @__PURE__ */ h({
+}, Ne = { class: "strand-code-block__pre" }, Te = ["aria-label"], Se = 1500, Sa = /* @__PURE__ */ h({
   __name: "CodeBlock",
   props: {
     code: {},
@@ -686,44 +686,44 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     copyable: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => ["strand-code-block", t.className].filter(Boolean).join(" ")
-    ), n = w(!1);
+    ), n = B(!1);
     let s = null;
     M(() => {
       s !== null && window.clearTimeout(s);
     });
-    async function i() {
-      var d;
+    async function d() {
+      var i;
       try {
-        if ((d = navigator.clipboard) != null && d.writeText)
+        if ((i = navigator.clipboard) != null && i.writeText)
           await navigator.clipboard.writeText(t.code);
         else {
-          const r = document.createElement("textarea");
-          r.value = t.code, r.setAttribute("readonly", ""), r.style.position = "absolute", r.style.left = "-9999px", document.body.appendChild(r), r.select(), document.execCommand("copy"), document.body.removeChild(r);
+          const o = document.createElement("textarea");
+          o.value = t.code, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o), o.select(), document.execCommand("copy"), document.body.removeChild(o);
         }
         n.value = !0, s !== null && window.clearTimeout(s), s = window.setTimeout(() => {
           n.value = !1;
-        }, Re);
+        }, Se);
       } catch {
       }
     }
-    return (d, r) => (l(), o("div", k({
+    return (i, o) => (l(), r("div", k({
       class: a.value,
       "data-strand-copy": e.copyable ? "" : void 0
-    }, d.$attrs), [
-      e.language ? (l(), o("span", Ne, _(e.language), 1)) : y("", !0),
-      f("pre", je, [
-        f("code", null, _(e.code), 1)
+    }, i.$attrs), [
+      e.language ? (l(), r("span", je, b(e.language), 1)) : y("", !0),
+      m("pre", Ne, [
+        m("code", null, b(e.code), 1)
       ]),
-      e.copyable ? (l(), o("button", {
+      e.copyable ? (l(), r("button", {
         key: 1,
         type: "button",
-        class: b(["strand-code-block__copy", n.value ? "strand-code-block__copy--copied" : ""]),
+        class: _(["strand-code-block__copy", n.value ? "strand-code-block__copy--copied" : ""]),
         "aria-label": n.value ? "Copied" : "Copy code to clipboard",
-        onClick: i
-      }, [...r[0] || (r[0] = [
-        f("svg", {
+        onClick: d
+      }, [...o[0] || (o[0] = [
+        m("svg", {
           class: "strand-code-block__copy-icon strand-code-block__copy-icon--clipboard",
           viewBox: "0 0 16 16",
           fill: "none",
@@ -734,9 +734,9 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
           "aria-hidden": "true",
           focusable: "false"
         }, [
-          f("path", { d: "M6 3 V2 a1 1 0 0 1 1-1 h2 a1 1 0 0 1 1 1 v1 M5 3 h6 a1 1 0 0 1 1 1 v9 a1 1 0 0 1 -1 1 h-6 a1 1 0 0 1 -1 -1 v-9 a1 1 0 0 1 1 -1 z" })
+          m("path", { d: "M6 3 V2 a1 1 0 0 1 1-1 h2 a1 1 0 0 1 1 1 v1 M5 3 h6 a1 1 0 0 1 1 1 v9 a1 1 0 0 1 -1 1 h-6 a1 1 0 0 1 -1 -1 v-9 a1 1 0 0 1 1 -1 z" })
         ], -1),
-        f("svg", {
+        m("svg", {
           class: "strand-code-block__copy-icon strand-code-block__copy-icon--check",
           viewBox: "0 0 16 16",
           fill: "none",
@@ -747,12 +747,12 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
           "aria-hidden": "true",
           focusable: "false"
         }, [
-          f("path", { d: "M3 8 l3 3 l7 -7" })
+          m("path", { d: "M3 8 l3 3 l7 -7" })
         ], -1)
       ])], 10, Te)) : y("", !0)
     ], 16, xe));
   }
-}), Ta = /* @__PURE__ */ h({
+}), Ra = /* @__PURE__ */ h({
   __name: "Stack",
   props: {
     direction: { default: "vertical" },
@@ -763,7 +763,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-stack",
         `strand-stack--${t.direction}`,
@@ -772,17 +772,17 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         t.wrap && "strand-stack--wrap",
         t.className
       ].filter(Boolean).join(" ")
-    ), n = c(() => ({
+    ), n = f(() => ({
       gap: `var(--strand-space-${t.gap})`
     }));
-    return (s, i) => (l(), o("div", k({
+    return (s, d) => (l(), r("div", k({
       class: a.value,
       style: n.value
     }, s.$attrs), [
-      g(s.$slots, "default")
+      $(s.$slots, "default")
     ], 16));
   }
-}), Ra = /* @__PURE__ */ h({
+}), Ia = /* @__PURE__ */ h({
   __name: "Grid",
   props: {
     columns: { default: 1 },
@@ -790,38 +790,38 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => ["strand-grid", t.className].filter(Boolean).join(" ")
-    ), n = c(() => ({
+    ), n = f(() => ({
       gridTemplateColumns: `repeat(${t.columns}, 1fr)`,
       gap: `var(--strand-space-${t.gap})`
     }));
-    return (s, i) => (l(), o("div", k({
+    return (s, d) => (l(), r("div", k({
       class: a.value,
       style: n.value
     }, s.$attrs), [
-      g(s.$slots, "default")
+      $(s.$slots, "default")
     ], 16));
   }
-}), Sa = /* @__PURE__ */ h({
+}), Oa = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     size: { default: "default" },
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-container",
         `strand-container--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
-      g(n.$slots, "default")
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      $(n.$slots, "default")
     ], 16));
   }
-}), Se = { class: "strand-divider__label" }, Ia = /* @__PURE__ */ h({
+}), Re = { class: "strand-divider__label" }, Ea = /* @__PURE__ */ h({
   __name: "Divider",
   props: {
     direction: { default: "horizontal" },
@@ -829,31 +829,31 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    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, d) => a.value ? (l(), o("div", {
+    const t = e, a = f(() => t.direction === "vertical"), n = f(() => !a.value && !!t.label);
+    f(() => !a.value && !t.label);
+    const s = f(() => 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 (d, i) => a.value ? (l(), r("div", {
       key: 0,
-      class: b(s.value),
+      class: _(s.value),
       role: "separator",
       "aria-orientation": "vertical"
-    }, null, 2)) : n.value ? (l(), o("div", {
+    }, null, 2)) : n.value ? (l(), r("div", {
       key: 1,
-      class: b(s.value),
+      class: _(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      d[0] || (d[0] = f("span", { class: "strand-divider__line" }, null, -1)),
-      f("span", Se, _(e.label), 1),
-      d[1] || (d[1] = f("span", { class: "strand-divider__line" }, null, -1))
-    ], 2)) : (l(), o("hr", {
+      i[0] || (i[0] = m("span", { class: "strand-divider__line" }, null, -1)),
+      m("span", Re, b(e.label), 1),
+      i[1] || (i[1] = m("span", { class: "strand-divider__line" }, null, -1))
+    ], 2)) : (l(), r("hr", {
       key: 2,
-      class: b(s.value),
+      class: _(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, null, 2));
   }
-}), Ea = /* @__PURE__ */ h({
+}), za = /* @__PURE__ */ h({
   __name: "Section",
   props: {
     variant: { default: "standard" },
@@ -862,7 +862,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-section",
         `strand-section--${t.variant}`,
@@ -871,11 +871,11 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("section", k({ class: a.value }, n.$attrs), [
-      g(n.$slots, "default")
+    return (n, s) => (l(), r("section", k({ class: a.value }, n.$attrs), [
+      $(n.$slots, "default")
     ], 16));
   }
-}), za = /* @__PURE__ */ h({
+}), La = /* @__PURE__ */ h({
   __name: "InstrumentViewport",
   props: {
     grid: { type: Boolean, default: !1 },
@@ -883,7 +883,7 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-instrument-viewport",
         t.grid && "strand-instrument-viewport--grid",
@@ -891,8 +891,8 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
-      g(n.$slots, "default")
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      $(n.$slots, "default")
     ], 16));
   }
 }), Va = /* @__PURE__ */ h({
@@ -903,31 +903,31 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = w(null), n = w(!1);
+    const t = e, a = B(null), n = B(!1);
     let s = null;
-    const i = c(
+    const d = f(
       () => [
         "strand-reveal",
         n.value && "strand-reveal--visible",
         t.className
       ].filter(Boolean).join(" ")
     );
-    return E(() => {
+    return S(() => {
       a.value && (s = new IntersectionObserver(
-        (d) => {
-          for (const r of d)
-            r.isIntersecting ? (n.value = !0, t.once && s && a.value && s.unobserve(a.value)) : t.once || (n.value = !1);
+        (i) => {
+          for (const o of i)
+            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(() => {
+    }), N(() => {
       s && (s.disconnect(), s = null);
-    }), (d, r) => (l(), o("div", k({
+    }), (i, o) => (l(), r("div", k({
       ref_key: "elRef",
       ref: a,
-      class: i.value
-    }, d.$attrs), [
-      g(d.$slots, "default")
+      class: d.value
+    }, i.$attrs), [
+      $(i.$slots, "default")
     ], 16));
   }
 }), Ie = ["href"], Da = /* @__PURE__ */ h({
@@ -939,20 +939,20 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => ["strand-link", t.variant !== "default" && `strand-link--${t.variant}`, t.className].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("a", k({
+    return (n, s) => (l(), r("a", k({
       href: e.href,
       class: a.value
     }, {
       ...e.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
       ...n.$attrs
     }), [
-      g(n.$slots, "default")
+      $(n.$slots, "default")
     ], 16, Ie));
   }
-}), Ee = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], ze = ["id", "aria-labelledby", "hidden"], La = /* @__PURE__ */ h({
+}), Oe = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Ee = ["id", "aria-labelledby", "hidden"], Ma = /* @__PURE__ */ h({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -960,20 +960,20 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = w(null), i = c(() => ["strand-tabs"].filter(Boolean).join(" "));
-    function d(m) {
+    const a = e, n = t, s = B(null), d = f(() => ["strand-tabs"].filter(Boolean).join(" "));
+    function i(c) {
       var u, p;
-      const v = a.tabs[m];
+      const v = a.tabs[c];
       if (v) {
         n("change", v.id);
-        const $ = (u = s.value) == null ? void 0 : u.querySelectorAll('[role="tab"]');
-        (p = $ == null ? void 0 : $[m]) == null || p.focus();
+        const g = (u = s.value) == null ? void 0 : u.querySelectorAll('[role="tab"]');
+        (p = g == null ? void 0 : g[c]) == null || p.focus();
       }
     }
-    function r(m) {
+    function o(c) {
       const v = a.tabs.findIndex((p) => p.id === a.activeTab);
       let u = null;
-      switch (m.key) {
+      switch (c.key) {
         case "ArrowRight":
           u = (v + 1) % a.tabs.length;
           break;
@@ -989,23 +989,23 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         default:
           return;
       }
-      m.preventDefault(), d(u);
+      c.preventDefault(), i(u);
     }
-    return (m, v) => (l(), o("div", {
-      class: b(i.value)
+    return (c, v) => (l(), r("div", {
+      class: _(d.value)
     }, [
-      f("div", {
+      m("div", {
         ref_key: "tablistRef",
         ref: s,
         role: "tablist",
-        onKeydown: r
+        onKeydown: o
       }, [
-        (l(!0), o(B, null, C(e.tabs, (u) => (l(), o("button", {
+        (l(!0), r(w, null, C(e.tabs, (u) => (l(), r("button", {
           key: u.id,
           id: `tab-${u.id}`,
           role: "tab",
           type: "button",
-          class: b([
+          class: _([
             "strand-tabs__tab",
             u.id === e.activeTab && "strand-tabs__tab--active"
           ].filter(Boolean).join(" ")),
@@ -1013,9 +1013,9 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
           "aria-controls": `panel-${u.id}`,
           tabindex: u.id === e.activeTab ? 0 : -1,
           onClick: (p) => n("change", u.id)
-        }, _(u.label), 11, Ee))), 128))
+        }, b(u.label), 11, Oe))), 128))
       ], 544),
-      (l(!0), o(B, null, C(e.tabs, (u) => (l(), o("div", {
+      (l(!0), r(w, null, C(e.tabs, (u) => (l(), r("div", {
         key: u.id,
         id: `panel-${u.id}`,
         role: "tabpanel",
@@ -1023,43 +1023,43 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         hidden: u.id !== e.activeTab || void 0,
         tabindex: 0
       }, [
-        g(m.$slots, `panel-${u.id}`)
-      ], 8, ze))), 128))
+        $(c.$slots, `panel-${u.id}`)
+      ], 8, Ee))), 128))
     ], 2));
   }
-}), Ve = { class: "strand-breadcrumb__list" }, De = {
+}), ze = { class: "strand-breadcrumb__list" }, Le = {
   key: 0,
   class: "strand-breadcrumb__separator",
   "aria-hidden": "true"
-}, Le = {
+}, Ve = {
   key: 1,
   class: "strand-breadcrumb__current",
   "aria-current": "page"
-}, Oe = ["href"], Oa = /* @__PURE__ */ h({
+}, De = ["href"], Aa = /* @__PURE__ */ h({
   __name: "Breadcrumb",
   props: {
     items: {},
     separator: { default: "/" }
   },
   setup(e) {
-    const t = c(
+    const t = f(
       () => ["strand-breadcrumb"].filter(Boolean).join(" ")
     );
-    return (a, n) => (l(), o("nav", {
+    return (a, n) => (l(), r("nav", {
       "aria-label": "Breadcrumb",
-      class: b(t.value)
+      class: _(t.value)
     }, [
-      f("ol", Ve, [
-        (l(!0), o(B, null, C(e.items, (s, i) => (l(), o("li", {
-          key: `${s.label}-${i}`,
+      m("ol", ze, [
+        (l(!0), r(w, null, C(e.items, (s, d) => (l(), r("li", {
+          key: `${s.label}-${d}`,
           class: "strand-breadcrumb__item"
         }, [
-          i > 0 ? (l(), o("span", De, _(e.separator), 1)) : y("", !0),
-          i === e.items.length - 1 ? (l(), o("span", Le, _(s.label), 1)) : (l(), o("a", {
+          d > 0 ? (l(), r("span", Le, b(e.separator), 1)) : y("", !0),
+          d === e.items.length - 1 ? (l(), r("span", Ve, b(s.label), 1)) : (l(), r("a", {
             key: 2,
             href: s.href,
             class: "strand-breadcrumb__link"
-          }, _(s.label), 9, Oe))
+          }, b(s.label), 9, De))
         ]))), 128))
       ])
     ], 2));
@@ -1073,67 +1073,71 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
 }, Ue = ["aria-expanded", "aria-label"], qe = {
   key: 0,
   class: "strand-nav__mobile-menu"
-}, Ge = ["href", "aria-current"], Ma = /* @__PURE__ */ h({
+}, Ge = ["href", "aria-current"], Fa = /* @__PURE__ */ h({
   __name: "Nav",
   props: {
     items: { default: () => [] },
     glass: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = w(!1);
+    const t = e, a = B(!1);
     function n() {
       a.value = !a.value;
     }
-    const s = c(() => ["strand-nav", t.glass && "strand-nav--glass"].filter(Boolean).join(" "));
-    return (i, d) => (l(), o("nav", {
-      class: b(s.value),
+    function s(i) {
+      i ? document.body.classList.add("strand-glass-nav-active") : document.body.classList.remove("strand-glass-nav-active");
+    }
+    S(() => s(t.glass)), N(() => document.body.classList.remove("strand-glass-nav-active")), T(() => t.glass, s);
+    const d = f(() => ["strand-nav", t.glass && "strand-nav--glass"].filter(Boolean).join(" "));
+    return (i, o) => (l(), r("nav", {
+      class: _(d.value),
       "aria-label": "Main navigation"
     }, [
-      f("div", Me, [
-        i.$slots.logo ? (l(), o("div", Ae, [
-          g(i.$slots, "logo")
+      m("div", Me, [
+        i.$slots.logo ? (l(), r("div", Ae, [
+          $(i.$slots, "logo")
         ])) : y("", !0),
-        f("div", Fe, [
-          (l(!0), o(B, null, C(e.items, (r) => (l(), o("a", {
-            key: r.href,
-            href: r.href,
-            class: b([
+        m("div", Fe, [
+          (l(!0), r(w, null, C(e.items, (c) => (l(), r("a", {
+            key: c.href,
+            href: c.href,
+            class: _([
               "strand-nav__link",
-              r.active && "strand-nav__link--active"
+              c.active && "strand-nav__link--active"
             ].filter(Boolean).join(" ")),
-            "aria-current": r.active ? "page" : void 0
-          }, _(r.label), 11, Ke))), 128))
+            "aria-current": c.active ? "page" : void 0
+          }, b(c.label), 11, Ke))), 128))
         ]),
-        i.$slots.actions ? (l(), o("div", Pe, [
-          g(i.$slots, "actions")
+        i.$slots.actions ? (l(), r("div", Pe, [
+          $(i.$slots, "actions")
         ])) : y("", !0),
-        f("button", {
+        m("button", {
           type: "button",
           class: "strand-nav__hamburger",
           "aria-expanded": a.value ? "true" : "false",
           "aria-label": a.value ? "Close menu" : "Menu",
           onClick: n
-        }, [...d[0] || (d[0] = [
-          f("span", {
+        }, [...o[0] || (o[0] = [
+          m("span", {
             class: "strand-nav__hamburger-icon",
             "aria-hidden": "true"
           }, null, -1)
         ])], 8, Ue)
       ]),
-      a.value ? (l(), o("div", qe, [
-        (l(!0), o(B, null, C(e.items, (r) => (l(), o("a", {
-          key: r.href,
-          href: r.href,
-          class: b([
+      a.value ? (l(), r("div", qe, [
+        (l(!0), r(w, null, C(e.items, (c) => (l(), r("a", {
+          key: c.href,
+          href: c.href,
+          class: _([
             "strand-nav__mobile-link",
-            r.active && "strand-nav__mobile-link--active"
+            c.active && "strand-nav__mobile-link--active"
           ].filter(Boolean).join(" ")),
-          "aria-current": r.active ? "page" : void 0
-        }, _(r.label), 11, Ge))), 128))
+          "aria-current": c.active ? "page" : void 0
+        }, b(c.label), 11, Ge))), 128))
       ])) : y("", !0)
     ], 2));
   }
-}), We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Aa = /* @__PURE__ */ h({
+}), We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Ka = /* @__PURE__ */ h({
   __name: "Toast",
   props: {
     status: { default: "info" },
@@ -1141,24 +1145,24 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   },
   emits: ["dismiss"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => a.status === "error" || a.status === "warning"
-    ), i = c(
+    ), d = f(
       () => ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ")
-    ), d = {
+    ), i = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, r = c(() => d[a.status] ?? a.status.toUpperCase());
-    return (m, v) => (l(), o("div", {
-      class: b(i.value),
+    }, o = f(() => i[a.status] ?? a.status.toUpperCase());
+    return (c, v) => (l(), r("div", {
+      class: _(d.value),
       role: "status",
       "aria-live": s.value ? "assertive" : "polite"
     }, [
-      f("span", He, _(r.value), 1),
-      f("span", Ze, _(e.message), 1),
-      f("button", {
+      m("span", He, b(o.value), 1),
+      m("span", Ze, b(e.message), 1),
+      m("button", {
         type: "button",
         class: "strand-toast__dismiss",
         "aria-label": "Dismiss",
@@ -1168,9 +1172,9 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   }
 });
 /*! Strand Vue | MIT License | dillingerstaffing.com */
-const O = Symbol("StrandToast");
-function Fa() {
-  const e = A(O);
+const D = Symbol("StrandToast");
+function Pa() {
+  const e = A(D);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
@@ -1178,16 +1182,16 @@ function Fa() {
 const Je = {
   key: 0,
   class: "strand-toast__container"
-}, Qe = ["aria-live"], Xe = { class: "strand-toast__status" }, Ye = { class: "strand-toast__message" }, ea = ["onClick"], Ka = /* @__PURE__ */ h({
+}, Qe = ["aria-live"], Xe = { class: "strand-toast__status" }, Ye = { class: "strand-toast__message" }, ea = ["onClick"], Ua = /* @__PURE__ */ h({
   __name: "ToastProvider",
   setup(e) {
     let t = 0;
-    const a = w([]), n = /* @__PURE__ */ new Map();
+    const a = B([]), n = /* @__PURE__ */ new Map();
     function s(v) {
       const u = n.get(v);
       u !== void 0 && (clearTimeout(u), n.delete(v)), a.value = a.value.filter((p) => p.id !== v);
     }
-    function i(v) {
+    function d(v) {
       const u = {
         id: ++t,
         message: v.message,
@@ -1201,45 +1205,45 @@ const Je = {
         n.set(u.id, p);
       }
     }
-    F(O, { toast: i }), j(() => {
+    F(D, { toast: d }), N(() => {
       for (const v of n.values())
         clearTimeout(v);
       n.clear();
     });
-    function d(v) {
+    function i(v) {
       return v === "error" || v === "warning";
     }
-    const r = {
+    const o = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
     };
-    function m(v) {
-      return r[v] ?? v.toUpperCase();
+    function c(v) {
+      return o[v] ?? v.toUpperCase();
     }
-    return (v, u) => (l(), o(B, null, [
-      g(v.$slots, "default"),
-      a.value.length > 0 ? (l(), o("div", Je, [
-        (l(!0), o(B, null, C(a.value, (p) => (l(), o("div", {
+    return (v, u) => (l(), r(w, null, [
+      $(v.$slots, "default"),
+      a.value.length > 0 ? (l(), r("div", Je, [
+        (l(!0), r(w, null, C(a.value, (p) => (l(), r("div", {
           key: p.id,
-          class: b(["strand-toast", `strand-toast--${p.status}`].join(" ")),
+          class: _(["strand-toast", `strand-toast--${p.status}`].join(" ")),
           role: "status",
-          "aria-live": d(p.status) ? "assertive" : "polite"
+          "aria-live": i(p.status) ? "assertive" : "polite"
         }, [
-          f("span", Xe, _(m(p.status)), 1),
-          f("span", Ye, _(p.message), 1),
-          f("button", {
+          m("span", Xe, b(c(p.status)), 1),
+          m("span", Ye, b(p.message), 1),
+          m("button", {
             type: "button",
             class: "strand-toast__dismiss",
             "aria-label": "Dismiss",
-            onClick: ($) => s(p.id)
+            onClick: (g) => s(p.id)
           }, " × ", 8, ea)
         ], 10, Qe))), 128))
       ])) : y("", !0)
     ], 64));
   }
-}), aa = ["role"], ta = { class: "strand-alert__status" }, sa = { class: "strand-alert__content" }, Pa = /* @__PURE__ */ h({
+}), aa = ["role"], ta = { class: "strand-alert__status" }, sa = { class: "strand-alert__content" }, qa = /* @__PURE__ */ h({
   __name: "Alert",
   props: {
     status: { default: "info" },
@@ -1247,43 +1251,43 @@ const Je = {
   },
   emits: ["dismiss"],
   setup(e, { emit: t }) {
-    const a = e, n = t, s = c(
+    const a = e, n = t, s = f(
       () => a.status === "error" || a.status === "warning" ? "alert" : "status"
-    ), i = c(
+    ), d = f(
       () => [
         "strand-alert",
         `strand-alert--${a.status}`
       ].filter(Boolean).join(" ")
-    ), d = {
+    ), i = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, r = c(() => d[a.status] ?? a.status.toUpperCase());
-    function m() {
+    }, o = f(() => i[a.status] ?? a.status.toUpperCase());
+    function c() {
       n("dismiss");
     }
-    return (v, u) => (l(), o("div", {
-      class: b(i.value),
+    return (v, u) => (l(), r("div", {
+      class: _(d.value),
       role: s.value
     }, [
-      f("span", ta, _(r.value), 1),
-      f("div", sa, [
-        g(v.$slots, "default")
+      m("span", ta, b(o.value), 1),
+      m("div", sa, [
+        $(v.$slots, "default")
       ]),
-      e.dismissible ? (l(), o("button", {
+      e.dismissible ? (l(), r("button", {
         key: 0,
         type: "button",
         class: "strand-alert__dismiss",
         "aria-label": "Dismiss",
-        onClick: m
+        onClick: c
       }, " × ")) : y("", !0)
     ], 10, aa));
   }
 }), na = ["aria-labelledby"], la = {
   key: 0,
   class: "strand-dialog__header"
-}, oa = { class: "strand-dialog__body" }, D = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Ua = /* @__PURE__ */ h({
+}, ra = { class: "strand-dialog__body" }, L = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Ga = /* @__PURE__ */ h({
   __name: "Dialog",
   props: {
     open: { type: Boolean },
@@ -1295,80 +1299,80 @@ const Je = {
   setup(e, { emit: t }) {
     const a = e, n = t;
     let s = 0;
-    const i = `strand-dialog-title-${++s}`, d = w(null);
-    let r = null, m = "";
-    const v = c(
+    const d = `strand-dialog-title-${++s}`, i = B(null);
+    let o = null, c = "";
+    const v = f(
       () => ["strand-dialog__panel"].filter(Boolean).join(" ")
     );
-    function u($) {
-      if ($.key === "Escape" && a.closeOnEscape) {
-        $.stopPropagation(), n("close");
+    function u(g) {
+      if (g.key === "Escape" && a.closeOnEscape) {
+        g.stopPropagation(), n("close");
         return;
       }
-      if ($.key === "Tab") {
-        const x = d.value;
+      if (g.key === "Tab") {
+        const x = i.value;
         if (!x) return;
-        const N = Array.from(
-          x.querySelectorAll(D)
+        const j = Array.from(
+          x.querySelectorAll(L)
         );
-        if (N.length === 0) return;
-        const z = N[0], V = N[N.length - 1];
-        $.shiftKey ? document.activeElement === z && ($.preventDefault(), V.focus()) : document.activeElement === V && ($.preventDefault(), z.focus());
+        if (j.length === 0) return;
+        const E = j[0], z = j[j.length - 1];
+        g.shiftKey ? document.activeElement === E && (g.preventDefault(), z.focus()) : document.activeElement === z && (g.preventDefault(), E.focus());
       }
     }
-    function p($) {
-      a.closeOnOutsideClick && $.target === $.currentTarget && n("close");
+    function p(g) {
+      a.closeOnOutsideClick && g.target === g.currentTarget && n("close");
     }
-    return I(
+    return T(
       () => a.open,
-      async ($) => {
-        if ($) {
-          r = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await K();
-          const x = d.value;
+      async (g) => {
+        if (g) {
+          o = document.activeElement, c = document.body.style.overflow, document.body.style.overflow = "hidden", await K();
+          const x = i.value;
           if (x) {
-            const N = x.querySelectorAll(D);
-            N.length > 0 ? N[0].focus() : x.focus();
+            const j = x.querySelectorAll(L);
+            j.length > 0 ? j[0].focus() : x.focus();
           }
         } else
-          document.body.style.overflow = m, r && r instanceof HTMLElement && r.focus();
+          document.body.style.overflow = c, o && o instanceof HTMLElement && o.focus();
       },
       { immediate: !0 }
-    ), j(() => {
-      a.open && (document.body.style.overflow = m);
-    }), ($, x) => e.open ? (l(), o("div", {
+    ), N(() => {
+      a.open && (document.body.style.overflow = c);
+    }), (g, x) => e.open ? (l(), r("div", {
       key: 0,
       class: "strand-dialog__backdrop",
       onClick: p,
       onKeydown: u
     }, [
-      f("div", {
+      m("div", {
         ref_key: "panelRef",
-        ref: d,
-        class: b(v.value),
+        ref: i,
+        class: _(v.value),
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.title ? i : void 0,
+        "aria-labelledby": e.title ? d : void 0,
         tabindex: -1
       }, [
-        e.title ? (l(), o("div", la, [
-          f("h2", {
-            id: i,
+        e.title ? (l(), r("div", la, [
+          m("h2", {
+            id: d,
             class: "strand-dialog__title"
-          }, _(e.title), 1)
+          }, b(e.title), 1)
         ])) : y("", !0),
-        f("button", {
+        m("button", {
           type: "button",
           class: "strand-dialog__close",
           "aria-label": "Close",
-          onClick: x[0] || (x[0] = (N) => n("close"))
+          onClick: x[0] || (x[0] = (j) => n("close"))
         }, " × "),
-        f("div", oa, [
-          g($.$slots, "default")
+        m("div", ra, [
+          $(g.$slots, "default")
         ])
       ], 10, na)
     ], 32)) : y("", !0);
   }
-}), ra = ["aria-hidden"], qa = /* @__PURE__ */ h({
+}), oa = ["aria-hidden"], Wa = /* @__PURE__ */ h({
   __name: "Tooltip",
   props: {
     content: {},
@@ -1378,46 +1382,46 @@ const Je = {
   setup(e) {
     const t = e;
     let a = 0;
-    const n = `strand-tooltip-${++a}`, s = w(!1);
-    let i = null;
-    function d() {
-      i = setTimeout(() => {
+    const n = `strand-tooltip-${++a}`, s = B(!1);
+    let d = null;
+    function i() {
+      d = setTimeout(() => {
         s.value = !0;
       }, t.delay);
     }
-    function r() {
-      i !== null && (clearTimeout(i), i = null), s.value = !1;
+    function o() {
+      d !== null && (clearTimeout(d), d = null), s.value = !1;
     }
-    j(() => {
-      i !== null && clearTimeout(i);
+    N(() => {
+      d !== null && clearTimeout(d);
     });
-    const m = c(
+    const c = f(
       () => ["strand-tooltip__wrapper"].filter(Boolean).join(" ")
-    ), v = c(
+    ), v = f(
       () => [
         "strand-tooltip",
         `strand-tooltip--${t.position}`,
         s.value && "strand-tooltip--visible"
       ].filter(Boolean).join(" ")
     );
-    return (u, p) => (l(), o("span", {
-      class: b(m.value),
+    return (u, p) => (l(), r("span", {
+      class: _(c.value),
       "aria-describedby": n,
-      onMouseenter: d,
-      onMouseleave: r,
-      onFocus: d,
-      onBlur: r
+      onMouseenter: i,
+      onMouseleave: o,
+      onFocus: i,
+      onBlur: o
     }, [
-      g(u.$slots, "default"),
-      f("span", {
+      $(u.$slots, "default"),
+      m("span", {
         id: n,
-        class: b(v.value),
+        class: _(v.value),
         role: "tooltip",
         "aria-hidden": !s.value
-      }, _(e.content), 11, ra)
+      }, b(e.content), 11, oa)
     ], 34));
   }
-}), ia = ["aria-valuenow"], da = ["width", "height", "viewBox"], ca = ["cx", "cy", "r"], ua = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], T = 3, Ga = /* @__PURE__ */ h({
+}), ia = ["aria-valuenow"], da = ["width", "height", "viewBox"], ca = ["cx", "cy", "r"], ua = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], R = 3, Ha = /* @__PURE__ */ h({
   __name: "Progress",
   props: {
     variant: { default: "bar" },
@@ -1426,7 +1430,7 @@ const Je = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = { sm: 24, md: 40, lg: 56 }, n = c(() => t.value != null), s = c(
+    const t = e, a = { sm: 24, md: 40, lg: 56 }, n = f(() => t.value != null), s = f(
       () => [
         "strand-progress",
         `strand-progress--${t.variant}`,
@@ -1434,76 +1438,76 @@ const Je = {
         !n.value && "strand-progress--indeterminate",
         t.className
       ].filter(Boolean).join(" ")
-    ), i = c(() => a[t.size] ?? a.md), d = c(() => (i.value - T) / 2), r = c(() => 2 * Math.PI * d.value), m = c(
-      () => n.value ? r.value - r.value * t.value / 100 : 0
+    ), d = f(() => a[t.size] ?? a.md), i = f(() => (d.value - R) / 2), o = f(() => 2 * Math.PI * i.value), c = f(
+      () => n.value ? o.value - o.value * t.value / 100 : 0
     );
-    return (v, u) => (l(), o("div", k({
+    return (v, u) => (l(), r("div", k({
       class: s.value,
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": n.value ? e.value : void 0
     }, v.$attrs), [
-      e.variant === "ring" ? (l(), o("svg", {
+      e.variant === "ring" ? (l(), r("svg", {
         key: 0,
-        width: i.value,
-        height: i.value,
-        viewBox: `0 0 ${i.value} ${i.value}`,
+        width: d.value,
+        height: d.value,
+        viewBox: `0 0 ${d.value} ${d.value}`,
         class: "strand-progress__ring"
       }, [
-        f("circle", {
-          cx: i.value / 2,
-          cy: i.value / 2,
-          r: d.value,
+        m("circle", {
+          cx: d.value / 2,
+          cy: d.value / 2,
+          r: i.value,
           fill: "none",
-          "stroke-width": T,
+          "stroke-width": R,
           class: "strand-progress__track"
         }, null, 8, ca),
-        f("circle", {
-          cx: i.value / 2,
-          cy: i.value / 2,
-          r: d.value,
+        m("circle", {
+          cx: d.value / 2,
+          cy: d.value / 2,
+          r: i.value,
           fill: "none",
-          "stroke-width": T,
-          "stroke-dasharray": r.value,
-          "stroke-dashoffset": n.value ? m.value : void 0,
+          "stroke-width": R,
+          "stroke-dasharray": o.value,
+          "stroke-dashoffset": n.value ? c.value : void 0,
           "stroke-linecap": "round",
           class: "strand-progress__fill",
-          transform: `rotate(-90 ${i.value / 2} ${i.value / 2})`
+          transform: `rotate(-90 ${d.value / 2} ${d.value / 2})`
         }, null, 8, ua)
-      ], 8, da)) : (l(), o("div", {
+      ], 8, da)) : (l(), r("div", {
         key: 1,
         class: "strand-progress__fill",
-        style: S(n.value ? { width: `${e.value}%` } : void 0)
+        style: O(n.value ? { width: `${e.value}%` } : void 0)
       }, null, 4))
     ], 16, ia));
   }
-}), Wa = /* @__PURE__ */ h({
+}), Za = /* @__PURE__ */ h({
   __name: "Spinner",
   props: {
     size: { default: "md" },
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => [
         "strand-spinner",
         `strand-spinner--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), o("span", k({
+    return (n, s) => (l(), r("span", k({
       class: a.value,
       role: "status"
     }, n.$attrs), [...s[0] || (s[0] = [
-      f("span", {
+      m("span", {
         class: "strand-spinner__ring",
         "aria-hidden": "true"
       }, null, -1),
-      f("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
+      m("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
     ])], 16));
   }
-}), Ha = /* @__PURE__ */ h({
+}), Ja = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     variant: { default: "text" },
@@ -1512,64 +1516,120 @@ const Je = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = c(
+    const t = e, a = f(
       () => t.width ?? (t.variant === "text" ? "100%" : void 0)
-    ), n = c(
+    ), n = f(
       () => t.variant === "circle" ? a.value : t.height
-    ), s = c(
+    ), s = f(
       () => [
         "strand-skeleton",
         `strand-skeleton--${t.variant}`,
         "strand-skeleton--shimmer",
         t.className
       ].filter(Boolean).join(" ")
-    ), i = c(() => ({
+    ), d = f(() => ({
       width: a.value,
       height: n.value
     }));
-    return (d, r) => (l(), o("div", k({
+    return (i, o) => (l(), r("div", k({
       class: s.value,
       "aria-hidden": "true",
-      style: i.value
-    }, d.$attrs), null, 16));
+      style: d.value
+    }, i.$attrs), null, 16));
+  }
+}), fa = ["aria-label", "data-value"], va = ["aria-checked", "aria-label", "tabindex", "disabled", "data-star-value", "onClick", "onKeydown", "onMouseenter", "onFocus"], Qa = /* @__PURE__ */ h({
+  __name: "StarRating",
+  props: {
+    value: {},
+    onChange: {},
+    size: { default: "md" },
+    readOnly: { type: Boolean, default: !1 },
+    ariaLabel: {}
+  },
+  setup(e) {
+    const t = e, a = B(0), n = f(
+      () => [
+        "strand-star-rating",
+        `strand-star-rating--${t.size}`,
+        t.readOnly && "strand-star-rating--readonly"
+      ].filter(Boolean).join(" ")
+    ), s = f(() => a.value || t.value);
+    function d(o) {
+      var c;
+      t.readOnly || (c = t.onChange) == null || c.call(t, o);
+    }
+    function i(o, c) {
+      t.readOnly || (o.key === " " || o.key === "Enter") && (o.preventDefault(), d(c));
+    }
+    return (o, c) => (l(), r("div", {
+      class: _(n.value),
+      role: "radiogroup",
+      "aria-label": e.ariaLabel,
+      "data-strand-component": "star-rating",
+      "data-value": String(e.value)
+    }, [
+      (l(), r(w, null, C(5, (v) => m("button", {
+        key: v,
+        type: "button",
+        class: _(`strand-star-rating__star${v <= s.value ? " strand-star-rating__star--active" : ""}`),
+        role: "radio",
+        "aria-checked": v === e.value ? "true" : "false",
+        "aria-label": `${v} star${v > 1 ? "s" : ""}`,
+        tabindex: e.readOnly ? -1 : 0,
+        disabled: e.readOnly,
+        "data-star-value": String(v),
+        onClick: (u) => d(v),
+        onKeydown: (u) => i(u, v),
+        onMouseenter: (u) => !e.readOnly && (a.value = v),
+        onMouseleave: c[0] || (c[0] = (u) => !e.readOnly && (a.value = 0)),
+        onFocus: (u) => !e.readOnly && (a.value = v),
+        onBlur: c[1] || (c[1] = (u) => !e.readOnly && (a.value = 0))
+      }, [...c[2] || (c[2] = [
+        m("span", {
+          class: "strand-star-rating__glyph",
+          "aria-hidden": "true"
+        }, b("★"), -1)
+      ])], 42, va)), 64))
+    ], 10, fa));
   }
 });
 export {
-  Pa as Alert,
-  Ba as Avatar,
-  wa as Badge,
-  Oa as Breadcrumb,
-  va as Button,
-  ka as Card,
-  ba as Checkbox,
-  ja as CodeBlock,
-  Sa as Container,
-  Na as DataReadout,
-  Ua as Dialog,
-  Ia as Divider,
-  ga as FormField,
-  Ra as Grid,
-  ma as Input,
-  za as InstrumentViewport,
+  qa as Alert,
+  xa as Avatar,
+  Ca as Badge,
+  Aa as Breadcrumb,
+  ha as Button,
+  wa as Card,
+  ya as Checkbox,
+  Sa as CodeBlock,
+  Oa as Container,
+  Ta as DataReadout,
+  Ga as Dialog,
+  Ea as Divider,
+  Ba as FormField,
+  Ia as Grid,
+  ba as Input,
+  La as InstrumentViewport,
   Da as Link,
-  Ma as Nav,
-  Ga as Progress,
-  pa as Radio,
+  Fa as Nav,
+  Ha as Progress,
+  ga as Radio,
   Va as ScrollReveal,
-  Ea as Section,
-  _a as Select,
-  Ha as Skeleton,
-  $a as Slider,
-  Wa as Spinner,
-  Ta as Stack,
-  ya as Switch,
-  xa as Table,
-  La as Tabs,
-  Ca as Tag,
-  ha as Textarea,
-  Aa as Toast,
-  Ka as ToastProvider,
-  qa as Tooltip,
-  Fa as useToast
+  za as Section,
+  pa as Select,
+  Ja as Skeleton,
+  ka as Slider,
+  Za as Spinner,
+  Ra as Stack,
+  Qa as StarRating,
+  $a as Switch,
+  Na as Table,
+  Ma as Tabs,
+  ja as Tag,
+  _a as Textarea,
+  Ka as Toast,
+  Ua as ToastProvider,
+  Wa as Tooltip,
+  Pa as useToast
 };
 //# sourceMappingURL=index.js.map