@dillingerstaffing/strand-vue 0.14.0 → 0.15.0

package/dist/index.js

@@ -1,9 +1,9 @@
-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 = {
+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";
+const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   key: 0,
   class: "strand-btn__spinner",
   "aria-hidden": "true"
-}, da = /* @__PURE__ */ h({
+}, va = /* @__PURE__ */ h({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -26,10 +26,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.loading && "strand-btn--loading"
       ].filter(Boolean).join(" ")
     );
-    function d(o) {
-      s.value || n("click", o);
+    function d(r) {
+      s.value || n("click", r);
     }
-    return (o, m) => (l(), r("button", {
+    return (r, m) => (l(), o("button", {
       type: e.type,
       class: b(i.value),
       disabled: s.value,
@@ -37,24 +37,24 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       "aria-busy": e.loading ? "true" : void 0,
       onClick: d
     }, [
-      e.loading ? (l(), r("span", P)) : g("", !0),
+      e.loading ? (l(), o("span", U)) : y("", !0),
       f("span", {
         class: "strand-btn__content",
         style: S(e.loading ? { visibility: "hidden" } : void 0)
       }, [
-        y(o.$slots, "default")
+        g(r.$slots, "default")
       ], 4)
-    ], 10, K));
+    ], 10, P));
   }
-}), U = {
+}), q = {
   key: 0,
   class: "strand-input__leading",
   "aria-hidden": "true"
-}, q = ["type", "disabled", "aria-invalid", "value"], G = {
+}, G = ["type", "disabled", "aria-invalid", "value"], W = {
   key: 1,
   class: "strand-input__trailing",
   "aria-hidden": "true"
-}, ca = /* @__PURE__ */ h({
+}, ma = /* @__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, n = t, s = D(), i = c(
+    const a = e, n = t, s = L(), i = c(
       () => [
         "strand-input",
         a.error && "strand-input--error",
@@ -73,16 +73,16 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         !!s.trailing && "strand-input--has-trailing"
       ].filter(Boolean).join(" ")
     );
-    function d(o) {
-      const m = o.target;
+    function d(r) {
+      const m = r.target;
       n("update:modelValue", m.value);
     }
-    return (o, m) => (l(), r("div", {
+    return (r, m) => (l(), o("div", {
       class: b(i.value)
     }, [
-      o.$slots.leading ? (l(), r("span", U, [
-        y(o.$slots, "leading")
-      ])) : g("", !0),
+      r.$slots.leading ? (l(), o("span", q, [
+        g(r.$slots, "leading")
+      ])) : y("", !0),
       f("input", {
         type: e.type,
         class: "strand-input__field",
@@ -90,17 +90,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         "aria-invalid": e.error ? "true" : void 0,
         value: e.modelValue,
         onInput: d
-      }, null, 40, q),
-      o.$slots.trailing ? (l(), r("span", G, [
-        y(o.$slots, "trailing")
-      ])) : g("", !0)
+      }, null, 40, G),
+      r.$slots.trailing ? (l(), o("span", W, [
+        g(r.$slots, "trailing")
+      ])) : y("", !0)
     ], 2));
   }
-}), W = ["disabled", "aria-invalid", "maxlength", "value"], H = {
+}), H = ["disabled", "aria-invalid", "maxlength", "value"], Z = {
   key: 0,
   class: "strand-textarea__count",
   "aria-live": "polite"
-}, ua = /* @__PURE__ */ h({
+}, ha = /* @__PURE__ */ h({
   __name: "Textarea",
   props: {
     autoResize: { type: Boolean, default: !1 },
@@ -122,18 +122,18 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     ), d = c(
       () => typeof a.modelValue == "string" ? a.modelValue.length : 0
     );
-    function o() {
+    function r() {
       a.autoResize && s.value && (s.value.style.height = "auto", s.value.style.height = `${s.value.scrollHeight}px`);
     }
     function m(v) {
       const u = v.target;
-      n("update:modelValue", u.value), o();
+      n("update:modelValue", u.value), r();
     }
     return I(() => a.modelValue, () => {
-      o();
+      r();
     }), E(() => {
-      o();
-    }), (v, u) => (l(), r("div", {
+      r();
+    }), (v, u) => (l(), o("div", {
       class: b(i.value)
     }, [
       f("textarea", {
@@ -145,15 +145,15 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         maxlength: e.maxLength,
         value: e.modelValue,
         onInput: m
-      }, null, 40, W),
-      e.showCount && e.maxLength != null ? (l(), r("span", H, _(d.value) + "/" + _(e.maxLength), 1)) : g("", !0)
+      }, null, 40, H),
+      e.showCount && e.maxLength != null ? (l(), o("span", Z, _(d.value) + "/" + _(e.maxLength), 1)) : y("", !0)
     ], 2));
   }
-}), Z = ["value", "disabled", "aria-invalid"], J = {
+}), J = ["value", "disabled", "aria-invalid"], Q = {
   key: 0,
   value: "",
   disabled: ""
-}, Q = ["value"], fa = /* @__PURE__ */ h({
+}, X = ["value"], _a = /* @__PURE__ */ h({
   __name: "Select",
   props: {
     options: {},
@@ -172,10 +172,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       ].filter(Boolean).join(" ")
     );
     function i(d) {
-      const o = d.target;
-      n("update:modelValue", o.value);
+      const r = d.target;
+      n("update:modelValue", r.value);
     }
-    return (d, o) => (l(), r("div", {
+    return (d, r) => (l(), o("div", {
       class: b(s.value)
     }, [
       f("select", {
@@ -185,35 +185,35 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         "aria-invalid": e.error ? "true" : void 0,
         onChange: i
       }, [
-        e.placeholder ? (l(), r("option", J, _(e.placeholder), 1)) : g("", !0),
-        (l(!0), r(B, null, C(e.options, (m) => (l(), r("option", {
+        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, Q))), 128))
-      ], 40, Z),
-      o[0] || (o[0] = f("span", {
+        }, _(m.label), 9, X))), 128))
+      ], 40, J),
+      r[0] || (r[0] = f("span", {
         class: "strand-select__arrow",
         "aria-hidden": "true"
       }, null, -1))
     ], 2));
   }
