@kiva/kv-components 4.8.6 → 5.1.0

package/dist/vue/KvRadio.js

@@ -0,0 +1,130 @@
+import { nanoid as u } from "nanoid";
+import { toRefs as k, ref as f, computed as _, onMounted as C, openBlock as m, createElementBlock as w, normalizeClass as s, normalizeStyle as V, createElementVNode as l, mergeProps as B, toHandlers as x, withModifiers as S, createCommentVNode as N, renderSlot as A } from "vue";
+import { useAttrs as R } from "../utils/attrs.js";
+import z from "../_virtual/_plugin-vue_export-helper.js";
+const h = [
+  "change",
+  "update:modelValue"
+], E = {
+  inheritAttrs: !1,
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Value of the input
+     * */
+    value: {
+      type: [String, Number, Boolean],
+      required: !0
+    },
+    /**
+     * Prevents the radio from being toggled or focused
+     * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Native name attribute. Used to group radios if you're not using v-model. E.g.,
+     * ```
+     *  <KvRadio name="cats">Tabby</KvRadio>
+     *  <KvRadio name="cats">Siamese</KvRadio>
+     *  <KvRadio name="dogs">Husky</KvRadio>
+     *  <KvRadio name="dogs">Boxer</KvRadio>
+     * ```
+     * */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Native checked attribute. Used to select the radio if you're not using v-model E.g.,
+     * ```
+     *  <KvRadio value="foo" :checked="myModel === foo">Foo</KvRadio>
+     *  <KvRadio value="bar" :checked="myModel === bar">Bar</KvRadio>
+     * ```
+     * */
+    checked: {
+      type: [String, Number, Boolean],
+      default: !1
+    },
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: !1
+    }
+  },
+  emits: h,
+  setup(r, o) {
+    const { emit: t } = o, {
+      value: e,
+      checked: d,
+      modelValue: a
+    } = k(r), n = f(`kvr-${u(10)}`), i = f(null), {
+      classes: v,
+      styles: p,
+      inputAttrs: g,
+      inputListeners: b
+    } = R(o, h), y = _(() => typeof a.value == typeof e.value ? a.value === e.value : !!d.value);
+    return C(() => {
+      n.value = `kvr-${u(10)}`;
+    }), {
+      uuid: n,
+      isChecked: y,
+      radioRef: i,
+      onChange: (c) => {
+        t("change", c.target.value), t("update:modelValue", c.target.value);
+      },
+      focus: () => i.focus(),
+      blur: () => i.blur(),
+      classes: v,
+      styles: p,
+      inputAttrs: g,
+      inputListeners: b
+    };
+  }
+}, L = ["for"], M = ["id", "checked", "name", "value", "disabled"], j = {
+  key: 0,
+  class: "tw-rounded-full tw-bg-action",
+  style: { width: "0.75rem", height: "0.75rem" }
+}, q = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function H(r, o, t, e, d, a) {
+  return m(), w("div", {
+    class: s(e.classes),
+    style: V(e.styles)
+  }, [
+    l("label", {
+      class: s(["tw-inline-flex tw-items-center tw-align-middle", { "tw-opacity-low": t.disabled }]),
+      for: e.uuid
+    }, [
+      l("input", B(e.inputAttrs, {
+        id: e.uuid,
+        ref: "radioRef",
+        class: "tw-peer tw-appearance-none tw-w-max",
+        type: "radio",
+        checked: e.isChecked,
+        name: t.name,
+        value: t.value,
+        disabled: t.disabled
+      }, x(e.inputListeners, !0), {
+        onChange: o[0] || (o[0] = S((...n) => e.onChange && e.onChange(...n), ["prevent"]))
+      }), null, 16, M),
+      l("div", {
+        class: s(["tw-w-3 tw-h-3 tw-mr-2 tw-rounded-full tw-border tw-flex-shrink-0 tw-overflow-hidden tw-flex tw-justify-center tw-items-center tw-transition-all tw-duration-100 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action", {
+          "tw-border-secondary": !e.isChecked,
+          "tw-border-action": e.isChecked
+        }])
+      }, [
+        e.isChecked ? (m(), w("div", j)) : N("", !0)
+      ], 2),
+      l("div", q, [
+        A(r.$slots, "default")
+      ])
+    ], 10, L)
+  ], 6);
+}
+const O = /* @__PURE__ */ z(E, [["render", H]]);
+export {
+  O as default
+};

