@dillingerstaffing/strand-vue 0.16.0 → 0.17.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { defineComponent as h, computed as f, openBlock as l, createElementBlock as r, normalizeClass as _, createCommentVNode as y, createElementVNode as m, normalizeStyle as O, renderSlot as $, useSlots as V, ref as B, watch as T, onMounted as S, toDisplayString as b, Fragment as w, renderList as C, createTextVNode as I, mergeProps as k, onBeforeUnmount as M, onUnmounted as N, inject as A, provide as F, nextTick as K } from "vue";
-const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
+import { defineComponent as c, computed as o, openBlock as l, createElementBlock as r, normalizeClass as $, createCommentVNode as g, createElementVNode as v, normalizeStyle as R, renderSlot as i, useSlots as O, ref as N, watch as T, onMounted as F, toDisplayString as h, Fragment as B, renderList as L, createTextVNode as w, mergeProps as d, onBeforeUnmount as z, onUnmounted as S, inject as H, provide as V, nextTick as P } from "vue";
+const G = ["type", "disabled", "aria-disabled", "aria-busy"], A = {
   key: 0,
   class: "strand-btn__spinner",
   "aria-hidden": "true"
-}, ha = /* @__PURE__ */ h({
+}, ga = /* @__PURE__ */ c({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -15,46 +15,46 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     fullWidth: { type: Boolean, default: !1 }
   },
   emits: ["click"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(() => a.disabled || a.loading), d = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(() => t.disabled || t.loading), f = o(
       () => [
         "strand-btn",
-        `strand-btn--${a.variant}`,
-        `strand-btn--${a.size}`,
-        a.iconOnly && "strand-btn--icon-only",
-        a.fullWidth && "strand-btn--full-width",
-        a.loading && "strand-btn--loading"
+        `strand-btn--${t.variant}`,
+        `strand-btn--${t.size}`,
+        t.iconOnly && "strand-btn--icon-only",
+        t.fullWidth && "strand-btn--full-width",
+        t.loading && "strand-btn--loading"
       ].filter(Boolean).join(" ")
     );
-    function i(o) {
-      s.value || n("click", o);
+    function p(u) {
+      n.value || a("click", u);
     }
-    return (o, c) => (l(), r("button", {
+    return (u, m) => (l(), r("button", {
       type: e.type,
-      class: _(d.value),
-      disabled: s.value,
-      "aria-disabled": s.value ? "true" : void 0,
+      class: $(f.value),
+      disabled: n.value,
+      "aria-disabled": n.value ? "true" : void 0,
       "aria-busy": e.loading ? "true" : void 0,
-      onClick: i
+      onClick: p
     }, [
-      e.loading ? (l(), r("span", U)) : y("", !0),
-      m("span", {
+      e.loading ? (l(), r("span", A)) : g("", !0),
+      v("span", {
         class: "strand-btn__content",
-        style: O(e.loading ? { visibility: "hidden" } : void 0)
+        style: R(e.loading ? { visibility: "hidden" } : void 0)
       }, [
-        $(o.$slots, "default")
+        i(u.$slots, "default")
       ], 4)
-    ], 10, P));
+    ], 10, G));
   }
-}), q = {
+}), U = {
   key: 0,
   class: "strand-input__leading",
   "aria-hidden": "true"
-}, G = ["type", "disabled", "aria-invalid", "value"], W = {
+}, K = ["type", "disabled", "aria-invalid", "value"], q = {
   key: 1,
   class: "strand-input__trailing",
   "aria-hidden": "true"
-}, ba = /* @__PURE__ */ h({
+}, ka = /* @__PURE__ */ c({
   __name: "Input",
   props: {
     type: { default: "text" },
@@ -63,44 +63,44 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     modelValue: {}
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = V(), d = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = O(), f = o(
       () => [
         "strand-input",
-        a.error && "strand-input--error",
-        a.disabled && "strand-input--disabled",
-        !!s.leading && "strand-input--has-leading",
-        !!s.trailing && "strand-input--has-trailing"
+        t.error && "strand-input--error",
+        t.disabled && "strand-input--disabled",
+        !!n.leading && "strand-input--has-leading",
+        !!n.trailing && "strand-input--has-trailing"
       ].filter(Boolean).join(" ")
     );
-    function i(o) {
-      const c = o.target;
-      n("update:modelValue", c.value);
+    function p(u) {
+      const m = u.target;
+      a("update:modelValue", m.value);
     }
-    return (o, c) => (l(), r("div", {
-      class: _(d.value)
+    return (u, m) => (l(), r("div", {
+      class: $(f.value)
     }, [
-      o.$slots.leading ? (l(), r("span", q, [
-        $(o.$slots, "leading")
-      ])) : y("", !0),
-      m("input", {
+      u.$slots.leading ? (l(), r("span", U, [
+        i(u.$slots, "leading")
+      ])) : g("", !0),
+      v("input", {
         type: e.type,
         class: "strand-input__field",
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
         value: e.modelValue,
-        onInput: i
-      }, null, 40, G),
-      o.$slots.trailing ? (l(), r("span", W, [
-        $(o.$slots, "trailing")
-      ])) : y("", !0)
+        onInput: p
+      }, null, 40, K),
+      u.$slots.trailing ? (l(), r("span", q, [
+        i(u.$slots, "trailing")
+      ])) : g("", !0)
     ], 2));
   }
-}), H = ["disabled", "aria-invalid", "maxlength", "value"], Z = {
+}), W = ["disabled", "aria-invalid", "maxlength", "value"], J = {
   key: 0,
   class: "strand-textarea__count",
   "aria-live": "polite"
-}, _a = /* @__PURE__ */ h({
+}, Na = /* @__PURE__ */ c({
   __name: "Textarea",
   props: {
     autoResize: { type: Boolean, default: !1 },
@@ -111,49 +111,49 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     modelValue: { default: "" }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = B(null), d = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = N(null), f = o(
       () => [
         "strand-textarea",
-        a.error && "strand-textarea--error",
-        a.disabled && "strand-textarea--disabled",
-        a.autoResize && "strand-textarea--auto-resize"
+        t.error && "strand-textarea--error",
+        t.disabled && "strand-textarea--disabled",
+        t.autoResize && "strand-textarea--auto-resize"
       ].filter(Boolean).join(" ")
-    ), i = f(
-      () => typeof a.modelValue == "string" ? a.modelValue.length : 0
+    ), p = o(
+      () => typeof t.modelValue == "string" ? t.modelValue.length : 0
     );
-    function o() {
-      a.autoResize && s.value && (s.value.style.height = "auto", s.value.style.height = `${s.value.scrollHeight}px`);
+    function u() {
+      t.autoResize && n.value && (n.value.style.height = "auto", n.value.style.height = `${n.value.scrollHeight}px`);
     }
-    function c(v) {
-      const u = v.target;
-      n("update:modelValue", u.value), o();
+    function m(b) {
+      const _ = b.target;
+      a("update:modelValue", _.value), u();
     }
-    return T(() => a.modelValue, () => {
-      o();
-    }), S(() => {
-      o();
-    }), (v, u) => (l(), r("div", {
-      class: _(d.value)
+    return T(() => t.modelValue, () => {
+      u();
+    }), F(() => {
+      u();
+    }), (b, _) => (l(), r("div", {
+      class: $(f.value)
     }, [
-      m("textarea", {
+      v("textarea", {
         ref_key: "textareaRef",
-        ref: s,
+        ref: n,
         class: "strand-textarea__field",
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
         maxlength: e.maxLength,
         value: e.modelValue,
-        onInput: c
-      }, null, 40, H),
-      e.showCount && e.maxLength != null ? (l(), r("span", Z, b(i.value) + "/" + b(e.maxLength), 1)) : y("", !0)
+        onInput: m
+      }, null, 40, W),
+      e.showCount && e.maxLength != null ? (l(), r("span", J, h(p.value) + "/" + h(e.maxLength), 1)) : g("", !0)
     ], 2));
   }
-}), J = ["value", "disabled", "aria-invalid"], Q = {
+}), Z = ["value", "disabled", "aria-invalid"], Q = {
   key: 0,
   value: "",
   disabled: ""
-}, X = ["value"], pa = /* @__PURE__ */ h({
+}, X = ["value"], Ba = /* @__PURE__ */ c({
   __name: "Select",
   props: {
     options: {},
@@ -163,35 +163,35 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     placeholder: {}
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
       () => [
         "strand-select",
-        a.error && "strand-select--error",
-        a.disabled && "strand-select--disabled"
+        t.error && "strand-select--error",
+        t.disabled && "strand-select--disabled"
       ].filter(Boolean).join(" ")
     );
-    function d(i) {
-      const o = i.target;
-      n("update:modelValue", o.value);
+    function f(p) {
+      const u = p.target;
+      a("update:modelValue", u.value);
     }
-    return (i, o) => (l(), r("div", {
-      class: _(s.value)
+    return (p, u) => (l(), r("div", {
+      class: $(n.value)
     }, [
-      m("select", {
+      v("select", {
         class: "strand-select__field",
         value: e.modelValue,
         disabled: e.disabled,
         "aria-invalid": e.error ? "true" : void 0,
-        onChange: d
+        onChange: f
       }, [
-        e.placeholder ? (l(), r("option", Q, b(e.placeholder), 1)) : y("", !0),
-        (l(!0), r(w, null, C(e.options, (c) => (l(), r("option", {
-          key: c.value,
-          value: c.value
-        }, b(c.label), 9, X))), 128))
-      ], 40, J),
-      o[0] || (o[0] = m("span", {
+        e.placeholder ? (l(), r("option", Q, h(e.placeholder), 1)) : g("", !0),
+        (l(!0), r(B, null, L(e.options, (m) => (l(), r("option", {
+          key: m.value,
+          value: m.value
+        }, h(m.label), 9, X))), 128))
+      ], 40, Z),
+      u[0] || (u[0] = v("span", {
         class: "strand-select__arrow",
         "aria-hidden": "true"
       }, null, -1))
@@ -205,15 +205,15 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
   class: "strand-checkbox__icon",
   viewBox: "0 0 16 16",
   fill: "none"
-}, te = {
+}, se = {
   key: 1,
   class: "strand-checkbox__icon",
   viewBox: "0 0 16 16",
   fill: "none"
-}, se = {
+}, te = {
   key: 0,
   class: "strand-checkbox__label"
-}, ya = /* @__PURE__ */ h({
+}, La = /* @__PURE__ */ c({
   __name: "Checkbox",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -222,47 +222,47 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     label: {}
   },
   emits: ["change"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = B(null);
-    S(() => {
-      s.value && (s.value.indeterminate = a.indeterminate);
-    }), T(() => a.indeterminate, (v) => {
-      s.value && (s.value.indeterminate = v);
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = N(null);
+    F(() => {
+      n.value && (n.value.indeterminate = t.indeterminate);
+    }), T(() => t.indeterminate, (b) => {
+      n.value && (n.value.indeterminate = b);
     });
-    const d = f(
+    const f = o(
       () => [
         "strand-checkbox",
-        a.checked && "strand-checkbox--checked",
-        a.indeterminate && "strand-checkbox--indeterminate",
-        a.disabled && "strand-checkbox--disabled"
+        t.checked && "strand-checkbox--checked",
+        t.indeterminate && "strand-checkbox--indeterminate",
+        t.disabled && "strand-checkbox--disabled"
       ].filter(Boolean).join(" ")
-    ), i = f(
-      () => a.indeterminate ? "mixed" : a.checked ? "true" : "false"
+    ), p = o(
+      () => t.indeterminate ? "mixed" : t.checked ? "true" : "false"
     );
-    function o(v) {
-      a.disabled || n("change", v);
+    function u(b) {
+      t.disabled || a("change", b);
     }
-    function c(v) {
-      v.key === " " && !a.disabled && (v.preventDefault(), s.value && s.value.click());
+    function m(b) {
+      b.key === " " && !t.disabled && (b.preventDefault(), n.value && n.value.click());
     }
-    return (v, u) => (l(), r("label", {
-      class: _(d.value),
-      onKeydown: c
+    return (b, _) => (l(), r("label", {
+      class: $(f.value),
+      onKeydown: m
     }, [
-      m("input", {
+      v("input", {
         ref_key: "inputRef",
-        ref: s,
+        ref: n,
         type: "checkbox",
         class: "strand-checkbox__native",
         checked: e.checked,
         disabled: e.disabled,
-        "aria-checked": i.value,
+        "aria-checked": p.value,
         role: "checkbox",
-        onChange: o
+        onChange: u
       }, null, 40, Y),
-      m("span", ee, [
-        e.indeterminate ? (l(), r("svg", ae, [...u[0] || (u[0] = [
-          m("line", {
+      v("span", ee, [
+        e.indeterminate ? (l(), r("svg", ae, [..._[0] || (_[0] = [
+          v("line", {
             x1: "4",
             y1: "8",
             x2: "12",
@@ -271,23 +271,23 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
             "stroke-width": "2",
             "stroke-linecap": "round"
           }, null, -1)
-        ])])) : e.checked ? (l(), r("svg", te, [...u[1] || (u[1] = [
-          m("path", {
+        ])])) : e.checked ? (l(), r("svg", se, [..._[1] || (_[1] = [
+          v("path", {
             d: "M3.5 8L6.5 11L12.5 5",
             stroke: "currentColor",
             "stroke-width": "2",
             "stroke-linecap": "round",
             "stroke-linejoin": "round"
           }, null, -1)
-        ])])) : y("", !0)
+        ])])) : g("", !0)
       ]),
-      e.label ? (l(), r("span", se, b(e.label), 1)) : y("", !0)
+      e.label ? (l(), r("span", te, h(e.label), 1)) : g("", !0)
     ], 34));
   }
 }), ne = ["checked", "disabled", "name", "value"], le = {
   key: 0,
   class: "strand-radio__label"
-}, ga = /* @__PURE__ */ h({
+}, ja = /* @__PURE__ */ c({
   __name: "Radio",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -297,42 +297,42 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     value: {}
   },
   emits: ["change"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
       () => [
         "strand-radio",
-        a.checked && "strand-radio--checked",
-        a.disabled && "strand-radio--disabled"
+        t.checked && "strand-radio--checked",
+        t.disabled && "strand-radio--disabled"
       ].filter(Boolean).join(" ")
     );
-    function d(i) {
-      a.disabled || n("change", i);
+    function f(p) {
+      t.disabled || a("change", p);
     }
-    return (i, o) => (l(), r("label", {
-      class: _(s.value)
+    return (p, u) => (l(), r("label", {
+      class: $(n.value)
     }, [
-      m("input", {
+      v("input", {
         type: "radio",
         class: "strand-radio__native",
         checked: e.checked,
         disabled: e.disabled,
         name: e.name,
         value: e.value,
-        onChange: d
+        onChange: f
       }, null, 40, ne),
-      o[0] || (o[0] = m("span", {
+      u[0] || (u[0] = v("span", {
         class: "strand-radio__control",
         "aria-hidden": "true"
       }, [
-        m("span", { class: "strand-radio__dot" })
+        v("span", { class: "strand-radio__dot" })
       ], -1)),
-      e.label ? (l(), r("span", le, b(e.label), 1)) : y("", !0)
+      e.label ? (l(), r("span", le, h(e.label), 1)) : g("", !0)
     ], 2));
   }
 }), re = ["aria-checked", "disabled"], oe = {
   key: 0,
   class: "strand-switch__label"
-}, $a = /* @__PURE__ */ h({
+}, Ca = /* @__PURE__ */ c({
   __name: "Switch",
   props: {
     checked: { type: Boolean, default: !1 },
@@ -340,41 +340,41 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     label: {}
   },
   emits: ["change"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
       () => [
         "strand-switch",
-        a.checked && "strand-switch--checked",
-        a.disabled && "strand-switch--disabled"
+        t.checked && "strand-switch--checked",
+        t.disabled && "strand-switch--disabled"
       ].filter(Boolean).join(" ")
     );
-    function d() {
-      a.disabled || n("change", !a.checked);
+    function f() {
+      t.disabled || a("change", !t.checked);
     }
-    function i(o) {
-      (o.key === " " || o.key === "Enter") && !a.disabled && (o.preventDefault(), n("change", !a.checked));
+    function p(u) {
+      (u.key === " " || u.key === "Enter") && !t.disabled && (u.preventDefault(), a("change", !t.checked));
     }
-    return (o, c) => (l(), r("label", {
-      class: _(s.value)
+    return (u, m) => (l(), r("label", {
+      class: $(n.value)
     }, [
-      m("button", {
+      v("button", {
         type: "button",
         role: "switch",
         class: "strand-switch__track",
         "aria-checked": e.checked ? "true" : "false",
         disabled: e.disabled,
-        onClick: d,
-        onKeydown: i
-      }, [...c[0] || (c[0] = [
-        m("span", {
+        onClick: f,
+        onKeydown: p
+      }, [...m[0] || (m[0] = [
+        v("span", {
           class: "strand-switch__thumb",
           "aria-hidden": "true"
         }, null, -1)
       ])], 40, re),
-      e.label ? (l(), r("span", oe, b(e.label), 1)) : y("", !0)
+      e.label ? (l(), r("span", oe, h(e.label), 1)) : g("", !0)
     ], 2));
   }
-}), ie = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], ka = /* @__PURE__ */ h({
+}), ce = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], wa = /* @__PURE__ */ c({
   __name: "Slider",
   props: {
     min: { default: 0 },
@@ -384,21 +384,21 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
       () => [
         "strand-slider",
-        a.disabled && "strand-slider--disabled"
+        t.disabled && "strand-slider--disabled"
       ].filter(Boolean).join(" ")
     );
-    function d(i) {
-      const o = i.target;
-      n("update:modelValue", Number(o.value));
+    function f(p) {
+      const u = p.target;
+      a("update:modelValue", Number(u.value));
     }
-    return (i, o) => (l(), r("div", {
-      class: _(s.value)
+    return (p, u) => (l(), r("div", {
+      class: $(n.value)
     }, [
-      m("input", {
+      v("input", {
         type: "range",
         class: "strand-slider__field",
         min: e.min,
@@ -409,15 +409,15 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
         "aria-valuemin": e.min,
         "aria-valuemax": e.max,
         "aria-valuenow": e.modelValue,
-        onInput: d
-      }, null, 40, ie)
+        onInput: f
+      }, null, 40, ce)
     ], 2));
   }
-}), de = ["for"], ce = {
+}), ie = ["for"], de = {
   key: 0,
   class: "strand-form-field__required",
   "aria-hidden": "true"
-}, ue = { class: "strand-form-field__control" }, fe = ["id"], ve = ["id"], Ba = /* @__PURE__ */ h({
+}, ue = { class: "strand-form-field__control" }, fe = ["id"], pe = ["id"], Sa = /* @__PURE__ */ c({
   __name: "FormField",
   props: {
     label: {},
@@ -427,38 +427,38 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     required: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-form-field",
-        t.error && "strand-form-field--error"
+        s.error && "strand-form-field--error"
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", {
-      class: _(a.value)
+    return (a, n) => (l(), r("div", {
+      class: $(t.value)
     }, [
-      m("label", {
+      v("label", {
         class: "strand-form-field__label",
         for: e.htmlFor
       }, [
-        I(b(e.label) + " ", 1),
-        e.required ? (l(), r("span", ce, " * ")) : y("", !0)
-      ], 8, de),
-      m("div", ue, [
-        $(n.$slots, "default")
+        w(h(e.label) + " ", 1),
+        e.required ? (l(), r("span", de, " * ")) : g("", !0)
+      ], 8, ie),
+      v("div", ue, [
+        i(a.$slots, "default")
       ]),
       e.error ? (l(), r("p", {
         key: 0,
         class: "strand-form-field__error",
         id: `${e.htmlFor}-error`,
         role: "alert"
-      }, b(e.error), 9, fe)) : e.hint ? (l(), r("p", {
+      }, h(e.error), 9, fe)) : e.hint ? (l(), r("p", {
         key: 1,
         class: "strand-form-field__hint",
         id: `${e.htmlFor}-hint`
-      }, b(e.hint), 9, ve)) : y("", !0)
+      }, h(e.hint), 9, pe)) : g("", !0)
     ], 2));
   }
-}), wa = /* @__PURE__ */ h({
+}), Ta = /* @__PURE__ */ c({
   __name: "Card",
   props: {
     variant: { default: "elevated" },
@@ -466,19 +466,19 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-card",
-        `strand-card--${t.variant}`,
-        `strand-card--pad-${t.padding}`,
-        t.className
+        `strand-card--${s.variant}`,
+        `strand-card--pad-${s.padding}`,
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      $(n.$slots, "default")
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
     ], 16));
   }
-}), me = ["aria-label"], Ca = /* @__PURE__ */ h({
+}), me = ["aria-label"], Fa = /* @__PURE__ */ c({
   __name: "Badge",
   props: {
     variant: { default: "count" },
@@ -488,32 +488,32 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = V(), n = f(() => !!a.default), s = f(() => t.variant === "count" ? t.count != null && t.count > t.maxCount ? `${t.maxCount}+` : t.count : null), d = f(() => {
-      if (t.variant === "dot") return "Status indicator";
-      if (t.count != null) return `${t.count} notifications`;
-    }), i = f(
+    const s = e, t = O(), a = o(() => !!t.default), n = o(() => s.variant === "count" ? s.count != null && s.count > s.maxCount ? `${s.maxCount}+` : s.count : null), f = o(() => {
+      if (s.variant === "dot") return "Status indicator";
+      if (s.count != null) return `${s.count} notifications`;
+    }), p = o(
       () => [
         "strand-badge__indicator",
-        `strand-badge--${t.variant}`,
-        `strand-badge--${t.status}`
+        `strand-badge--${s.variant}`,
+        `strand-badge--${s.status}`
       ].filter(Boolean).join(" ")
-    ), o = f(
-      () => n.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
+    ), u = o(
+      () => a.value ? ["strand-badge", s.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", s.className].filter(Boolean).join(" ")
     );
-    return (c, v) => (l(), r("span", k({ class: o.value }, c.$attrs), [
-      $(c.$slots, "default"),
-      m("span", {
-        class: _(i.value),
-        "aria-label": d.value,
+    return (m, b) => (l(), r("span", d({ class: u.value }, m.$attrs), [
+      i(m.$slots, "default"),
+      v("span", {
+        class: $(p.value),
+        "aria-label": f.value,
         role: "status"
-      }, b(s.value), 11, me)
+      }, h(n.value), 11, me)
     ], 16));
   }
-}), he = ["aria-label"], be = ["src", "alt"], _e = {
+}), _e = ["aria-label"], ve = ["src", "alt"], be = {
   key: 1,
   class: "strand-avatar__initials",
   "aria-hidden": "true"
-}, xa = /* @__PURE__ */ h({
+}, xa = /* @__PURE__ */ c({
   __name: "Avatar",
   props: {
     src: {},
@@ -523,30 +523,30 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = B(!1), n = () => {
-      a.value = !0;
-    }, s = f(() => t.src && !a.value), d = f(() => t.initials.slice(0, 2).toUpperCase()), i = f(
+    const s = e, t = N(!1), a = () => {
+      t.value = !0;
+    }, n = o(() => s.src && !t.value), f = o(() => s.initials.slice(0, 2).toUpperCase()), p = o(
       () => [
         "strand-avatar",
-        `strand-avatar--${t.size}`,
-        t.className
+        `strand-avatar--${s.size}`,
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (o, c) => (l(), r("div", k({
-      class: i.value,
+    return (u, m) => (l(), r("div", d({
+      class: p.value,
       role: "img",
-      "aria-label": e.alt || d.value
-    }, o.$attrs), [
-      s.value ? (l(), r("img", {
+      "aria-label": e.alt || f.value
+    }, u.$attrs), [
+      n.value ? (l(), r("img", {
         key: 0,
         class: "strand-avatar__img",
         src: e.src,
         alt: e.alt,
-        onError: n
-      }, null, 40, be)) : (l(), r("span", _e, b(d.value), 1))
-    ], 16, he));
+        onError: a
+      }, null, 40, ve)) : (l(), r("span", be, h(f.value), 1))
+    ], 16, _e));
   }
-}), pe = { class: "strand-tag__text" }, ja = /* @__PURE__ */ h({
+}), he = { class: "strand-tag__text" }, Ra = /* @__PURE__ */ c({
   __name: "Tag",
   props: {
     variant: { default: "solid" },
@@ -555,105 +555,105 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   emits: ["remove"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
       () => [
         "strand-tag",
-        `strand-tag--${a.variant}`,
-        `strand-tag--${a.status}`,
-        a.className
+        `strand-tag--${t.variant}`,
+        `strand-tag--${t.status}`,
+        t.className
       ].filter(Boolean).join(" ")
     );
-    return (d, i) => (l(), r("span", k({ class: s.value }, d.$attrs), [
-      m("span", pe, [
-        $(d.$slots, "default")
+    return (f, p) => (l(), r("span", d({ class: n.value }, f.$attrs), [
+      v("span", he, [
+        i(f.$slots, "default")
       ]),
       e.removable ? (l(), r("button", {
         key: 0,
         type: "button",
         class: "strand-tag__remove",
         "aria-label": "Remove",
-        onClick: i[0] || (i[0] = (o) => n("remove"))
-      }, [...i[1] || (i[1] = [
-        m("svg", {
+        onClick: p[0] || (p[0] = (u) => a("remove"))
+      }, [...p[1] || (p[1] = [
+        v("svg", {
           width: "12",
           height: "12",
           viewBox: "0 0 12 12",
           fill: "none",
           "aria-hidden": "true"
         }, [
-          m("path", {
+          v("path", {
             d: "M3 3l6 6M9 3l-6 6",
             stroke: "currentColor",
             "stroke-width": "1.5",
             "stroke-linecap": "round"
           })
         ], -1)
-      ])])) : y("", !0)
+      ])])) : g("", !0)
     ], 16));
   }
-}), ye = { class: "strand-table" }, ge = { class: "strand-table__head" }, $e = ["aria-label", "onClick"], ke = {
+}), $e = { class: "strand-table" }, ye = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ke = {
   class: "strand-table__sort-indicator",
   "aria-hidden": "true"
-}, Be = { class: "strand-table__body" }, Na = /* @__PURE__ */ h({
+}, Ne = { class: "strand-table__body" }, Ea = /* @__PURE__ */ c({
   __name: "Table",
   props: {
     columns: {},
     data: {}
   },
   emits: ["sort"],
-  setup(e, { emit: t }) {
-    const a = t, n = B(null), s = B("asc"), d = f(
+  setup(e, { emit: s }) {
+    const t = s, a = N(null), n = N("asc"), f = o(
       () => ["strand-table-wrapper"].filter(Boolean).join(" ")
     );
-    function i(c) {
-      const v = n.value === c && s.value === "asc" ? "desc" : "asc";
-      n.value = c, s.value = v, a("sort", c, v);
+    function p(m) {
+      const b = a.value === m && n.value === "asc" ? "desc" : "asc";
+      a.value = m, n.value = b, t("sort", m, b);
     }
-    function o(c) {
-      return n.value === c ? s.value === "asc" ? "↑" : "↓" : "↕";
+    function u(m) {
+      return a.value === m ? n.value === "asc" ? "↑" : "↓" : "↕";
     }
-    return (c, v) => (l(), r("div", {
-      class: _(d.value)
+    return (m, b) => (l(), r("div", {
+      class: $(f.value)
     }, [
-      m("table", ye, [
-        m("thead", ge, [
-          m("tr", null, [
-            (l(!0), r(w, null, C(e.columns, (u) => (l(), r("th", {
-              key: u.key,
+      v("table", $e, [
+        v("thead", ye, [
+          v("tr", null, [
+            (l(!0), r(B, null, L(e.columns, (_) => (l(), r("th", {
+              key: _.key,
               class: "strand-table__th",
-              style: O(u.width ? { width: u.width } : void 0)
+              style: R(_.width ? { width: _.width } : void 0)
             }, [
-              u.sortable ? (l(), r("button", {
+              _.sortable ? (l(), r("button", {
                 key: 0,
                 type: "button",
                 class: "strand-table__sort-btn",
-                "aria-label": `Sort by ${u.header}`,
-                onClick: (p) => i(u.key)
+                "aria-label": `Sort by ${_.header}`,
+                onClick: (y) => p(_.key)
               }, [
-                I(b(u.header) + " ", 1),
-                m("span", ke, b(o(u.key)), 1)
-              ], 8, $e)) : (l(), r(w, { key: 1 }, [
-                I(b(u.header), 1)
+                w(h(_.header) + " ", 1),
+                v("span", ke, h(u(_.key)), 1)
+              ], 8, ge)) : (l(), r(B, { key: 1 }, [
+                w(h(_.header), 1)
               ], 64))
             ], 4))), 128))
           ])
         ]),
-        m("tbody", Be, [
-          (l(!0), r(w, null, C(e.data, (u, p) => (l(), r("tr", {
-            key: p,
+        v("tbody", Ne, [
+          (l(!0), r(B, null, L(e.data, (_, y) => (l(), r("tr", {
+            key: y,
             class: "strand-table__row"
           }, [
-            (l(!0), r(w, null, C(e.columns, (g) => (l(), r("td", {
-              key: g.key,
+            (l(!0), r(B, null, L(e.columns, (k) => (l(), r("td", {
+              key: k.key,
               class: "strand-table__td"
-            }, b(u[g.key]), 1))), 128))
+            }, h(_[k.key]), 1))), 128))
           ]))), 128))
         ])
       ])
     ], 2));
   }
-}), we = { class: "strand-data-readout__label" }, Ce = { class: "strand-data-readout__value" }, Ta = /* @__PURE__ */ h({
+}), Be = { class: "strand-data-readout__label" }, Le = { class: "strand-data-readout__value" }, Ma = /* @__PURE__ */ c({
   __name: "DataReadout",
   props: {
     label: {},
@@ -662,22 +662,22 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-data-readout",
-        t.size && t.size !== "md" ? `strand-data-readout--${t.size}` : "",
-        t.className
+        s.size && s.size !== "md" ? `strand-data-readout--${s.size}` : "",
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      m("span", we, b(e.label), 1),
-      m("span", Ce, b(e.value), 1)
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      v("span", Be, h(e.label), 1),
+      v("span", Le, h(e.value), 1)
     ], 16));
   }
-}), xe = ["data-strand-copy"], je = {
+}), je = ["data-strand-copy"], Ce = {
   key: 0,
   class: "strand-code-block__label"
-}, Ne = { class: "strand-code-block__pre" }, Te = ["aria-label"], Se = 1500, Sa = /* @__PURE__ */ h({
+}, we = { class: "strand-code-block__pre" }, Se = ["aria-label"], Te = 1500, Ia = /* @__PURE__ */ c({
   __name: "CodeBlock",
   props: {
     code: {},
@@ -686,44 +686,44 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     copyable: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const t = e, a = f(
-      () => ["strand-code-block", t.className].filter(Boolean).join(" ")
-    ), n = B(!1);
-    let s = null;
-    M(() => {
-      s !== null && window.clearTimeout(s);
+    const s = e, t = o(
+      () => ["strand-code-block", s.className].filter(Boolean).join(" ")
+    ), a = N(!1);
+    let n = null;
+    z(() => {
+      n !== null && window.clearTimeout(n);
     });
-    async function d() {
-      var i;
+    async function f() {
+      var p;
       try {
-        if ((i = navigator.clipboard) != null && i.writeText)
-          await navigator.clipboard.writeText(t.code);
+        if ((p = navigator.clipboard) != null && p.writeText)
+          await navigator.clipboard.writeText(s.code);
         else {
-          const o = document.createElement("textarea");
-          o.value = t.code, o.setAttribute("readonly", ""), o.style.position = "absolute", o.style.left = "-9999px", document.body.appendChild(o), o.select(), document.execCommand("copy"), document.body.removeChild(o);
+          const u = document.createElement("textarea");
+          u.value = s.code, u.setAttribute("readonly", ""), u.style.position = "absolute", u.style.left = "-9999px", document.body.appendChild(u), u.select(), document.execCommand("copy"), document.body.removeChild(u);
         }
-        n.value = !0, s !== null && window.clearTimeout(s), s = window.setTimeout(() => {
-          n.value = !1;
-        }, Se);
+        a.value = !0, n !== null && window.clearTimeout(n), n = window.setTimeout(() => {
+          a.value = !1;
+        }, Te);
       } catch {
       }
     }
-    return (i, o) => (l(), r("div", k({
-      class: a.value,
+    return (p, u) => (l(), r("div", d({
+      class: t.value,
       "data-strand-copy": e.copyable ? "" : void 0
-    }, i.$attrs), [
-      e.language ? (l(), r("span", je, b(e.language), 1)) : y("", !0),
-      m("pre", Ne, [
-        m("code", null, b(e.code), 1)
+    }, p.$attrs), [
+      e.language ? (l(), r("span", Ce, h(e.language), 1)) : g("", !0),
+      v("pre", we, [
+        v("code", null, h(e.code), 1)
       ]),
       e.copyable ? (l(), r("button", {
         key: 1,
         type: "button",
-        class: _(["strand-code-block__copy", n.value ? "strand-code-block__copy--copied" : ""]),
-        "aria-label": n.value ? "Copied" : "Copy code to clipboard",
-        onClick: d
-      }, [...o[0] || (o[0] = [
-        m("svg", {
+        class: $(["strand-code-block__copy", a.value ? "strand-code-block__copy--copied" : ""]),
+        "aria-label": a.value ? "Copied" : "Copy code to clipboard",
+        onClick: f
+      }, [...u[0] || (u[0] = [
+        v("svg", {
           class: "strand-code-block__copy-icon strand-code-block__copy-icon--clipboard",
           viewBox: "0 0 16 16",
           fill: "none",
@@ -734,9 +734,9 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
           "aria-hidden": "true",
           focusable: "false"
         }, [
-          m("path", { d: "M6 3 V2 a1 1 0 0 1 1-1 h2 a1 1 0 0 1 1 1 v1 M5 3 h6 a1 1 0 0 1 1 1 v9 a1 1 0 0 1 -1 1 h-6 a1 1 0 0 1 -1 -1 v-9 a1 1 0 0 1 1 -1 z" })
+          v("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),
-        m("svg", {
+        v("svg", {
           class: "strand-code-block__copy-icon strand-code-block__copy-icon--check",
           viewBox: "0 0 16 16",
           fill: "none",
@@ -747,12 +747,12 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
           "aria-hidden": "true",
           focusable: "false"
         }, [
-          m("path", { d: "M3 8 l3 3 l7 -7" })
+          v("path", { d: "M3 8 l3 3 l7 -7" })
         ], -1)
-      ])], 10, Te)) : y("", !0)
-    ], 16, xe));
+      ])], 10, Se)) : g("", !0)
+    ], 16, je));
   }
-}), Ra = /* @__PURE__ */ h({
+}), Oa = /* @__PURE__ */ c({
   __name: "Stack",
   props: {
     direction: { default: "vertical" },
@@ -763,26 +763,26 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-stack",
-        `strand-stack--${t.direction}`,
-        t.align !== "stretch" && `strand-stack--align-${t.align}`,
-        t.justify && `strand-stack--justify-${t.justify}`,
-        t.wrap && "strand-stack--wrap",
-        t.className
+        `strand-stack--${s.direction}`,
+        s.align !== "stretch" && `strand-stack--align-${s.align}`,
+        s.justify && `strand-stack--justify-${s.justify}`,
+        s.wrap && "strand-stack--wrap",
+        s.className
       ].filter(Boolean).join(" ")
-    ), n = f(() => ({
-      gap: `var(--strand-space-${t.gap})`
+    ), a = o(() => ({
+      gap: `var(--strand-space-${s.gap})`
     }));
-    return (s, d) => (l(), r("div", k({
-      class: a.value,
-      style: n.value
-    }, s.$attrs), [
-      $(s.$slots, "default")
+    return (n, f) => (l(), r("div", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), [
+      i(n.$slots, "default")
     ], 16));
   }
-}), Ia = /* @__PURE__ */ h({
+}), Da = /* @__PURE__ */ c({
   __name: "Grid",
   props: {
     columns: { default: 1 },
@@ -790,38 +790,38 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
-      () => ["strand-grid", t.className].filter(Boolean).join(" ")
-    ), n = f(() => ({
-      gridTemplateColumns: `repeat(${t.columns}, 1fr)`,
-      gap: `var(--strand-space-${t.gap})`
+    const s = e, t = o(
+      () => ["strand-grid", s.className].filter(Boolean).join(" ")
+    ), a = o(() => ({
+      gridTemplateColumns: `repeat(${s.columns}, 1fr)`,
+      gap: `var(--strand-space-${s.gap})`
     }));
-    return (s, d) => (l(), r("div", k({
-      class: a.value,
-      style: n.value
-    }, s.$attrs), [
-      $(s.$slots, "default")
+    return (n, f) => (l(), r("div", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), [
+      i(n.$slots, "default")
     ], 16));
   }
-}), Oa = /* @__PURE__ */ h({
+}), za = /* @__PURE__ */ c({
   __name: "Container",
   props: {
     size: { default: "default" },
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-container",
-        `strand-container--${t.size}`,
-        t.className
+        `strand-container--${s.size}`,
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      $(n.$slots, "default")
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
     ], 16));
   }
-}), Re = { class: "strand-divider__label" }, Ea = /* @__PURE__ */ h({
+}), Fe = { class: "strand-divider__label" }, Ha = /* @__PURE__ */ c({
   __name: "Divider",
   props: {
     direction: { default: "horizontal" },
@@ -829,31 +829,31 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(() => t.direction === "vertical"), n = f(() => !a.value && !!t.label);
-    f(() => !a.value && !t.label);
-    const s = f(() => a.value ? ["strand-divider", "strand-divider--vertical", t.className].filter(Boolean).join(" ") : n.value ? ["strand-divider", "strand-divider--horizontal", "strand-divider--labeled", t.className].filter(Boolean).join(" ") : ["strand-divider", "strand-divider--horizontal", t.className].filter(Boolean).join(" "));
-    return (d, i) => a.value ? (l(), r("div", {
+    const s = e, t = o(() => s.direction === "vertical"), a = o(() => !t.value && !!s.label);
+    o(() => !t.value && !s.label);
+    const n = o(() => t.value ? ["strand-divider", "strand-divider--vertical", s.className].filter(Boolean).join(" ") : a.value ? ["strand-divider", "strand-divider--horizontal", "strand-divider--labeled", s.className].filter(Boolean).join(" ") : ["strand-divider", "strand-divider--horizontal", s.className].filter(Boolean).join(" "));
+    return (f, p) => t.value ? (l(), r("div", {
       key: 0,
-      class: _(s.value),
+      class: $(n.value),
       role: "separator",
       "aria-orientation": "vertical"
-    }, null, 2)) : n.value ? (l(), r("div", {
+    }, null, 2)) : a.value ? (l(), r("div", {
       key: 1,
-      class: _(s.value),
+      class: $(n.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      i[0] || (i[0] = m("span", { class: "strand-divider__line" }, null, -1)),
-      m("span", Re, b(e.label), 1),
-      i[1] || (i[1] = m("span", { class: "strand-divider__line" }, null, -1))
+      p[0] || (p[0] = v("span", { class: "strand-divider__line" }, null, -1)),
+      v("span", Fe, h(e.label), 1),
+      p[1] || (p[1] = v("span", { class: "strand-divider__line" }, null, -1))
     ], 2)) : (l(), r("hr", {
       key: 2,
-      class: _(s.value),
+      class: $(n.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, null, 2));
   }
-}), za = /* @__PURE__ */ h({
+}), Va = /* @__PURE__ */ c({
   __name: "Section",
   props: {
     variant: { default: "standard" },
@@ -862,20 +862,20 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-section",
-        `strand-section--${t.variant}`,
-        `strand-section--bg-${t.background}`,
-        t.borderTop && "strand-section--border-top",
-        t.className
+        `strand-section--${s.variant}`,
+        `strand-section--bg-${s.background}`,
+        s.borderTop && "strand-section--border-top",
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("section", k({ class: a.value }, n.$attrs), [
-      $(n.$slots, "default")
+    return (a, n) => (l(), r("section", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
     ], 16));
   }
-}), La = /* @__PURE__ */ h({
+}), Pa = /* @__PURE__ */ c({
   __name: "InstrumentViewport",
   props: {
     grid: { type: Boolean, default: !1 },
@@ -883,19 +883,19 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-instrument-viewport",
-        t.grid && "strand-instrument-viewport--grid",
-        t.fullBleed && "strand-instrument-viewport--full-bleed",
-        t.className
+        s.grid && "strand-instrument-viewport--grid",
+        s.fullBleed && "strand-instrument-viewport--full-bleed",
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("div", k({ class: a.value }, n.$attrs), [
-      $(n.$slots, "default")
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
     ], 16));
   }
-}), Va = /* @__PURE__ */ h({
+}), Ga = /* @__PURE__ */ c({
   __name: "ScrollReveal",
   props: {
     threshold: { default: 0.1 },
@@ -903,34 +903,34 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = B(null), n = B(!1);
-    let s = null;
-    const d = f(
+    const s = e, t = N(null), a = N(!1);
+    let n = null;
+    const f = o(
       () => [
         "strand-reveal",
-        n.value && "strand-reveal--visible",
-        t.className
+        a.value && "strand-reveal--visible",
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return S(() => {
-      a.value && (s = new IntersectionObserver(
-        (i) => {
-          for (const o of i)
-            o.isIntersecting ? (n.value = !0, t.once && s && a.value && s.unobserve(a.value)) : t.once || (n.value = !1);
+    return F(() => {
+      t.value && (n = new IntersectionObserver(
+        (p) => {
+          for (const u of p)
+            u.isIntersecting ? (a.value = !0, s.once && n && t.value && n.unobserve(t.value)) : s.once || (a.value = !1);
         },
-        { threshold: t.threshold }
-      ), s.observe(a.value));
-    }), N(() => {
-      s && (s.disconnect(), s = null);
-    }), (i, o) => (l(), r("div", k({
+        { threshold: s.threshold }
+      ), n.observe(t.value));
+    }), S(() => {
+      n && (n.disconnect(), n = null);
+    }), (p, u) => (l(), r("div", d({
       ref_key: "elRef",
-      ref: a,
-      class: d.value
-    }, i.$attrs), [
-      $(i.$slots, "default")
+      ref: t,
+      class: f.value
+    }, p.$attrs), [
+      i(p.$slots, "default")
     ], 16));
   }
-}), Ie = ["href"], Da = /* @__PURE__ */ h({
+}), xe = ["href"], Aa = /* @__PURE__ */ c({
   __name: "Link",
   props: {
     href: {},
@@ -939,355 +939,355 @@ const P = ["type", "disabled", "aria-disabled", "aria-busy"], U = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
-      () => ["strand-link", t.variant !== "default" && `strand-link--${t.variant}`, t.className].filter(Boolean).join(" ")
+    const s = e, t = o(
+      () => ["strand-link", s.variant !== "default" && `strand-link--${s.variant}`, s.className].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("a", k({
+    return (a, n) => (l(), r("a", d({
       href: e.href,
-      class: a.value
+      class: t.value
     }, {
       ...e.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
-      ...n.$attrs
+      ...a.$attrs
     }), [
-      $(n.$slots, "default")
-    ], 16, Ie));
+      i(a.$slots, "default")
+    ], 16, xe));
   }
-}), Oe = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Ee = ["id", "aria-labelledby", "hidden"], Ma = /* @__PURE__ */ h({
+}), Re = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Ee = ["id", "aria-labelledby", "hidden"], Ua = /* @__PURE__ */ c({
   __name: "Tabs",
   props: {
     tabs: {},
     activeTab: {}
   },
   emits: ["change"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = B(null), d = f(() => ["strand-tabs"].filter(Boolean).join(" "));
-    function i(c) {
-      var u, p;
-      const v = a.tabs[c];
-      if (v) {
-        n("change", v.id);
-        const g = (u = s.value) == null ? void 0 : u.querySelectorAll('[role="tab"]');
-        (p = g == null ? void 0 : g[c]) == null || p.focus();
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = N(null), f = o(() => ["strand-tabs"].filter(Boolean).join(" "));
+    function p(m) {
+      var _, y;
+      const b = t.tabs[m];
+      if (b) {
+        a("change", b.id);
+        const k = (_ = n.value) == null ? void 0 : _.querySelectorAll('[role="tab"]');
+        (y = k == null ? void 0 : k[m]) == null || y.focus();
       }
     }
-    function o(c) {
-      const v = a.tabs.findIndex((p) => p.id === a.activeTab);
-      let u = null;
-      switch (c.key) {
+    function u(m) {
+      const b = t.tabs.findIndex((y) => y.id === t.activeTab);
+      let _ = null;
+      switch (m.key) {
         case "ArrowRight":
-          u = (v + 1) % a.tabs.length;
+          _ = (b + 1) % t.tabs.length;
           break;
         case "ArrowLeft":
-          u = (v - 1 + a.tabs.length) % a.tabs.length;
+          _ = (b - 1 + t.tabs.length) % t.tabs.length;
           break;
         case "Home":
-          u = 0;
+          _ = 0;
           break;
         case "End":
-          u = a.tabs.length - 1;
+          _ = t.tabs.length - 1;
           break;
         default:
           return;
       }
-      c.preventDefault(), i(u);
+      m.preventDefault(), p(_);
     }
-    return (c, v) => (l(), r("div", {
-      class: _(d.value)
+    return (m, b) => (l(), r("div", {
+      class: $(f.value)
     }, [
-      m("div", {
+      v("div", {
         ref_key: "tablistRef",
-        ref: s,
+        ref: n,
         role: "tablist",
-        onKeydown: o
+        onKeydown: u
       }, [
-        (l(!0), r(w, null, C(e.tabs, (u) => (l(), r("button", {
-          key: u.id,
-          id: `tab-${u.id}`,
+        (l(!0), r(B, null, L(e.tabs, (_) => (l(), r("button", {
+          key: _.id,
+          id: `tab-${_.id}`,
           role: "tab",
           type: "button",
-          class: _([
+          class: $([
             "strand-tabs__tab",
-            u.id === e.activeTab && "strand-tabs__tab--active"
+            _.id === e.activeTab && "strand-tabs__tab--active"
           ].filter(Boolean).join(" ")),
-          "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)
-        }, b(u.label), 11, Oe))), 128))
+          "aria-selected": _.id === e.activeTab ? "true" : "false",
+          "aria-controls": `panel-${_.id}`,
+          tabindex: _.id === e.activeTab ? 0 : -1,
+          onClick: (y) => a("change", _.id)
+        }, h(_.label), 11, Re))), 128))
       ], 544),
-      (l(!0), r(w, null, C(e.tabs, (u) => (l(), r("div", {
-        key: u.id,
-        id: `panel-${u.id}`,
+      (l(!0), r(B, null, L(e.tabs, (_) => (l(), r("div", {
+        key: _.id,
+        id: `panel-${_.id}`,
         role: "tabpanel",
-        "aria-labelledby": `tab-${u.id}`,
-        hidden: u.id !== e.activeTab || void 0,
+        "aria-labelledby": `tab-${_.id}`,
+        hidden: _.id !== e.activeTab || void 0,
         tabindex: 0
       }, [
-        $(c.$slots, `panel-${u.id}`)
+        i(m.$slots, `panel-${_.id}`)
       ], 8, Ee))), 128))
     ], 2));
   }
-}), ze = { class: "strand-breadcrumb__list" }, Le = {
+}), Me = { class: "strand-breadcrumb__list" }, Ie = {
   key: 0,
   class: "strand-breadcrumb__separator",
   "aria-hidden": "true"
-}, Ve = {
+}, Oe = {
   key: 1,
   class: "strand-breadcrumb__current",
   "aria-current": "page"
-}, De = ["href"], Aa = /* @__PURE__ */ h({
+}, De = ["href"], Ka = /* @__PURE__ */ c({
   __name: "Breadcrumb",
   props: {
     items: {},
     separator: { default: "/" }
   },
   setup(e) {
-    const t = f(
+    const s = o(
       () => ["strand-breadcrumb"].filter(Boolean).join(" ")
     );
-    return (a, n) => (l(), r("nav", {
+    return (t, a) => (l(), r("nav", {
       "aria-label": "Breadcrumb",
-      class: _(t.value)
+      class: $(s.value)
     }, [
-      m("ol", ze, [
-        (l(!0), r(w, null, C(e.items, (s, d) => (l(), r("li", {
-          key: `${s.label}-${d}`,
+      v("ol", Me, [
+        (l(!0), r(B, null, L(e.items, (n, f) => (l(), r("li", {
+          key: `${n.label}-${f}`,
           class: "strand-breadcrumb__item"
         }, [
-          d > 0 ? (l(), r("span", Le, b(e.separator), 1)) : y("", !0),
-          d === e.items.length - 1 ? (l(), r("span", Ve, b(s.label), 1)) : (l(), r("a", {
+          f > 0 ? (l(), r("span", Ie, h(e.separator), 1)) : g("", !0),
+          f === e.items.length - 1 ? (l(), r("span", Oe, h(n.label), 1)) : (l(), r("a", {
             key: 2,
-            href: s.href,
+            href: n.href,
             class: "strand-breadcrumb__link"
-          }, b(s.label), 9, De))
+          }, h(n.label), 9, De))
         ]))), 128))
       ])
     ], 2));
   }
-}), Me = { class: "strand-nav__inner" }, Ae = {
+}), ze = { class: "strand-nav__inner" }, He = {
   key: 0,
   class: "strand-nav__logo"
-}, Fe = { class: "strand-nav__items" }, Ke = ["href", "aria-current"], Pe = {
+}, Ve = { class: "strand-nav__items" }, Pe = ["href", "aria-current"], Ge = {
   key: 1,
   class: "strand-nav__actions"
-}, Ue = ["aria-expanded", "aria-label"], qe = {
+}, Ae = ["aria-expanded", "aria-label"], Ue = {
   key: 0,
   class: "strand-nav__mobile-menu"
-}, Ge = ["href", "aria-current"], Fa = /* @__PURE__ */ h({
+}, Ke = ["href", "aria-current"], qa = /* @__PURE__ */ c({
   __name: "Nav",
   props: {
     items: { default: () => [] },
     glass: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, a = B(!1);
-    function n() {
-      a.value = !a.value;
+    const s = e, t = N(!1);
+    function a() {
+      t.value = !t.value;
     }
-    function s(i) {
-      i ? document.body.classList.add("strand-glass-nav-active") : document.body.classList.remove("strand-glass-nav-active");
+    function n(p) {
+      p ? document.body.classList.add("strand-glass-nav-active") : document.body.classList.remove("strand-glass-nav-active");
     }
-    S(() => s(t.glass)), N(() => document.body.classList.remove("strand-glass-nav-active")), T(() => t.glass, s);
-    const d = f(() => ["strand-nav", t.glass && "strand-nav--glass"].filter(Boolean).join(" "));
-    return (i, o) => (l(), r("nav", {
-      class: _(d.value),
+    F(() => n(s.glass)), S(() => document.body.classList.remove("strand-glass-nav-active")), T(() => s.glass, n);
+    const f = o(() => ["strand-nav", s.glass && "strand-nav--glass"].filter(Boolean).join(" "));
+    return (p, u) => (l(), r("nav", {
+      class: $(f.value),
       "aria-label": "Main navigation"
     }, [
-      m("div", Me, [
-        i.$slots.logo ? (l(), r("div", Ae, [
-          $(i.$slots, "logo")
-        ])) : y("", !0),
-        m("div", Fe, [
-          (l(!0), r(w, null, C(e.items, (c) => (l(), r("a", {
-            key: c.href,
-            href: c.href,
-            class: _([
+      v("div", ze, [
+        p.$slots.logo ? (l(), r("div", He, [
+          i(p.$slots, "logo")
+        ])) : g("", !0),
+        v("div", Ve, [
+          (l(!0), r(B, null, L(e.items, (m) => (l(), r("a", {
+            key: m.href,
+            href: m.href,
+            class: $([
               "strand-nav__link",
-              c.active && "strand-nav__link--active"
+              m.active && "strand-nav__link--active"
             ].filter(Boolean).join(" ")),
-            "aria-current": c.active ? "page" : void 0
-          }, b(c.label), 11, Ke))), 128))
+            "aria-current": m.active ? "page" : void 0
+          }, h(m.label), 11, Pe))), 128))
         ]),
-        i.$slots.actions ? (l(), r("div", Pe, [
-          $(i.$slots, "actions")
-        ])) : y("", !0),
-        m("button", {
+        p.$slots.actions ? (l(), r("div", Ge, [
+          i(p.$slots, "actions")
+        ])) : g("", !0),
+        v("button", {
           type: "button",
           class: "strand-nav__hamburger",
-          "aria-expanded": a.value ? "true" : "false",
-          "aria-label": a.value ? "Close menu" : "Menu",
-          onClick: n
-        }, [...o[0] || (o[0] = [
-          m("span", {
+          "aria-expanded": t.value ? "true" : "false",
+          "aria-label": t.value ? "Close menu" : "Menu",
+          onClick: a
+        }, [...u[0] || (u[0] = [
+          v("span", {
             class: "strand-nav__hamburger-icon",
             "aria-hidden": "true"
           }, null, -1)
-        ])], 8, Ue)
+        ])], 8, Ae)
       ]),
-      a.value ? (l(), r("div", qe, [
-        (l(!0), r(w, null, C(e.items, (c) => (l(), r("a", {
-          key: c.href,
-          href: c.href,
-          class: _([
+      t.value ? (l(), r("div", Ue, [
+        (l(!0), r(B, null, L(e.items, (m) => (l(), r("a", {
+          key: m.href,
+          href: m.href,
+          class: $([
             "strand-nav__mobile-link",
-            c.active && "strand-nav__mobile-link--active"
+            m.active && "strand-nav__mobile-link--active"
           ].filter(Boolean).join(" ")),
-          "aria-current": c.active ? "page" : void 0
-        }, b(c.label), 11, Ge))), 128))
-      ])) : y("", !0)
+          "aria-current": m.active ? "page" : void 0
+        }, h(m.label), 11, Ke))), 128))
+      ])) : g("", !0)
     ], 2));
   }
-}), We = ["aria-live"], He = { class: "strand-toast__status" }, Ze = { class: "strand-toast__message" }, Ka = /* @__PURE__ */ h({
+}), qe = ["aria-live"], We = { class: "strand-toast__status" }, Je = { class: "strand-toast__message" }, Wa = /* @__PURE__ */ c({
   __name: "Toast",
   props: {
     status: { default: "info" },
     message: {}
   },
   emits: ["dismiss"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
-      () => a.status === "error" || a.status === "warning"
-    ), d = f(
-      () => ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ")
-    ), i = {
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
+      () => t.status === "error" || t.status === "warning"
+    ), f = o(
+      () => ["strand-toast", `strand-toast--${t.status}`].filter(Boolean).join(" ")
+    ), p = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, o = f(() => i[a.status] ?? a.status.toUpperCase());
-    return (c, v) => (l(), r("div", {
-      class: _(d.value),
+    }, u = o(() => p[t.status] ?? t.status.toUpperCase());
+    return (m, b) => (l(), r("div", {
+      class: $(f.value),
       role: "status",
-      "aria-live": s.value ? "assertive" : "polite"
+      "aria-live": n.value ? "assertive" : "polite"
     }, [
-      m("span", He, b(o.value), 1),
-      m("span", Ze, b(e.message), 1),
-      m("button", {
+      v("span", We, h(u.value), 1),
+      v("span", Je, h(e.message), 1),
+      v("button", {
         type: "button",
         class: "strand-toast__dismiss",
         "aria-label": "Dismiss",
-        onClick: v[0] || (v[0] = (u) => n("dismiss"))
+        onClick: b[0] || (b[0] = (_) => a("dismiss"))
       }, " × ")
-    ], 10, We));
+    ], 10, qe));
   }
 });
 /*! Strand Vue | MIT License | dillingerstaffing.com */
 const D = Symbol("StrandToast");
-function Pa() {
-  const e = A(D);
+function Ja() {
+  const e = H(D);
   if (!e)
     throw new Error("useToast must be used within a ToastProvider");
   return e;
 }
-const Je = {
+const Ze = {
   key: 0,
   class: "strand-toast__container"
-}, Qe = ["aria-live"], Xe = { class: "strand-toast__status" }, Ye = { class: "strand-toast__message" }, ea = ["onClick"], Ua = /* @__PURE__ */ h({
+}, Qe = ["aria-live"], Xe = { class: "strand-toast__status" }, Ye = { class: "strand-toast__message" }, ea = ["onClick"], Za = /* @__PURE__ */ c({
   __name: "ToastProvider",
   setup(e) {
-    let t = 0;
-    const a = B([]), n = /* @__PURE__ */ new Map();
-    function s(v) {
-      const u = n.get(v);
-      u !== void 0 && (clearTimeout(u), n.delete(v)), a.value = a.value.filter((p) => p.id !== v);
+    let s = 0;
+    const t = N([]), a = /* @__PURE__ */ new Map();
+    function n(b) {
+      const _ = a.get(b);
+      _ !== void 0 && (clearTimeout(_), a.delete(b)), t.value = t.value.filter((y) => y.id !== b);
     }
-    function d(v) {
-      const u = {
-        id: ++t,
-        message: v.message,
-        status: v.status ?? "info",
-        duration: v.duration ?? 5e3
+    function f(b) {
+      const _ = {
+        id: ++s,
+        message: b.message,
+        status: b.status ?? "info",
+        duration: b.duration ?? 5e3
       };
-      if (a.value = [...a.value, u], u.duration > 0) {
-        const p = setTimeout(() => {
-          s(u.id);
-        }, u.duration);
-        n.set(u.id, p);
+      if (t.value = [...t.value, _], _.duration > 0) {
+        const y = setTimeout(() => {
+          n(_.id);
+        }, _.duration);
+        a.set(_.id, y);
       }
     }
-    F(D, { toast: d }), N(() => {
-      for (const v of n.values())
-        clearTimeout(v);
-      n.clear();
+    V(D, { toast: f }), S(() => {
+      for (const b of a.values())
+        clearTimeout(b);
+      a.clear();
     });
-    function i(v) {
-      return v === "error" || v === "warning";
+    function p(b) {
+      return b === "error" || b === "warning";
     }
-    const o = {
+    const u = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
     };
-    function c(v) {
-      return o[v] ?? v.toUpperCase();
+    function m(b) {
+      return u[b] ?? b.toUpperCase();
     }
-    return (v, u) => (l(), r(w, null, [
-      $(v.$slots, "default"),
-      a.value.length > 0 ? (l(), r("div", Je, [
-        (l(!0), r(w, null, C(a.value, (p) => (l(), r("div", {
-          key: p.id,
-          class: _(["strand-toast", `strand-toast--${p.status}`].join(" ")),
+    return (b, _) => (l(), r(B, null, [
+      i(b.$slots, "default"),
+      t.value.length > 0 ? (l(), r("div", Ze, [
+        (l(!0), r(B, null, L(t.value, (y) => (l(), r("div", {
+          key: y.id,
+          class: $(["strand-toast", `strand-toast--${y.status}`].join(" ")),
           role: "status",
-          "aria-live": i(p.status) ? "assertive" : "polite"
+          "aria-live": p(y.status) ? "assertive" : "polite"
         }, [
-          m("span", Xe, b(c(p.status)), 1),
-          m("span", Ye, b(p.message), 1),
-          m("button", {
+          v("span", Xe, h(m(y.status)), 1),
+          v("span", Ye, h(y.message), 1),
+          v("button", {
             type: "button",
             class: "strand-toast__dismiss",
             "aria-label": "Dismiss",
-            onClick: (g) => s(p.id)
+            onClick: (k) => n(y.id)
           }, " × ", 8, ea)
         ], 10, Qe))), 128))
-      ])) : y("", !0)
+      ])) : g("", !0)
     ], 64));
   }
-}), aa = ["role"], ta = { class: "strand-alert__status" }, sa = { class: "strand-alert__content" }, qa = /* @__PURE__ */ h({
+}), aa = ["role"], sa = { class: "strand-alert__status" }, ta = { class: "strand-alert__content" }, Qa = /* @__PURE__ */ c({
   __name: "Alert",
   props: {
     status: { default: "info" },
     dismissible: { type: Boolean, default: !1 }
   },
   emits: ["dismiss"],
-  setup(e, { emit: t }) {
-    const a = e, n = t, s = f(
-      () => a.status === "error" || a.status === "warning" ? "alert" : "status"
-    ), d = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s, n = o(
+      () => t.status === "error" || t.status === "warning" ? "alert" : "status"
+    ), f = o(
       () => [
         "strand-alert",
-        `strand-alert--${a.status}`
+        `strand-alert--${t.status}`
       ].filter(Boolean).join(" ")
-    ), i = {
+    ), p = {
       info: "INFO",
       success: "COMPLETE",
       warning: "WARNING",
       error: "ERROR"
-    }, o = f(() => i[a.status] ?? a.status.toUpperCase());
-    function c() {
-      n("dismiss");
+    }, u = o(() => p[t.status] ?? t.status.toUpperCase());
+    function m() {
+      a("dismiss");
     }
-    return (v, u) => (l(), r("div", {
-      class: _(d.value),
-      role: s.value
+    return (b, _) => (l(), r("div", {
+      class: $(f.value),
+      role: n.value
     }, [
-      m("span", ta, b(o.value), 1),
-      m("div", sa, [
-        $(v.$slots, "default")
+      v("span", sa, h(u.value), 1),
+      v("div", ta, [
+        i(b.$slots, "default")
       ]),
       e.dismissible ? (l(), r("button", {
         key: 0,
         type: "button",
         class: "strand-alert__dismiss",
         "aria-label": "Dismiss",
-        onClick: c
-      }, " × ")) : y("", !0)
+        onClick: m
+      }, " × ")) : g("", !0)
     ], 10, aa));
   }
 }), na = ["aria-labelledby"], la = {
   key: 0,
   class: "strand-dialog__header"
-}, ra = { class: "strand-dialog__body" }, L = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Ga = /* @__PURE__ */ h({
+}, ra = { class: "strand-dialog__body" }, I = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Xa = /* @__PURE__ */ c({
   __name: "Dialog",
   props: {
     open: { type: Boolean },
@@ -1296,83 +1296,83 @@ const Je = {
     closeOnEscape: { type: Boolean, default: !0 }
   },
   emits: ["close"],
-  setup(e, { emit: t }) {
-    const a = e, n = t;
-    let s = 0;
-    const d = `strand-dialog-title-${++s}`, i = B(null);
-    let o = null, c = "";
-    const v = f(
+  setup(e, { emit: s }) {
+    const t = e, a = s;
+    let n = 0;
+    const f = `strand-dialog-title-${++n}`, p = N(null);
+    let u = null, m = "";
+    const b = o(
       () => ["strand-dialog__panel"].filter(Boolean).join(" ")
     );
-    function u(g) {
-      if (g.key === "Escape" && a.closeOnEscape) {
-        g.stopPropagation(), n("close");
+    function _(k) {
+      if (k.key === "Escape" && t.closeOnEscape) {
+        k.stopPropagation(), a("close");
         return;
       }
-      if (g.key === "Tab") {
-        const x = i.value;
-        if (!x) return;
-        const j = Array.from(
-          x.querySelectorAll(L)
+      if (k.key === "Tab") {
+        const j = p.value;
+        if (!j) return;
+        const C = Array.from(
+          j.querySelectorAll(I)
         );
-        if (j.length === 0) return;
-        const E = j[0], z = j[j.length - 1];
-        g.shiftKey ? document.activeElement === E && (g.preventDefault(), z.focus()) : document.activeElement === z && (g.preventDefault(), E.focus());
+        if (C.length === 0) return;
+        const E = C[0], M = C[C.length - 1];
+        k.shiftKey ? document.activeElement === E && (k.preventDefault(), M.focus()) : document.activeElement === M && (k.preventDefault(), E.focus());
       }
     }
-    function p(g) {
-      a.closeOnOutsideClick && g.target === g.currentTarget && n("close");
+    function y(k) {
+      t.closeOnOutsideClick && k.target === k.currentTarget && a("close");
     }
     return T(
-      () => a.open,
-      async (g) => {
-        if (g) {
-          o = document.activeElement, c = document.body.style.overflow, document.body.style.overflow = "hidden", await K();
-          const x = i.value;
-          if (x) {
-            const j = x.querySelectorAll(L);
-            j.length > 0 ? j[0].focus() : x.focus();
+      () => t.open,
+      async (k) => {
+        if (k) {
+          u = document.activeElement, m = document.body.style.overflow, document.body.style.overflow = "hidden", await P();
+          const j = p.value;
+          if (j) {
+            const C = j.querySelectorAll(I);
+            C.length > 0 ? C[0].focus() : j.focus();
           }
         } else
-          document.body.style.overflow = c, o && o instanceof HTMLElement && o.focus();
+          document.body.style.overflow = m, u && u instanceof HTMLElement && u.focus();
       },
       { immediate: !0 }
-    ), N(() => {
-      a.open && (document.body.style.overflow = c);
-    }), (g, x) => e.open ? (l(), r("div", {
+    ), S(() => {
+      t.open && (document.body.style.overflow = m);
+    }), (k, j) => e.open ? (l(), r("div", {
       key: 0,
       class: "strand-dialog__backdrop",
-      onClick: p,
-      onKeydown: u
+      onClick: y,
+      onKeydown: _
     }, [
-      m("div", {
+      v("div", {
         ref_key: "panelRef",
-        ref: i,
-        class: _(v.value),
+        ref: p,
+        class: $(b.value),
         role: "dialog",
         "aria-modal": "true",
-        "aria-labelledby": e.title ? d : void 0,
+        "aria-labelledby": e.title ? f : void 0,
         tabindex: -1
       }, [
         e.title ? (l(), r("div", la, [
-          m("h2", {
-            id: d,
+          v("h2", {
+            id: f,
             class: "strand-dialog__title"
-          }, b(e.title), 1)
-        ])) : y("", !0),
-        m("button", {
+          }, h(e.title), 1)
+        ])) : g("", !0),
+        v("button", {
           type: "button",
           class: "strand-dialog__close",
           "aria-label": "Close",
-          onClick: x[0] || (x[0] = (j) => n("close"))
+          onClick: j[0] || (j[0] = (C) => a("close"))
         }, " × "),
-        m("div", ra, [
-          $(g.$slots, "default")
+        v("div", ra, [
+          i(k.$slots, "default")
         ])
       ], 10, na)
-    ], 32)) : y("", !0);
+    ], 32)) : g("", !0);
   }
-}), oa = ["aria-hidden"], Wa = /* @__PURE__ */ h({
+}), oa = ["aria-hidden"], Ya = /* @__PURE__ */ c({
   __name: "Tooltip",
   props: {
     content: {},
@@ -1380,48 +1380,48 @@ const Je = {
     delay: { default: 200 }
   },
   setup(e) {
-    const t = e;
-    let a = 0;
-    const n = `strand-tooltip-${++a}`, s = B(!1);
-    let d = null;
-    function i() {
-      d = setTimeout(() => {
-        s.value = !0;
-      }, t.delay);
+    const s = e;
+    let t = 0;
+    const a = `strand-tooltip-${++t}`, n = N(!1);
+    let f = null;
+    function p() {
+      f = setTimeout(() => {
+        n.value = !0;
+      }, s.delay);
     }
-    function o() {
-      d !== null && (clearTimeout(d), d = null), s.value = !1;
+    function u() {
+      f !== null && (clearTimeout(f), f = null), n.value = !1;
     }
-    N(() => {
-      d !== null && clearTimeout(d);
+    S(() => {
+      f !== null && clearTimeout(f);
     });
-    const c = f(
+    const m = o(
       () => ["strand-tooltip__wrapper"].filter(Boolean).join(" ")
-    ), v = f(
+    ), b = o(
       () => [
         "strand-tooltip",
-        `strand-tooltip--${t.position}`,
-        s.value && "strand-tooltip--visible"
+        `strand-tooltip--${s.position}`,
+        n.value && "strand-tooltip--visible"
       ].filter(Boolean).join(" ")
     );
-    return (u, p) => (l(), r("span", {
-      class: _(c.value),
-      "aria-describedby": n,
-      onMouseenter: i,
-      onMouseleave: o,
-      onFocus: i,
-      onBlur: o
+    return (_, y) => (l(), r("span", {
+      class: $(m.value),
+      "aria-describedby": a,
+      onMouseenter: p,
+      onMouseleave: u,
+      onFocus: p,
+      onBlur: u
     }, [
-      $(u.$slots, "default"),
-      m("span", {
-        id: n,
-        class: _(v.value),
+      i(_.$slots, "default"),
+      v("span", {
+        id: a,
+        class: $(b.value),
         role: "tooltip",
-        "aria-hidden": !s.value
-      }, b(e.content), 11, oa)
+        "aria-hidden": !n.value
+      }, h(e.content), 11, oa)
     ], 34));
   }
-}), ia = ["aria-valuenow"], da = ["width", "height", "viewBox"], ca = ["cx", "cy", "r"], ua = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], R = 3, Ha = /* @__PURE__ */ h({
+}), ca = ["aria-valuenow"], ia = ["width", "height", "viewBox"], da = ["cx", "cy", "r"], ua = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], x = 3, es = /* @__PURE__ */ c({
   __name: "Progress",
   props: {
     variant: { default: "bar" },
@@ -1430,84 +1430,84 @@ const Je = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = { sm: 24, md: 40, lg: 56 }, n = f(() => t.value != null), s = f(
+    const s = e, t = { sm: 24, md: 40, lg: 56 }, a = o(() => s.value != null), n = o(
       () => [
         "strand-progress",
-        `strand-progress--${t.variant}`,
-        `strand-progress--${t.size}`,
-        !n.value && "strand-progress--indeterminate",
-        t.className
+        `strand-progress--${s.variant}`,
+        `strand-progress--${s.size}`,
+        !a.value && "strand-progress--indeterminate",
+        s.className
       ].filter(Boolean).join(" ")
-    ), d = f(() => a[t.size] ?? a.md), i = f(() => (d.value - R) / 2), o = f(() => 2 * Math.PI * i.value), c = f(
-      () => n.value ? o.value - o.value * t.value / 100 : 0
+    ), f = o(() => t[s.size] ?? t.md), p = o(() => (f.value - x) / 2), u = o(() => 2 * Math.PI * p.value), m = o(
+      () => a.value ? u.value - u.value * s.value / 100 : 0
     );
-    return (v, u) => (l(), r("div", k({
-      class: s.value,
+    return (b, _) => (l(), r("div", d({
+      class: n.value,
       role: "progressbar",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": n.value ? e.value : void 0
-    }, v.$attrs), [
+      "aria-valuenow": a.value ? e.value : void 0
+    }, b.$attrs), [
       e.variant === "ring" ? (l(), r("svg", {
         key: 0,
-        width: d.value,
-        height: d.value,
-        viewBox: `0 0 ${d.value} ${d.value}`,
+        width: f.value,
+        height: f.value,
+        viewBox: `0 0 ${f.value} ${f.value}`,
         class: "strand-progress__ring"
       }, [
-        m("circle", {
-          cx: d.value / 2,
-          cy: d.value / 2,
-          r: i.value,
+        v("circle", {
+          cx: f.value / 2,
+          cy: f.value / 2,
+          r: p.value,
           fill: "none",
-          "stroke-width": R,
+          "stroke-width": x,
           class: "strand-progress__track"
-        }, null, 8, ca),
-        m("circle", {
-          cx: d.value / 2,
-          cy: d.value / 2,
-          r: i.value,
+        }, null, 8, da),
+        v("circle", {
+          cx: f.value / 2,
+          cy: f.value / 2,
+          r: p.value,
           fill: "none",
-          "stroke-width": R,
-          "stroke-dasharray": o.value,
-          "stroke-dashoffset": n.value ? c.value : void 0,
+          "stroke-width": x,
+          "stroke-dasharray": u.value,
+          "stroke-dashoffset": a.value ? m.value : void 0,
           "stroke-linecap": "round",
           class: "strand-progress__fill",
-          transform: `rotate(-90 ${d.value / 2} ${d.value / 2})`
+          transform: `rotate(-90 ${f.value / 2} ${f.value / 2})`
         }, null, 8, ua)
-      ], 8, da)) : (l(), r("div", {
+      ], 8, ia)) : (l(), r("div", {
         key: 1,
         class: "strand-progress__fill",
-        style: O(n.value ? { width: `${e.value}%` } : void 0)
+        style: R(a.value ? { width: `${e.value}%` } : void 0)
       }, null, 4))
-    ], 16, ia));
+    ], 16, ca));
   }
-}), Za = /* @__PURE__ */ h({
+}), as = /* @__PURE__ */ c({
   __name: "Spinner",
   props: {
     size: { default: "md" },
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
+    const s = e, t = o(
       () => [
         "strand-spinner",
-        `strand-spinner--${t.size}`,
-        t.className
+        `strand-spinner--${s.size}`,
+        s.className
       ].filter(Boolean).join(" ")
     );
-    return (n, s) => (l(), r("span", k({
-      class: a.value,
+    return (a, n) => (l(), r("span", d({
+      class: t.value,
       role: "status"
-    }, n.$attrs), [...s[0] || (s[0] = [
-      m("span", {
+    }, a.$attrs), [...n[0] || (n[0] = [
+      v("span", {
         class: "strand-spinner__ring",
         "aria-hidden": "true"
       }, null, -1),
-      m("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
+      v("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
     ])], 16));
   }
-}), Ja = /* @__PURE__ */ h({
+}), ss = /* @__PURE__ */ c({
   __name: "Skeleton",
   props: {
     variant: { default: "text" },
@@ -1516,28 +1516,28 @@ const Je = {
     className: { default: "" }
   },
   setup(e) {
-    const t = e, a = f(
-      () => t.width ?? (t.variant === "text" ? "100%" : void 0)
-    ), n = f(
-      () => t.variant === "circle" ? a.value : t.height
-    ), s = f(
+    const s = e, t = o(
+      () => s.width ?? (s.variant === "text" ? "100%" : void 0)
+    ), a = o(
+      () => s.variant === "circle" ? t.value : s.height
+    ), n = o(
       () => [
         "strand-skeleton",
-        `strand-skeleton--${t.variant}`,
+        `strand-skeleton--${s.variant}`,
         "strand-skeleton--shimmer",
-        t.className
+        s.className
       ].filter(Boolean).join(" ")
-    ), d = f(() => ({
-      width: a.value,
-      height: n.value
+    ), f = o(() => ({
+      width: t.value,
+      height: a.value
     }));
-    return (i, o) => (l(), r("div", k({
-      class: s.value,
+    return (p, u) => (l(), r("div", d({
+      class: n.value,
       "aria-hidden": "true",
-      style: d.value
-    }, i.$attrs), null, 16));
+      style: f.value
+    }, p.$attrs), null, 16));
   }
-}), fa = ["aria-label", "data-value"], va = ["aria-checked", "aria-label", "tabindex", "disabled", "data-star-value", "onClick", "onKeydown", "onMouseenter", "onFocus"], Qa = /* @__PURE__ */ h({
+}), fa = ["aria-label", "data-value"], pa = ["aria-checked", "aria-label", "tabindex", "disabled", "data-star-value", "onClick", "onKeydown", "onMouseenter", "onFocus"], ts = /* @__PURE__ */ c({
   __name: "StarRating",
   props: {
     value: {},
@@ -1547,89 +1547,1130 @@ const Je = {
     ariaLabel: {}
   },
   setup(e) {
-    const t = e, a = B(0), n = f(
+    const s = e, t = N(0), a = o(
       () => [
         "strand-star-rating",
-        `strand-star-rating--${t.size}`,
-        t.readOnly && "strand-star-rating--readonly"
+        `strand-star-rating--${s.size}`,
+        s.readOnly && "strand-star-rating--readonly"
       ].filter(Boolean).join(" ")
-    ), s = f(() => a.value || t.value);
-    function d(o) {
-      var c;
-      t.readOnly || (c = t.onChange) == null || c.call(t, o);
+    ), n = o(() => t.value || s.value);
+    function f(u) {
+      var m;
+      s.readOnly || (m = s.onChange) == null || m.call(s, u);
     }
-    function i(o, c) {
-      t.readOnly || (o.key === " " || o.key === "Enter") && (o.preventDefault(), d(c));
+    function p(u, m) {
+      s.readOnly || (u.key === " " || u.key === "Enter") && (u.preventDefault(), f(m));
     }
-    return (o, c) => (l(), r("div", {
-      class: _(n.value),
+    return (u, m) => (l(), r("div", {
+      class: $(a.value),
       role: "radiogroup",
       "aria-label": e.ariaLabel,
       "data-strand-component": "star-rating",
       "data-value": String(e.value)
     }, [
-      (l(), r(w, null, C(5, (v) => m("button", {
-        key: v,
+      (l(), r(B, null, L(5, (b) => v("button", {
+        key: b,
         type: "button",
-        class: _(`strand-star-rating__star${v <= s.value ? " strand-star-rating__star--active" : ""}`),
+        class: $(`strand-star-rating__star${b <= n.value ? " strand-star-rating__star--active" : ""}`),
         role: "radio",
-        "aria-checked": v === e.value ? "true" : "false",
-        "aria-label": `${v} star${v > 1 ? "s" : ""}`,
+        "aria-checked": b === e.value ? "true" : "false",
+        "aria-label": `${b} star${b > 1 ? "s" : ""}`,
         tabindex: e.readOnly ? -1 : 0,
         disabled: e.readOnly,
-        "data-star-value": String(v),
-        onClick: (u) => d(v),
-        onKeydown: (u) => i(u, v),
-        onMouseenter: (u) => !e.readOnly && (a.value = v),
-        onMouseleave: c[0] || (c[0] = (u) => !e.readOnly && (a.value = 0)),
-        onFocus: (u) => !e.readOnly && (a.value = v),
-        onBlur: c[1] || (c[1] = (u) => !e.readOnly && (a.value = 0))
-      }, [...c[2] || (c[2] = [
-        m("span", {
+        "data-star-value": String(b),
+        onClick: (_) => f(b),
+        onKeydown: (_) => p(_, b),
+        onMouseenter: (_) => !e.readOnly && (t.value = b),
+        onMouseleave: m[0] || (m[0] = (_) => !e.readOnly && (t.value = 0)),
+        onFocus: (_) => !e.readOnly && (t.value = b),
+        onBlur: m[1] || (m[1] = (_) => !e.readOnly && (t.value = 0))
+      }, [...m[2] || (m[2] = [
+        v("span", {
           class: "strand-star-rating__glyph",
           "aria-hidden": "true"
-        }, b("★"), -1)
-      ])], 42, va)), 64))
+        }, h("★"), -1)
+      ])], 42, pa)), 64))
     ], 10, fa));
   }
+}), ns = /* @__PURE__ */ c({
+  __name: "CardSection",
+  props: {
+    header: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(
+      () => [
+        "strand-card__section",
+        s.header ? "strand-card__section--header" : "",
+        s.className
+      ].filter(Boolean).join(" ")
+    );
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ma = { class: "strand-kv__label" }, ls = /* @__PURE__ */ c({
+  __name: "KvEditorial",
+  props: {
+    label: {},
+    value: {},
+    status: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(
+      () => [
+        "strand-kv",
+        "strand-kv--editorial",
+        s.className
+      ].filter(Boolean).join(" ")
+    ), a = o(
+      () => [
+        "strand-kv__value",
+        s.status ? "strand-kv__value--status" : ""
+      ].filter(Boolean).join(" ")
+    );
+    return (n, f) => (l(), r("div", d({ class: t.value }, n.$attrs), [
+      v("span", ma, [
+        i(n.$slots, "label", {}, () => [
+          w(h(e.label), 1)
+        ])
+      ]),
+      v("span", {
+        class: $(a.value)
+      }, [
+        i(n.$slots, "value", {}, () => [
+          w(h(e.value), 1)
+        ])
+      ], 2)
+    ], 16));
+  }
+}), rs = /* @__PURE__ */ c({
+  __name: "LabShell",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), os = /* @__PURE__ */ c({
+  __name: "LabSidebar",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__sidebar", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("aside", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), cs = /* @__PURE__ */ c({
+  __name: "LabSidebarHead",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__sidebar-head", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), is = /* @__PURE__ */ c({
+  __name: "LabSidebarScroll",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__sidebar-scroll", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ds = /* @__PURE__ */ c({
+  __name: "LabBrand",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__brand", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), us = /* @__PURE__ */ c({
+  __name: "LabBrandMark",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__brand-mark", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), fs = /* @__PURE__ */ c({
+  __name: "LabBrandTitle",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__brand-title", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ps = /* @__PURE__ */ c({
+  __name: "LabBrandSub",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__brand-sub", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ms = /* @__PURE__ */ c({
+  __name: "LabSidebarGroup",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__group", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), _s = /* @__PURE__ */ c({
+  __name: "LabSidebarGroupLabel",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__group-label", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), vs = /* @__PURE__ */ c({
+  __name: "LabSidebarGroupList",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__group-list", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("nav", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), _a = ["href"], bs = /* @__PURE__ */ c({
+  __name: "LabSidebarGroupLink",
+  props: {
+    href: { default: "#" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__group-link", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("a", d({
+      class: t.value,
+      href: s.href
+    }, a.$attrs), [
+      n[0] || (n[0] = v("span", { class: "strand-ref-shell__group-dot" }, null, -1)),
+      i(a.$slots, "default")
+    ], 16, _a));
+  }
+}), hs = /* @__PURE__ */ c({
+  __name: "LabSidebarGroupDot",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__group-dot", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), null, 16));
+  }
+}), $s = /* @__PURE__ */ c({
+  __name: "LabMain",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-shell__main", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("main", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ys = /* @__PURE__ */ c({
+  __name: "LabHeader",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("header", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), gs = /* @__PURE__ */ c({
+  __name: "LabHeaderTitle",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header__title", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("h1", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ks = /* @__PURE__ */ c({
+  __name: "LabHeaderLead",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header__lead", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("p", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ns = /* @__PURE__ */ c({
+  __name: "LabHeaderMeta",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header__meta", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Bs = /* @__PURE__ */ c({
+  __name: "LabHeaderMetaItem",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header__meta-item", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ls = /* @__PURE__ */ c({
+  __name: "LabHeaderMetaLabel",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header__meta-label", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), js = /* @__PURE__ */ c({
+  __name: "LabHeaderMetaValue",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-header__meta-value", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Cs = /* @__PURE__ */ c({
+  __name: "LabTaxonomy",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-taxonomy", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ws = /* @__PURE__ */ c({
+  __name: "LabTaxonomyTitle",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-taxonomy__title", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ss = /* @__PURE__ */ c({
+  __name: "LabTaxonomyList",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-taxonomy__list", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("dl", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ts = /* @__PURE__ */ c({
+  __name: "LabSection",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-section", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("section", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Fs = /* @__PURE__ */ c({
+  __name: "LabSectionHead",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-section__head", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), xs = /* @__PURE__ */ c({
+  __name: "LabSectionHeadNote",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-section__head-note", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Rs = /* @__PURE__ */ c({
+  __name: "LabSectionBody",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-section__body", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Es = /* @__PURE__ */ c({
+  __name: "LabExample",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-example", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ms = /* @__PURE__ */ c({
+  __name: "LabExampleMeta",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-example__meta", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Is = /* @__PURE__ */ c({
+  __name: "LabExampleLabel",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-example__label", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Os = /* @__PURE__ */ c({
+  __name: "LabExampleCode",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-example__code", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ds = /* @__PURE__ */ c({
+  __name: "LabExampleDemo",
+  props: {
+    padNone: { type: Boolean, default: !1 },
+    recessed: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(
+      () => [
+        "strand-ref-example__demo",
+        s.padNone ? "strand-ref-example__demo--pad-none" : "",
+        s.recessed ? "strand-ref-example__demo--recessed" : "",
+        s.className
+      ].filter(Boolean).join(" ")
+    );
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), zs = /* @__PURE__ */ c({
+  __name: "LabExampleCaption",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-example__caption", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("p", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Hs = /* @__PURE__ */ c({
+  __name: "LabFrame",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Vs = /* @__PURE__ */ c({
+  __name: "LabFrameChrome",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__chrome", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ps = /* @__PURE__ */ c({
+  __name: "LabFrameDot",
+  props: {
+    color: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__dot", s.className].filter(Boolean).join(" ")), a = o(() => s.color ? { background: s.color } : {});
+    return (n, f) => (l(), r("span", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), null, 16));
+  }
+}), Gs = /* @__PURE__ */ c({
+  __name: "LabFrameTitle",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__title", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), As = /* @__PURE__ */ c({
+  __name: "LabFrameBody",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__body", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), va = ["aria-hidden"], Us = /* @__PURE__ */ c({
+  __name: "LabFrameContent",
+  props: {
+    hidden: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__content", s.className].filter(Boolean).join(" ")), a = o(() => s.hidden ? "true" : void 0);
+    return (n, f) => (l(), r("div", d({
+      class: t.value,
+      "aria-hidden": a.value
+    }, n.$attrs), [
+      i(n.$slots, "default")
+    ], 16, va));
+  }
+}), Ks = /* @__PURE__ */ c({
+  __name: "LabFrameContentHead",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__content-head", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), qs = /* @__PURE__ */ c({
+  __name: "LabFrameActions",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__actions", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Ws = /* @__PURE__ */ c({
+  __name: "LabFrameOverlay",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__overlay", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Js = /* @__PURE__ */ c({
+  __name: "LabFramePanel",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__panel", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({
+      class: t.value,
+      role: "dialog",
+      "aria-modal": "true"
+    }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Zs = /* @__PURE__ */ c({
+  __name: "LabFramePanelHeader",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__panel-header", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Qs = /* @__PURE__ */ c({
+  __name: "LabFramePanelTitle",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__panel-title", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("h2", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ba = ["aria-label"], Xs = /* @__PURE__ */ c({
+  __name: "LabFramePanelClose",
+  props: {
+    ariaLabel: { default: "Close" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__panel-close", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("button", d({
+      type: "button",
+      class: t.value,
+      "aria-label": s.ariaLabel
+    }, a.$attrs), [
+      i(a.$slots, "default", {}, () => [
+        n[0] || (n[0] = w("×", -1))
+      ])
+    ], 16, ba));
+  }
+}), Ys = /* @__PURE__ */ c({
+  __name: "LabFramePanelBody",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__panel-body", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), et = /* @__PURE__ */ c({
+  __name: "LabFramePanelFooter",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-frame__panel-footer", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), at = /* @__PURE__ */ c({
+  __name: "LabGlassStage",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-glass-stage", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), st = /* @__PURE__ */ c({
+  __name: "LabGlassPanel",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-glass-panel", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), tt = /* @__PURE__ */ c({
+  __name: "LabRevealStage",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-reveal-stage", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), nt = /* @__PURE__ */ c({
+  __name: "LabRevealLine",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-reveal-line", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), lt = /* @__PURE__ */ c({
+  __name: "LabTip",
+  props: {
+    pinned: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(
+      () => ["strand-ref-tip", s.pinned ? "strand-ref-tip--pinned" : "", s.className].filter(Boolean).join(" ")
+    );
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), rt = /* @__PURE__ */ c({
+  __name: "LabTipBubble",
+  props: {
+    placement: { default: "top" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(
+      () => ["strand-ref-tip__bubble", `strand-ref-tip__bubble--${s.placement}`, s.className].filter(Boolean).join(" ")
+    );
+    return (a, n) => (l(), r("span", d({
+      class: t.value,
+      role: "tooltip"
+    }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ot = /* @__PURE__ */ c({
+  __name: "LabUtilRow",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-util-row", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ct = /* @__PURE__ */ c({
+  __name: "LabUtilCell",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-util-cell", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), it = /* @__PURE__ */ c({
+  __name: "LabUtilCellCode",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-util-cell__code", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), dt = /* @__PURE__ */ c({
+  __name: "LabUtilCellCaption",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-util-cell__caption", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ut = /* @__PURE__ */ c({
+  __name: "LabUtilCellDemo",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-util-cell__demo", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ft = /* @__PURE__ */ c({
+  __name: "LabUtilCellBlock",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-ref-util-cell__block", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ha = { class: "strand-swatch__name" }, $a = { class: "strand-swatch__hex" }, pt = /* @__PURE__ */ c({
+  __name: "Swatch",
+  props: {
+    name: {},
+    hex: {},
+    background: {},
+    color: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-swatch", s.className].filter(Boolean).join(" ")), a = o(() => ({ background: s.background, color: s.color }));
+    return (n, f) => (l(), r("div", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), [
+      v("span", ha, h(e.name), 1),
+      v("span", $a, h(e.hex), 1)
+    ], 16));
+  }
+}), mt = /* @__PURE__ */ c({
+  __name: "SwatchGrid",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-swatch-grid", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), _t = /* @__PURE__ */ c({
+  __name: "TypeSpecimen",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-type-specimen", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), vt = /* @__PURE__ */ c({
+  __name: "TypeSpecimenMeta",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-type-specimen__meta", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), bt = /* @__PURE__ */ c({
+  __name: "TokenSpecimen",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-token-specimen", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), ht = /* @__PURE__ */ c({
+  __name: "TokenSpecimenGrid",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-token-specimen-grid", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), $t = /* @__PURE__ */ c({
+  __name: "TokenSpecimenSpacer",
+  props: {
+    width: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-token-specimen__spacer", s.className].filter(Boolean).join(" ")), a = o(() => {
+      const n = typeof s.width == "number" ? s.width + "px" : s.width;
+      return n ? { width: n } : {};
+    });
+    return (n, f) => (l(), r("span", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), null, 16));
+  }
+}), yt = /* @__PURE__ */ c({
+  __name: "TokenSpecimenBox",
+  props: {
+    radius: {},
+    shadow: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-token-specimen__box", s.className].filter(Boolean).join(" ")), a = o(() => {
+      const n = {};
+      return s.radius && (n.borderRadius = s.radius), s.shadow && (n.boxShadow = s.shadow), n;
+    });
+    return (n, f) => (l(), r("span", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), null, 16));
+  }
+}), gt = /* @__PURE__ */ c({
+  __name: "ContainerScale",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), kt = /* @__PURE__ */ c({
+  __name: "ContainerScaleRow",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__row", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Nt = /* @__PURE__ */ c({
+  __name: "ContainerScaleLabel",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__label", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Bt = /* @__PURE__ */ c({
+  __name: "ContainerScaleCaption",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__caption", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), Lt = /* @__PURE__ */ c({
+  __name: "ContainerScaleTrack",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__track", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), jt = /* @__PURE__ */ c({
+  __name: "ContainerScaleBar",
+  props: {
+    width: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__bar", s.className].filter(Boolean).join(" ")), a = o(() => s.width ? { width: s.width } : {});
+    return (n, f) => (l(), r("div", d({
+      class: t.value,
+      style: a.value
+    }, n.$attrs), [
+      i(n.$slots, "default")
+    ], 16));
+  }
+}), Ct = /* @__PURE__ */ c({
+  __name: "ContainerScalePx",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__px", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("span", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
+}), wt = /* @__PURE__ */ c({
+  __name: "ContainerScaleAxis",
+  props: {
+    className: { default: "" }
+  },
+  setup(e) {
+    const s = e, t = o(() => ["strand-container-scale__axis", s.className].filter(Boolean).join(" "));
+    return (a, n) => (l(), r("div", d({ class: t.value }, a.$attrs), [
+      i(a.$slots, "default")
+    ], 16));
+  }
 });
 export {
-  qa as Alert,
+  Qa as Alert,
   xa as Avatar,
-  Ca as Badge,
-  Aa as Breadcrumb,
-  ha as Button,
-  wa as Card,
-  ya as Checkbox,
-  Sa as CodeBlock,
-  Oa as Container,
-  Ta as DataReadout,
-  Ga as Dialog,
-  Ea as Divider,
-  Ba as FormField,
-  Ia as Grid,
-  ba as Input,
-  La as InstrumentViewport,
-  Da as Link,
-  Fa as Nav,
-  Ha as Progress,
-  ga as Radio,
-  Va as ScrollReveal,
-  za as Section,
-  pa as Select,
-  Ja as Skeleton,
-  ka as Slider,
-  Za as Spinner,
-  Ra as Stack,
-  Qa as StarRating,
-  $a as Switch,
-  Na as Table,
-  Ma as Tabs,
-  ja as Tag,
-  _a as Textarea,
-  Ka as Toast,
-  Ua as ToastProvider,
-  Wa as Tooltip,
-  Pa as useToast
+  Fa as Badge,
+  Ka as Breadcrumb,
+  ga as Button,
+  Ta as Card,
+  ns as CardSection,
+  La as Checkbox,
+  Ia as CodeBlock,
+  za as Container,
+  gt as ContainerScale,
+  wt as ContainerScaleAxis,
+  jt as ContainerScaleBar,
+  Bt as ContainerScaleCaption,
+  Nt as ContainerScaleLabel,
+  Ct as ContainerScalePx,
+  kt as ContainerScaleRow,
+  Lt as ContainerScaleTrack,
+  Ma as DataReadout,
+  Xa as Dialog,
+  Ha as Divider,
+  Sa as FormField,
+  Da as Grid,
+  ka as Input,
+  Pa as InstrumentViewport,
+  ls as KvEditorial,
+  ds as LabBrand,
+  us as LabBrandMark,
+  ps as LabBrandSub,
+  fs as LabBrandTitle,
+  Es as LabExample,
+  zs as LabExampleCaption,
+  Os as LabExampleCode,
+  Ds as LabExampleDemo,
+  Is as LabExampleLabel,
+  Ms as LabExampleMeta,
+  Hs as LabFrame,
+  qs as LabFrameActions,
+  As as LabFrameBody,
+  Vs as LabFrameChrome,
+  Us as LabFrameContent,
+  Ks as LabFrameContentHead,
+  Ps as LabFrameDot,
+  Ws as LabFrameOverlay,
+  Js as LabFramePanel,
+  Ys as LabFramePanelBody,
+  Xs as LabFramePanelClose,
+  et as LabFramePanelFooter,
+  Zs as LabFramePanelHeader,
+  Qs as LabFramePanelTitle,
+  Gs as LabFrameTitle,
+  st as LabGlassPanel,
+  at as LabGlassStage,
+  ys as LabHeader,
+  ks as LabHeaderLead,
+  Ns as LabHeaderMeta,
+  Bs as LabHeaderMetaItem,
+  Ls as LabHeaderMetaLabel,
+  js as LabHeaderMetaValue,
+  gs as LabHeaderTitle,
+  $s as LabMain,
+  nt as LabRevealLine,
+  tt as LabRevealStage,
+  Ts as LabSection,
+  Rs as LabSectionBody,
+  Fs as LabSectionHead,
+  xs as LabSectionHeadNote,
+  rs as LabShell,
+  os as LabSidebar,
+  ms as LabSidebarGroup,
+  hs as LabSidebarGroupDot,
+  _s as LabSidebarGroupLabel,
+  bs as LabSidebarGroupLink,
+  vs as LabSidebarGroupList,
+  cs as LabSidebarHead,
+  is as LabSidebarScroll,
+  Cs as LabTaxonomy,
+  Ss as LabTaxonomyList,
+  ws as LabTaxonomyTitle,
+  lt as LabTip,
+  rt as LabTipBubble,
+  ct as LabUtilCell,
+  ft as LabUtilCellBlock,
+  dt as LabUtilCellCaption,
+  it as LabUtilCellCode,
+  ut as LabUtilCellDemo,
+  ot as LabUtilRow,
+  Aa as Link,
+  qa as Nav,
+  es as Progress,
+  ja as Radio,
+  Ga as ScrollReveal,
+  Va as Section,
+  Ba as Select,
+  ss as Skeleton,
+  wa as Slider,
+  as as Spinner,
+  Oa as Stack,
+  ts as StarRating,
+  pt as Swatch,
+  mt as SwatchGrid,
+  Ca as Switch,
+  Ea as Table,
+  Ua as Tabs,
+  Ra as Tag,
+  Na as Textarea,
+  Wa as Toast,
+  Za as ToastProvider,
+  bt as TokenSpecimen,
+  yt as TokenSpecimenBox,
+  ht as TokenSpecimenGrid,
+  $t as TokenSpecimenSpacer,
+  Ya as Tooltip,
+  _t as TypeSpecimen,
+  vt as TypeSpecimenMeta,
+  Ja as useToast
 };
 //# sourceMappingURL=index.js.map