-}), X = ["checked", "disabled", "aria-checked"], Y = {
+}), Y = ["checked", "disabled", "aria-checked"], ee = {
   class: "strand-checkbox__control",
   "aria-hidden": "true"
-}, ee = {
+}, ae = {
   key: 0,
   class: "strand-checkbox__icon",
   viewBox: "0 0 16 16",
   fill: "none"
-}, ae = {
+}, te = {
   key: 1,
   class: "strand-checkbox__icon",
   viewBox: "0 0 16 16",
   fill: "none"
-}, te = {
+}, se = {
   key: 0,
   class: "strand-checkbox__label"
-}, va = /* @__PURE__ */ h({
+}, ba = /* @__PURE__ */ h({
   __name: "Checkbox",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -239,13 +239,13 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     ), d = c(
       () => a.indeterminate ? "mixed" : a.checked ? "true" : "false"
     );
-    function o(v) {
+    function r(v) {
       a.disabled || n("change", v);
     }
     function m(v) {
       v.key === " " && !a.disabled && (v.preventDefault(), s.value && s.value.click());
     }
-    return (v, u) => (l(), r("label", {
+    return (v, u) => (l(), o("label", {
       class: b(i.value),
       onKeydown: m
     }, [
@@ -258,10 +258,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         disabled: e.disabled,
         "aria-checked": d.value,
         role: "checkbox",
-        onChange: o
-      }, null, 40, X),
-      f("span", Y, [
-        e.indeterminate ? (l(), r("svg", ee, [...u[0] || (u[0] = [
+        onChange: r
+      }, null, 40, Y),
+      f("span", ee, [
+        e.indeterminate ? (l(), o("svg", ae, [...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 ? (l(), r("svg", ae, [...u[1] || (u[1] = [
+        ])])) : e.checked ? (l(), o("svg", te, [...u[1] || (u[1] = [
           f("path", {
             d: "M3.5 8L6.5 11L12.5 5",
             stroke: "currentColor",
@@ -279,15 +279,15 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
           }, null, -1)
-        ])])) : g("", !0)
+        ])])) : y("", !0)
       ]),
-      e.label ? (l(), r("span", te, _(e.label), 1)) : g("", !0)
+      e.label ? (l(), o("span", se, _(e.label), 1)) : y("", !0)
     ], 34));
   }
-}), se = ["checked", "disabled", "name", "value"], ne = {
+}), ne = ["checked", "disabled", "name", "value"], le = {
   key: 0,
   class: "strand-radio__label"
-}, ma = /* @__PURE__ */ h({
+}, pa = /* @__PURE__ */ h({
   __name: "Radio",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -308,7 +308,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     function i(d) {
       a.disabled || n("change", d);
     }
-    return (d, o) => (l(), r("label", {
+    return (d, r) => (l(), o("label", {
       class: b(s.value)
     }, [
       f("input", {
@@ -319,20 +319,20 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         name: e.name,
         value: e.value,
         onChange: i
-      }, null, 40, se),
-      o[0] || (o[0] = f("span", {
+      }, null, 40, ne),
+      r[0] || (r[0] = f("span", {
         class: "strand-radio__control",
         "aria-hidden": "true"
       }, [
         f("span", { class: "strand-radio__dot" })
       ], -1)),
-      e.label ? (l(), r("span", ne, _(e.label), 1)) : g("", !0)
+      e.label ? (l(), o("span", le, _(e.label), 1)) : y("", !0)
     ], 2));
   }
-}), le = ["aria-checked", "disabled"], re = {
+}), oe = ["aria-checked", "disabled"], re = {
   key: 0,
   class: "strand-switch__label"
-}, ha = /* @__PURE__ */ h({
+}, ya = /* @__PURE__ */ h({
   __name: "Switch",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -351,10 +351,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     function i() {
       a.disabled || n("change", !a.checked);
     }
-    function d(o) {
-      (o.key === " " || o.key === "Enter") && !a.disabled && (o.preventDefault(), n("change", !a.checked));
+    function d(r) {
+      (r.key === " " || r.key === "Enter") && !a.disabled && (r.preventDefault(), n("change", !a.checked));
     }
-    return (o, m) => (l(), r("label", {
+    return (r, m) => (l(), o("label", {
       class: b(s.value)
     }, [
       f("button", {
@@ -370,11 +370,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
           class: "strand-switch__thumb",
           "aria-hidden": "true"
         }, null, -1)
-      ])], 40, le),
-      e.label ? (l(), r("span", re, _(e.label), 1)) : g("", !0)
+      ])], 40, oe),
+      e.label ? (l(), o("span", re, _(e.label), 1)) : y("", !0)
     ], 2));
   }
-}), oe = ["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"], $a = /* @__PURE__ */ h({
   __name: "Slider",
   props: {
     min: { default: 0 },
@@ -392,10 +392,10 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       ].filter(Boolean).join(" ")
     );
     function i(d) {
-      const o = d.target;
-      n("update:modelValue", Number(o.value));
+      const r = d.target;
+      n("update:modelValue", Number(r.value));
     }
-    return (d, o) => (l(), r("div", {
+    return (d, r) => (l(), o("div", {
       class: b(s.value)
     }, [
       f("input", {
@@ -410,14 +410,14 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         "aria-valuemax": e.max,
         "aria-valuenow": e.modelValue,
         onInput: i
-      }, null, 40, oe)
+      }, null, 40, ie)
     ], 2));
   }
-}), ie = ["for"], de = {
+}), de = ["for"], ce = {
   key: 0,
   class: "strand-form-field__required",
   "aria-hidden": "true"
-}, ce = { class: "strand-form-field__control" }, ue = ["id"], fe = ["id"], ba = /* @__PURE__ */ h({
+}, ue = { class: "strand-form-field__control" }, fe = ["id"], ve = ["id"], ga = /* @__PURE__ */ h({
   __name: "FormField",
   props: {
     label: {},
@@ -433,7 +433,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.error && "strand-form-field--error"
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", {
+    return (n, s) => (l(), o("div", {
       class: b(a.value)
     }, [
       f("label", {
@@ -441,24 +441,24 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         for: e.htmlFor
       }, [
         R(_(e.label) + " ", 1),
-        e.required ? (l(), r("span", de, " * ")) : g("", !0)
-      ], 8, ie),
-      f("div", ce, [
-        y(n.$slots, "default")
+        e.required ? (l(), o("span", ce, " * ")) : y("", !0)
+      ], 8, de),
+      f("div", ue, [
+        g(n.$slots, "default")
       ]),
-      e.error ? (l(), r("p", {
+      e.error ? (l(), o("p", {
         key: 0,
         class: "strand-form-field__error",
         id: `${e.htmlFor}-error`,
         role: "alert"
-      }, _(e.error), 9, ue)) : e.hint ? (l(), r("p", {
+      }, _(e.error), 9, fe)) : e.hint ? (l(), o("p", {
         key: 1,
         class: "strand-form-field__hint",
         id: `${e.htmlFor}-hint`
-      }, _(e.hint), 9, fe)) : g("", !0)
+      }, _(e.hint), 9, ve)) : y("", !0)
     ], 2));
   }
-}), pa = /* @__PURE__ */ h({
+}), ka = /* @__PURE__ */ h({
   __name: "Card",
   props: {
     variant: { default: "elevated" },
@@ -474,11 +474,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      y(n.$slots, "default")
+    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
+      g(n.$slots, "default")
     ], 16));
   }