package/dist/vue/KvSelect.js

@@ -0,0 +1,92 @@
+import { ref as m, watch as w, resolveComponent as p, openBlock as f, createElementBlock as g, normalizeClass as d, normalizeStyle as v, createElementVNode as c, withDirectives as b, mergeProps as h, renderSlot as V, vModelSelect as y, createVNode as _ } from "vue";
+import { mdiChevronDown as C } from "@mdi/js";
+import { useAttrs as S } from "../utils/attrs.js";
+import k from "./KvMaterialIcon.js";
+import x from "../_virtual/_plugin-vue_export-helper.js";
+const u = [
+  "change",
+  "update:modelValue"
+], A = {
+  components: {
+    KvMaterialIcon: k
+  },
+  // v-model will change when select value updates
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Unique id to connect label and select
+     * */
+    id: {
+      type: String,
+      required: !0,
+      default: ""
+    },
+    /**
+     * Use if select is disabled
+     * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * modelValue prop
+     * */
+    modelValue: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  emits: u,
+  setup(a, t) {
+    const { emit: o } = t, {
+      classes: e,
+      styles: i,
+      inputAttrs: s,
+      inputListeners: r
+    } = S(t, u), n = m(a.modelValue);
+    return w(() => a.modelValue, (l) => {
+      l !== n.value && (n.value = l);
+    }), {
+      mdiChevronDown: C,
+      onChange: (l) => {
+        o("change", l.target.value), o("update:modelValue", l.target.value);
+      },
+      classes: e,
+      styles: i,
+      inputAttrs: s,
+      inputListeners: r,
+      inputValue: n
+    };
+  }
+}, B = { class: "tw-relative tw-w-full" }, D = ["id", "disabled"];
+function N(a, t, o, e, i, s) {
+  const r = p("kv-material-icon");
+  return f(), g("div", {
+    class: d(["tw-inline-flex", e.classes]),
+    style: v(e.styles)
+  }, [
+    c("div", B, [
+      b(c("select", h({ id: o.id }, e.inputAttrs, {
+        "onUpdate:modelValue": t[0] || (t[0] = (n) => e.inputValue = n),
+        disabled: o.disabled,
+        class: ["tw-text-base tw-bg-primary tw-h-6 tw-pr-4 tw-pl-2 tw-border tw-border-tertiary tw-rounded-sm tw-appearance-none tw-w-full tw-ring-inset focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-action focus:tw-border-transparent", { "tw-opacity-low": o.disabled }],
+        onChange: t[1] || (t[1] = (...n) => e.onChange && e.onChange(...n))
+      }), [
+        V(a.$slots, "default")
+      ], 16, D), [
+        [y, e.inputValue]
+      ]),
+      _(r, {
+        icon: e.mdiChevronDown,
+        class: d(["tw-w-4 tw-absolute tw-top-0 tw-right-0 tw-pt-1.5 tw-pr-1 tw-pointer-events-none", { "tw-opacity-low": o.disabled }])
+      }, null, 8, ["icon", "class"])
+    ])
+  ], 6);
+}
+const I = /* @__PURE__ */ x(A, [["render", N]]);
+export {
+  I as default
+};

package/dist/vue/KvSideSheet.js

