@dillingerstaffing/strand-vue 0.4.0

package/dist/index.js

@@ -0,0 +1,1413 @@
+import { defineComponent as h, computed as c, openBlock as n, createElementBlock as l, normalizeClass as b, createCommentVNode as $, createElementVNode as f, normalizeStyle as S, renderSlot as g, useSlots as E, ref as x, watch as z, onMounted as L, toDisplayString as _, Fragment as k, renderList as w, createTextVNode as N, mergeProps as y, inject as A, provide as F, onUnmounted as V, nextTick as K } from "vue";
+const M = ["type", "disabled", "aria-disabled", "aria-busy"], P = {
+  key: 0,
+  class: "strand-btn__spinner",
+  "aria-hidden": "true"
+}, na = /* @__PURE__ */ h({
+  __name: "Button",
+  props: {
+    variant: { default: "primary" },
+    size: { default: "md" },
+    loading: { type: Boolean, default: !1 },
+    iconOnly: { type: Boolean, default: !1 },
+    type: { default: "button" },
+    disabled: { type: Boolean, default: !1 },
+    fullWidth: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(() => a.disabled || a.loading), o = c(
+      () => [
+        "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"
+      ].filter(Boolean).join(" ")
+    );
+    function d(i) {
+      s.value || r("click", i);
+    }
+    return (i, u) => (n(), l("button", {
+      type: e.type,
+      class: b(o.value),
+      disabled: s.value,
+      "aria-disabled": s.value ? "true" : void 0,
+      "aria-busy": e.loading ? "true" : void 0,
+      onClick: d
+    }, [
+      e.loading ? (n(), l("span", P)) : $("", !0),
+      f("span", {
+        class: "strand-btn__content",
+        style: S(e.loading ? { visibility: "hidden" } : void 0)
+      }, [
+        g(i.$slots, "default")
+      ], 4)
+    ], 10, M));
+  }
+}), q = {
+  key: 0,
+  class: "strand-input__leading",
+  "aria-hidden": "true"
+}, U = ["type", "disabled", "aria-invalid", "value"], G = {
+  key: 1,
+  class: "strand-input__trailing",
+  "aria-hidden": "true"
+}, la = /* @__PURE__ */ h({
+  __name: "Input",
+  props: {
+    type: { default: "text" },
+    error: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = E(), o = c(
+      () => [
+        "strand-input",
+        a.error && "strand-input--error",
+        a.disabled && "strand-input--disabled",
+        !!s.leading && "strand-input--has-leading",
+        !!s.trailing && "strand-input--has-trailing"
+      ].filter(Boolean).join(" ")
+    );
+    function d(i) {
+      const u = i.target;
+      r("update:modelValue", u.value);
+    }
+    return (i, u) => (n(), l("div", {
+      class: b(o.value)
+    }, [
+      i.$slots.leading ? (n(), l("span", q, [
+        g(i.$slots, "leading")
+      ])) : $("", !0),
+      f("input", {
+        type: e.type,
+        class: "strand-input__field",
+        disabled: e.disabled,
+        "aria-invalid": e.error ? "true" : void 0,
+        value: e.modelValue,
+        onInput: d
+      }, null, 40, U),
+      i.$slots.trailing ? (n(), l("span", G, [
+        g(i.$slots, "trailing")
+      ])) : $("", !0)
+    ], 2));
+  }
+}), H = ["disabled", "aria-invalid", "maxlength", "value"], W = {
+  key: 0,
+  class: "strand-textarea__count",
+  "aria-live": "polite"
+}, ra = /* @__PURE__ */ h({
+  __name: "Textarea",
+  props: {
+    autoResize: { type: Boolean, default: !1 },
+    showCount: { type: Boolean, default: !1 },
+    error: { type: Boolean, default: !1 },
+    maxLength: {},
+    disabled: { type: Boolean, default: !1 },
+    modelValue: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = x(null), o = c(
+      () => [
+        "strand-textarea",
+        a.error && "strand-textarea--error",
+        a.disabled && "strand-textarea--disabled",
+        a.autoResize && "strand-textarea--auto-resize"
+      ].filter(Boolean).join(" ")
+    ), d = c(
+      () => typeof a.modelValue == "string" ? a.modelValue.length : 0
+    );
+    function i() {
+      a.autoResize && s.value && (s.value.style.height = "auto", s.value.style.height = `${s.value.scrollHeight}px`);
+    }
+    function u(m) {
+      const v = m.target;
+      r("update:modelValue", v.value), i();
+    }
+    return z(() => a.modelValue, () => {
+      i();
+    }), L(() => {
+      i();
+    }), (m, v) => (n(), l("div", {
+      class: b(o.value)
+    }, [
+      f("textarea", {
+        ref_key: "textareaRef",
+        ref: s,
+        class: "strand-textarea__field",
+        disabled: e.disabled,
+        "aria-invalid": e.error ? "true" : void 0,
+        maxlength: e.maxLength,
+        value: e.modelValue,
+        onInput: u
+      }, null, 40, H),
+      e.showCount && e.maxLength != null ? (n(), l("span", W, _(d.value) + "/" + _(e.maxLength), 1)) : $("", !0)
+    ], 2));
+  }
+}), Z = ["value", "disabled", "aria-invalid"], J = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, Q = ["value"], ia = /* @__PURE__ */ h({
+  __name: "Select",
+  props: {
+    options: {},
+    disabled: { type: Boolean, default: !1 },
+    modelValue: {},
+    error: { type: Boolean, default: !1 },
+    placeholder: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => [
+        "strand-select",
+        a.error && "strand-select--error",
+        a.disabled && "strand-select--disabled"
+      ].filter(Boolean).join(" ")
+    );
+    function o(d) {
+      const i = d.target;
+      r("update:modelValue", i.value);
+    }
+    return (d, i) => (n(), l("div", {
+      class: b(s.value)
+    }, [
+      f("select", {
+        class: "strand-select__field",
+        value: e.modelValue,
+        disabled: e.disabled,
+        "aria-invalid": e.error ? "true" : void 0,
+        onChange: o
+      }, [
+        e.placeholder ? (n(), l("option", J, _(e.placeholder), 1)) : $("", !0),
+        (n(!0), l(k, null, w(e.options, (u) => (n(), l("option", {
+          key: u.value,
+          value: u.value
+        }, _(u.label), 9, Q))), 128))
+      ], 40, Z),
+      i[0] || (i[0] = f("span", {
+        class: "strand-select__arrow",
+        "aria-hidden": "true"
+      }, null, -1))
+    ], 2));
+  }
+}), X = ["checked", "disabled", "aria-checked"], Y = {
+  class: "strand-checkbox__control",
+  "aria-hidden": "true"
+}, ee = {
+  key: 0,
+  class: "strand-checkbox__icon",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, ae = {
+  key: 1,
+  class: "strand-checkbox__icon",
+  viewBox: "0 0 16 16",
+  fill: "none"
+}, te = {
+  key: 0,
+  class: "strand-checkbox__label"
+}, oa = /* @__PURE__ */ h({
+  __name: "Checkbox",
+  props: {
+    checked: { type: Boolean, default: !1 },
+    indeterminate: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: {}
+  },
+  emits: ["change"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = x(null);
+    L(() => {
+      s.value && (s.value.indeterminate = a.indeterminate);
+    }), z(() => a.indeterminate, (m) => {
+      s.value && (s.value.indeterminate = m);
+    });
+    const o = c(
+      () => [
+        "strand-checkbox",
+        a.checked && "strand-checkbox--checked",
+        a.indeterminate && "strand-checkbox--indeterminate",
+        a.disabled && "strand-checkbox--disabled"
+      ].filter(Boolean).join(" ")
+    ), d = c(
+      () => a.indeterminate ? "mixed" : a.checked ? "true" : "false"
+    );
+    function i(m) {
+      a.disabled || r("change", m);
+    }
+    function u(m) {
+      m.key === " " && !a.disabled && (m.preventDefault(), s.value && s.value.click());
+    }
+    return (m, v) => (n(), l("label", {
+      class: b(o.value),
+      onKeydown: u
+    }, [
+      f("input", {
+        ref_key: "inputRef",
+        ref: s,
+        type: "checkbox",
+        class: "strand-checkbox__native",
+        checked: e.checked,
+        disabled: e.disabled,
+        "aria-checked": d.value,
+        role: "checkbox",
+        onChange: i
+      }, null, 40, X),
+      f("span", Y, [
+        e.indeterminate ? (n(), l("svg", ee, [...v[0] || (v[0] = [
+          f("line", {
+            x1: "4",
+            y1: "8",
+            x2: "12",
+            y2: "8",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round"
+          }, null, -1)
+        ])])) : e.checked ? (n(), l("svg", ae, [...v[1] || (v[1] = [
+          f("path", {
+            d: "M3.5 8L6.5 11L12.5 5",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, null, -1)
+        ])])) : $("", !0)
+      ]),
+      e.label ? (n(), l("span", te, _(e.label), 1)) : $("", !0)
+    ], 34));
+  }
+}), se = ["checked", "disabled", "name", "value"], ne = {
+  key: 0,
+  class: "strand-radio__label"
+}, da = /* @__PURE__ */ h({
+  __name: "Radio",
+  props: {
+    checked: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: {},
+    name: {},
+    value: {}
+  },
+  emits: ["change"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => [
+        "strand-radio",
+        a.checked && "strand-radio--checked",
+        a.disabled && "strand-radio--disabled"
+      ].filter(Boolean).join(" ")
+    );
+    function o(d) {
+      a.disabled || r("change", d);
+    }
+    return (d, i) => (n(), l("label", {
+      class: b(s.value)
+    }, [
+      f("input", {
+        type: "radio",
+        class: "strand-radio__native",
+        checked: e.checked,
+        disabled: e.disabled,
+        name: e.name,
+        value: e.value,
+        onChange: o
+      }, null, 40, se),
+      i[0] || (i[0] = f("span", {
+        class: "strand-radio__control",
+        "aria-hidden": "true"
+      }, [
+        f("span", { class: "strand-radio__dot" })
+      ], -1)),
+      e.label ? (n(), l("span", ne, _(e.label), 1)) : $("", !0)
+    ], 2));
+  }
+}), le = ["aria-checked", "disabled"], re = {
+  key: 0,
+  class: "strand-switch__label"
+}, ca = /* @__PURE__ */ h({
+  __name: "Switch",
+  props: {
+    checked: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    label: {}
+  },
+  emits: ["change"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => [
+        "strand-switch",
+        a.checked && "strand-switch--checked",
+        a.disabled && "strand-switch--disabled"
+      ].filter(Boolean).join(" ")
+    );
+    function o() {
+      a.disabled || r("change", !a.checked);
+    }
+    function d(i) {
+      (i.key === " " || i.key === "Enter") && !a.disabled && (i.preventDefault(), r("change", !a.checked));
+    }
+    return (i, u) => (n(), l("label", {
+      class: b(s.value)
+    }, [
+      f("button", {
+        type: "button",
+        role: "switch",
+        class: "strand-switch__track",
+        "aria-checked": e.checked ? "true" : "false",
+        disabled: e.disabled,
+        onClick: o,
+        onKeydown: d
+      }, [...u[0] || (u[0] = [
+        f("span", {
+          class: "strand-switch__thumb",
+          "aria-hidden": "true"
+        }, null, -1)
+      ])], 40, le),
+      e.label ? (n(), l("span", re, _(e.label), 1)) : $("", !0)
+    ], 2));
+  }
+}), ie = ["min", "max", "step", "value", "disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow"], ua = /* @__PURE__ */ h({
+  __name: "Slider",
+  props: {
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    modelValue: {},
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => [
+        "strand-slider",
+        a.disabled && "strand-slider--disabled"
+      ].filter(Boolean).join(" ")
+    );
+    function o(d) {
+      const i = d.target;
+      r("update:modelValue", Number(i.value));
+    }
+    return (d, i) => (n(), l("div", {
+      class: b(s.value)
+    }, [
+      f("input", {
+        type: "range",
+        class: "strand-slider__field",
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        value: e.modelValue,
+        disabled: e.disabled,
+        "aria-valuemin": e.min,
+        "aria-valuemax": e.max,
+        "aria-valuenow": e.modelValue,
+        onInput: o
+      }, null, 40, ie)
+    ], 2));
+  }
+}), oe = ["for"], de = {
+  key: 0,
+  class: "strand-form-field__required",
+  "aria-hidden": "true"
+}, ce = { class: "strand-form-field__control" }, ue = ["id"], fe = ["id"], fa = /* @__PURE__ */ h({
+  __name: "FormField",
+  props: {
+    label: {},
+    htmlFor: {},
+    hint: {},
+    error: {},
+    required: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-form-field",
+        t.error && "strand-form-field--error"
+      ].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("div", {
+      class: b(a.value)
+    }, [
+      f("label", {
+        class: "strand-form-field__label",
+        for: e.htmlFor
+      }, [
+        N(_(e.label) + " ", 1),
+        e.required ? (n(), l("span", de, " * ")) : $("", !0)
+      ], 8, oe),
+      f("div", ce, [
+        g(r.$slots, "default")
+      ]),
+      e.error ? (n(), l("p", {
+        key: 0,
+        class: "strand-form-field__error",
+        id: `${e.htmlFor}-error`,
+        role: "alert"
+      }, _(e.error), 9, ue)) : e.hint ? (n(), l("p", {
+        key: 1,
+        class: "strand-form-field__hint",
+        id: `${e.htmlFor}-hint`
+      }, _(e.hint), 9, fe)) : $("", !0)
+    ], 2));
+  }
+}), va = /* @__PURE__ */ h({
+  __name: "Card",
+  props: {
+    variant: { default: "elevated" },
+    padding: { default: "md" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-card",
+        `strand-card--${t.variant}`,
+        `strand-card--pad-${t.padding}`,
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
+      g(r.$slots, "default")
+    ], 16));
+  }
+}), ve = ["aria-label"], ma = /* @__PURE__ */ h({
+  __name: "Badge",
+  props: {
+    variant: { default: "count" },
+    status: { default: "default" },
+    count: {},
+    maxCount: { default: 99 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = E(), r = c(() => !!a.default), s = c(() => t.variant === "count" ? t.count != null && t.count > t.maxCount ? `${t.maxCount}+` : t.count : null), o = c(() => {
+      if (t.variant === "dot") return "Status indicator";
+      if (t.count != null) return `${t.count} notifications`;
+    }), d = c(
+      () => [
+        "strand-badge__indicator",
+        `strand-badge--${t.variant}`,
+        `strand-badge--${t.status}`
+      ].filter(Boolean).join(" ")
+    ), i = c(
+      () => r.value ? ["strand-badge", t.className].filter(Boolean).join(" ") : ["strand-badge", "strand-badge--inline", t.className].filter(Boolean).join(" ")
+    );
+    return (u, m) => (n(), l("span", y({ class: i.value }, u.$attrs), [
+      g(u.$slots, "default"),
+      f("span", {
+        class: b(d.value),
+        "aria-label": o.value,
+        role: "status"
+      }, _(s.value), 11, ve)
+    ], 16));
+  }
+}), me = ["aria-label"], he = ["src", "alt"], _e = {
+  key: 1,
+  class: "strand-avatar__initials",
+  "aria-hidden": "true"
+}, ha = /* @__PURE__ */ h({
+  __name: "Avatar",
+  props: {
+    src: {},
+    alt: { default: "" },
+    initials: { default: "" },
+    size: { default: "md" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = x(!1), r = () => {
+      a.value = !0;
+    }, s = c(() => t.src && !a.value), o = c(() => t.initials.slice(0, 2).toUpperCase()), d = c(
+      () => [
+        "strand-avatar",
+        `strand-avatar--${t.size}`,
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (i, u) => (n(), l("div", y({
+      class: d.value,
+      role: "img",
+      "aria-label": e.alt || o.value
+    }, i.$attrs), [
+      s.value ? (n(), l("img", {
+        key: 0,
+        class: "strand-avatar__img",
+        src: e.src,
+        alt: e.alt,
+        onError: r
+      }, null, 40, he)) : (n(), l("span", _e, _(o.value), 1))
+    ], 16, me));
+  }
+}), be = { class: "strand-tag__text" }, _a = /* @__PURE__ */ h({
+  __name: "Tag",
+  props: {
+    variant: { default: "solid" },
+    status: { default: "default" },
+    removable: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  emits: ["remove"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => [
+        "strand-tag",
+        `strand-tag--${a.variant}`,
+        `strand-tag--${a.status}`,
+        a.className
+      ].filter(Boolean).join(" ")
+    );
+    return (o, d) => (n(), l("span", y({ class: s.value }, o.$attrs), [
+      f("span", be, [
+        g(o.$slots, "default")
+      ]),
+      e.removable ? (n(), l("button", {
+        key: 0,
+        type: "button",
+        class: "strand-tag__remove",
+        "aria-label": "Remove",
+        onClick: d[0] || (d[0] = (i) => r("remove"))
+      }, [...d[1] || (d[1] = [
+        f("svg", {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          "aria-hidden": "true"
+        }, [
+          f("path", {
+            d: "M3 3l6 6M9 3l-6 6",
+            stroke: "currentColor",
+            "stroke-width": "1.5",
+            "stroke-linecap": "round"
+          })
+        ], -1)
+      ])])) : $("", !0)
+    ], 16));
+  }
+}), pe = { class: "strand-table" }, $e = { class: "strand-table__head" }, ge = ["aria-label", "onClick"], ye = {
+  class: "strand-table__sort-indicator",
+  "aria-hidden": "true"
+}, ke = { class: "strand-table__body" }, ba = /* @__PURE__ */ h({
+  __name: "Table",
+  props: {
+    columns: {},
+    data: {}
+  },
+  emits: ["sort"],
+  setup(e, { emit: t }) {
+    const a = t, r = x(null), s = x("asc"), o = c(
+      () => ["strand-table-wrapper"].filter(Boolean).join(" ")
+    );
+    function d(u) {
+      const m = r.value === u && s.value === "asc" ? "desc" : "asc";
+      r.value = u, s.value = m, a("sort", u, m);
+    }
+    function i(u) {
+      return r.value === u ? s.value === "asc" ? "↑" : "↓" : "↕";
+    }
+    return (u, m) => (n(), l("div", {
+      class: b(o.value)
+    }, [
+      f("table", pe, [
+        f("thead", $e, [
+          f("tr", null, [
+            (n(!0), l(k, null, w(e.columns, (v) => (n(), l("th", {
+              key: v.key,
+              class: "strand-table__th",
+              style: S(v.width ? { width: v.width } : void 0)
+            }, [
+              v.sortable ? (n(), l("button", {
+                key: 0,
+                type: "button",
+                class: "strand-table__sort-btn",
+                "aria-label": `Sort by ${v.header}`,
+                onClick: (B) => d(v.key)
+              }, [
+                N(_(v.header) + " ", 1),
+                f("span", ye, _(i(v.key)), 1)
+              ], 8, ge)) : (n(), l(k, { key: 1 }, [
+                N(_(v.header), 1)
+              ], 64))
+            ], 4))), 128))
+          ])
+        ]),
+        f("tbody", ke, [
+          (n(!0), l(k, null, w(e.data, (v, B) => (n(), l("tr", {
+            key: B,
+            class: "strand-table__row"
+          }, [
+            (n(!0), l(k, null, w(e.columns, (p) => (n(), l("td", {
+              key: p.key,
+              class: "strand-table__td"
+            }, _(v[p.key]), 1))), 128))
+          ]))), 128))
+        ])
+      ])
+    ], 2));
+  }
+}), Be = { class: "strand-data-readout__label" }, we = { class: "strand-data-readout__value" }, pa = /* @__PURE__ */ h({
+  __name: "DataReadout",
+  props: {
+    label: {},
+    value: {},
+    size: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-data-readout",
+        t.size && t.size !== "md" ? `strand-data-readout--${t.size}` : "",
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
+      f("span", Be, _(e.label), 1),
+      f("span", we, _(e.value), 1)
+    ], 16));
+  }
+}), $a = /* @__PURE__ */ h({
+  __name: "Stack",
+  props: {
+    direction: { default: "vertical" },
+    gap: { default: 4 },
+    align: { default: "stretch" },
+    justify: {},
+    wrap: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "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
+      ].filter(Boolean).join(" ")
+    ), r = c(() => ({
+      gap: `var(--strand-space-${t.gap})`
+    }));
+    return (s, o) => (n(), l("div", y({
+      class: a.value,
+      style: r.value
+    }, s.$attrs), [
+      g(s.$slots, "default")
+    ], 16));
+  }
+}), ga = /* @__PURE__ */ h({
+  __name: "Grid",
+  props: {
+    columns: { default: 1 },
+    gap: { default: 4 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => ["strand-grid", t.className].filter(Boolean).join(" ")
+    ), r = c(() => ({
+      gridTemplateColumns: `repeat(${t.columns}, 1fr)`,
+      gap: `var(--strand-space-${t.gap})`
+    }));
+    return (s, o) => (n(), l("div", y({
+      class: a.value,
+      style: r.value
+    }, s.$attrs), [
+      g(s.$slots, "default")
+    ], 16));
+  }
+}), ya = /* @__PURE__ */ h({
+  __name: "Container",
+  props: {
+    size: { default: "default" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-container",
+        `strand-container--${t.size}`,
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("div", y({ class: a.value }, r.$attrs), [
+      g(r.$slots, "default")
+    ], 16));
+  }
+}), xe = { class: "strand-divider__label" }, ka = /* @__PURE__ */ h({
+  __name: "Divider",
+  props: {
+    direction: { default: "horizontal" },
+    label: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(() => t.direction === "vertical"), r = c(() => !a.value && !!t.label);
+    c(() => !a.value && !t.label);
+    const s = c(() => a.value ? ["strand-divider", "strand-divider--vertical", t.className].filter(Boolean).join(" ") : r.value ? ["strand-divider", "strand-divider--horizontal", "strand-divider--labeled", t.className].filter(Boolean).join(" ") : ["strand-divider", "strand-divider--horizontal", t.className].filter(Boolean).join(" "));
+    return (o, d) => a.value ? (n(), l("div", {
+      key: 0,
+      class: b(s.value),
+      role: "separator",
+      "aria-orientation": "vertical"
+    }, null, 2)) : r.value ? (n(), l("div", {
+      key: 1,
+      class: b(s.value),
+      role: "separator",
+      "aria-orientation": "horizontal"
+    }, [
+      d[0] || (d[0] = f("span", { class: "strand-divider__line" }, null, -1)),
+      f("span", xe, _(e.label), 1),
+      d[1] || (d[1] = f("span", { class: "strand-divider__line" }, null, -1))
+    ], 2)) : (n(), l("hr", {
+      key: 2,
+      class: b(s.value),
+      role: "separator",
+      "aria-orientation": "horizontal"
+    }, null, 2));
+  }
+}), Ba = /* @__PURE__ */ h({
+  __name: "Section",
+  props: {
+    variant: { default: "standard" },
+    background: { default: "primary" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-section",
+        `strand-section--${t.variant}`,
+        `strand-section--bg-${t.background}`,
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("section", y({ class: a.value }, r.$attrs), [
+      g(r.$slots, "default")
+    ], 16));
+  }
+}), Ce = ["href"], wa = /* @__PURE__ */ h({
+  __name: "Link",
+  props: {
+    href: {},
+    external: { type: Boolean, default: !1 },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => ["strand-link", t.className].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("a", y({
+      href: e.href,
+      class: a.value
+    }, {
+      ...e.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      ...r.$attrs
+    }), [
+      g(r.$slots, "default")
+    ], 16, Ce));
+  }
+}), je = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Te = ["id", "aria-labelledby", "hidden"], xa = /* @__PURE__ */ h({
+  __name: "Tabs",
+  props: {
+    tabs: {},
+    activeTab: {}
+  },
+  emits: ["change"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = x(null), o = c(() => ["strand-tabs"].filter(Boolean).join(" "));
+    function d(u) {
+      var v, B;
+      const m = a.tabs[u];
+      if (m) {
+        r("change", m.id);
+        const p = (v = s.value) == null ? void 0 : v.querySelectorAll('[role="tab"]');
+        (B = p == null ? void 0 : p[u]) == null || B.focus();
+      }
+    }
+    function i(u) {
+      const m = a.tabs.findIndex((B) => B.id === a.activeTab);
+      let v = null;
+      switch (u.key) {
+        case "ArrowRight":
+          v = (m + 1) % a.tabs.length;
+          break;
+        case "ArrowLeft":
+          v = (m - 1 + a.tabs.length) % a.tabs.length;
+          break;
+        case "Home":
+          v = 0;
+          break;
+        case "End":
+          v = a.tabs.length - 1;
+          break;
+        default:
+          return;
+      }
+      u.preventDefault(), d(v);
+    }
+    return (u, m) => (n(), l("div", {
+      class: b(o.value)
+    }, [
+      f("div", {
+        ref_key: "tablistRef",
+        ref: s,
+        role: "tablist",
+        onKeydown: i
+      }, [
+        (n(!0), l(k, null, w(e.tabs, (v) => (n(), l("button", {
+          key: v.id,
+          id: `tab-${v.id}`,
+          role: "tab",
+          type: "button",
+          class: b([
+            "strand-tabs__tab",
+            v.id === e.activeTab && "strand-tabs__tab--active"
+          ].filter(Boolean).join(" ")),
+          "aria-selected": v.id === e.activeTab ? "true" : "false",
+          "aria-controls": `panel-${v.id}`,
+          tabindex: v.id === e.activeTab ? 0 : -1,
+          onClick: (B) => r("change", v.id)
+        }, _(v.label), 11, je))), 128))
+      ], 544),
+      (n(!0), l(k, null, w(e.tabs, (v) => (n(), l("div", {
+        key: v.id,
+        id: `panel-${v.id}`,
+        role: "tabpanel",
+        "aria-labelledby": `tab-${v.id}`,
+        hidden: v.id !== e.activeTab || void 0,
+        tabindex: 0
+      }, [
+        g(u.$slots, `panel-${v.id}`)
+      ], 8, Te))), 128))
+    ], 2));
+  }
+}), Ne = { class: "strand-breadcrumb__list" }, Se = {
+  key: 0,
+  class: "strand-breadcrumb__separator",
+  "aria-hidden": "true"
+}, ze = {
+  key: 1,
+  class: "strand-breadcrumb__current",
+  "aria-current": "page"
+}, Ve = ["href"], Ca = /* @__PURE__ */ h({
+  __name: "Breadcrumb",
+  props: {
+    items: {},
+    separator: { default: "/" }
+  },
+  setup(e) {
+    const t = c(
+      () => ["strand-breadcrumb"].filter(Boolean).join(" ")
+    );
+    return (a, r) => (n(), l("nav", {
+      "aria-label": "Breadcrumb",
+      class: b(t.value)
+    }, [
+      f("ol", Ne, [
+        (n(!0), l(k, null, w(e.items, (s, o) => (n(), l("li", {
+          key: `${s.label}-${o}`,
+          class: "strand-breadcrumb__item"
+        }, [
+          o > 0 ? (n(), l("span", Se, _(e.separator), 1)) : $("", !0),
+          o === e.items.length - 1 ? (n(), l("span", ze, _(s.label), 1)) : (n(), l("a", {
+            key: 2,
+            href: s.href,
+            class: "strand-breadcrumb__link"
+          }, _(s.label), 9, Ve))
+        ]))), 128))
+      ])
+    ], 2));
+  }
+}), De = { class: "strand-nav__inner" }, Ie = {
+  key: 0,
+  class: "strand-nav__logo"
+}, Re = { class: "strand-nav__items" }, Ee = ["href", "aria-current"], Le = {
+  key: 1,
+  class: "strand-nav__actions"
+}, Oe = ["aria-expanded", "aria-label"], Ae = {
+  key: 0,
+  class: "strand-nav__mobile-menu"
+}, Fe = ["href", "aria-current"], ja = /* @__PURE__ */ h({
+  __name: "Nav",
+  props: {
+    items: { default: () => [] }
+  },
+  setup(e) {
+    const t = x(!1);
+    function a() {
+      t.value = !t.value;
+    }
+    const r = c(() => ["strand-nav"].filter(Boolean).join(" "));
+    return (s, o) => (n(), l("nav", {
+      class: b(r.value),
+      "aria-label": "Main navigation"
+    }, [
+      f("div", De, [
+        s.$slots.logo ? (n(), l("div", Ie, [
+          g(s.$slots, "logo")
+        ])) : $("", !0),
+        f("div", Re, [
+          (n(!0), l(k, null, w(e.items, (d) => (n(), l("a", {
+            key: d.href,
+            href: d.href,
+            class: b([
+              "strand-nav__link",
+              d.active && "strand-nav__link--active"
+            ].filter(Boolean).join(" ")),
+            "aria-current": d.active ? "page" : void 0
+          }, _(d.label), 11, Ee))), 128))
+        ]),
+        s.$slots.actions ? (n(), l("div", Le, [
+          g(s.$slots, "actions")
+        ])) : $("", !0),
+        f("button", {
+          type: "button",
+          class: "strand-nav__hamburger",
+          "aria-expanded": t.value ? "true" : "false",
+          "aria-label": t.value ? "Close menu" : "Menu",
+          onClick: a
+        }, [...o[0] || (o[0] = [
+          f("span", {
+            class: "strand-nav__hamburger-icon",
+            "aria-hidden": "true"
+          }, null, -1)
+        ])], 8, Oe)
+      ]),
+      t.value ? (n(), l("div", Ae, [
+        (n(!0), l(k, null, w(e.items, (d) => (n(), l("a", {
+          key: d.href,
+          href: d.href,
+          class: b([
+            "strand-nav__mobile-link",
+            d.active && "strand-nav__mobile-link--active"
+          ].filter(Boolean).join(" ")),
+          "aria-current": d.active ? "page" : void 0
+        }, _(d.label), 11, Fe))), 128))
+      ])) : $("", !0)
+    ], 2));
+  }
+}), Ke = ["aria-live"], Me = { class: "strand-toast__message" }, Ta = /* @__PURE__ */ h({
+  __name: "Toast",
+  props: {
+    status: { default: "info" },
+    message: {}
+  },
+  emits: ["dismiss"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => a.status === "error" || a.status === "warning"
+    ), o = c(
+      () => ["strand-toast", `strand-toast--${a.status}`].filter(Boolean).join(" ")
+    );
+    return (d, i) => (n(), l("div", {
+      class: b(o.value),
+      role: "status",
+      "aria-live": s.value ? "assertive" : "polite"
+    }, [
+      f("span", Me, _(e.message), 1),
+      f("button", {
+        type: "button",
+        class: "strand-toast__dismiss",
+        "aria-label": "Dismiss",
+        onClick: i[0] || (i[0] = (u) => r("dismiss"))
+      }, " × ")
+    ], 10, Ke));
+  }
+});
+/*! Strand Vue | MIT License | dillingerstaffing.com */
+const O = Symbol("StrandToast");
+function Na() {
+  const e = A(O);
+  if (!e)
+    throw new Error("useToast must be used within a ToastProvider");
+  return e;
+}
+const Pe = {
+  key: 0,
+  class: "strand-toast__container"
+}, qe = ["aria-live"], Ue = { class: "strand-toast__message" }, Ge = ["onClick"], Sa = /* @__PURE__ */ h({
+  __name: "ToastProvider",
+  setup(e) {
+    let t = 0;
+    const a = x([]), r = /* @__PURE__ */ new Map();
+    function s(i) {
+      const u = r.get(i);
+      u !== void 0 && (clearTimeout(u), r.delete(i)), a.value = a.value.filter((m) => m.id !== i);
+    }
+    function o(i) {
+      const u = {
+        id: ++t,
+        message: i.message,
+        status: i.status ?? "info",
+        duration: i.duration ?? 5e3
+      };
+      if (a.value = [...a.value, u], u.duration > 0) {
+        const m = setTimeout(() => {
+          s(u.id);
+        }, u.duration);
+        r.set(u.id, m);
+      }
+    }
+    F(O, { toast: o }), V(() => {
+      for (const i of r.values())
+        clearTimeout(i);
+      r.clear();
+    });
+    function d(i) {
+      return i === "error" || i === "warning";
+    }
+    return (i, u) => (n(), l(k, null, [
+      g(i.$slots, "default"),
+      a.value.length > 0 ? (n(), l("div", Pe, [
+        (n(!0), l(k, null, w(a.value, (m) => (n(), l("div", {
+          key: m.id,
+          class: b(["strand-toast", `strand-toast--${m.status}`].join(" ")),
+          role: "status",
+          "aria-live": d(m.status) ? "assertive" : "polite"
+        }, [
+          f("span", Ue, _(m.message), 1),
+          f("button", {
+            type: "button",
+            class: "strand-toast__dismiss",
+            "aria-label": "Dismiss",
+            onClick: (v) => s(m.id)
+          }, " × ", 8, Ge)
+        ], 10, qe))), 128))
+      ])) : $("", !0)
+    ], 64));
+  }
+}), He = ["role"], We = { class: "strand-alert__content" }, za = /* @__PURE__ */ h({
+  __name: "Alert",
+  props: {
+    status: { default: "info" },
+    dismissible: { type: Boolean, default: !1 }
+  },
+  emits: ["dismiss"],
+  setup(e, { emit: t }) {
+    const a = e, r = t, s = c(
+      () => a.status === "error" || a.status === "warning" ? "alert" : "status"
+    ), o = c(
+      () => [
+        "strand-alert",
+        `strand-alert--${a.status}`
+      ].filter(Boolean).join(" ")
+    );
+    function d() {
+      r("dismiss");
+    }
+    return (i, u) => (n(), l("div", {
+      class: b(o.value),
+      role: s.value
+    }, [
+      f("div", We, [
+        g(i.$slots, "default")
+      ]),
+      e.dismissible ? (n(), l("button", {
+        key: 0,
+        type: "button",
+        class: "strand-alert__dismiss",
+        "aria-label": "Dismiss",
+        onClick: d
+      }, " × ")) : $("", !0)
+    ], 10, He));
+  }
+}), Ze = ["aria-labelledby"], Je = {
+  key: 0,
+  class: "strand-dialog__header"
+}, Qe = { class: "strand-dialog__body" }, R = 'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])', Va = /* @__PURE__ */ h({
+  __name: "Dialog",
+  props: {
+    open: { type: Boolean },
+    title: {},
+    closeOnOutsideClick: { type: Boolean, default: !0 },
+    closeOnEscape: { type: Boolean, default: !0 }
+  },
+  emits: ["close"],
+  setup(e, { emit: t }) {
+    const a = e, r = t;
+    let s = 0;
+    const o = `strand-dialog-title-${++s}`, d = x(null);
+    let i = null, u = "";
+    const m = c(
+      () => ["strand-dialog__panel"].filter(Boolean).join(" ")
+    );
+    function v(p) {
+      if (p.key === "Escape" && a.closeOnEscape) {
+        p.stopPropagation(), r("close");
+        return;
+      }
+      if (p.key === "Tab") {
+        const C = d.value;
+        if (!C) return;
+        const j = Array.from(
+          C.querySelectorAll(R)
+        );
+        if (j.length === 0) return;
+        const D = j[0], I = j[j.length - 1];
+        p.shiftKey ? document.activeElement === D && (p.preventDefault(), I.focus()) : document.activeElement === I && (p.preventDefault(), D.focus());
+      }
+    }
+    function B(p) {
+      a.closeOnOutsideClick && p.target === p.currentTarget && r("close");
+    }
+    return z(
+      () => a.open,
+      async (p) => {
+        if (p) {
+          i = document.activeElement, u = document.body.style.overflow, document.body.style.overflow = "hidden", await K();
+          const C = d.value;
+          if (C) {
+            const j = C.querySelectorAll(R);
+            j.length > 0 ? j[0].focus() : C.focus();
+          }
+        } else
+          document.body.style.overflow = u, i && i instanceof HTMLElement && i.focus();
+      },
+      { immediate: !0 }
+    ), V(() => {
+      a.open && (document.body.style.overflow = u);
+    }), (p, C) => e.open ? (n(), l("div", {
+      key: 0,
+      class: "strand-dialog__backdrop",
+      onClick: B,
+      onKeydown: v
+    }, [
+      f("div", {
+        ref_key: "panelRef",
+        ref: d,
+        class: b(m.value),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": e.title ? o : void 0,
+        tabindex: -1
+      }, [
+        e.title ? (n(), l("div", Je, [
+          f("h2", {
+            id: o,
+            class: "strand-dialog__title"
+          }, _(e.title), 1)
+        ])) : $("", !0),
+        f("button", {
+          type: "button",
+          class: "strand-dialog__close",
+          "aria-label": "Close",
+          onClick: C[0] || (C[0] = (j) => r("close"))
+        }, " × "),
+        f("div", Qe, [
+          g(p.$slots, "default")
+        ])
+      ], 10, Ze)
+    ], 32)) : $("", !0);
+  }
+}), Xe = ["aria-hidden"], Da = /* @__PURE__ */ h({
+  __name: "Tooltip",
+  props: {
+    content: {},
+    position: { default: "top" },
+    delay: { default: 200 }
+  },
+  setup(e) {
+    const t = e;
+    let a = 0;
+    const r = `strand-tooltip-${++a}`, s = x(!1);
+    let o = null;
+    function d() {
+      o = setTimeout(() => {
+        s.value = !0;
+      }, t.delay);
+    }
+    function i() {
+      o !== null && (clearTimeout(o), o = null), s.value = !1;
+    }
+    V(() => {
+      o !== null && clearTimeout(o);
+    });
+    const u = c(
+      () => ["strand-tooltip__wrapper"].filter(Boolean).join(" ")
+    ), m = c(
+      () => [
+        "strand-tooltip",
+        `strand-tooltip--${t.position}`,
+        s.value && "strand-tooltip--visible"
+      ].filter(Boolean).join(" ")
+    );
+    return (v, B) => (n(), l("span", {
+      class: b(u.value),
+      "aria-describedby": r,
+      onMouseenter: d,
+      onMouseleave: i,
+      onFocus: d,
+      onBlur: i
+    }, [
+      g(v.$slots, "default"),
+      f("span", {
+        id: r,
+        class: b(m.value),
+        role: "tooltip",
+        "aria-hidden": !s.value
+      }, _(e.content), 11, Xe)
+    ], 34));
+  }
+}), Ye = ["aria-valuenow"], ea = ["width", "height", "viewBox"], aa = ["cx", "cy", "r"], ta = ["cx", "cy", "r", "stroke-dasharray", "stroke-dashoffset", "transform"], T = 3, Ia = /* @__PURE__ */ h({
+  __name: "Progress",
+  props: {
+    variant: { default: "bar" },
+    value: {},
+    size: { default: "md" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = { sm: 24, md: 40, lg: 56 }, r = c(() => t.value != null), s = c(
+      () => [
+        "strand-progress",
+        `strand-progress--${t.variant}`,
+        `strand-progress--${t.size}`,
+        !r.value && "strand-progress--indeterminate",
+        t.className
+      ].filter(Boolean).join(" ")
+    ), o = c(() => a[t.size] ?? a.md), d = c(() => (o.value - T) / 2), i = c(() => 2 * Math.PI * d.value), u = c(
+      () => r.value ? i.value - i.value * t.value / 100 : 0
+    );
+    return (m, v) => (n(), l("div", y({
+      class: s.value,
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": r.value ? e.value : void 0
+    }, m.$attrs), [
+      e.variant === "ring" ? (n(), l("svg", {
+        key: 0,
+        width: o.value,
+        height: o.value,
+        viewBox: `0 0 ${o.value} ${o.value}`,
+        class: "strand-progress__ring"
+      }, [
+        f("circle", {
+          cx: o.value / 2,
+          cy: o.value / 2,
+          r: d.value,
+          fill: "none",
+          "stroke-width": T,
+          class: "strand-progress__track"
+        }, null, 8, aa),
+        f("circle", {
+          cx: o.value / 2,
+          cy: o.value / 2,
+          r: d.value,
+          fill: "none",
+          "stroke-width": T,
+          "stroke-dasharray": i.value,
+          "stroke-dashoffset": r.value ? u.value : void 0,
+          "stroke-linecap": "round",
+          class: "strand-progress__fill",
+          transform: `rotate(-90 ${o.value / 2} ${o.value / 2})`
+        }, null, 8, ta)
+      ], 8, ea)) : (n(), l("div", {
+        key: 1,
+        class: "strand-progress__fill",
+        style: S(r.value ? { width: `${e.value}%` } : void 0)
+      }, null, 4))
+    ], 16, Ye));
+  }
+}), Ra = /* @__PURE__ */ h({
+  __name: "Spinner",
+  props: {
+    size: { default: "md" },
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => [
+        "strand-spinner",
+        `strand-spinner--${t.size}`,
+        t.className
+      ].filter(Boolean).join(" ")
+    );
+    return (r, s) => (n(), l("span", y({
+      class: a.value,
+      role: "status"
+    }, r.$attrs), [...s[0] || (s[0] = [
+      f("span", {
+        class: "strand-spinner__ring",
+        "aria-hidden": "true"
+      }, null, -1),
+      f("span", { class: "strand-spinner__sr-only" }, "Loading", -1)
+    ])], 16));
+  }
+}), Ea = /* @__PURE__ */ h({
+  __name: "Skeleton",
+  props: {
+    variant: { default: "text" },
+    width: {},
+    height: {},
+    className: { default: "" }
+  },
+  setup(e) {
+    const t = e, a = c(
+      () => t.width ?? (t.variant === "text" ? "100%" : void 0)
+    ), r = c(
+      () => t.variant === "circle" ? a.value : t.height
+    ), s = c(
+      () => [
+        "strand-skeleton",
+        `strand-skeleton--${t.variant}`,
+        "strand-skeleton--shimmer",
+        t.className
+      ].filter(Boolean).join(" ")
+    ), o = c(() => ({
+      width: a.value,
+      height: r.value
+    }));
+    return (d, i) => (n(), l("div", y({
+      class: s.value,
+      "aria-hidden": "true",
+      style: o.value
+    }, d.$attrs), null, 16));
+  }
+});
+export {
+  za as Alert,
+  ha as Avatar,
+  ma as Badge,
+  Ca as Breadcrumb,
+  na as Button,
+  va as Card,
+  oa as Checkbox,
+  ya as Container,
+  pa as DataReadout,
+  Va as Dialog,
+  ka as Divider,
+  fa as FormField,
+  ga as Grid,
+  la as Input,
+  wa as Link,
+  ja as Nav,
+  Ia as Progress,
+  da as Radio,
+  Ba as Section,
+  ia as Select,
+  Ea as Skeleton,
+  ua as Slider,
+  Ra as Spinner,
+  $a as Stack,
+  ca as Switch,
+  ba as Table,
+  xa as Tabs,
+  _a as Tag,
+  ra as Textarea,
+  Ta as Toast,
+  Sa as ToastProvider,
+  Da as Tooltip,
+  Na as useToast
+};
+//# sourceMappingURL=index.js.map