-}), ve = ["aria-label"], $a = /* @__PURE__ */ h({
+}), me = ["aria-label"], wa = /* @__PURE__ */ h({
   __name: "Badge",
   props: {
     variant: { default: "count" },
@@ -488,7 +488,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     className: { default: "" }
   },
   setup(e) {
-    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(() => {
+    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(() => {
       if (t.variant === "dot") return "Status indicator";
       if (t.count != null) return `${t.count} notifications`;
     }), d = c(
@@ -497,23 +497,23 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         `strand-badge--${t.variant}`,
         `strand-badge--${t.status}`
       ].filter(Boolean).join(" ")
-    ), o = c(
+    ), r = c(
       () => n.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
     );
-    return (m, v) => (l(), r("span", k({ class: o.value }, m.$attrs), [
-      y(m.$slots, "default"),
+    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,
         role: "status"
-      }, _(s.value), 11, ve)
+      }, _(s.value), 11, me)
     ], 16));
   }
-}), me = ["aria-label"], he = ["src", "alt"], _e = {
+}), he = ["aria-label"], _e = ["src", "alt"], be = {
   key: 1,
   class: "strand-avatar__initials",
   "aria-hidden": "true"
-}, ga = /* @__PURE__ */ h({
+}, Ba = /* @__PURE__ */ h({
   __name: "Avatar",
   props: {
     src: {},
@@ -532,21 +532,21 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (o, m) => (l(), r("div", k({
+    return (r, m) => (l(), o("div", k({
       class: d.value,
       role: "img",
       "aria-label": e.alt || i.value
-    }, o.$attrs), [
-      s.value ? (l(), r("img", {
+    }, r.$attrs), [
+      s.value ? (l(), o("img", {
         key: 0,
         class: "strand-avatar__img",
         src: e.src,
         alt: e.alt,
         onError: n
-      }, null, 40, he)) : (l(), r("span", _e, _(i.value), 1))
-    ], 16, me));
+      }, null, 40, _e)) : (l(), o("span", be, _(i.value), 1))
+    ], 16, he));
   }
-}), be = { class: "strand-tag__text" }, ya = /* @__PURE__ */ h({
+}), pe = { class: "strand-tag__text" }, Ca = /* @__PURE__ */ h({
   __name: "Tag",
   props: {
     variant: { default: "solid" },
@@ -564,16 +564,16 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         a.className
       ].filter(Boolean).join(" ")
     );
-    return (i, d) => (l(), r("span", k({ class: s.value }, i.$attrs), [
-      f("span", be, [
-        y(i.$slots, "default")
+    return (i, d) => (l(), o("span", k({ class: s.value }, i.$attrs), [
+      f("span", pe, [
+        g(i.$slots, "default")
       ]),
-      e.removable ? (l(), r("button", {
+      e.removable ? (l(), o("button", {
         key: 0,
         type: "button",
         class: "strand-tag__remove",
         "aria-label": "Remove",
-        onClick: d[0] || (d[0] = (o) => n("remove"))
+        onClick: d[0] || (d[0] = (r) => n("remove"))
       }, [...d[1] || (d[1] = [
         f("svg", {
           width: "12",
@@ -589,13 +589,13 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
             "stroke-linecap": "round"
           })
         ], -1)
-      ])])) : g("", !0)
+      ])])) : y("", !0)
     ], 16));
   }
-}), pe = { class: "strand-table" }, $e = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ye = {
+}), ye = { class: "strand-table" }, $e = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ke = {
   class: "strand-table__sort-indicator",
   "aria-hidden": "true"
-}, ke = { class: "strand-table__body" }, ka = /* @__PURE__ */ h({
+}, we = { class: "strand-table__body" }, xa = /* @__PURE__ */ h({
   __name: "Table",
   props: {
     columns: {},
@@ -610,21 +610,21 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       const v = n.value === m && s.value === "asc" ? "desc" : "asc";
       n.value = m, s.value = v, a("sort", m, v);
     }
-    function o(m) {
+    function r(m) {
       return n.value === m ? s.value === "asc" ? "↑" : "↓" : "↕";
     }
-    return (m, v) => (l(), r("div", {
+    return (m, v) => (l(), o("div", {
       class: b(i.value)
     }, [
-      f("table", pe, [
+      f("table", ye, [
         f("thead", $e, [
           f("tr", null, [
-            (l(!0), r(B, null, C(e.columns, (u) => (l(), r("th", {
+            (l(!0), o(B, null, C(e.columns, (u) => (l(), o("th", {
               key: u.key,
               class: "strand-table__th",
               style: S(u.width ? { width: u.width } : void 0)
             }, [
-              u.sortable ? (l(), r("button", {
+              u.sortable ? (l(), o("button", {
                 key: 0,
                 type: "button",
                 class: "strand-table__sort-btn",
@@ -632,19 +632,19 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
                 onClick: (p) => d(u.key)
               }, [
                 R(_(u.header) + " ", 1),
-                f("span", ye, _(o(u.key)), 1)
-              ], 8, ge)) : (l(), r(B, { key: 1 }, [
+                f("span", ke, _(r(u.key)), 1)
+              ], 8, ge)) : (l(), o(B, { key: 1 }, [
                 R(_(u.header), 1)
               ], 64))
             ], 4))), 128))
           ])
         ]),
-        f("tbody", ke, [
-          (l(!0), r(B, null, C(e.data, (u, p) => (l(), r("tr", {
+        f("tbody", we, [
+          (l(!0), o(B, null, C(e.data, (u, p) => (l(), o("tr", {
             key: p,
             class: "strand-table__row"
           }, [
-            (l(!0), r(B, null, C(e.columns, ($) => (l(), r("td", {
+            (l(!0), o(B, null, C(e.columns, ($) => (l(), o("td", {
               key: $.key,
               class: "strand-table__td"
             }, _(u[$.key]), 1))), 128))
@@ -653,7 +653,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       ])
     ], 2));
   }
-}), Be = { class: "strand-data-readout__label" }, we = { class: "strand-data-readout__value" }, Ba = /* @__PURE__ */ h({
+}), Be = { class: "strand-data-readout__label" }, Ce = { class: "strand-data-readout__value" }, Na = /* @__PURE__ */ h({
   __name: "DataReadout",
   props: {
     label: {},
@@ -669,33 +669,90 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
+    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
       f("span", Be, _(e.label), 1),
-      f("span", we, _(e.value), 1)
+      f("span", Ce, _(e.value), 1)
     ], 16));
   }
-}), Ce = {
+}), xe = ["data-strand-copy"], Ne = {
   key: 0,
   class: "strand-code-block__label"
-}, xe = { class: "strand-code-block__pre" }, wa = /* @__PURE__ */ h({
+}, je = { class: "strand-code-block__pre" }, Te = ["aria-label"], Re = 1500, ja = /* @__PURE__ */ h({
   __name: "CodeBlock",
   props: {
     code: {},
     language: {},
-    className: { default: "" }
+    className: { default: "" },
+    copyable: { type: Boolean, default: !0 }
   },
   setup(e) {
     const t = e, a = c(
       () => ["strand-code-block", t.className].filter(Boolean).join(" ")
-    );
-    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, [
+    ), n = w(!1);
+    let s = null;
+    M(() => {
+      s !== null && window.clearTimeout(s);
+    });
+    async function i() {
+      var d;
+      try {
+        if ((d = navigator.clipboard) != null && d.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);
+        }
+        n.value = !0, s !== null && window.clearTimeout(s), s = window.setTimeout(() => {
+          n.value = !1;
+        }, Re);
+      } catch {
+      }
+    }
+    return (d, r) => (l(), o("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)
-      ])
-    ], 16));
+      ]),
+      e.copyable ? (l(), o("button", {
+        key: 1,
+        type: "button",
+        class: b(["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", {
+          class: "strand-code-block__copy-icon strand-code-block__copy-icon--clipboard",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.75",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "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" })
+        ], -1),
+        f("svg", {
+          class: "strand-code-block__copy-icon strand-code-block__copy-icon--check",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          stroke: "currentColor",
+          "stroke-width": "1.75",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "aria-hidden": "true",
+          focusable: "false"
+        }, [
+          f("path", { d: "M3 8 l3 3 l7 -7" })
+        ], -1)
+      ])], 10, Te)) : y("", !0)
+    ], 16, xe));
   }
-}), Ca = /* @__PURE__ */ h({
+}), Ta = /* @__PURE__ */ h({
   __name: "Stack",
   props: {
     direction: { default: "vertical" },
@@ -718,14 +775,14 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     ), n = c(() => ({
       gap: `var(--strand-space-${t.gap})`
     }));
-    return (s, i) => (l(), r("div", k({
+    return (s, i) => (l(), o("div", k({
       class: a.value,
       style: n.value
     }, s.$attrs), [
-      y(s.$slots, "default")
+      g(s.$slots, "default")
     ], 16));
   }
-}), xa = /* @__PURE__ */ h({
+}), Ra = /* @__PURE__ */ h({
   __name: "Grid",
   props: {
     columns: { default: 1 },
@@ -739,14 +796,14 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       gridTemplateColumns: `repeat(${t.columns}, 1fr)`,
       gap: `var(--strand-space-${t.gap})`
     }));
-    return (s, i) => (l(), r("div", k({
+    return (s, i) => (l(), o("div", k({
       class: a.value,
       style: n.value
     }, s.$attrs), [
-      y(s.$slots, "default")
+      g(s.$slots, "default")
     ], 16));
   }
-}), Na = /* @__PURE__ */ h({
+}), Sa = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     size: { default: "default" },
@@ -760,11 +817,11 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      y(n.$slots, "default")
+    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
+      g(n.$slots, "default")
     ], 16));
   }
-}), Ne = { class: "strand-divider__label" }, ja = /* @__PURE__ */ h({
+}), Se = { class: "strand-divider__label" }, Ia = /* @__PURE__ */ h({
   __name: "Divider",
   props: {
     direction: { default: "horizontal" },
@@ -775,28 +832,28 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     const t = e, a = c(() => t.direction === "vertical"), n = c(() => !a.value && !!t.label);
     c(() => !a.value && !t.label);
     const s = c(() => a.value ? ["strand-divider", "strand-divider--vertical", t.className].filter(Boolean).join(" ") : n.value ? ["strand-divider", "strand-divider--horizontal", "strand-divider--labeled", t.className].filter(Boolean).join(" ") : ["strand-divider", "strand-divider--horizontal", t.className].filter(Boolean).join(" "));
-    return (i, d) => a.value ? (l(), r("div", {
+    return (i, d) => a.value ? (l(), o("div", {
       key: 0,
       class: b(s.value),
       role: "separator",
       "aria-orientation": "vertical"
-    }, null, 2)) : n.value ? (l(), r("div", {
+    }, null, 2)) : n.value ? (l(), o("div", {
       key: 1,
       class: b(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
       d[0] || (d[0] = f("span", { class: "strand-divider__line" }, null, -1)),
-      f("span", Ne, _(e.label), 1),
+      f("span", Se, _(e.label), 1),
       d[1] || (d[1] = f("span", { class: "strand-divider__line" }, null, -1))
-    ], 2)) : (l(), r("hr", {
+    ], 2)) : (l(), o("hr", {
       key: 2,
       class: b(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, null, 2));
   }
-}), Ta = /* @__PURE__ */ h({
+}), Ea = /* @__PURE__ */ h({
   __name: "Section",
   props: {
     variant: { default: "standard" },
@@ -814,14 +871,15 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("section", k({ class: a.value }, n.$attrs), [
-      y(n.$slots, "default")
+    return (n, s) => (l(), o("section", k({ class: a.value }, n.$attrs), [
+      g(n.$slots, "default")
     ], 16));
   }
-}), Ra = /* @__PURE__ */ h({
+}), za = /* @__PURE__ */ h({
   __name: "InstrumentViewport",
   props: {
     grid: { type: Boolean, default: !1 },
+    fullBleed: { type: Boolean, default: !1 },
     className: { default: "" }
   },
   setup(e) {
@@ -829,14 +887,15 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       () => [
         "strand-instrument-viewport",
         t.grid && "strand-instrument-viewport--grid",
+        t.fullBleed && "strand-instrument-viewport--full-bleed",
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      y(n.$slots, "default")
+    return (n, s) => (l(), o("div", k({ class: a.value }, n.$attrs), [
+      g(n.$slots, "default")
     ], 16));
   }
-}), Sa = /* @__PURE__ */ h({
+}), Va = /* @__PURE__ */ h({
   __name: "ScrollReveal",
   props: {
     threshold: { default: 0.1 },
@@ -856,22 +915,22 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     return E(() => {
       a.value && (s = new IntersectionObserver(
         (d) => {
-          for (const o of d)
-            o.isIntersecting ? (n.value = !0, t.once && s && a.value && s.unobserve(a.value)) : t.once || (n.value = !1);
+          for (const r of d)
+            r.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);
-    }), (d, o) => (l(), r("div", k({
+    }), (d, r) => (l(), o("div", k({
       ref_key: "elRef",
       ref: a,
       class: i.value
     }, d.$attrs), [
-      y(d.$slots, "default")
+      g(d.$slots, "default")
     ], 16));
   }
-}), je = ["href"], Ia = /* @__PURE__ */ h({
+}), Ie = ["href"], Da = /* @__PURE__ */ h({
   __name: "Link",
   props: {
     href: {},
@@ -883,17 +942,17 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     const t = e, a = c(
       () => ["strand-link", t.variant !== "default" && `strand-link--${t.variant}`, t.className].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("a", k({
+    return (n, s) => (l(), o("a", k({
       href: e.href,
       class: a.value
     }, {
       ...e.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
       ...n.$attrs
     }), [
-      y(n.$slots, "default")
-    ], 16, je));
+      g(n.$slots, "default")
+    ], 16, Ie));
   }
-}), Te = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Re = ["id", "aria-labelledby", "hidden"], Ea = /* @__PURE__ */ h({
+}), Ee = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], ze = ["id", "aria-labelledby", "hidden"], La = /* @__PURE__ */ h({
   __name: "Tabs",
   props: {
     tabs: {},
@@ -911,7 +970,7 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         (p = $ == null ? void 0 : $[m]) == null || p.focus();
       }
     }
-    function o(m) {
+    function r(m) {
       const v = a.tabs.findIndex((p) => p.id === a.activeTab);
       let u = null;
       switch (m.key) {
@@ -932,16 +991,16 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       }
       m.preventDefault(), d(u);
     }
-    return (m, v) => (l(), r("div", {
+    return (m, v) => (l(), o("div", {
       class: b(i.value)
     }, [
       f("div", {
         ref_key: "tablistRef",
         ref: s,
         role: "tablist",
-        onKeydown: o
+        onKeydown: r
       }, [
-        (l(!0), r(B, null, C(e.tabs, (u) => (l(), r("button", {
+        (l(!0), o(B, null, C(e.tabs, (u) => (l(), o("button", {
           key: u.id,
           id: `tab-${u.id}`,
           role: "tab",
@@ -954,9 +1013,9 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
           "aria-controls": `panel-${u.id}`,
           tabindex: u.id === e.activeTab ? 0 : -1,
           onClick: (p) => n("change", u.id)
-        }, _(u.label), 11, Te))), 128))
+        }, _(u.label), 11, Ee))), 128))
       ], 544),
-      (l(!0), r(B, null, C(e.tabs, (u) => (l(), r("div", {
+      (l(!0), o(B, null, C(e.tabs, (u) => (l(), o("div", {
         key: u.id,
         id: `panel-${u.id}`,
         role: "tabpanel",
@@ -964,19 +1023,19 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
         hidden: u.id !== e.activeTab || void 0,
         tabindex: 0
       }, [
-        y(m.$slots, `panel-${u.id}`)
-      ], 8, Re))), 128))
+        g(m.$slots, `panel-${u.id}`)
+      ], 8, ze))), 128))
     ], 2));
   }
-}), Se = { class: "strand-breadcrumb__list" }, Ie = {
+}), Ve = { class: "strand-breadcrumb__list" }, De = {
   key: 0,
   class: "strand-breadcrumb__separator",
   "aria-hidden": "true"
-}, Ee = {
+}, Le = {
   key: 1,
   class: "strand-breadcrumb__current",
   "aria-current": "page"
-}, ze = ["href"], za = /* @__PURE__ */ h({
+}, Oe = ["href"], Oa = /* @__PURE__ */ h({
   __name: "Breadcrumb",
   props: {
     items: {},
@@ -986,35 +1045,35 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
     const t = c(
       () => ["strand-breadcrumb"].filter(Boolean).join(" ")
     );
-    return (a, n) => (l(), r("nav", {
+    return (a, n) => (l(), o("nav", {
       "aria-label": "Breadcrumb",
       class: b(t.value)
     }, [
-      f("ol", Se, [
-        (l(!0), r(B, null, C(e.items, (s, i) => (l(), r("li", {
+      f("ol", Ve, [
+        (l(!0), o(B, null, C(e.items, (s, i) => (l(), o("li", {
           key: `${s.label}-${i}`,
           class: "strand-breadcrumb__item"
         }, [
-          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", {
+          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", {
             key: 2,
             href: s.href,
             class: "strand-breadcrumb__link"
-          }, _(s.label), 9, ze))
+          }, _(s.label), 9, Oe))
         ]))), 128))
       ])
     ], 2));
   }
-}), Ve = { class: "strand-nav__inner" }, Le = {
+}), Me = { class: "strand-nav__inner" }, Ae = {
   key: 0,
   class: "strand-nav__logo"
-}, De = { class: "strand-nav__items" }, Oe = ["href", "aria-current"], Ae = {
+}, Fe = { class: "strand-nav__items" }, Ke = ["href", "aria-current"], Pe = {
   key: 1,
   class: "strand-nav__actions"
-}, Fe = ["aria-expanded", "aria-label"], Me = {
+}, Ue = ["aria-expanded", "aria-label"], qe = {
   key: 0,
   class: "strand-nav__mobile-menu"
-}, Ke = ["href", "aria-current"], Va = /* @__PURE__ */ h({
+}, Ge = ["href", "aria-current"], Ma = /* @__PURE__ */ h({
   __name: "Nav",
   props: {
     items: { default: () => [] },
@@ -1026,28 +1085,28 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       a.value = !a.value;
     }
     const s = c(() => ["strand-nav", t.glass && "strand-nav--glass"].filter(Boolean).join(" "));
-    return (i, d) => (l(), r("nav", {
+    return (i, d) => (l(), o("nav", {
       class: b(s.value),
       "aria-label": "Main navigation"
     }, [
-      f("div", Ve, [
-        i.$slots.logo ? (l(), r("div", Le, [
-          y(i.$slots, "logo")
-        ])) : g("", !0),
-        f("div", De, [
-          (l(!0), r(B, null, C(e.items, (o) => (l(), r("a", {
-            key: o.href,
-            href: o.href,
+      f("div", Me, [
+        i.$slots.logo ? (l(), o("div", Ae, [
+          g(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([
               "strand-nav__link",
-              o.active && "strand-nav__link--active"
+              r.active && "strand-nav__link--active"
             ].filter(Boolean).join(" ")),
-            "aria-current": o.active ? "page" : void 0
-          }, _(o.label), 11, Oe))), 128))
+            "aria-current": r.active ? "page" : void 0
+          }, _(r.label), 11, Ke))), 128))
         ]),
-        i.$slots.actions ? (l(), r("div", Ae, [
-          y(i.$slots, "actions")
-        ])) : g("", !0),
+        i.$slots.actions ? (l(), o("div", Pe, [
+          g(i.$slots, "actions")
+        ])) : y("", !0),
         f("button", {
           type: "button",
           class: "strand-nav__hamburger",
@@ -1059,22 +1118,22 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
             class: "strand-nav__hamburger-icon",
             "aria-hidden": "true"
           }, null, -1)
-        ])], 8, Fe)
+        ])], 8, Ue)
       ]),
-      a.value ? (l(), r("div", Me, [
-        (l(!0), r(B, null, C(e.items, (o) => (l(), r("a", {
-          key: o.href,
-          href: o.href,
+      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([
             "strand-nav__mobile-link",
-            o.active && "strand-nav__mobile-link--active"
+            r.active && "strand-nav__mobile-link--active"
           ].filter(Boolean).join(" ")),
-          "aria-current": o.active ? "page" : void 0
-        }, _(o.label), 11, Ke))), 128))
-      ])) : g("", !0)
+          "aria-current": r.active ? "page" : void 0
+        }, _(r.label), 11, Ge))), 128))
+      ])) : y("", !0)
     ], 2));
   }
-}), Pe = ["aria-live"], Ue = { class: "strand-toast__status" }, qe = { class: "strand-toast__message" }, La = /* @__PURE__ */ h({
+}), We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Aa = /* @__PURE__ */ h({
   __name: "Toast",
   props: {
     status: { default: "info" },
@@ -1091,35 +1150,35 @@ const K = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, o = c(() => d[a.status] ?? a.status.toUpperCase());
-    return (m, v) => (l(), r("div", {
+    }, r = c(() => d[a.status] ?? a.status.toUpperCase());
+    return (m, v) => (l(), o("div", {
       class: b(i.value),
       role: "status",
       "aria-live": s.value ? "assertive" : "polite"
     }, [
-      f("span", Ue, _(o.value), 1),
-      f("span", qe, _(e.message), 1),
+      f("span", He, _(r.value), 1),
+      f("span", Ze, _(e.message), 1),
       f("button", {
         type: "button",
         class: "strand-toast__dismiss",
         "aria-label": "Dismiss",
         onClick: v[0] || (v[0] = (u) => n("dismiss"))
       }, " × ")
-    ], 10, Pe));
+    ], 10, We));
   }
 });
 /*! Strand Vue | MIT License | dillingerstaffing.com */
 const O = Symbol("StrandToast");
-function Da() {
+function Fa() {
   const e = A(O);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
 }
-const Ge = {
+const Je = {
   key: 0,
   class: "strand-toast__container"
-}, We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Je = ["onClick"], Oa = /* @__PURE__ */ h({
+}, Qe = ["aria-live"], Xe = { class: "strand-toast__status" }, Ye = { class: "strand-toast__message" }, ea = ["onClick"], Ka = /* @__PURE__ */ h({
   __name: "ToastProvider",
   setup(e) {
     let t = 0;
@@ -1150,37 +1209,37 @@ const Ge = {
     function d(v) {
       return v === "error" || v === "warning";
     }
-    const o = {
+    const r = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
     };
     function m(v) {
-      return o[v] ?? v.toUpperCase();
+      return r[v] ?? v.toUpperCase();
     }
-    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", {
+    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", {
           key: p.id,
           class: b(["strand-toast", `strand-toast--${p.status}`].join(" ")),
           role: "status",
           "aria-live": d(p.status) ? "assertive" : "polite"
         }, [
-          f("span", He, _(m(p.status)), 1),
-          f("span", Ze, _(p.message), 1),
+          f("span", Xe, _(m(p.status)), 1),
+          f("span", Ye, _(p.message), 1),
           f("button", {
             type: "button",
             class: "strand-toast__dismiss",
             "aria-label": "Dismiss",
             onClick: ($) => s(p.id)
-          }, " × ", 8, Je)
-        ], 10, We))), 128))
-      ])) : g("", !0)
+          }, " × ", 8, ea)
+        ], 10, Qe))), 128))
+      ])) : y("", !0)
     ], 64));
   }
-}), Qe = ["role"], Xe = { class: "strand-alert__status" }, Ye = { class: "strand-alert__content" }, Aa = /* @__PURE__ */ h({
+}), aa = ["role"], ta = { class: "strand-alert__status" }, sa = { class: "strand-alert__content" }, Pa = /* @__PURE__ */ h({
   __name: "Alert",
   props: {
     status: { default: "info" },
@@ -1200,31 +1259,31 @@ const Ge = {
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, o = c(() => d[a.status] ?? a.status.toUpperCase());
+    }, r = c(() => d[a.status] ?? a.status.toUpperCase());
     function m() {
       n("dismiss");
     }
-    return (v, u) => (l(), r("div", {
+    return (v, u) => (l(), o("div", {
       class: b(i.value),
       role: s.value
     }, [
-      f("span", Xe, _(o.value), 1),
-      f("div", Ye, [
-        y(v.$slots, "default")
+      f("span", ta, _(r.value), 1),
+      f("div", sa, [
+        g(v.$slots, "default")
       ]),
-      e.dismissible ? (l(), r("button", {
+      e.dismissible ? (l(), o("button", {
         key: 0,
         type: "button",
         class: "strand-alert__dismiss",
         "aria-label": "Dismiss",
         onClick: m
-      }, " × ")) : g("", !0)
-    ], 10, Qe));
+      }, " × ")) : y("", !0)
+    ], 10, aa));
   }
-}), ea = ["aria-labelledby"], aa = {
+}), na = ["aria-labelledby"], la = {
   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"])', Fa = /* @__PURE__ */ h({
+}, 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({
   __name: "Dialog",
   props: {
     open: { type: Boolean },
@@ -1237,7 +1296,7 @@ const Ge = {
     const a = e, n = t;
     let s = 0;
     const i = `strand-dialog-title-${++s}`, d = w(null);
-    let o = null, m = "";
+    let r = null, m = "";
     const v = c(
       () => ["strand-dialog__panel"].filter(Boolean).join(" ")
     );
@@ -1250,7 +1309,7 @@ const Ge = {
         const x = d.value;
         if (!x) return;
         const N = Array.from(
-          x.querySelectorAll(L)
+          x.querySelectorAll(D)
         );
         if (N.length === 0) return;
         const z = N[0], V = N[N.length - 1];
@@ -1264,19 +1323,19 @@ const Ge = {
       () => a.open,
       async ($) => {
         if ($) {
-          o = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await M();
+          r = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await K();
           const x = d.value;
           if (x) {
-            const N = x.querySelectorAll(L);
+            const N = x.querySelectorAll(D);
             N.length > 0 ? N[0].focus() : x.focus();
           }
         } else
-          document.body.style.overflow = m, o && o instanceof HTMLElement && o.focus();
+          document.body.style.overflow = m, r && r instanceof HTMLElement && r.focus();
       },
       { immediate: !0 }
     ), j(() => {
       a.open && (document.body.style.overflow = m);
-    }), ($, x) => e.open ? (l(), r("div", {
+    }), ($, x) => e.open ? (l(), o("div", {
       key: 0,
       class: "strand-dialog__backdrop",
       onClick: p,
@@ -1291,25 +1350,25 @@ const Ge = {
         "aria-labelledby": e.title ? i : void 0,
         tabindex: -1
       }, [
-        e.title ? (l(), r("div", aa, [
+        e.title ? (l(), o("div", la, [
           f("h2", {
             id: i,
             class: "strand-dialog__title"
           }, _(e.title), 1)
-        ])) : g("", !0),
+        ])) : y("", !0),
         f("button", {
           type: "button",
           class: "strand-dialog__close",
           "aria-label": "Close",
           onClick: x[0] || (x[0] = (N) => n("close"))
         }, " × "),
-        f("div", ta, [
-          y($.$slots, "default")
+        f("div", oa, [
+          g($.$slots, "default")
         ])
-      ], 10, ea)
-    ], 32)) : g("", !0);
+      ], 10, na)
+    ], 32)) : y("", !0);
   }
-}), sa = ["aria-hidden"], Ma = /* @__PURE__ */ h({
+}), ra = ["aria-hidden"], qa = /* @__PURE__ */ h({
   __name: "Tooltip",
   props: {
     content: {},
@@ -1326,7 +1385,7 @@ const Ge = {
         s.value = !0;
       }, t.delay);
     }
-    function o() {
+    function r() {
       i !== null && (clearTimeout(i), i = null), s.value = !1;
     }
     j(() => {
@@ -1341,24 +1400,24 @@ const Ge = {
         s.value && "strand-tooltip--visible"
       ].filter(Boolean).join(" ")
     );
-    return (u, p) => (l(), r("span", {
+    return (u, p) => (l(), o("span", {
       class: b(m.value),
       "aria-describedby": n,
       onMouseenter: d,
-      onMouseleave: o,
+      onMouseleave: r,
       onFocus: d,
-      onBlur: o
+      onBlur: r
     }, [
-      y(u.$slots, "default"),
+      g(u.$slots, "default"),
       f("span", {
         id: n,
         class: b(v.value),
         role: "tooltip",
         "aria-hidden": !s.value
-      }, _(e.content), 11, sa)
+      }, _(e.content), 11, ra)
     ], 34));
   }
-}), 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({
+}), 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({
   __name: "Progress",
   props: {
     variant: { default: "bar" },
@@ -1375,17 +1434,17 @@ const Ge = {
         !n.value && "strand-progress--indeterminate",
         t.className
       ].filter(Boolean).join(" ")
-    ), i = c(() => a[t.size] ?? a.md), d = c(() => (i.value - T) / 2), o = c(() => 2 * Math.PI * d.value), m = c(
-      () => n.value ? o.value - o.value * t.value / 100 : 0
+    ), 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
     );
-    return (v, u) => (l(), r("div", k({
+    return (v, u) => (l(), o("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(), r("svg", {
+      e.variant === "ring" ? (l(), o("svg", {
         key: 0,
         width: i.value,
         height: i.value,
@@ -1399,27 +1458,27 @@ const Ge = {
           fill: "none",
           "stroke-width": T,
           class: "strand-progress__track"
-        }, null, 8, ra),
+        }, null, 8, ca),
         f("circle", {
           cx: i.value / 2,
           cy: i.value / 2,
           r: d.value,
           fill: "none",
           "stroke-width": T,
-          "stroke-dasharray": o.value,
+          "stroke-dasharray": r.value,
           "stroke-dashoffset": n.value ? m.value : void 0,
           "stroke-linecap": "round",
           class: "strand-progress__fill",
           transform: `rotate(-90 ${i.value / 2} ${i.value / 2})`
-        }, null, 8, oa)
-      ], 8, la)) : (l(), r("div", {
+        }, null, 8, ua)
+      ], 8, da)) : (l(), o("div", {
         key: 1,
         class: "strand-progress__fill",
         style: S(n.value ? { width: `${e.value}%` } : void 0)
       }, null, 4))
-    ], 16, na));
+    ], 16, ia));
   }
-}), Pa = /* @__PURE__ */ h({
+}), Wa = /* @__PURE__ */ h({
   __name: "Spinner",
   props: {
     size: { default: "md" },
@@ -1433,7 +1492,7 @@ const Ge = {
         t.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("span", k({
+    return (n, s) => (l(), o("span", k({
       class: a.value,
       role: "status"
     }, n.$attrs), [...s[0] || (s[0] = [
@@ -1444,7 +1503,7 @@ const Ge = {
       f("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
     ])], 16));
   }
-}), Ua = /* @__PURE__ */ h({
+}), Ha = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     variant: { default: "text" },
@@ -1468,7 +1527,7 @@ const Ge = {
       width: a.value,
       height: n.value
     }));
-    return (d, o) => (l(), r("div", k({
+    return (d, r) => (l(), o("div", k({
       class: s.value,
       "aria-hidden": "true",
       style: i.value
@@ -1476,41 +1535,41 @@ const Ge = {
   }
 });
 export {
-  Aa as Alert,
-  ga as Avatar,
-  $a as Badge,
-  za as Breadcrumb,
-  da as Button,
-  pa as Card,
-  va as Checkbox,
-  wa as CodeBlock,
-  Na as Container,
-  Ba as DataReadout,
-  Fa as Dialog,
-  ja as Divider,
-  ba as FormField,
-  xa as Grid,
-  ca as Input,
-  Ra as InstrumentViewport,
-  Ia as Link,
-  Va as Nav,
-  Ka as Progress,
-  ma as Radio,
-  Sa as ScrollReveal,
-  Ta as Section,
-  fa as Select,
-  Ua as Skeleton,
-  _a as Slider,
-  Pa as Spinner,
-  Ca as Stack,
-  ha as Switch,
-  ka as Table,
-  Ea as Tabs,
-  ya as Tag,
-  ua as Textarea,
-  La as Toast,
-  Oa as ToastProvider,
-  Ma as Tooltip,
-  Da as useToast
+  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,
+  Da as Link,
+  Ma as Nav,
+  Ga as Progress,
+  pa 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
 };
 //# sourceMappingURL=index.js.map