@@ -0,0 +1,159 @@
+import { toRefs as T, ref as u, watch as L, resolveComponent as B, openBlock as p, createElementBlock as g, normalizeClass as c, withModifiers as E, createElementVNode as d, normalizeStyle as _, createVNode as k, createCommentVNode as S, renderSlot as z } from "vue";
+import { mdiClose as F, mdiLaunch as N } from "@mdi/js";
+import V from "./KvMaterialIcon.js";
+import j from "../_virtual/_plugin-vue_export-helper.js";
+const G = {
+  components: {
+    KvMaterialIcon: V
+  },
+  props: {
+    /**
+     * Whether the side sheet is open or not
+     * */
+    visible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show the go to link button
+     * */
+    showGoToLink: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Tracking event function
+     * */
+    kvTrackFunction: {
+      type: Function,
+      default: () => ({})
+    },
+    /**
+     * Tracking event category
+     * */
+    trackEventCategory: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Source element position for expand animation
+     */
+    animationSourceElement: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [
+    "side-sheet-closed"
+  ],
+  setup(w, { emit: e }) {
+    const {
+      visible: n,
+      kvTrackFunction: t,
+      trackEventCategory: f,
+      animationSourceElement: r
+    } = T(w), l = u(!1), i = u({}), a = u({}), v = () => {
+      const s = "tw-overflow-hidden";
+      l.value ? document.body.classList.add(s) : document.body.classList.remove(s);
+    }, b = () => {
+      l.value = !1, v(), t.value(f.value, "click", "side-sheet-closed"), r.value && (a.value = {
+        ...i.value,
+        transition: "all 0.5s ease-in-out"
+      }), setTimeout(() => {
+        e("side-sheet-closed");
+      }, "700");
+    }, C = () => {
+      e("go-to-link");
+    };
+    return L(n, () => {
+      var s;
+      if (n.value) {
+        setTimeout(() => {
+          l.value = !0, v();
+        }, 100);
+        const o = (s = r.value) == null ? void 0 : s.getBoundingClientRect(), m = (o == null ? void 0 : o.top) ?? 0, x = (o == null ? void 0 : o.left) ?? 0, y = (o == null ? void 0 : o.width) ?? 0, h = (o == null ? void 0 : o.height) ?? 0;
+        m || x || y || h ? (i.value = {
+          position: "fixed",
+          top: `${m}px`,
+          width: `${y}px`,
+          height: `${h}px`
+        }, a.value = {
+          ...i.value,
+          transition: "none"
+        }, setTimeout(() => {
+          a.value = {
+            top: "0",
+            width: "100vw",
+            height: "100%",
+            transition: "all 0.5s ease-in-out"
+          };
+        }, 10)) : a.value = {};
+      }
+    }), {
+      mdiClose: F,
+      mdiLaunch: N,
+      open: l,
+      closeSideSheet: b,
+      goToLink: C,
+      modalStyles: a
+    };
+  }
+};
+function K(w, e, n, t, f, r) {
+  const l = B("kv-material-icon");
+  return n.visible ? (p(), g("div", {
+    key: 0,
+    class: c(["tw-block lg:tw-mt-0 tw-fixed tw-inset-0 tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal", {
+      "tw-bg-opacity-0 tw-delay-300": !t.open,
+      "tw-bg-opacity-low": t.open
+    }]),
+    onClick: e[2] || (e[2] = E((...i) => t.closeSideSheet && t.closeSideSheet(...i), ["self"]))
+  }, [
+    d("div", {
+      class: c(["tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white tw-overflow-y-auto tw-p-2", {
+        "tw-w-0 tw-delay-200 tw-opacity-0": !t.open,
+        "lg:tw-w-1/2 tw-w-full tw-opacity-full": t.open
+      }]),
+      style: _(t.modalStyles)
+    }, [
+      d("div", {
+        class: c(["tw-flex tw-justify-between tw-transition-opacity tw-duration-500 tw-delay-200", {
+          "tw-opacity-0": !t.open,
+          "tw-opacity-full": t.open
+        }])
+      }, [
+        d("button", {
+          class: "hover:tw-text-action-highlight",
+          onClick: e[0] || (e[0] = (...i) => t.closeSideSheet && t.closeSideSheet(...i))
+        }, [
+          k(l, {
+            class: "tw-w-3 tw-h-3",
+            icon: t.mdiClose
+          }, null, 8, ["icon"])
+        ]),
+        n.showGoToLink ? (p(), g("button", {
+          key: 0,
+          class: "hover:tw-text-action-highlight",
+          onClick: e[1] || (e[1] = (...i) => t.goToLink && t.goToLink(...i))
+        }, [
+          k(l, {
+            class: "tw-w-3 tw-h-3",
+            icon: t.mdiLaunch
+          }, null, 8, ["icon"])
+        ])) : S("", !0)
+      ], 2),
+      d("div", {
+        class: c(["tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200 tw-overscroll-y-contain", {
+          "tw-opacity-0": !t.open,
+          "tw-opacity-full": t.open
+        }])
+      }, [
+        z(w.$slots, "default")
+      ], 2)
+    ], 6)
+  ], 2)) : S("", !0);
+}
+const q = /* @__PURE__ */ j(G, [["render", K]]);
+export {
+  q as default
+};

package/dist/vue/KvSwitch.js

@@ -0,0 +1,88 @@
+import { ref as a, onMounted as b, openBlock as g, createElementBlock as k, normalizeClass as d, normalizeStyle as y, createElementVNode as l, mergeProps as V, toHandlers as _, withModifiers as x, renderSlot as C } from "vue";
+import { nanoid as u } from "nanoid";
+import { useAttrs as A } from "../utils/attrs.js";
+import B from "../_virtual/_plugin-vue_export-helper.js";
+const c = [
+  "update:modelValue"
+], S = {
+  inheritAttrs: !1,
+  // v-model will change when checked value changes
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: {
+    /**
+     * Whether the switch is on or off
+     * */
+    modelValue: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Prevents the switch from being toggled or focused
+     * */
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: c,
+  setup(i, t) {
+    const { emit: s } = t, e = a(`kvs-${u(10)}`), o = a(null), {
+      classes: r,
+      styles: n,
+      inputAttrs: w,
+      inputListeners: f
+    } = A(t, c), p = (v) => {
+      s("update:modelValue", v.target.checked);
+    }, m = () => {
+      o.value.focus();
+    }, h = () => {
+      o.value.blur();
+    };
+    return b(() => {
+      e.value = `kvs-${u(10)}`;
+    }), {
+      uuid: e,
+      onChange: p,
+      focus: m,
+      blur: h,
+      classes: r,
+      styles: n,
+      inputAttrs: w,
+      inputListeners: f
+    };
+  }
+}, z = ["for"], E = ["id", "checked", "disabled"], L = { class: "tw-flex-1 peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action" };
+function M(i, t, s, e, o, r) {
+  return g(), k("div", {
+    class: d(e.classes),
+    style: y(e.styles)
+  }, [
+    l("label", {
+      class: d(["tw-inline-flex tw-gap-2 tw-items-center tw-relative hover:tw-cursor-pointer", { "tw-opacity-low": s.disabled }]),
+      for: e.uuid
+    }, [
+      l("input", V({ id: e.uuid }, e.inputAttrs, {
+        ref: "switchRef",
+        class: "tw-sr-only tw-peer",
+        type: "checkbox",
+        role: "switch",
+        checked: s.modelValue,
+        disabled: s.disabled
+      }, _(e.inputListeners, !0), {
+        onChange: t[0] || (t[0] = x((...n) => e.onChange && e.onChange(...n), ["prevent"]))
+      }), null, 16, E),
+      t[1] || (t[1] = l("div", { class: "tw-w-7 tw-h-4 tw-rounded-full tw-relative tw-overflow-hidden peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action tw-bg-tertiary peer-checked:tw-bg-action tw-transition-all tw-ease-in-out" }, null, -1)),
+      t[2] || (t[2] = l("div", { class: "tw-flex-shrink-0 tw-w-3 tw-h-3 tw-absolute tw-m-0.5 tw-top-0 tw-rounded-full tw-bg-white tw-transform tw-transition-all tw-ease-in-out peer-checked:tw-translate-x-3" }, null, -1)),
+      l("div", L, [
+        C(i.$slots, "default")
+      ])
+    ], 10, z)
+  ], 6);
+}
+const P = /* @__PURE__ */ B(S, [["render", M]]);
+export {
+  P as default
+};

package/dist/vue/KvTab.js

@@ -0,0 +1,67 @@
+import { toRefs as d, inject as f, computed as s, onMounted as v, getCurrentInstance as b, openBlock as u, createElementBlock as x, normalizeClass as m, renderSlot as w } from "vue";
+import k from "../_virtual/_plugin-vue_export-helper.js";
+const p = {
+  props: {
+    /**
+     * A unique id which correspondes to an `id` property on the KvTabPanel it controls
+     * e.g., <kv-tab for="foo">... <kv-tab-panel id="foo">
+     * */
+    forPanel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The tab should be initially selected.
+     * */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    vertical: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(l) {
+    const {
+      forPanel: a
+    } = d(l), e = f("$KvTabContext"), n = s(() => {
+      var c;
+      let t = [], o = 0;
+      return e && (t = e.navItems, o = e.selectedIndex), ((c = t[o]) == null ? void 0 : c.forPanel) === a.value;
+    }), r = s(() => {
+      let t = [];
+      return e && (t = e.navItems), t == null ? void 0 : t.findIndex((o) => o.forPanel === a.value);
+    }), i = () => {
+      e.setTab(r.value);
+    };
+    return v(() => {
+      const t = b();
+      e.navItems.push(t.proxy);
+    }), {
+      isActive: n,
+      handleTabClicked: i
+    };
+  }
+}, C = ["id", "aria-selected", "aria-controls", "tabindex"];
+function h(l, a, e, n, r, i) {
+  return u(), x("button", {
+    id: `kv-tab-${e.forPanel}`,
+    class: m(["tw-text-h3 tw-mb-1.5 tw-whitespace-nowrap tw-text-left", {
+      "hover:tw-text-action": !n.isActive,
+      "md:tw-border-l-2 tw-border-transparent md:tw-pl-2": e.vertical,
+      "tw-text-action": n.isActive && e.vertical
+    }]),
+    role: "tab",
+    "aria-selected": n.isActive,
+    "aria-controls": `kv-tab-panel-${e.forPanel}`,
+    tabindex: n.isActive ? null : -1,
+    onClick: a[0] || (a[0] = (...t) => n.handleTabClicked && n.handleTabClicked(...t))
+  }, [
+    w(l.$slots, "default")
+  ], 10, C);
+}
+const _ = /* @__PURE__ */ k(p, [["render", h]]);
+export {
+  _ as default
+};

package/dist/vue/KvTabPanel.js

@@ -0,0 +1,56 @@
+import { toRefs as c, inject as r, computed as d, openBlock as s, createBlock as v, Transition as p, withCtx as u, withDirectives as b, createElementBlock as f, renderSlot as w, vShow as _ } from "vue";
+import m from "../_virtual/_plugin-vue_export-helper.js";
+const k = {
+  props: {
+    /**
+     * A unique id which correspondes to a `for` property on the KvTab which controls it
+     * e.g., <kv-tab for="foo">... <kv-tab-panel id="foo">
+     * */
+    id: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const {
+      id: o
+    } = c(e), t = r("$KvTabContext");
+    return {
+      isActive: d(() => {
+        var l;
+        let i = [], n = 0;
+        return t && (i = t.navItems, n = t.selectedIndex), ((l = i[n]) == null ? void 0 : l.forPanel) === o.value;
+      })
+    };
+  }
+}, x = ["id", "aria-hidden", "aria-labelledby"];
+function y(e, o, t, a, i, n) {
+  return s(), v(p, {
+    "enter-active-class": "tw-transition-opacity tw-duration-700",
+    "leave-active-class": "",
+    "enter-class": "tw-opacity-0 tw-absolute tw-top-0",
+    "enter-to-class": "tw-opacity-full",
+    "leave-class": "",
+    "leave-to-class": "tw-opacity-0 tw-absolute tw-top-0"
+  }, {
+    default: u(() => [
+      b((s(), f("div", {
+        id: `kv-tab-panel-${t.id}`,
+        key: `kv-tab-panel-${t.id}`,
+        role: "tabpanel",
+        "aria-hidden": !a.isActive,
+        "aria-labelledby": `kv-tab-${t.id}`,
+        tabindex: "0"
+      }, [
+        w(e.$slots, "default")
+      ], 8, x)), [
+        [_, a.isActive]
+      ])
+    ]),
+    _: 3
+  });
+}
+const I = /* @__PURE__ */ m(k, [["render", y]]);
+export {
+  I as default
+};

package/dist/vue/KvTabs.js

@@ -0,0 +1,86 @@
+import { reactive as h, ref as g, computed as p, provide as E, onMounted as y, onBeforeUnmount as I, openBlock as k, createElementBlock as D, normalizeClass as b, createElementVNode as v, renderSlot as u, normalizeStyle as _, getCurrentInstance as K } from "vue";
+import z from "../_virtual/_plugin-vue_export-helper.js";
+const A = {
+  props: {
+    vertical: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(f, { emit: c }) {
+    const t = h({
+      selectedIndex: 0,
+      setTab: null,
+      navItems: []
+    }), l = g(null), r = p(() => {
+      var s;
+      const { navItems: e, selectedIndex: n } = t;
+      return ((s = e[n]) == null ? void 0 : s.$el) ?? null;
+    }), w = () => {
+      const e = K();
+      e && e.proxy.$forceUpdate();
+    }, a = (e) => {
+      t.selectedIndex = e, r.value.scrollIntoView({ behavior: "smooth", block: "nearest" }), c("tab-changed", e);
+    };
+    t.setTab = a, E("$KvTabContext", t);
+    const x = (e) => {
+      const { navItems: n, selectedIndex: s } = t, d = () => {
+        var m;
+        const o = n.find((T) => T.isActive);
+        o && ((m = o.$el) == null || m.focus());
+      }, i = n.length;
+      if (e.key === "ArrowRight") {
+        e.preventDefault();
+        const o = (s + 1) % i;
+        a(o), d();
+      }
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        const o = (s - 1 + i) % i;
+        a(o), d();
+      }
+      e.key === "Home" && (e.preventDefault(), a(0), d()), e.key === "End" && (e.preventDefault(), a(i - 1), d());
+    };
+    return y(() => {
+      t.navItems.forEach((e, n) => {
+        e.selected && a(n);
+      }), l.value = new ResizeObserver(() => {
+        w();
+      }), l.value.observe(r.value);
+    }), I(() => {
+      l.value.disconnect();
+    }), {
+      handleKeyDown: x,
+      selectedTabEl: r,
+      tabContext: t
+    };
+  }
+}, B = { class: "tw-relative" };
+function C(f, c, t, l, r, w) {
+  return k(), D("div", {
+    class: b(t.vertical ? "md:tw-flex" : "")
+  }, [
+    v("div", {
+      role: "tablist",
+      class: b(["tw-flex tw-overflow-auto tw-relative tw-gap-x-2.5 md:tw-gap-x-5 lg:tw-gap-x-6 tw-mb-3 lg:tw-mb-4", { "md:tw-flex-col md:tw-mr-3": t.vertical }]),
+      onKeydown: c[0] || (c[0] = (a) => l.handleKeyDown(a))
+    }, [
+      u(f.$slots, "tabNav"),
+      v("div", {
+        class: b(["tw-absolute tw-bottom-0 tw-h-0.5 tw-left-0 tw-bg-primary-inverse tw-rounded-full tw-origin-left tw-transition-all tw-duration-300", { "tw-hidden md:tw-block tw-top-0 md:tw-bg-action": t.vertical }]),
+        style: _(`
+					width: ${l.selectedTabEl && !t.vertical ? l.selectedTabEl.clientWidth : 3}px;
+					height: ${l.selectedTabEl && t.vertical ? `${l.selectedTabEl.clientHeight}px` : "0.25rem"};
+					transform: ${l.selectedTabEl && !t.vertical ? `translateX(${l.selectedTabEl.offsetLeft}px)` : l.selectedTabEl ? `translateY(${l.selectedTabEl.offsetTop}px)` : null};
+				`)
+      }, null, 6)
+    ], 34),
+    v("div", B, [
+      u(f.$slots, "tabPanels")
+    ])
+  ], 2);
+}
+const H = /* @__PURE__ */ z(A, [["render", C]]);
+export {
+  H as default
+};