@dillingerstaffing/strand-vue 0.6.0 → 0.7.1

package/dist/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as _, computed as u, openBlock as n, createElementBlock as l, normalizeClass as b, createCommentVNode as g, createElementVNode as f, normalizeStyle as S, renderSlot as k, useSlots as V, ref as x, watch as R, onMounted as D, toDisplayString as h, Fragment as B, renderList as w, createTextVNode as T, mergeProps as y, inject as A, provide as F, onUnmounted as E, nextTick as M } from "vue";
+import { defineComponent as h, computed as c, openBlock as l, createElementBlock as r, normalizeClass as b, createCommentVNode as g, createElementVNode as f, normalizeStyle as S, renderSlot as y, useSlots as D, ref as w, watch as I, onMounted as E, toDisplayString as _, Fragment as B, renderList as C, createTextVNode as R, mergeProps as k, onUnmounted as j, inject as A, provide as F, nextTick as M } from "vue";
 const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   key: 0,
   class: "strand-btn__spinner",
   "aria-hidden": "true"
-}, da = /* @__PURE__ */ _({
+}, da = /* @__PURE__ */ h({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,7 +16,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(() => a.disabled || a.loading), o = u(
+    const a = e, n = t, s = c(() => a.disabled || a.loading), i = c(
       () => [
         "strand-btn",
         `strand-btn--${a.variant}`,
@@ -26,23 +26,23 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.loading && "strand-btn--loading"
       ].filter(Boolean).join(" ")
     );
-    function i(d) {
-      s.value || r("click", d);
+    function o(d) {
+      s.value || n("click", d);
     }
-    return (d, m) => (n(), l("button", {
+    return (d, m) => (l(), r("button", {
       type: e.type,
-      class: b(o.value),
+      class: b(i.value),
       disabled: s.value,
       "aria-disabled": s.value ? "true" : void 0,
       "aria-busy": e.loading ? "true" : void 0,
-      onClick: i
+      onClick: o
     }, [
-      e.loading ? (n(), l("span", P)) : g("", !0),
+      e.loading ? (l(), r("span", P)) : g("", !0),
       f("span", {
         class: "strand-btn__content",
         style: S(e.loading ? { visibility: "hidden" } : void 0)
       }, [
-        k(d.$slots, "default")
+        y(d.$slots, "default")
       ], 4)
     ], 10, K));
   }
@@ -54,7 +54,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   key: 1,
   class: "strand-input__trailing",
   "aria-hidden": "true"
-}, ca = /* @__PURE__ */ _({
+}, ca = /* @__PURE__ */ h({
   __name: "Input",
   props: {
     type: { default: "text" },
@@ -64,7 +64,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = V(), o = u(
+    const a = e, n = t, s = D(), i = c(
       () => [
         "strand-input",
         a.error && "strand-input--error",
@@ -73,15 +73,15 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         !!s.trailing && "strand-input--has-trailing"
       ].filter(Boolean).join(" ")
     );
-    function i(d) {
+    function o(d) {
       const m = d.target;
-      r("update:modelValue", m.value);
+      n("update:modelValue", m.value);
     }
-    return (d, m) => (n(), l("div", {
-      class: b(o.value)
+    return (d, m) => (l(), r("div", {
+      class: b(i.value)
     }, [
-      d.$slots.leading ? (n(), l("span", U, [
-        k(d.$slots, "leading")
+      d.$slots.leading ? (l(), r("span", U, [
+        y(d.$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: i
+        onInput: o
       }, null, 40, q),
-      d.$slots.trailing ? (n(), l("span", G, [
-        k(d.$slots, "trailing")
+      d.$slots.trailing ? (l(), r("span", G, [
+        y(d.$slots, "trailing")
       ])) : g("", !0)
     ], 2));
   }
@@ -100,7 +100,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   key: 0,
   class: "strand-textarea__count",
   "aria-live": "polite"
-}, ua = /* @__PURE__ */ _({
+}, ua = /* @__PURE__ */ h({
   __name: "Textarea",
   props: {
     autoResize: { type: Boolean, default: !1 },
@@ -112,29 +112,29 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = x(null), o = u(
+    const a = e, n = t, s = w(null), i = c(
       () => [
         "strand-textarea",
         a.error && "strand-textarea--error",
         a.disabled && "strand-textarea--disabled",
         a.autoResize && "strand-textarea--auto-resize"
       ].filter(Boolean).join(" ")
-    ), i = u(
+    ), o = c(
       () => typeof a.modelValue == "string" ? a.modelValue.length : 0
     );
     function d() {
       a.autoResize && s.value && (s.value.style.height = "auto", s.value.style.height = `${s.value.scrollHeight}px`);
     }
     function m(v) {
-      const c = v.target;
-      r("update:modelValue", c.value), d();
+      const u = v.target;
+      n("update:modelValue", u.value), d();
     }
-    return R(() => a.modelValue, () => {
+    return I(() => a.modelValue, () => {
       d();
-    }), D(() => {
+    }), E(() => {
       d();
-    }), (v, c) => (n(), l("div", {
-      class: b(o.value)
+    }), (v, u) => (l(), r("div", {
+      class: b(i.value)
     }, [
       f("textarea", {
         ref_key: "textareaRef",
@@ -146,14 +146,14 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         value: e.modelValue,
         onInput: m
       }, null, 40, W),
-      e.showCount && e.maxLength != null ? (n(), l("span", H, h(i.value) + "/" + h(e.maxLength), 1)) : g("", !0)
+      e.showCount && e.maxLength != null ? (l(), r("span", H, _(o.value) + "/" + _(e.maxLength), 1)) : g("", !0)
     ], 2));
   }
 }), Z = ["value", "disabled", "aria-invalid"], J = {
   key: 0,
   value: "",
   disabled: ""
-}, Q = ["value"], fa = /* @__PURE__ */ _({
+}, Q = ["value"], fa = /* @__PURE__ */ h({
   __name: "Select",
   props: {
     options: {},
@@ -164,18 +164,18 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => [
         "strand-select",
         a.error && "strand-select--error",
         a.disabled && "strand-select--disabled"
       ].filter(Boolean).join(" ")
     );
-    function o(i) {
-      const d = i.target;
-      r("update:modelValue", d.value);
+    function i(o) {
+      const d = o.target;
+      n("update:modelValue", d.value);
     }
-    return (i, d) => (n(), l("div", {
+    return (o, d) => (l(), r("div", {
       class: b(s.value)
     }, [
       f("select", {
@@ -183,13 +183,13 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         value: e.modelValue,
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
-        onChange: o
+        onChange: i
       }, [
-        e.placeholder ? (n(), l("option", J, h(e.placeholder), 1)) : g("", !0),
-        (n(!0), l(B, null, w(e.options, (m) => (n(), l("option", {
+        e.placeholder ? (l(), r("option", J, _(e.placeholder), 1)) : g("", !0),
+        (l(!0), r(B, null, C(e.options, (m) => (l(), r("option", {
           key: m.value,
           value: m.value
-        }, h(m.label), 9, Q))), 128))
+        }, _(m.label), 9, Q))), 128))
       ], 40, Z),
       d[0] || (d[0] = f("span", {
         class: "strand-select__arrow",
@@ -213,7 +213,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
 }, te = {
   key: 0,
   class: "strand-checkbox__label"
-}, va = /* @__PURE__ */ _({
+}, va = /* @__PURE__ */ h({
   __name: "Checkbox",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -223,30 +223,30 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = x(null);
-    D(() => {
+    const a = e, n = t, s = w(null);
+    E(() => {
       s.value && (s.value.indeterminate = a.indeterminate);
-    }), R(() => a.indeterminate, (v) => {
+    }), I(() => a.indeterminate, (v) => {
       s.value && (s.value.indeterminate = v);
     });
-    const o = u(
+    const i = c(
       () => [
         "strand-checkbox",
         a.checked && "strand-checkbox--checked",
         a.indeterminate && "strand-checkbox--indeterminate",
         a.disabled && "strand-checkbox--disabled"
       ].filter(Boolean).join(" ")
-    ), i = u(
+    ), o = c(
       () => a.indeterminate ? "mixed" : a.checked ? "true" : "false"
     );
     function d(v) {
-      a.disabled || r("change", v);
+      a.disabled || n("change", v);
     }
     function m(v) {
       v.key === " " && !a.disabled && (v.preventDefault(), s.value && s.value.click());
     }
-    return (v, c) => (n(), l("label", {
-      class: b(o.value),
+    return (v, u) => (l(), r("label", {
+      class: b(i.value),
       onKeydown: m
     }, [
       f("input", {
@@ -256,12 +256,12 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         class: "strand-checkbox__native",
         checked: e.checked,
         disabled: e.disabled,
-        "aria-checked": i.value,
+        "aria-checked": o.value,
         role: "checkbox",
         onChange: d
       }, null, 40, X),
       f("span", Y, [
-        e.indeterminate ? (n(), l("svg", ee, [...c[0] || (c[0] = [
+        e.indeterminate ? (l(), r("svg", ee, [...u[0] || (u[0] = [
           f("line", {
             x1: "4",
             y1: "8",
@@ -271,7 +271,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
             "stroke-width": "2",
             "stroke-linecap": "round"
           }, null, -1)
-        ])])) : e.checked ? (n(), l("svg", ae, [...c[1] || (c[1] = [
+        ])])) : e.checked ? (l(), r("svg", ae, [...u[1] || (u[1] = [
           f("path", {
             d: "M3.5 8L6.5 11L12.5 5",
             stroke: "currentColor",
@@ -281,13 +281,13 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
           }, null, -1)
         ])])) : g("", !0)
       ]),
-      e.label ? (n(), l("span", te, h(e.label), 1)) : g("", !0)
+      e.label ? (l(), r("span", te, _(e.label), 1)) : g("", !0)
     ], 34));
   }
 }), se = ["checked", "disabled", "name", "value"], ne = {
   key: 0,
   class: "strand-radio__label"
-}, ma = /* @__PURE__ */ _({
+}, ma = /* @__PURE__ */ h({
   __name: "Radio",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -298,17 +298,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => [
         "strand-radio",
         a.checked && "strand-radio--checked",
         a.disabled && "strand-radio--disabled"
       ].filter(Boolean).join(" ")
     );
-    function o(i) {
-      a.disabled || r("change", i);
+    function i(o) {
+      a.disabled || n("change", o);
     }
-    return (i, d) => (n(), l("label", {
+    return (o, d) => (l(), r("label", {
       class: b(s.value)
     }, [
       f("input", {
@@ -318,7 +318,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         disabled: e.disabled,
         name: e.name,
         value: e.value,
-        onChange: o
+        onChange: i
       }, null, 40, se),
       d[0] || (d[0] = f("span", {
         class: "strand-radio__control",
@@ -326,13 +326,13 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       }, [
         f("span", { class: "strand-radio__dot" })
       ], -1)),
-      e.label ? (n(), l("span", ne, h(e.label), 1)) : g("", !0)
+      e.label ? (l(), r("span", ne, _(e.label), 1)) : g("", !0)
     ], 2));
   }
 }), le = ["aria-checked", "disabled"], re = {
   key: 0,
   class: "strand-switch__label"
-}, ha = /* @__PURE__ */ _({
+}, ha = /* @__PURE__ */ h({
   __name: "Switch",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -341,20 +341,20 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => [
         "strand-switch",
         a.checked && "strand-switch--checked",
         a.disabled && "strand-switch--disabled"
       ].filter(Boolean).join(" ")
     );
-    function o() {
-      a.disabled || r("change", !a.checked);
+    function i() {
+      a.disabled || n("change", !a.checked);
     }
-    function i(d) {
-      (d.key === " " || d.key === "Enter") && !a.disabled && (d.preventDefault(), r("change", !a.checked));
+    function o(d) {
+      (d.key === " " || d.key === "Enter") && !a.disabled && (d.preventDefault(), n("change", !a.checked));
     }
-    return (d, m) => (n(), l("label", {
+    return (d, m) => (l(), r("label", {
       class: b(s.value)
     }, [
       f("button", {
@@ -363,18 +363,18 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         class: "strand-switch__track",
         "aria-checked": e.checked ? "true" : "false",
         disabled: e.disabled,
-        onClick: o,
-        onKeydown: i
+        onClick: i,
+        onKeydown: o
       }, [...m[0] || (m[0] = [
         f("span", {
           class: "strand-switch__thumb",
           "aria-hidden": "true"
         }, null, -1)
       ])], 40, le),
-      e.label ? (n(), l("span", re, h(e.label), 1)) : g("", !0)
+      e.label ? (l(), r("span", re, _(e.label), 1)) : g("", !0)
     ], 2));
   }
-}), oe = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], _a = /* @__PURE__ */ _({
+}), oe = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], _a = /* @__PURE__ */ h({
   __name: "Slider",
   props: {
     min: { default: 0 },
@@ -385,17 +385,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => [
         "strand-slider",
         a.disabled && "strand-slider--disabled"
       ].filter(Boolean).join(" ")
     );
-    function o(i) {
-      const d = i.target;
-      r("update:modelValue", Number(d.value));
+    function i(o) {
+      const d = o.target;
+      n("update:modelValue", Number(d.value));
     }
-    return (i, d) => (n(), l("div", {
+    return (o, d) => (l(), r("div", {
       class: b(s.value)
     }, [
       f("input", {
@@ -409,7 +409,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         "aria-valuemin": e.min,
         "aria-valuemax": e.max,
         "aria-valuenow": e.modelValue,
-        onInput: o
+        onInput: i
       }, null, 40, oe)
     ], 2));
   }
@@ -417,7 +417,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   key: 0,
   class: "strand-form-field__required",
   "aria-hidden": "true"
-}, ce = { class: "strand-form-field__control" }, ue = ["id"], fe = ["id"], ba = /* @__PURE__ */ _({
+}, ce = { class: "strand-form-field__control" }, ue = ["id"], fe = ["id"], ba = /* @__PURE__ */ h({
   __name: "FormField",
   props: {
     label: {},
@@ -427,38 +427,38 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     required: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-form-field",
         t.error && "strand-form-field--error"
       ].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("div", {
+    return (n, s) => (l(), r("div", {
       class: b(a.value)
     }, [
       f("label", {
         class: "strand-form-field__label",
         for: e.htmlFor
       }, [
-        T(h(e.label) + " ", 1),
-        e.required ? (n(), l("span", de, " * ")) : g("", !0)
+        R(_(e.label) + " ", 1),
+        e.required ? (l(), r("span", de, " * ")) : g("", !0)
       ], 8, ie),
       f("div", ce, [
-        k(r.$slots, "default")
+        y(n.$slots, "default")
       ]),
-      e.error ? (n(), l("p", {
+      e.error ? (l(), r("p", {
         key: 0,
         class: "strand-form-field__error",
         id: `${e.htmlFor}-error`,
         role: "alert"
-      }, h(e.error), 9, ue)) : e.hint ? (n(), l("p", {
+      }, _(e.error), 9, ue)) : e.hint ? (l(), r("p", {
         key: 1,
         class: "strand-form-field__hint",
         id: `${e.htmlFor}-hint`
-      }, h(e.hint), 9, fe)) : g("", !0)
+      }, _(e.hint), 9, fe)) : g("", !0)
     ], 2));
   }
-}), pa = /* @__PURE__ */ _({
+}), pa = /* @__PURE__ */ h({
   __name: "Card",
   props: {
     variant: { default: "elevated" },
@@ -466,7 +466,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-card",
         `strand-card--${t.variant}`,
@@ -474,11 +474,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
-      k(r.$slots, "default")
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      y(n.$slots, "default")
     ], 16));
   }
-}), ve = ["aria-label"], $a = /* @__PURE__ */ _({
+}), ve = ["aria-label"], $a = /* @__PURE__ */ h({
   __name: "Badge",
   props: {
     variant: { default: "count" },
@@ -488,32 +488,32 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = V(), r = u(() => !!a.default), s = u(() => t.variant === "count" ? t.count != null && t.count > t.maxCount ? `${t.maxCount}+` : t.count : null), o = u(() => {
+    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`;
-    }), i = u(
+    }), o = c(
       () => [
         "strand-badge__indicator",
         `strand-badge--${t.variant}`,
         `strand-badge--${t.status}`
       ].filter(Boolean).join(" ")
-    ), d = u(
-      () => r.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
+    ), d = c(
+      () => n.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
     );
-    return (m, v) => (n(), l("span", y({ class: d.value }, m.$attrs), [
-      k(m.$slots, "default"),
+    return (m, v) => (l(), r("span", k({ class: d.value }, m.$attrs), [
+      y(m.$slots, "default"),
       f("span", {
-        class: b(i.value),
-        "aria-label": o.value,
+        class: b(o.value),
+        "aria-label": i.value,
         role: "status"
-      }, h(s.value), 11, ve)
+      }, _(s.value), 11, ve)
     ], 16));
   }
 }), me = ["aria-label"], he = ["src", "alt"], _e = {
   key: 1,
   class: "strand-avatar__initials",
   "aria-hidden": "true"
-}, ga = /* @__PURE__ */ _({
+}, ga = /* @__PURE__ */ h({
   __name: "Avatar",
   props: {
     src: {},
@@ -523,30 +523,30 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = x(!1), r = () => {
+    const t = e, a = w(!1), n = () => {
       a.value = !0;
-    }, s = u(() => t.src && !a.value), o = u(() => t.initials.slice(0, 2).toUpperCase()), i = u(
+    }, s = c(() => t.src && !a.value), i = c(() => t.initials.slice(0, 2).toUpperCase()), o = c(
       () => [
         "strand-avatar",
         `strand-avatar--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (d, m) => (n(), l("div", y({
-      class: i.value,
+    return (d, m) => (l(), r("div", k({
+      class: o.value,
       role: "img",
-      "aria-label": e.alt || o.value
+      "aria-label": e.alt || i.value
     }, d.$attrs), [
-      s.value ? (n(), l("img", {
+      s.value ? (l(), r("img", {
         key: 0,
         class: "strand-avatar__img",
         src: e.src,
         alt: e.alt,
-        onError: r
-      }, null, 40, he)) : (n(), l("span", _e, h(o.value), 1))
+        onError: n
+      }, null, 40, he)) : (l(), r("span", _e, _(i.value), 1))
     ], 16, me));
   }
-}), be = { class: "strand-tag__text" }, ka = /* @__PURE__ */ _({
+}), be = { class: "strand-tag__text" }, ya = /* @__PURE__ */ h({
   __name: "Tag",
   props: {
     variant: { default: "solid" },
@@ -556,7 +556,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["remove"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => [
         "strand-tag",
         `strand-tag--${a.variant}`,
@@ -564,17 +564,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.className
       ].filter(Boolean).join(" ")
     );
-    return (o, i) => (n(), l("span", y({ class: s.value }, o.$attrs), [
+    return (i, o) => (l(), r("span", k({ class: s.value }, i.$attrs), [
       f("span", be, [
-        k(o.$slots, "default")
+        y(i.$slots, "default")
       ]),
-      e.removable ? (n(), l("button", {
+      e.removable ? (l(), r("button", {
         key: 0,
         type: "button",
         class: "strand-tag__remove",
         "aria-label": "Remove",
-        onClick: i[0] || (i[0] = (d) => r("remove"))
-      }, [...i[1] || (i[1] = [
+        onClick: o[0] || (o[0] = (d) => n("remove"))
+      }, [...o[1] || (o[1] = [
         f("svg", {
           width: "12",
           height: "12",
@@ -592,10 +592,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       ])])) : g("", !0)
     ], 16));
   }
-}), pe = { class: "strand-table" }, $e = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ke = {
+}), pe = { class: "strand-table" }, $e = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ye = {
   class: "strand-table__sort-indicator",
   "aria-hidden": "true"
-}, ye = { class: "strand-table__body" }, ya = /* @__PURE__ */ _({
+}, ke = { class: "strand-table__body" }, ka = /* @__PURE__ */ h({
   __name: "Table",
   props: {
     columns: {},
@@ -603,57 +603,57 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["sort"],
   setup(e, { emit: t }) {
-    const a = t, r = x(null), s = x("asc"), o = u(
+    const a = t, n = w(null), s = w("asc"), i = c(
       () => ["strand-table-wrapper"].filter(Boolean).join(" ")
     );
-    function i(m) {
-      const v = r.value === m && s.value === "asc" ? "desc" : "asc";
-      r.value = m, s.value = v, a("sort", m, v);
+    function o(m) {
+      const v = n.value === m && s.value === "asc" ? "desc" : "asc";
+      n.value = m, s.value = v, a("sort", m, v);
     }
     function d(m) {
-      return r.value === m ? s.value === "asc" ? "↑" : "↓" : "↕";
+      return n.value === m ? s.value === "asc" ? "↑" : "↓" : "↕";
     }
-    return (m, v) => (n(), l("div", {
-      class: b(o.value)
+    return (m, v) => (l(), r("div", {
+      class: b(i.value)
     }, [
       f("table", pe, [
         f("thead", $e, [
           f("tr", null, [
-            (n(!0), l(B, null, w(e.columns, (c) => (n(), l("th", {
-              key: c.key,
+            (l(!0), r(B, null, C(e.columns, (u) => (l(), r("th", {
+              key: u.key,
               class: "strand-table__th",
-              style: S(c.width ? { width: c.width } : void 0)
+              style: S(u.width ? { width: u.width } : void 0)
             }, [
-              c.sortable ? (n(), l("button", {
+              u.sortable ? (l(), r("button", {
                 key: 0,
                 type: "button",
                 class: "strand-table__sort-btn",
-                "aria-label": `Sort by ${c.header}`,
-                onClick: (p) => i(c.key)
+                "aria-label": `Sort by ${u.header}`,
+                onClick: (p) => o(u.key)
               }, [
-                T(h(c.header) + " ", 1),
-                f("span", ke, h(d(c.key)), 1)
-              ], 8, ge)) : (n(), l(B, { key: 1 }, [
-                T(h(c.header), 1)
+                R(_(u.header) + " ", 1),
+                f("span", ye, _(d(u.key)), 1)
+              ], 8, ge)) : (l(), r(B, { key: 1 }, [
+                R(_(u.header), 1)
               ], 64))
             ], 4))), 128))
           ])
         ]),
-        f("tbody", ye, [
-          (n(!0), l(B, null, w(e.data, (c, p) => (n(), l("tr", {
+        f("tbody", ke, [
+          (l(!0), r(B, null, C(e.data, (u, p) => (l(), r("tr", {
             key: p,
             class: "strand-table__row"
           }, [
-            (n(!0), l(B, null, w(e.columns, ($) => (n(), l("td", {
+            (l(!0), r(B, null, C(e.columns, ($) => (l(), r("td", {
               key: $.key,
               class: "strand-table__td"
-            }, h(c[$.key]), 1))), 128))
+            }, _(u[$.key]), 1))), 128))
           ]))), 128))
         ])
       ])
     ], 2));
   }
-}), Be = { class: "strand-data-readout__label" }, we = { class: "strand-data-readout__value" }, Ba = /* @__PURE__ */ _({
+}), Be = { class: "strand-data-readout__label" }, we = { class: "strand-data-readout__value" }, Ba = /* @__PURE__ */ h({
   __name: "DataReadout",
   props: {
     label: {},
@@ -662,22 +662,22 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-data-readout",
         t.size && t.size !== "md" ? `strand-data-readout--${t.size}` : "",
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
-      f("span", Be, h(e.label), 1),
-      f("span", we, h(e.value), 1)
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      f("span", Be, _(e.label), 1),
+      f("span", we, _(e.value), 1)
     ], 16));
   }
-}), xe = {
+}), Ce = {
   key: 0,
   class: "strand-code-block__label"
-}, Ce = { class: "strand-code-block__pre" }, wa = /* @__PURE__ */ _({
+}, xe = { class: "strand-code-block__pre" }, wa = /* @__PURE__ */ h({
   __name: "CodeBlock",
   props: {
     code: {},
@@ -685,17 +685,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => ["strand-code-block", t.className].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
-      e.language ? (n(), l("span", xe, h(e.language), 1)) : g("", !0),
-      f("pre", Ce, [
-        f("code", null, h(e.code), 1)
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      e.language ? (l(), r("span", Ce, _(e.language), 1)) : g("", !0),
+      f("pre", xe, [
+        f("code", null, _(e.code), 1)
       ])
     ], 16));
   }
-}), xa = /* @__PURE__ */ _({
+}), Ca = /* @__PURE__ */ h({
   __name: "Stack",
   props: {
     direction: { default: "vertical" },
@@ -706,7 +706,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-stack",
         `strand-stack--${t.direction}`,
@@ -715,17 +715,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.wrap && "strand-stack--wrap",
         t.className
       ].filter(Boolean).join(" ")
-    ), r = u(() => ({
+    ), n = c(() => ({
       gap: `var(--strand-space-${t.gap})`
     }));
-    return (s, o) => (n(), l("div", y({
+    return (s, i) => (l(), r("div", k({
       class: a.value,
-      style: r.value
+      style: n.value
     }, s.$attrs), [
-      k(s.$slots, "default")
+      y(s.$slots, "default")
     ], 16));
   }
-}), Ca = /* @__PURE__ */ _({
+}), xa = /* @__PURE__ */ h({
   __name: "Grid",
   props: {
     columns: { default: 1 },
@@ -733,38 +733,38 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => ["strand-grid", t.className].filter(Boolean).join(" ")
-    ), r = u(() => ({
+    ), n = c(() => ({
       gridTemplateColumns: `repeat(${t.columns}, 1fr)`,
       gap: `var(--strand-space-${t.gap})`
     }));
-    return (s, o) => (n(), l("div", y({
+    return (s, i) => (l(), r("div", k({
       class: a.value,
-      style: r.value
+      style: n.value
     }, s.$attrs), [
-      k(s.$slots, "default")
+      y(s.$slots, "default")
     ], 16));
   }
-}), ja = /* @__PURE__ */ _({
+}), Na = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     size: { default: "default" },
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-container",
         `strand-container--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
-      k(r.$slots, "default")
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      y(n.$slots, "default")
     ], 16));
   }
-}), je = { class: "strand-divider__label" }, Na = /* @__PURE__ */ _({
+}), Ne = { class: "strand-divider__label" }, ja = /* @__PURE__ */ h({
   __name: "Divider",
   props: {
     direction: { default: "horizontal" },
@@ -772,31 +772,31 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(() => t.direction === "vertical"), r = u(() => !a.value && !!t.label);
-    u(() => !a.value && !t.label);
-    const s = u(() => a.value ? ["strand-divider", "strand-divider--vertical", t.className].filter(Boolean).join(" ") : r.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 (o, i) => a.value ? (n(), l("div", {
+    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", {
       key: 0,
       class: b(s.value),
       role: "separator",
       "aria-orientation": "vertical"
-    }, null, 2)) : r.value ? (n(), l("div", {
+    }, null, 2)) : n.value ? (l(), r("div", {
       key: 1,
       class: b(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      i[0] || (i[0] = f("span", { class: "strand-divider__line" }, null, -1)),
-      f("span", je, h(e.label), 1),
-      i[1] || (i[1] = f("span", { class: "strand-divider__line" }, null, -1))
-    ], 2)) : (n(), l("hr", {
+      o[0] || (o[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))
+    ], 2)) : (l(), r("hr", {
       key: 2,
       class: b(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, null, 2));
   }
-}), Ta = /* @__PURE__ */ _({
+}), Ta = /* @__PURE__ */ h({
   __name: "Section",
   props: {
     variant: { default: "standard" },
@@ -804,7 +804,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-section",
         `strand-section--${t.variant}`,
@@ -812,11 +812,64 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("section", y({ class: a.value }, r.$attrs), [
-      k(r.$slots, "default")
+    return (n, s) => (l(), r("section", k({ class: a.value }, n.$attrs), [
+      y(n.$slots, "default")
+    ], 16));
+  }
+}), Ra = /* @__PURE__ */ h({
+  __name: "InstrumentViewport",
+  props: {
+    grid: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-instrument-viewport",
+        t.grid && "strand-instrument-viewport--grid",
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+      y(n.$slots, "default")
     ], 16));
   }
-}), Ne = ["href"], Sa = /* @__PURE__ */ _({
+}), Sa = /* @__PURE__ */ h({
+  __name: "ScrollReveal",
+  props: {
+    threshold: { default: 0.1 },
+    once: { type: Boolean, default: !0 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = w(null), n = w(!1);
+    let s = null;
+    const i = c(
+      () => [
+        "strand-reveal",
+        n.value && "strand-reveal--visible",
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    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);
+        },
+        { threshold: t.threshold }
+      ), s.observe(a.value));
+    }), j(() => {
+      s && (s.disconnect(), s = null);
+    }), (o, d) => (l(), r("div", k({
+      ref_key: "elRef",
+      ref: a,
+      class: i.value
+    }, o.$attrs), [
+      y(o.$slots, "default")
+    ], 16));
+  }
+}), je = ["href"], Ia = /* @__PURE__ */ h({
   __name: "Link",
   props: {
     href: {},
@@ -824,20 +877,20 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => ["strand-link", t.className].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("a", y({
+    return (n, s) => (l(), r("a", k({
       href: e.href,
       class: a.value
     }, {
       ...e.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      ...r.$attrs
+      ...n.$attrs
     }), [
-      k(r.$slots, "default")
-    ], 16, Ne));
+      y(n.$slots, "default")
+    ], 16, je));
   }
-}), Te = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Se = ["id", "aria-labelledby", "hidden"], Ra = /* @__PURE__ */ _({
+}), Te = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Re = ["id", "aria-labelledby", "hidden"], Ea = /* @__PURE__ */ h({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -845,39 +898,39 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = x(null), o = u(() => ["strand-tabs"].filter(Boolean).join(" "));
-    function i(m) {
-      var c, p;
+    const a = e, n = t, s = w(null), i = c(() => ["strand-tabs"].filter(Boolean).join(" "));
+    function o(m) {
+      var u, p;
       const v = a.tabs[m];
       if (v) {
-        r("change", v.id);
-        const $ = (c = s.value) == null ? void 0 : c.querySelectorAll('[role="tab"]');
+        n("change", v.id);
+        const $ = (u = s.value) == null ? void 0 : u.querySelectorAll('[role="tab"]');
         (p = $ == null ? void 0 : $[m]) == null || p.focus();
       }
     }
     function d(m) {
       const v = a.tabs.findIndex((p) => p.id === a.activeTab);
-      let c = null;
+      let u = null;
       switch (m.key) {
         case "ArrowRight":
-          c = (v + 1) % a.tabs.length;
+          u = (v + 1) % a.tabs.length;
           break;
         case "ArrowLeft":
-          c = (v - 1 + a.tabs.length) % a.tabs.length;
+          u = (v - 1 + a.tabs.length) % a.tabs.length;
           break;
         case "Home":
-          c = 0;
+          u = 0;
           break;
         case "End":
-          c = a.tabs.length - 1;
+          u = a.tabs.length - 1;
           break;
         default:
           return;
       }
-      m.preventDefault(), i(c);
+      m.preventDefault(), o(u);
     }
-    return (m, v) => (n(), l("div", {
-      class: b(o.value)
+    return (m, v) => (l(), r("div", {
+      class: b(i.value)
     }, [
       f("div", {
         ref_key: "tablistRef",
@@ -885,71 +938,71 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         role: "tablist",
         onKeydown: d
       }, [
-        (n(!0), l(B, null, w(e.tabs, (c) => (n(), l("button", {
-          key: c.id,
-          id: `tab-${c.id}`,
+        (l(!0), r(B, null, C(e.tabs, (u) => (l(), r("button", {
+          key: u.id,
+          id: `tab-${u.id}`,
           role: "tab",
           type: "button",
           class: b([
             "strand-tabs__tab",
-            c.id === e.activeTab && "strand-tabs__tab--active"
+            u.id === e.activeTab && "strand-tabs__tab--active"
           ].filter(Boolean).join(" ")),
-          "aria-selected": c.id === e.activeTab ? "true" : "false",
-          "aria-controls": `panel-${c.id}`,
-          tabindex: c.id === e.activeTab ? 0 : -1,
-          onClick: (p) => r("change", c.id)
-        }, h(c.label), 11, Te))), 128))
+          "aria-selected": u.id === e.activeTab ? "true" : "false",
+          "aria-controls": `panel-${u.id}`,
+          tabindex: u.id === e.activeTab ? 0 : -1,
+          onClick: (p) => n("change", u.id)
+        }, _(u.label), 11, Te))), 128))
       ], 544),
-      (n(!0), l(B, null, w(e.tabs, (c) => (n(), l("div", {
-        key: c.id,
-        id: `panel-${c.id}`,
+      (l(!0), r(B, null, C(e.tabs, (u) => (l(), r("div", {
+        key: u.id,
+        id: `panel-${u.id}`,
         role: "tabpanel",
-        "aria-labelledby": `tab-${c.id}`,
-        hidden: c.id !== e.activeTab || void 0,
+        "aria-labelledby": `tab-${u.id}`,
+        hidden: u.id !== e.activeTab || void 0,
         tabindex: 0
       }, [
-        k(m.$slots, `panel-${c.id}`)
-      ], 8, Se))), 128))
+        y(m.$slots, `panel-${u.id}`)
+      ], 8, Re))), 128))
     ], 2));
   }
-}), Re = { class: "strand-breadcrumb__list" }, Ee = {
+}), Se = { class: "strand-breadcrumb__list" }, Ie = {
   key: 0,
   class: "strand-breadcrumb__separator",
   "aria-hidden": "true"
-}, Ie = {
+}, Ee = {
   key: 1,
   class: "strand-breadcrumb__current",
   "aria-current": "page"
-}, ze = ["href"], Ea = /* @__PURE__ */ _({
+}, ze = ["href"], za = /* @__PURE__ */ h({
   __name: "Breadcrumb",
   props: {
     items: {},
     separator: { default: "/" }
   },
   setup(e) {
-    const t = u(
+    const t = c(
       () => ["strand-breadcrumb"].filter(Boolean).join(" ")
     );
-    return (a, r) => (n(), l("nav", {
+    return (a, n) => (l(), r("nav", {
       "aria-label": "Breadcrumb",
       class: b(t.value)
     }, [
-      f("ol", Re, [
-        (n(!0), l(B, null, w(e.items, (s, o) => (n(), l("li", {
-          key: `${s.label}-${o}`,
+      f("ol", Se, [
+        (l(!0), r(B, null, C(e.items, (s, i) => (l(), r("li", {
+          key: `${s.label}-${i}`,
           class: "strand-breadcrumb__item"
         }, [
-          o > 0 ? (n(), l("span", Ee, h(e.separator), 1)) : g("", !0),
-          o === e.items.length - 1 ? (n(), l("span", Ie, h(s.label), 1)) : (n(), l("a", {
+          i > 0 ? (l(), r("span", Ie, _(e.separator), 1)) : g("", !0),
+          i === e.items.length - 1 ? (l(), r("span", Ee, _(s.label), 1)) : (l(), r("a", {
             key: 2,
             href: s.href,
             class: "strand-breadcrumb__link"
-          }, h(s.label), 9, ze))
+          }, _(s.label), 9, ze))
         ]))), 128))
       ])
     ], 2));
   }
-}), Le = { class: "strand-nav__inner" }, Ve = {
+}), Ve = { class: "strand-nav__inner" }, Le = {
   key: 0,
   class: "strand-nav__logo"
 }, De = { class: "strand-nav__items" }, Oe = ["href", "aria-current"], Ae = {
@@ -958,38 +1011,38 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
 }, Fe = ["aria-expanded", "aria-label"], Me = {
   key: 0,
   class: "strand-nav__mobile-menu"
-}, Ke = ["href", "aria-current"], Ia = /* @__PURE__ */ _({
+}, Ke = ["href", "aria-current"], Va = /* @__PURE__ */ h({
   __name: "Nav",
   props: {
     items: { default: () => [] }
   },
   setup(e) {
-    const t = x(!1);
+    const t = w(!1);
     function a() {
       t.value = !t.value;
     }
-    const r = u(() => ["strand-nav"].filter(Boolean).join(" "));
-    return (s, o) => (n(), l("nav", {
-      class: b(r.value),
+    const n = c(() => ["strand-nav"].filter(Boolean).join(" "));
+    return (s, i) => (l(), r("nav", {
+      class: b(n.value),
       "aria-label": "Main navigation"
     }, [
-      f("div", Le, [
-        s.$slots.logo ? (n(), l("div", Ve, [
-          k(s.$slots, "logo")
+      f("div", Ve, [
+        s.$slots.logo ? (l(), r("div", Le, [
+          y(s.$slots, "logo")
         ])) : g("", !0),
         f("div", De, [
-          (n(!0), l(B, null, w(e.items, (i) => (n(), l("a", {
-            key: i.href,
-            href: i.href,
+          (l(!0), r(B, null, C(e.items, (o) => (l(), r("a", {
+            key: o.href,
+            href: o.href,
             class: b([
               "strand-nav__link",
-              i.active && "strand-nav__link--active"
+              o.active && "strand-nav__link--active"
             ].filter(Boolean).join(" ")),
-            "aria-current": i.active ? "page" : void 0
-          }, h(i.label), 11, Oe))), 128))
+            "aria-current": o.active ? "page" : void 0
+          }, _(o.label), 11, Oe))), 128))
         ]),
-        s.$slots.actions ? (n(), l("div", Ae, [
-          k(s.$slots, "actions")
+        s.$slots.actions ? (l(), r("div", Ae, [
+          y(s.$slots, "actions")
         ])) : g("", !0),
         f("button", {
           type: "button",
@@ -997,27 +1050,27 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
           "aria-expanded": t.value ? "true" : "false",
           "aria-label": t.value ? "Close menu" : "Menu",
           onClick: a
-        }, [...o[0] || (o[0] = [
+        }, [...i[0] || (i[0] = [
           f("span", {
             class: "strand-nav__hamburger-icon",
             "aria-hidden": "true"
           }, null, -1)
         ])], 8, Fe)
       ]),
-      t.value ? (n(), l("div", Me, [
-        (n(!0), l(B, null, w(e.items, (i) => (n(), l("a", {
-          key: i.href,
-          href: i.href,
+      t.value ? (l(), r("div", Me, [
+        (l(!0), r(B, null, C(e.items, (o) => (l(), r("a", {
+          key: o.href,
+          href: o.href,
           class: b([
             "strand-nav__mobile-link",
-            i.active && "strand-nav__mobile-link--active"
+            o.active && "strand-nav__mobile-link--active"
           ].filter(Boolean).join(" ")),
-          "aria-current": i.active ? "page" : void 0
-        }, h(i.label), 11, Ke))), 128))
+          "aria-current": o.active ? "page" : void 0
+        }, _(o.label), 11, Ke))), 128))
       ])) : g("", !0)
     ], 2));
   }
-}), Pe = ["aria-live"], Ue = { class: "strand-toast__status" }, qe = { class: "strand-toast__message" }, za = /* @__PURE__ */ _({
+}), Pe = ["aria-live"], Ue = { class: "strand-toast__status" }, qe = { class: "strand-toast__message" }, La = /* @__PURE__ */ h({
   __name: "Toast",
   props: {
     status: { default: "info" },
@@ -1025,35 +1078,35 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
   },
   emits: ["dismiss"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => a.status === "error" || a.status === "warning"
-    ), o = u(
+    ), i = c(
       () => ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ")
-    ), i = {
+    ), o = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, d = u(() => i[a.status] ?? a.status.toUpperCase());
-    return (m, v) => (n(), l("div", {
-      class: b(o.value),
+    }, d = c(() => o[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, h(d.value), 1),
-      f("span", qe, h(e.message), 1),
+      f("span", Ue, _(d.value), 1),
+      f("span", qe, _(e.message), 1),
       f("button", {
         type: "button",
         class: "strand-toast__dismiss",
         "aria-label": "Dismiss",
-        onClick: v[0] || (v[0] = (c) => r("dismiss"))
+        onClick: v[0] || (v[0] = (u) => n("dismiss"))
       }, " × ")
     ], 10, Pe));
   }
 });
 /*! Strand Vue | MIT License | dillingerstaffing.com */
 const O = Symbol("StrandToast");
-function La() {
+function Da() {
   const e = A(O);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
@@ -1062,35 +1115,35 @@ function La() {
 const Ge = {
   key: 0,
   class: "strand-toast__container"
-}, We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Je = ["onClick"], Va = /* @__PURE__ */ _({
+}, We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Je = ["onClick"], Oa = /* @__PURE__ */ h({
   __name: "ToastProvider",
   setup(e) {
     let t = 0;
-    const a = x([]), r = /* @__PURE__ */ new Map();
+    const a = w([]), n = /* @__PURE__ */ new Map();
     function s(v) {
-      const c = r.get(v);
-      c !== void 0 && (clearTimeout(c), r.delete(v)), a.value = a.value.filter((p) => p.id !== v);
+      const u = n.get(v);
+      u !== void 0 && (clearTimeout(u), n.delete(v)), a.value = a.value.filter((p) => p.id !== v);
     }
-    function o(v) {
-      const c = {
+    function i(v) {
+      const u = {
         id: ++t,
         message: v.message,
         status: v.status ?? "info",
         duration: v.duration ?? 5e3
       };
-      if (a.value = [...a.value, c], c.duration > 0) {
+      if (a.value = [...a.value, u], u.duration > 0) {
         const p = setTimeout(() => {
-          s(c.id);
-        }, c.duration);
-        r.set(c.id, p);
+          s(u.id);
+        }, u.duration);
+        n.set(u.id, p);
       }
     }
-    F(O, { toast: o }), E(() => {
-      for (const v of r.values())
+    F(O, { toast: i }), j(() => {
+      for (const v of n.values())
         clearTimeout(v);
-      r.clear();
+      n.clear();
     });
-    function i(v) {
+    function o(v) {
       return v === "error" || v === "warning";
     }
     const d = {
@@ -1102,17 +1155,17 @@ const Ge = {
     function m(v) {
       return d[v] ?? v.toUpperCase();
     }
-    return (v, c) => (n(), l(B, null, [
-      k(v.$slots, "default"),
-      a.value.length > 0 ? (n(), l("div", Ge, [
-        (n(!0), l(B, null, w(a.value, (p) => (n(), l("div", {
+    return (v, u) => (l(), r(B, null, [
+      y(v.$slots, "default"),
+      a.value.length > 0 ? (l(), r("div", Ge, [
+        (l(!0), r(B, null, C(a.value, (p) => (l(), r("div", {
           key: p.id,
           class: b(["strand-toast", `strand-toast--${p.status}`].join(" ")),
           role: "status",
-          "aria-live": i(p.status) ? "assertive" : "polite"
+          "aria-live": o(p.status) ? "assertive" : "polite"
         }, [
-          f("span", He, h(m(p.status)), 1),
-          f("span", Ze, h(p.message), 1),
+          f("span", He, _(m(p.status)), 1),
+          f("span", Ze, _(p.message), 1),
           f("button", {
             type: "button",
             class: "strand-toast__dismiss",
@@ -1123,7 +1176,7 @@ const Ge = {
       ])) : g("", !0)
     ], 64));
   }
-}), Qe = ["role"], Xe = { class: "strand-alert__status" }, Ye = { class: "strand-alert__content" }, Da = /* @__PURE__ */ _({
+}), Qe = ["role"], Xe = { class: "strand-alert__status" }, Ye = { class: "strand-alert__content" }, Aa = /* @__PURE__ */ h({
   __name: "Alert",
   props: {
     status: { default: "info" },
@@ -1131,31 +1184,31 @@ const Ge = {
   },
   emits: ["dismiss"],
   setup(e, { emit: t }) {
-    const a = e, r = t, s = u(
+    const a = e, n = t, s = c(
       () => a.status === "error" || a.status === "warning" ? "alert" : "status"
-    ), o = u(
+    ), i = c(
       () => [
         "strand-alert",
         `strand-alert--${a.status}`
       ].filter(Boolean).join(" ")
-    ), i = {
+    ), o = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, d = u(() => i[a.status] ?? a.status.toUpperCase());
+    }, d = c(() => o[a.status] ?? a.status.toUpperCase());
     function m() {
-      r("dismiss");
+      n("dismiss");
     }
-    return (v, c) => (n(), l("div", {
-      class: b(o.value),
+    return (v, u) => (l(), r("div", {
+      class: b(i.value),
       role: s.value
     }, [
-      f("span", Xe, h(d.value), 1),
+      f("span", Xe, _(d.value), 1),
       f("div", Ye, [
-        k(v.$slots, "default")
+        y(v.$slots, "default")
       ]),
-      e.dismissible ? (n(), l("button", {
+      e.dismissible ? (l(), r("button", {
         key: 0,
         type: "button",
         class: "strand-alert__dismiss",
@@ -1167,7 +1220,7 @@ const Ge = {
 }), ea = ["aria-labelledby"], aa = {
   key: 0,
   class: "strand-dialog__header"
-}, ta = { class: "strand-dialog__body" }, L = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Oa = /* @__PURE__ */ _({
+}, ta = { class: "strand-dialog__body" }, L = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Fa = /* @__PURE__ */ h({
   __name: "Dialog",
   props: {
     open: { type: Boolean },
@@ -1177,82 +1230,82 @@ const Ge = {
   },
   emits: ["close"],
   setup(e, { emit: t }) {
-    const a = e, r = t;
+    const a = e, n = t;
     let s = 0;
-    const o = `strand-dialog-title-${++s}`, i = x(null);
+    const i = `strand-dialog-title-${++s}`, o = w(null);
     let d = null, m = "";
-    const v = u(
+    const v = c(
       () => ["strand-dialog__panel"].filter(Boolean).join(" ")
     );
-    function c($) {
+    function u($) {
       if ($.key === "Escape" && a.closeOnEscape) {
-        $.stopPropagation(), r("close");
+        $.stopPropagation(), n("close");
         return;
       }
       if ($.key === "Tab") {
-        const C = i.value;
-        if (!C) return;
-        const j = Array.from(
-          C.querySelectorAll(L)
+        const x = o.value;
+        if (!x) return;
+        const N = Array.from(
+          x.querySelectorAll(L)
         );
-        if (j.length === 0) return;
-        const I = j[0], z = j[j.length - 1];
-        $.shiftKey ? document.activeElement === I && ($.preventDefault(), z.focus()) : document.activeElement === z && ($.preventDefault(), I.focus());
+        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());
       }
     }
     function p($) {
-      a.closeOnOutsideClick && $.target === $.currentTarget && r("close");
+      a.closeOnOutsideClick && $.target === $.currentTarget && n("close");
     }
-    return R(
+    return I(
       () => a.open,
       async ($) => {
         if ($) {
           d = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await M();
-          const C = i.value;
-          if (C) {
-            const j = C.querySelectorAll(L);
-            j.length > 0 ? j[0].focus() : C.focus();
+          const x = o.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();
       },
       { immediate: !0 }
-    ), E(() => {
+    ), j(() => {
       a.open && (document.body.style.overflow = m);
-    }), ($, C) => e.open ? (n(), l("div", {
+    }), ($, x) => e.open ? (l(), r("div", {
       key: 0,
       class: "strand-dialog__backdrop",
       onClick: p,
-      onKeydown: c
+      onKeydown: u
     }, [
       f("div", {
         ref_key: "panelRef",
-        ref: i,
+        ref: o,
         class: b(v.value),
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.title ? o : void 0,
+        "aria-labelledby": e.title ? i : void 0,
         tabindex: -1
       }, [
-        e.title ? (n(), l("div", aa, [
+        e.title ? (l(), r("div", aa, [
           f("h2", {
-            id: o,
+            id: i,
             class: "strand-dialog__title"
-          }, h(e.title), 1)
+          }, _(e.title), 1)
         ])) : g("", !0),
         f("button", {
           type: "button",
           class: "strand-dialog__close",
           "aria-label": "Close",
-          onClick: C[0] || (C[0] = (j) => r("close"))
+          onClick: x[0] || (x[0] = (N) => n("close"))
         }, " × "),
         f("div", ta, [
-          k($.$slots, "default")
+          y($.$slots, "default")
         ])
       ], 10, ea)
     ], 32)) : g("", !0);
   }
-}), sa = ["aria-hidden"], Aa = /* @__PURE__ */ _({
+}), sa = ["aria-hidden"], Ma = /* @__PURE__ */ h({
   __name: "Tooltip",
   props: {
     content: {},
@@ -1262,46 +1315,46 @@ const Ge = {
   setup(e) {
     const t = e;
     let a = 0;
-    const r = `strand-tooltip-${++a}`, s = x(!1);
-    let o = null;
-    function i() {
-      o = setTimeout(() => {
+    const n = `strand-tooltip-${++a}`, s = w(!1);
+    let i = null;
+    function o() {
+      i = setTimeout(() => {
         s.value = !0;
       }, t.delay);
     }
     function d() {
-      o !== null && (clearTimeout(o), o = null), s.value = !1;
+      i !== null && (clearTimeout(i), i = null), s.value = !1;
     }
-    E(() => {
-      o !== null && clearTimeout(o);
+    j(() => {
+      i !== null && clearTimeout(i);
     });
-    const m = u(
+    const m = c(
       () => ["strand-tooltip__wrapper"].filter(Boolean).join(" ")
-    ), v = u(
+    ), v = c(
       () => [
         "strand-tooltip",
         `strand-tooltip--${t.position}`,
         s.value && "strand-tooltip--visible"
       ].filter(Boolean).join(" ")
     );
-    return (c, p) => (n(), l("span", {
+    return (u, p) => (l(), r("span", {
       class: b(m.value),
-      "aria-describedby": r,
-      onMouseenter: i,
+      "aria-describedby": n,
+      onMouseenter: o,
       onMouseleave: d,
-      onFocus: i,
+      onFocus: o,
       onBlur: d
     }, [
-      k(c.$slots, "default"),
+      y(u.$slots, "default"),
       f("span", {
-        id: r,
+        id: n,
         class: b(v.value),
         role: "tooltip",
         "aria-hidden": !s.value
-      }, h(e.content), 11, sa)
+      }, _(e.content), 11, sa)
     ], 34));
   }
-}), na = ["aria-valuenow"], la = ["width", "height", "viewBox"], ra = ["cx", "cy", "r"], oa = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], N = 3, Fa = /* @__PURE__ */ _({
+}), na = ["aria-valuenow"], la = ["width", "height", "viewBox"], ra = ["cx", "cy", "r"], oa = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], T = 3, Ka = /* @__PURE__ */ h({
   __name: "Progress",
   props: {
     variant: { default: "bar" },
@@ -1310,76 +1363,76 @@ const Ge = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = { sm: 24, md: 40, lg: 56 }, r = u(() => t.value != null), s = u(
+    const t = e, a = { sm: 24, md: 40, lg: 56 }, n = c(() => t.value != null), s = c(
       () => [
         "strand-progress",
         `strand-progress--${t.variant}`,
         `strand-progress--${t.size}`,
-        !r.value && "strand-progress--indeterminate",
+        !n.value && "strand-progress--indeterminate",
         t.className
       ].filter(Boolean).join(" ")
-    ), o = u(() => a[t.size] ?? a.md), i = u(() => (o.value - N) / 2), d = u(() => 2 * Math.PI * i.value), m = u(
-      () => r.value ? d.value - d.value * t.value / 100 : 0
+    ), 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
     );
-    return (v, c) => (n(), l("div", y({
+    return (v, u) => (l(), r("div", k({
       class: s.value,
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": r.value ? e.value : void 0
+      "aria-valuenow": n.value ? e.value : void 0
     }, v.$attrs), [
-      e.variant === "ring" ? (n(), l("svg", {
+      e.variant === "ring" ? (l(), r("svg", {
         key: 0,
-        width: o.value,
-        height: o.value,
-        viewBox: `0 0 ${o.value} ${o.value}`,
+        width: i.value,
+        height: i.value,
+        viewBox: `0 0 ${i.value} ${i.value}`,
         class: "strand-progress__ring"
       }, [
         f("circle", {
-          cx: o.value / 2,
-          cy: o.value / 2,
-          r: i.value,
+          cx: i.value / 2,
+          cy: i.value / 2,
+          r: o.value,
           fill: "none",
-          "stroke-width": N,
+          "stroke-width": T,
           class: "strand-progress__track"
         }, null, 8, ra),
         f("circle", {
-          cx: o.value / 2,
-          cy: o.value / 2,
-          r: i.value,
+          cx: i.value / 2,
+          cy: i.value / 2,
+          r: o.value,
           fill: "none",
-          "stroke-width": N,
+          "stroke-width": T,
           "stroke-dasharray": d.value,
-          "stroke-dashoffset": r.value ? m.value : void 0,
+          "stroke-dashoffset": n.value ? m.value : void 0,
           "stroke-linecap": "round",
           class: "strand-progress__fill",
-          transform: `rotate(-90 ${o.value / 2} ${o.value / 2})`
+          transform: `rotate(-90 ${i.value / 2} ${i.value / 2})`
         }, null, 8, oa)
-      ], 8, la)) : (n(), l("div", {
+      ], 8, la)) : (l(), r("div", {
         key: 1,
         class: "strand-progress__fill",
-        style: S(r.value ? { width: `${e.value}%` } : void 0)
+        style: S(n.value ? { width: `${e.value}%` } : void 0)
       }, null, 4))
     ], 16, na));
   }
-}), Ma = /* @__PURE__ */ _({
+}), Pa = /* @__PURE__ */ h({
   __name: "Spinner",
   props: {
     size: { default: "md" },
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => [
         "strand-spinner",
         `strand-spinner--${t.size}`,
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (r, s) => (n(), l("span", y({
+    return (n, s) => (l(), r("span", k({
       class: a.value,
       role: "status"
-    }, r.$attrs), [...s[0] || (s[0] = [
+    }, n.$attrs), [...s[0] || (s[0] = [
       f("span", {
         class: "strand-spinner__ring",
         "aria-hidden": "true"
@@ -1387,7 +1440,7 @@ const Ge = {
       f("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
     ])], 16));
   }
-}), Ka = /* @__PURE__ */ _({
+}), Ua = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     variant: { default: "text" },
@@ -1396,62 +1449,64 @@ const Ge = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = u(
+    const t = e, a = c(
       () => t.width ?? (t.variant === "text" ? "100%" : void 0)
-    ), r = u(
+    ), n = c(
       () => t.variant === "circle" ? a.value : t.height
-    ), s = u(
+    ), s = c(
       () => [
         "strand-skeleton",
         `strand-skeleton--${t.variant}`,
         "strand-skeleton--shimmer",
         t.className
       ].filter(Boolean).join(" ")
-    ), o = u(() => ({
+    ), i = c(() => ({
       width: a.value,
-      height: r.value
+      height: n.value
     }));
-    return (i, d) => (n(), l("div", y({
+    return (o, d) => (l(), r("div", k({
       class: s.value,
       "aria-hidden": "true",
-      style: o.value
-    }, i.$attrs), null, 16));
+      style: i.value
+    }, o.$attrs), null, 16));
   }
 });
 export {
-  Da as Alert,
+  Aa as Alert,
   ga as Avatar,
   $a as Badge,
-  Ea as Breadcrumb,
+  za as Breadcrumb,
   da as Button,
   pa as Card,
   va as Checkbox,
   wa as CodeBlock,
-  ja as Container,
+  Na as Container,
   Ba as DataReadout,
-  Oa as Dialog,
-  Na as Divider,
+  Fa as Dialog,
+  ja as Divider,
   ba as FormField,
-  Ca as Grid,
+  xa as Grid,
   ca as Input,
-  Sa as Link,
-  Ia as Nav,
-  Fa as Progress,
+  Ra as InstrumentViewport,
+  Ia as Link,
+  Va as Nav,
+  Ka as Progress,
   ma as Radio,
+  Sa as ScrollReveal,
   Ta as Section,
   fa as Select,
-  Ka as Skeleton,
+  Ua as Skeleton,
   _a as Slider,
-  Ma as Spinner,
-  xa as Stack,
+  Pa as Spinner,
+  Ca as Stack,
   ha as Switch,
-  ya as Table,
-  Ra as Tabs,
-  ka as Tag,
+  ka as Table,
+  Ea as Tabs,
+  ya as Tag,
   ua as Textarea,
-  za as Toast,
-  Va as ToastProvider,
-  Aa as Tooltip,
-  La as useToast
+  La as Toast,
+  Oa as ToastProvider,
+  Ma as Tooltip,
+  Da as useToast
 };
 //# sourceMappingURL=index.js.map